가고

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

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

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

객체의 기본 구조(예제)

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, 전역변수, 지역변수)

* prompt문

prompt("__", "초기값"): 경고창에서 값을 받을 때 이용한다.

↓ 출력화면

* array 배열

'[ ]'기호가 붙으면 "배열"

하나의 변수에는 하나의 리터럴이 오는데, 변수에 배열을 적용하면 하나가 아닌 그 이상의 값을 넣어줄 수 있다.

예를 들어, 

var a=[10, 20, 30];

a는 배열 변수.

10, 20, 30은 원소.

이 식을 풀어 쓰면, a[0]=10, a[1]=20, a[2]=30.

여기서 0, 1, 2는 index라고 불리는데, 0부터 시작된다. 

따라서 a의 인덱스는 0, 1, 2로, 총 3개가 있는 셈.

또한 a의 배열의 총 개수는 a.length라고도 쓴다.

↓ 출력화면

↓ 출력화면

→이어 자바스크립트 반복문(loop): while문, for문, for~in문, forEach문 간단 정리(예제)

자바스크립트에서 리터럴(값)이 표시되는 방법 중...

* boolean(불린): 불린은 true와 false로 표현된다.

true의 경우, 1로 표시 

false의 경우, 0으로 표시       ->단순 숫자인 경우에는 true(1)로 출력된다.

↓출력화면

w1은 단순 숫자이기 때문에 ok로 출력된다.

* undefined: false에 속한다.

↓출력화면

이 경우, 숫자 1과 문자 "1"은 같다고 인식된다. 왜냐하면 ==는 값만 따지기 때문. 따라서 숫자(값), 문자(형태)를  구분해서 판별하고 싶다면 ===를 써서 구분해야 한다.

↓출력화면

* typeof();

 : 괄호 안에 있는 속성을 판별해 준다.

ex) document.write(typeof(1));   ->1의 특성을 판별해 줌.

* 삼항 조건문

식-> (조건)? 참:거짓;

예를 통해 이해하는 것이 간단하다.

↓출력화면

* confirm("___");

:경고창에서 true, false를 받는다.

↓출력화면

↓ 확인 클릭시 출력 화면    

↓ 취소 클릭시 출력 화면  

→이어 prompt문, array 배열 간단하게 이해하기(예제)

자바스크립트에서 문자를 쓸 때는  " "(큰 따옴표)를 써서 숫자와 구분한다.

※변수에 한 번 기억되면 다시는 바뀌지 않는다.

*연산자

1. 산술연산자: +,-,*(곱하기, Asterisk), / (나누기, Slash), %(나머지)

2. 대입연산자: =, +=, -=, *=

3. 결합연산자: +(이항연산자-문자, 문자+숫자)

4. 증감연산자: ++(증가),--(감소)

5. 관계연산자: >, <, >=, <=, ==, !=, ===, !==

A>=B(A가 B보다 크거나 같다.) / A<=B(A가 B보다 작거나 같다.) / ==(값이 같다) !=(값이 같지 않다) / ===(값과 형태가 같다) !==(값과 형태가 같지 않다)

6. 논리 연산자: &&(and), ||(or), !

7. 조건문

조건문

조건문은 단순 조건문과 다중조건문, 2가지로 나뉜다. 

1. 단순조건문

if(조건식) { 실행문 1; } else { 실행문 2; }

→만약 조건식이 참이라면 실행문1를 실행하고 그렇지 않다면(else) 실행문 2를 실행하라.

2. 다중조건문

if(조건식 1){ 실행문 1; } else if(조건식 2){ 실행문 2; } else if(조건식 3){ 실행문 3;} else if(조건식 4){ 실행문 4; }

→만약 조건식1이 참이라면 실행문 1를 실행하고, 그렇지 않다면 조건식 2를 실행해 참이라면 실행문 2를 실행하고, 그렇지 않다면 조건식 3을 실행해 참이라면 실행문 3를 실행하고… 

(연쇄적으로 조건문을 적용할 수 있다)

→이어서 boolean, 삼항조건문, confirm문 예제와 총정리 (+typeof)

자바스크립트의 기본

프로그램: 순서, 차례.

프로그래밍: 순서짜기, 차례만들기

*컴퓨터의 진행 순서: "입력→처리→출력"

입력하려면, 기억장치(메모리)가 필요.

이때의 기억장치(메모리)는 RAM(주기억장치)인데, 이것의 특성 중 하나는 "전기가 꺼지면 데이터가 모두 지워진다"는 점.

따라서 이를 위해 보조기억장치가 필요하다.

보조기억장치는 우리가 익히 알고 있는 "C, D 드라이브, 이동식 디스크 등"이 있다.

이제 본격적인 자바스크립트의 개념 정리!

먼저 컴퓨터는 처리하고자 하는 데이터를 기억해야 한다.

이때, 기억하는 장소를 '변수'. 기억하는 데이터(값)를 '리터럴'이라고 한다.

-자바스크립트에서 리터럴이 표시되는 방법(지금은 겉만 살펴보기)

1. 숫자 2. 문자 3. 불린(boolean-true,false) 4. null 5. undefined 6. 함수 7. 객체

**변수**

:리터럴(데이터)를 기억하는 장소.

*변수의 규칙

1. 반드시 첫 글자가 '영문자' or '_'으로 시작해야 한다. (숫자로 표시하면 안 됨!)

2. _, $를 제외한 특수문자 사용할 수 없다.

3. 대소문자 구분해야 한다.

4. '_'으로 이어주거나 카멜표기법을 따른다.

카멜표기법: 단어가 이어지는 구간에서 단어의 첫 음절을 대문자로 써서 구분하는 방법.

ex) backgroundColor

*변수에서 '='의 의미

'='는 '같다' 뜻이 전혀 아니다!!

"기억한다(대입한다)"라는 뜻!

ex) var aa=1;

숫자 리터럴 1을 기억장소 aa에 기억(대입)시켜라. / var은 변수라고 알려주는 문자라고 생각하면 됨.

*변수는 크게 3가지로 구분.

-선언: ex) var aa;

-할당: ex) aa=100;                →선언과 할당이 합쳐 하나로 쓸 수 있는 방법이 '초기화'

-초기화: ex) var aa=100;

→이어 자바스크립트 연산자와 if 조건문 공부하기