가고

* 자바스크립트 객체를 함수로 만드는 방법

자바스크립트에서 객체를 함수로 만드는 방법은 함수 내에 객체를 설정하는 것이다.

함수 student의 매개변수에 객체의 값을 넣어주었다.

그리고 변수 stucontent에 각 속성과 속성값을 나열했는데, 여기서 나열의 구분은 ,(콤마)로 했음을 알 수 있다.

또한 총점과 평균, 출력화면을 객체 내의 함수로 지정했음을 볼 수 있다.

평균에서 parseInt를 써서 정수로 변환해 주었다.

return은 결과값을 보여달라는 의미.

이 예에 더하여 객체생성을 한다면 다음과 같다.

변수 anostudent를 배열로 만들어 2개 이상의 값을 넣어주고자 한다.

각각의 anostudent는 push를 써서 적용했다.

이후 변수 output을 만들어 다음과 같이 출력했다.

↓ 출력화면

* switch문

:어떤 변수의 값에 따라서 문장을 실행할 수 있도록 하는 제어문.

if문과 같이 조건 제어문에 속한다.

그렇다면 if문과 switch문은 어떻게 구별하여 사용할까?

→비교,조건 없이 딱 떨어지는 답을 낼 때에는 switch문을, 조건(크기 비교)을 두고 답을 낼 때는 if문을 이용한다.

switch문에서 사용하는 용어는 크기 'switch, case, break, default'이다.

switch: switch문을 사용한다고 선언할 때

case: switch문에서 각 케이스를 지정하고자 할 때

break: 선언한 케이스를 마칠 때

default: 지정한 케이스에서 벗어났을 때

→예제를 통해 이해하자!

함수 input에 "가고 싶은 여행지는?"이라는 질문과 질문에 대한 숫자 보기를 지정했다. (여기서 초기값은 빈칸("")으로 넣었다.)

함수 input에 대한 switch문을 선언하는 switch를 쓰고, 숫자 보기를 입력하면 문자로 인식하니 (input)앞에 Number를 붙여 문자를 숫자로 변환해 주었다.

그리고 각 숫자 보기를 뜻하는 case 1~5를 썼고, 각 케이스가 끝날 때마다 끝 마침을 뜻하는 break;를 덧붙였다.

여기서 default는 1~5외의 숫자 보기를 입력했을 경우를 가정해 넣어주었다.

다시 말해 1~5외의 숫자를 입력했을 경우, "잘못 입력하셨습니다"라는 문장이 뜨게 만들었다.

default를 썼을 때 역시 다른 케이스의 마침을 뜻하는 break;를 써 주었다.

이렇게 적용한 결과는 다음과 같다.

↓

(1를 입력했을 때. 그 외 2~5를 입력하면 해당되는 문장이 뜬다.)

(1~5를 제외한 숫자를 입력했을 때.)

→이어 자바스크립트 객체를 함수로 만드는 방법!(+객체생성 이해하기)

* setTimeout

기본구조→setTimeout(함수,밀리초);

의미: "밀리초 시간 뒤에 함수를 실행하라"

(※밀리초: 천 분의 1초를 가리키는 말. 1000→1초, 5000→5초...)

↓ 출력화면

밀리초 3000, 다시 말해 3초 뒤에 함수 aa가 실행되었다.

* setInterval    :반복하는 함수

기본구조→setInterval(함수,밀리초);

의미: "밀리초 시간마다 함수를 실행하라"

↔clearInterval( ): 반복 멈춤 함수

↓ 출력화면

밀리초 1000, 다시 말해 1초마다 함수가 실행되었다.

이 예에서는 if문을 써서 i가 4일 때까지만 함수가 실행되고 이후는 clearInterval를 써서 함수를 멈추게 했다.

만약 clearInterval를 쓰지 않았다면, aaaaa이후에도 계속해서 a가 덧붙여졌을 것이다.((빨간 +)가 실행되었을 것!)

→이어 자바스크립트 switch문 예제 및 간단 정리!(switch,case,break,default)

* 이벤트

: 각 요소와의 상호작용을 가능하게함으로써 웹페이지를 능동적으로 작동하도록 한다.

이벤트 2가지 방법 

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });  =>자바스크립트에서 권장

<click 이벤트를 예로 들기로 하자>

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });

↓ 출력화면 

               ↓같은 내용으로 방법 1를 통해 적용했을 때 역시 결과값은 같다.↓

↓ 출력화면 

* id를 요소로 잡는 방법

->getElementById(" ");

* class를 요소로 잡는 방법

1. document.getElementByClassName(" ");

2. document.getElementByTagName(" ");

* id, class, 복수 class 등 요소로 잡는 방법

querySelectorAll(".box>.a1")   ->대신 id는 (#), class는 (.)을 붙여서 써줘야 한다.

* 요소에 속성값 적용하는 방법

1. 문서 내에서 요소 찾아주기

2. 요소.style.속성="값";

→이어 자바스크립트 반복함수 setTimeout, setInterval, clearInterval 간단 예제 및 정리!

* 함수에서의 return의 역할

1) 함수에서 빠져나갈 때. (함수의 종료를 알릴 때)

2) 값을 호출한 함수에 반환할 때. (아래 예시)

↓ 출력화면 ("abc"값을 반환하는 예제)

* 클로저

:외부변수가 내부변수 return에 의해 영향을 받고, 내부변수가 없어지지 않는 한 그 값을 유지

↓ 출력화면 

적용되는 과정: 익명함수 function의 내부에는 b=b+1이 있는데, 이 함수 내에서는 b에 대한 값이 없다. 이때 클로저에 의해서 외부함수인 a1에 가서 b의 값을 찾아 적용한다.

한편 이 예제에서는 document.write(d2( ))가 총 4번 호출되는데, 각각 순차적으로 적용된 모습이다.

(이때 b는 '자유변수'라고 부른다)

101=100+1

102=101+1

103=102+1

104=103+1

* 자바스크립트에서의 객체

- 객체는 중괄호'{ }'로 표시한다.

- 특징: 다양한 속성을 가질 수 있다.

객체의 기본 구조(예제)

var car={ 

name:toy, 

color:white, 

size:500cc, 

            day: function( ){ document.write( "new" ); } 

}

→객체의 속성을 더할 때에는 ,(콤마)로 표시하여 구분해 준다!

※기호 헷갈리지 않기.

배열의 기호: [ ]

객체의 기호: { }

변수의 기호: ' ', " "

* 자바스크립트 객체의 종류 3가지 

1. 표준객체(빌트인객체: Number, String, Math, Date, 정규표현식, Json 등)

2. 원시객체(native object): DOM:html 문서(document), 

BOM:브라우저(window, screen, history 등)

3. 사용자 정의 객체(host object)

*사용자 정의 객체

예를 통해 이해하기.

↓ 출력화면

-추가되는 속성은 ,(콤마)를 써서 구분해 주었다.

-etc는 함수로 두어 etc를 호출할 경우, 실제 화면에 표시될 수 있게 만들었다.

-맨 마지막 documen.write(people.이름+people.나이+people.성별); 를 호출함으로써 최종 화면에 출력하게 만들었다.

→이어 자바스크립트 return의 역할 및 클로저 간단 정리(예제)

* 호이스팅

:함수를 선언하면, 자바스크립트 엔진에서 해당 함수를 맨 위로 옮김. 

※익명함수일 때는 호이스팅이 적용되지 않는다. 즉, 순서를 따져서 해당 함수 다음에 함수 호출을 해야 제대로 적용됨.

ex) 선언적 함수일 때의 호이스팅 'ok'

↓ 출력화면

ex) 익명 함수일 때의 호이스팅 'no'

→이 함수를 실행시키려면 다음과 같이 수정해야 한다.

↓ 출력화면

*함수의 특징 중 하나 더. 

'내부함수'에 해당 값이 없으면 '외부함수'로 가서 찾아 적용한다.  => '렉시컬 스코프(lexical-scope)'

↓ 출력화면

(k값이 함수 c2내에는 없어서 외부함수인 c1에서 해당 값을 찾아 적용되었다.)

→이어 자바스크립트 객체 종류와 사용자 정의 객체 정리 및 이해하기!

자바스크립트에서 함수는 function으로 표현한다.

function( ) →익명함수(함수명이 없는 함수) 

function 함수명( ) →선언적 함수(함수명이 있는 함수)     ex) function a( )->함수명이 a인 선언적 함수

* 함수의 특징 11가지

1. 함수는 여러 번 쓸 수 있다.

2. 함수는 먼저 선언해야 한다.

3. 함수를 이용하려면 '호출'해야 한다.

호출은 →함수명( );   으로 쓴다.

4. 함수는 선언할 때를 기준으로 적용된다.

5. 함수는 유효범위(scope)를 가진다.

유효범위: 전역변수, 지역변수에 의해서 정의된다.

-전역변수: 함수 안밖에서 선언된 함수로, var를 붙이지 않고 선언한다.

   (but 함수 밖에서 선언할 경우, var를 붙여서 습관을 들이는 것이 좋다.)

ex) var sum; 

    function the( ) { sum=30; }

-지역변수: 함수 내에서 선언된 함수로, 반드시 앞에 var를 붙여 선언한다.

ex) function the( ) { var sum; sum=30; }

6. 함수의 종료 표시는 return;

7. 반복문의 종료 표시는 break;

8. return→다음에 문장이 오면, 호출한 함수로 인해서 그 값을 반환한다.

9. 함수에는 return이 있는 함수와 return이 없는 함수가 있다.

10. 함수는 매개변수를 쓸 수 있다.

매개변수는 지역변수에 포함된다.   

함수를 호출할 때 매개변수에 값을 넣어준다. 이때의 값은 2개 이상이 될 수도 있다. 예를 들면 cc(a,b)

ex) function cc(a) → a:매개변수, 선언적 함수 cc의 매개변수는 a

↓ 출력화면

11. 매개변수에 들어가는 값을 '인자값(argument)'라고 한다.

↓ 선언적 함수(sum)의 출력 화면

* 즉시 실행 함수

:호출없이 바로 실행시키는 함수

구조→(function( ){ } )( );

↓ 출력 화면

구조는 ( ) ( );  두 개의 괄호 중 앞 괄호 안에 함수"function( ){ }"를 넣어준다고 생각하면 쉽다.

→이어 자바스크립트 함수-호이스팅,렉시컬 스코프 예제를 통해 이해하기!