가고

* 메서드 체이닝

의미: "메서드를 연이어 적용한다"

하나의 메서드만을 사용하지 않고, 여러 메서드를 '연이어' 써서 적용할 수 있다.

간단한 이해를 위해서 메서드에 css를 적용했다.

↓ 출력화면

* 제이쿼리 필터 선택자(:)

"요소:checked" →체크한 요소를 선택자로 지정

"요소:odd" →홀수인 요소를 선택자로 지정

"요소:even" →짝수인 요소를 선택자로 지정

"요소:lt" →(less than)~보다 작은 것들을 선택자로 지정

"요소:gt" →(greater than)~보다 큰 것들을 선택자로 지정

"요소:focus" →커서가 위한 부분을 선택자로 지정

"요소:selected" →선택된 요소를 선택자로 지정

"요소:contains('문자열')" →특정 문자열을 포함하는 문서객체를 선택자로 지정

ex) $("li:contain('가나다')").메서드( );   →'가나다'를 포함하는 문서객체를 선택자로 지정

"요소:has('요소명')" →요소명을 선택자로 지정(여기서 요소명은 보통 태그명.)

ex) $(".class:has('h2')).메서드( );

"요소:not(선택자)" →ex) $("li:not(first)").메서드( )     :li중 첫 번째 것을 제외한 나머지를 선택자로 지정

"요소:eq(0)" →0번째(=first)

"요소:eq(1)" →1번째

"요소:eq(-1)" →마지막(=last)

"요소:eq(-2)" →마지막에서 2번째

"요소:nth-child(2n+1)" →인덱스와는 다르게 첫 번째 것이 '1'. 

즉 1,2,3,4,...순서로 진행. 

'0' 없음!

↓ 출력화면

* jQuery(제이쿼리)

HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리

기본 구조

$(document).ready(function(){ });

→$(function(){ });

* jQuery(제이쿼리) 선택자 지정하기

ex1) 

↓ 출력화면

좀 더 자세한 예제.

ex2)

↓ 출력화면

* 제이쿼리 속성 선택자

"요소[속성='값']"  →해당 값을 갖고 있는 요소

"요소[속성$='값']" →해당 값으로 끝나는 요소

"요소[속성^='값']" →해당 값으로 시작되는 요소

 .val: html의 value값을 뜻한다. 

↓ 출력화면

→이어 제이쿼리 메서드 체이닝, 필터 선택자(checked,focus,selected,contains,nth-child 등) 예제 및 정리!!

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

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

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

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

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

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

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

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

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

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

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

↓ 출력화면

* 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

* 호이스팅

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

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

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( ){ }"를 넣어준다고 생각하면 쉽다.

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