[0712] 자바스크립트 DAY 04

본인 소개용 포트폴리오 사이트

index.html (메인화면)

login.html (로그인화면)

register.html (회원가입 화면)

비밀번호.html (회원 비밀번호 잃어버렸을 때의 페이지)

 

-----------------------------------------------------------------------------------------------------------

 

객체

객체 사용 이유? 

- 여러개의 값을 저장하기 위해서

book = { title: '대모험', page: 200 }

book[''title']

book.title

 

배열

- 여러개의 값을 저장하기 위해서, key값을 자동으로 0부터 만들어주고, length property (키값)에 요소의 개수도 저장되어 있다.

book = [ '대모험', 200]

book[0]

 

함수

- 기능을 한다

- 여러줄의 코드를 재사용하기 위해서 사용한다.

console.log

alert

confirm

...

 

함수의 정의

- 세가지를 정의한다.

1. 인자를 몇 개 쓸 수 있는지 정의한다.

- 함수를 정의할 때 매개변수를 사용하면 함수를 사용하는 사람이 소괄호 안에 쓴 인자가 매개변수에 각각 순서대로 대입이 된다.

- 함수를 만드는 입장에서 특정 값을 정할 수 없고, 함수를 사용하는 사람이 정할 수만 있을 때 매개변수를 통해 값을 전달받는 것이다.

ex) 경고 메시지

2. 함수가 어떻게 동작하는지를 정의한다.

- 중괄호(body) 안쪽에 코드가 위에서부터 차례로 실행된다.

3. 함수 실행 결과값이 무엇이 되는지를 정의한다.

- return 값; 을 통해 함수 실행 결과를 값으로 되돌려 준다.

- 함수 실행 결과는 return 옆에있는 값이 되므로 치환해서 해석하면 된다.

return이 생력되거나 return 옆에 값이 없으면  함수 실행 결과는 모두 undifined가 된다.

 

함수 실행 결과를 추가적으로 연산하거나 구분해서 사용해야 할 때,

ex) prompt 함수 

 

1) 일반적 함수 정의 (과거)

 function 함수 이름 (매개변수, 매개변수, ....) {

  코드 ..

return 값;

}

 

# 함수 호출

함수 호출 연산자 ()를 사용하여 함수를 실행한다.

console.log();

test();

 

alert('아이디가 유효하지 않습니다')

 

console.log('연결확인');

// '대모험', 200 두개의 값을 저장 (객체)
let book = { title: '대모험', price: 200 };
console.log(book);
console.log(book['title']);
console.log(book.title);


// '대모험', 200 두개의 값을 저장 (배열)
let myBook = ['대모험', 200];
console.log(myBook);
console.log(book['title']);
console.log(myBook[0]);

let books = [{
        title: '대모험',
        price: 200
    },
    {
        title: '곰세마리',
        price: 150
    },
    {
        title: '홍길동전',
        price: 500
    }
];

console.log(books);
// '대모험' 출력
console.log(books[0].title);
console.log(books[0]['title']);

 

console.log('2번 파일 실행됨');

// 안녕하세요 출력, 반갑습니다 출력
// console.log('안녕하세요');
// console.log('반갑습니다');

// 함수 정의(test 함수)
function test() {
    console.log('안녕하세요');
    console.log('반갑습니다');
}


// 함수 실행
test();

// 안녕하세요 출력 배상엽 출력 반갑습니다 출력
// a라는 변수에는 이름
// b라는 변수에는 나이


function printName(a, b) {
    console.log('안녕하세요');
    console.log(`${a}님의 나이는 ${b}입니다`);
    console.log('반갑습니다');
}

printName('홍길동', 20);

printName('김철수', 52);

printName('홍길동', 30);


// alert('아이디가 유효하지 않습니다.')

// 함수 실행 결과를 값으로 받아오자
function f1(x) {
    // 함수 실행 결과를 알려줘야 하는데 return을 안 함
    // return은 함수 실행 결과가 무엇인지 정의를 해준다.

    return ' 2 * x + 1';

}
console.log(f1(5));

// let myName = prompt('ddd');
// console.log(myName);


// alert 함수는 return이 없음
let res = alert('경고');
console.log(res);

function f2(x) {
    return x * 3 + 3;

}

function f3(x) {
    x * 3 + 3;
    return undifined;
}
let res1 = f2(3);
let res2 = f3(3);


// 배열은 object 타입 中 array 타입
// 함수도 객체 object 타입
// 중에서도 function 타입

let res3 = f2; // ** 함수로 해석, 주소값이 같다.
console.log(res3(5));


let a = {
    title: '대모험',
    price: 200

}

let b = a;
// 단순히 주소를 같게,같은 주소를 보고 있는 것이다.

b.title = "배상엽의 대모험";
console.log(a);

// 익명 함수
// 이름이 존재하지 않는 함수 : 다시쓰지 않겠다.
// 일회성으로 사용하고 버리는 함수
function() {

}

[내가 한  질문]

1.  java에서는 이걸 '메소드로 뺀다'라고 말하잖아요.  javascript에서는 '함수로 뺀다'라고 말하는 것이 맞나요?

-> 메소드는 객체 안에 함수가 들어있는 것, 자바에서는 class만 만들 수 있고 class 안에 함수가 있어서 자바에는 메소드 밖에 없다.

-> 객체 안에다가도 함수를 만들 수 있음! 

 

2. 자바에서는 매개변수로 뺄 때 String a 이런식으로 작성하지만,  js에서는 String과 같은 데이터 유형을 따로 명시하지 않아도 되는 것인지 궁금합니다.

-> 자바스크립트에서는 데이터 타입 명시 필요 없음!