무얼

* 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)

반려인이라면 누구나 동물로 인해 황당하지만 웃음밖에 나오지 않는 상황을 겪어봤을 것이다.

이를 테면, 온 집안에 솜털이 날리고 구석에는 형체를 알아볼 수 없는 쿠션의 껍데기만 남았을 때, 애써 만들어 놓은 무언가가 왜 인지 부서졌을 때, 종이가 가루가 되어 방바닥에 널려 있을 때 등등!

생각만 해도 아찔하지만 막상 그 상황에는 닥쳤을 때는 웃.음.만 나온다는 것은 반려인들이라면 공감할 것이다.

하지만 반려동물들이 꽤 큰 스케일의 사고를 쳐도 아이들을 끌어안는 것 역시 반려인들이라면 당연하게 받아들일 것이다.

다음의 사진들은 어네스트 투 퍼스를 통해 소개된 사고뭉치 반려동물들의 인증샷들이다.

조용히 문을 열고 들어간 곳에서 반려인들이 목격한 것은 과연 어떤 장면들일까?

| 립스틱 짙게 바른 강아지                        출처 Flickr / CCO

출처 Metaweb/CC-BY

출처 Flickr/CCO

출처 Wikimedia Commons

출처 Wikimedia Commons

출처 Metaweb/CC-BY

출처 Flickr/CCO

* 이벤트

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

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

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

자바스크립트 반복문은 loop(루프)문이라고도 한다.

반복문은 크게 while문과 for문,  forEach문이 있다.

1. while문

초기값;

while(조건식){ 실행문; 증감값; }

↓ 출력화면

↓ 출력화면

2. for문

for(초기값;조건식;증감값){실행문;}

↓ 출력화면

↓ 출력화면 (※sum=sum+num[ i ])은 줄여서 sum+=num[ i ]라고도 씀)

3. for~in문

초기값;

for(변수의 인덱스 in 변수명){ 실행문;}

↓ 출력화면

4. forEach문

배열명.forEach(function(배열값,인덱스,배열명){실행문;});

(※반복문이라는 것을 잊지 말기. 예제는 반복적으로 원소, 인덱스, 배열값을 출력하게 만들었다.)

↓ 출력화면

→이어 자바스크립트 함수의 특징 및 즉시 실행 함수 정리하기(선언, 호출, 인자값, return, 전역변수, 지역변수)