[Javascript] Javascript 입문 03 (170314)

Javascript 입문 03

• function의 return

- 함수가 종료한다 = 함수가 리턴한다.

- return 예약어를 만나면 함수는 종료된다.

** 출력결과 **

cf ) 이 때, result1 등을 호출하지 않고 정의만 했는데도 log가 출력되는 이유는 var result1 = a(); 에서 a();를 먼저 실행하면서 log를 출력하기 때문이다. 

-result1을 출력하게 되면 undefined값을 출력하게 된다.

-result2을 출력하게 되면 undefined값을 출력하게 된다.

-result3을 출력하게 되면 999값을 출력하게 된다.

-result4을 출력하게 되면 "김구라" 값을 출력하게 된다.

• 함수의 결과값 undefined

var a = function(){ 

console.log("a 함수 호출됨");

};

var b = function(){

console.log("b 함수 호출됨");

return;

};

a();

-실행순서 : a생성 b생성 a(); a function();

- 더이상 수행할 것이 없으면 다시 a()로 돌아온다.

 => undefined 상태로 바뀜 = 리턴한다. 함수의리턴타입

*return 값이 없을 때 undefined으로 바뀐다.*

• function 선언 두 가지 방법의 차이점

- function 선언에는 두 가지 방법이 존재한다.

1. var f1 = function() { } : 익명의 함수 생성 후 변수에 대입

2. function f2() { } : f2라는 이름의 함수 자체를 생성

- 2번 방법의 경우 함수를 먼저 생성한 후 나머지 코드를 실행하기 때문에 코드의 흐름을 파악하기 힘들어 1번 방법이 권장된다.

• Button 클릭으로 함수 실행하기

- 버튼의 onClick 을 이용한다.

- function으로 묶은 뒤 변수에 대입한다.

** 출력결과 **

 

• 함수 속 변수 선언

- function(arg) {console.log(arg)};

- arg라는 변수의 용도 :  같은함수 호출하더라도 용도에 따라 각각 다른 값 전달할 때 

** 출력 결과 **

cf) 비슷한 예시 

var myName="kim";

alert(myName);

-데이터가 담겨있는 변수명으로 전달해도 된다

• Document.querySelector

- document.querySelector("#one").value :  one이라는 id값을 갖고있는 input창에서 document를 통해 접근하여 입력값을 가져온다.

- document.querySelector("#two").innerText :  two라는 id값을 갖고있는 내부 텍스트값에 document를 통해 접근한다.

• QUIZ 

     - 아래 그림에서 input창에 특정 값을 입력하고 버튼을 누르면 p의 text가 특정 값으로 바뀌도록 코딩하여보세요.

정답 > 

[내가 쓴 답안]

[모범답안]