강의

N
챌린지

멘토링

N
클립

로드맵

생활코딩 - 자바스크립트(JavaScript) 기본 강의 썸네일

생활코딩 - 자바스크립트(JavaScript) 기본

노트 작성자

chawoo9905 프로필 사진

chawoo9905

오리엔테이션

Javascript 언어소개

00:00

Javascript

 

1. Javascript

 

웹 브라우저라고 분류되는 소프트웨어들을 "프로그래밍적으로 제어"하기 위한 언어

 

ex) alert('Hello world')

 

브라우저가 이미 가지고 있는 경고창('alert')라는 기능을 코드를 통해 제어 -> 프로그래밍적 제어

 

웹 브라우저의 프로그래밍 코드를 작성해 브라우저를 프로그래밍적으로 제어

javascript는 프로그래밍적으로 웹 브라우저를 제어하는 역할을 하기 위한 도구

 

2. 탈 웹 브라우저(Node.js)

 

javascript가 웹 브라우저만을 제어하는 게 아닌 더 많은 용도로 사용되기 시작함

->javascript와 웹 브라우저를 분리해서 생각해야 될 필요가 있음

 

ex) 웹서버 - Node.js(javascript)

 

javascript가 기본적으로 웹 브라우저를 제어하기 위한 언어

그러나 javascript가 웹 서버에서도 사용할 수 있는 기술들이 등장

 

웹 브라우저 -> 웹(요청) ->웹 서버

웹 브라우저 <- 웹(응답) <- 웹 서버

 

java, PHP, Python... :

서버에 존재하면서 웹 브라우저에게 응답하기 위한 정보를 프로그래밍적으로 생성해 주는 기술

즉, javascripts는 웹 브라우저만을 제어하는 게 아닌 웹 서버(Node.js)도 제어 가능하다.

 

3. 탈 웹(Google Apps Script)

 

javascript가 웹 기술에서 벗어나서 사용되기 시작

ex) Google Apps Script

 

0. 정리

 

Javascript

1. 웹 브라우저

2. 웹 서버(Node.js) - 탈 웹 브라우저

3. 스프레드시트(Google Apps Script) - 탈 웹

 

"더 이상 웹 브라우저만 쓰는 것이 아니다."

 

Base point

 

언어

의사소통을 위한 약속

환경

언어를 사용하는 대상

 

Javascript 환경.png

 

언어라는 공통 분모를 가지고 각각의 다른 환경 제어

환경에 따라 할 수 있는 일이 다르고 할 수 있는 일에 따른 명령어도 다름

 

Javascript 기본 - 실행방법과 실습환경

코드 작성과 실행

00:00

Java script

 

Lecture 1. 실행과 실습(1/3)

 

기본적으로 브라우저 위에서 작동하는 javascript는 HTML 위에서 동작, 기본적으로 HTML 코드가 필요

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script> 
            alert('Hello world');
        </script>
    </body>

 

  1. <script> ~ </script> 안쪽에 Javascript 위치 시킴

  2. 나머지 부분은 HTML 코드

 

실행 방법

 

Windows

  1. 저장 시 '파일 이름.html'

  2. 파일 형식 : 모든 파일

  3. 인코딩 : UTF - 8

  4. 브라우저 열고 Ctrl + O

 

OS

  1. Spotlight에서 textedit 검색

  2. File new

  3. Fomat -> Make Plane Text

  4. 코드 작성 및 저장, Ctrl + O

 

실습 결과

 

크롬 개발자 도구 – 콘솔 사용법

00:00

Javascript

 

Lectuer 2. 실행과 실습(2/3)

 

Javascript 작성 방법(Chrome Console)

 

  1. Chrome에서 F12 or 도구 -> 개발자 도구(Win)

  2. Show console(Javascript 코드만 작성, HTML X)

 

Alert가 아닌 Console 작성

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script> 
            console.log('Hello world');
        </script>
    </body>

 

경고창 대신 Console에 Hello world가 나타남

 

Addition

 

  1. OS : Developer -> Developer Tools(Cmd + Alt + R)

  2. 짧은 코드는 Console, 긴 코드는 파일로 따로 작성이 편리

 

Console 실습 결과

 

  1. Console에 Alert 명령어 입력

 

 

 2. 텍스트 파일에 Console 입력, 저장 및 실행

 

 

도구의 선택

00:00

Javascript

 

Lecture 3. 실행과 실습(3/3)_도구의 선택

 

1. 도구의 종류

Editor : 코드를 작성하게 해주는 도구

IDE(Intergerted Devlopment Enviroment) : 통합 개발 도구(여러가지 개발 도구의 가진 도구)

 

2.1. 좋은 도구의 장점

 

  1. 생산성

  2. 인간의 인지의 한계

 

2.2. 좋은 도구의 단점

 

  1. 도구를 익히는데 시간이 걸린다.

  2. 도구가 무거울 수 있다.

  3. 도구의 비용이 비쌀 수 있다.

 

"개발에 사용하는 도구의 선택은 신경을 써서 챙겨야 한다."

 

 

주석

00:00

Javascript

 

Lecture 4. 주석(Comment)

 

1. 주석 종류

 

  1. 한 줄 주석 처리 : //

  2. 여러 줄 주석 처리 : /* ~ */

 

2. 주석 기능

 

  1. 코드 설명

  2. 코드를 일시적인 무효화

 

잘 만들어진 코드는 적합한 주석을 가진다.

 

 Tip

 

  1. 개발자 도구를 통해서만 오류를 확인할 수 있다.

    ex) demo.html.8 : demo.html 파일의 8번째 줄에서 오류 발생

 

주석 실습

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script> 
            alert('Hello world');//경고문
/* 
Javascipt
*/
        </script>
    </body>

 

Q)

 

  1. 주석 처리 시 <, >, / 기호가 들어간 여러 줄 주석 처리는 어떻게 하는가?

줄바꿈과 여백

00:00

Javascript

 

Lecture 5. 줄바꿈과 여백

 

1. 세미 콜론(;)의 역할

 

문장의 끝났음을 알린다.

Javascript의 경우 문장을 바꾸면 문장의 끝났음을 알지만 명확히 끝냈음을 알리려면 세미 콜론을 쓰는 게 좋다.

 

2. 여백

 

  1. 변수를 선언 할 때 띄어쓰기 한 칸을 해줘야 한다.

  2. 들여쓰기는 Tab키로 문장의 가독성을 높이기 위해 사용한다. (여러 줄을 Tab 할 수 있다.)

 

실습

 

숫자와 문자

수의 표현

00:00

Javascript

 

Lecture 6. 숫자와 문자(Data type)-(1/4)

 

1. 숫자 (자동으로 숫자의 형태를 맞춰준다.)

 

  1. 정수

  2. 실수

 

Javascript에서는 자동으로 숫자의 형태를 맞춰준다. Java의 경우 따로 선언

 

실습

수의 연산

00:00

Javascript

 

Lecture 7. 숫자와 문자(2/4) : 수의 연산

 

1. 연산 명령어

 

'Math. '로 시작해서 원하는 명령어를 넣으면 된다.

Math : 수학과 관련된 명령을 가지고 있다.

'.' : 객체를 나타냄

 

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

 

실습

 

문자

00:00

Javascript

 

Lecture 2.1 숫자와 문자(3/4) : 문자의 표현

 

1. 문자

규칙

  1. 큰 따옴표 or 작은 따옴표를 사용할 경우 같은 것을 써서 문장은 끝마쳐줘야 한다.

  2. 문장 안에 다른 따옴표는 문자로 취급한다.

  3. 문장 안에 같은 따옴표는 '/'(Escape code)를 이용해서 나타내준다.

 

Tip

 

Syntax error : 문법 에러

Escape : 원래 가지고 있던 임무로부터 탈출시킨다.

typeof() : 자료형의 Type을 알려준다.

 

실습

문자의 연산

00:00

Javascript

 

Lecture 2.4 숫자와 문자(4/4) : 문자의 연산

 

1. 문자열 띄어쓰기(\n)

 

따옴표 안에 '\n'을 쓰면 '\n'의 이후 오는 문자열은 한 줄 아래로 표시된다.

 

2. 문자 연산(+)

 

문자열끼리 '+'를 사용해서 더한다.

 

숫자에서 문자열의 숫자와 연산의 숫자는 다르게 표시해주어야 한다.

 

Tip

 

'문자열'.length : 문자열에서 문자의 개수 출력

'문자열'.indexOf'(문자열에 해당하는 문자') : 문자의 위치 출력

indexOf에서 대문자 O 주의

문자열.indexOf(문자)에서 문자열과 문자의 따옴표는 달라도 정상적으로 실행된다.(시작과 끝은 같아야 된다.) 

 

실습

 

변수

변수의 사용법

00:00

Javascript

 

Lecture 3.1 변수(Variable)

 

1. 변수

 

정의 : 어떠한 형태의 데이터를 담는 그릇(교체 가능)

 

2. 변수 선언

 

  1. 선언은 'var'로 선언한다.(variable)

  2. 선언한 변수의 내용을 바꿀 때는 다시 'var'을 쓸 필요는 없다.

  3. 'var'을 쓰고 여러 개의 변수를 선언 가능하다

    ex) var a= 'cording', b = 'everybody'

    var (a= 'cording', b = 'everybody') 이렇다고 생각하기

 

 

변수의 효용

00:00

Javascript

 

Lecture 3.2 변수(Variable) (2/2) : 변수의 효용

 

1. 변수의 순기능

 

코드의 재활용성을 높여준다.

 

2. 코드의 재활용

 

코드에서 변할 수 있는 영역(변수 설정)과 변하지 않는 영역을 구분해서 코드를 짜자 - 유지보수

 

그렇지 않고 코드 작성시 변수가 바뀔 경우 수정할 부분이 많은데 이 양에 따라서 인간의 인지 한계 이상일 경우 버그가 일어난다.

 

"구획을 구분해 유지보수가 수월한 코드를 작성하자"

 

재활용성이 좋은 코드 = 유지보수가 쉬운 코드

비교

연산자

00:00

Javascript

 

Lecture 4.1 연산자(1/4)

 

1. 연산자

 

어떤 작업을 컴퓨터에게 지시하기 위한 기호

 

2. 비교연산자

 

주어진 값은 크기 비교(참이면 True, 거짓이면 False 출력 - boolean)

비교 연산자 (== 과 ===)

00:00

Javascript

 

Lecture 4.2 비교(2/4)

 

1. 동등 연산자(==)

 

좌항과 우항의 값이 데이터 타입이 다르더라도 실질적으러 가지고 있는 정보의 의미가 동일하면 같은 값으로 인정(True/False) -

 

비슷하면 같다고 인정 - 버그가 많이 터짐(거대한 프로그램에 영향을 많이 끼침)

 

2. 일치 연산자(===)

 

좌항과 우항의 값이 동일한 정보에 데이터 타입까지 같아야 인정(True/False)

 

" '===' 연산자를 많이 써라"

 

" '==' 쓰지 마라"

 

Tip.

 

실행 후 에러 나는 것보다 코드 작성시의 에러가 잡아내기 쉽다.

=== 를 사용하자!

00:00

Javascript

 

Lecture 4.3 비교(3/4)

 

1. Undefined와 Null의 차이

 

Undefined : 값이 없는 상태

Null : 프로그래머가 의도한 값이 없는 상태

 

2. 자료형(Data type)

 

Boolean : True / False

Number : ... -1, 0. 1 ...

String : "a", "b", "c" ...

Undefined : Undefined

Null : Null

NaN : NaN, 연산의 결과가 숫자가 아닌 경우의 데이터 타입(ex 0/0)

alert(null == undefined);       //true
alert(null === undefined);      //false
alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false
 
alert(0 === -0);                //true
alert(NaN === NaN);             //false

 

Tip

 

NaN === NaN 이 False인 이유는 '-무한 != 무한' 이러고 보면 된다.

부정과 부등호

00:00

Javascript

 

Lecture 4.4 비교(4/4) : 부정과 부등호

 

1. 부정

!= : 같지 않다. (==의 역)

!== : 정확하게(strict), 데이터 타입 또한 같지 않다.(===의 역)

2.비교

좌항과 우항 비교( > , < , >= <=)

조건문

조건문이란? (if, else)

00:00

Javascript

 

Lecture 5.1 비교(1/5) : 조건문이란?

if 구조:

if(Boolean status){

내가 실행하고 싶은 명령어;

}

Boolean status === True : 실행

Boolean status === False : 미실행

else, else if

00:00

Javascript

 

Lecture 5.2 비교(2/5) : 조건문이란?

else 와 else if

구조 :

if(Boolean status){

내가 실행하고 싶은 명령어;

} else if(Boolean status){

내가 실행하고 싶은 명령어;

} else {

내가 실행하고 싶은 명령어;

}

순서 : if -> else if -> else

조건이 참인 경우는 실행하고 조건문을 종료한다.

조건문의 응용

00:00

Javascript

 

Lecture 5.3 비교(3/5) : 조건문의 응용

prompt(문자열);

: 실행 시 문자열을 창을 통해 띄우고 사용자로부터 값을 받는다.

파이썬의 print(input())과 유사하다.

prompt로 저장되는 변수의 자료형은 문자열이다.

id = prompt('아이디를 입력해주세요.');

if(id==='egoing'){

var pass = prompt('비밀번호를 입력해주세요,');

if(pass==='1111'){

alert('안녕하세요.'+id+'님', '반갑습니다.');

}

else{

alert('비밀번호가 잘못 입력력되었스니다.');

}

}

else{

alert('아이디를 잘못 입력하셨스니다.');

}

논리 연산자

00:00

Javascript

 

Lecture 5.4 조건문(4/5) : 논리 연산자

논리 연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있게 도와준다.

여러 개의 Boolean을 조합해서 하나의 Boolean으로 만들어준다.

&& : AND 논리 연산자

|| : OR 논리 연산자

! : NOT 논리 연산자

var sum = 0;

while(sum != 3){

id = prompt('아이디를 입력해주세요.');

password = prompt('아이디를 입력해주세요.');

if ( (id == 'egoing' || id == 'k8805' || id == 'sorialgi') && password === '111111'){

alert('인증에 성공하셨습니다.');

}

else{

alert('인증에 실패하셨습니다.');

}

sum += 1;

}

boolean 의 대체제

00:00

Javascript

 

Lecture 5.5 조건문(5/5) : Boolean의 대체재

True로 간주되는 데이터 형식

  1. 1

  2. !''(빈 문자열의 경우는 False로 간주한다. + Not)

  3. '어떤 문자열을 썼을 경우'

  4. !undefined(값이 할당된 변수)

  5. !null

  6. !NaN

False로 간주되는 데이터 형식

  1. 1

  2. ''(빈 문자열의 경우는 False로 간주한다.)

  3. undefined(변수에 값을 할당하지 않은 변수) - var a; if(!a){alert('값이 할당되지 않은 변수');}

  4. null

  5. NaN

  • Equality table에 추가로 존재한다.

반복문

반복문 기본문법 - while

00:00

Javascript

 

Lecture 6.1 반복문(1/6) : 기본문법(While)

조건문은 컴퓨터를 똑똑하게 하지만 반복문은 컴퓨터를 강력하게 한다.

While

while(조건){

반복해서 실행할 코드;

}

<br /> : HTML에서 한 줄을 띄는 코드

document.write ('문자열 <br />') :

document.write 괄혼 안에 있는 문자열을 웹페이지에 출력하도록 명령하는 명령어

무한 루프 : while(True)

반복 조건

00:00

Javascript

 

Lecture 6.2 반복문(2/6) : 반복 조건

while(조건){

반복하고 싶은 명령문;

}

여기서 조건이 만족할 경우 반복한다.

주의 : 프로그램에서는 관습적으로 0부터 카운팅 한다.

for 문

00:00

Javascript

 

Lecture 6.2 반복문(3/6) : for 문

while 문의 문제점

while 구성

  1. 반복 변수 초기화 : 반복하는 것에 대한 기준점을 정하는 변수 i를 초기화하는 부분

  2. 반복 실행 : i값을 갱신해주는 반복 실행

  3. 반복 조건 : 반복을 계속 진행할 것인지 체크라는 반복 조건

이 세 가지를 하나의 문법적인 요소로 결합시켜 둔다면 보기도 편하고 오류가 발생할 확률도 줄어든다. -> for 문

for 문

구조 :

for(var i = 0; i < 10; i = i+1){

반복적인 명령을 실행할 문장;

}

for(초기화; 반복 조건; 반복 실행 ){

반복적인 명령을 실행할 문장;

}

Ps. 뒤에는 세미콜론이 없다.

장점

  1. 가독성이 좋고 문제가 발생할 확률이 낮다.

  2. while에 비해 코드 줄이 작다.

단점

  1. for문의 각각의 요소에 대해 구성 요소들이 어떤 순서인가 기억해야 한다.

while문과 for 문은 반복문에 관한 문법이고 이 둘은 대체 관계이다.

 

i++ : i를 먼저 실행시키고 i +1

++i : i를 1 증가시키고 i를 사용한다.

 

반복문의 효용성

00:00

Javascript

 

Lecture 6.4 반복문(4/6) : 반복문의 효용

if 반복문이 없다면 없다면 얼마나 불행해지는가?

10번, 100번 정도는 copy and paste로 가능하지만 도중에 변하는 변수나 1000번 이후는 힘들다.

반복문의 제어

00:00

Javascript

 

Lecture 6.5 반복문(5/6) : 제어(break, continue)

break

  • 반복 작업을 중간에 중단(반복문의 종료)

continue

  • 특정 순간에만 종료시키고 반복문의 지속

조건문 안에 반복문이 들어갈 수 있고, 반복문 안에 조건문이 들어갈 수 있다.

반복문의 중첩사용과 디버거

00:00

Javascript

 

Lecture 6.6 반복문(6/6) : 중첩 사용과 디버거

중첩

  • 반복문 안에 반복문을 넣는 것

ps. JavaScript의 경우 문자와 숫자를 결합하게 되면 숫자 부분을 문자의 데이터 형식으로 자동으로 형식을 변환해준다.

디버거(크롬 개발자 도구)

  • 버그(오류)를 제거하는 것을 도와주는 도구

Break point

  • 코드가 실행하다가 멈추는 기점

  • 이후 도구를 통해 한 단계마다 실행하거나, 이전 진행 단계로 되돌릴 수 있다.

  • Watch Expression을 통해 진행 단계의 명령에 대한 진행 사항을 더 자세히 찾아볼 수 있다.

  1. 반복문 중첩

  2. 디버거(코드의 실행을 확인해 볼 수 있다.)

함수

함수란?

00:00

Javascript

 

Lecture 7.1 함수(1/5) : 함수란?

 

함수의 중요한 역할

  • 함수란 하나의 로직의 재실행

  • 코드의 재사용성을 높여준다.

  • 코드의 작성 시간을 줄여준다.

  • 함수 개선 시 함수를 사용하는 모든 구간에서 개선이 일어난다.

 

함수의 형식

  1. 구조

function 함수명([인자1, 인자2, ]){

코드;

return 반환값;

}

 

  1. 함수 진행

함수 호출 시 코드의 함수를 찾고 함수의 중괄호 사이 내용 진행한다.

ps. 함수 안의 코드가 1000줄, 10000줄 이라고 생각하고 들어야 공감이 된다.

 

  • 함수는 재사용성이 제일 중요하다.

함수의 효용성

00:00

Javascript

 

Lecture 7.2 함수(2/5) : 함수의 효용

if 함수가 없다고 한다면?

  1. 코드가 엄청 길어짐

  2. 길어진 코드를 일일이 찾아서 수정을 해야 한다.

ps. 함수의 반복도 반복문을 통해 진행할 수 있다.

반복문과 함수의 효용

반복문

기계적으로 일정한 반복을 그 자리에서 실행할 때 의미가 존재

함수

반복적으로 실행되는 로직이 여러 맥락에서 반복되서 사용되야 하는 경우 - 반복이 한 곳이 아닌 여러 곳에서 분산되어 쓰이는 경우

재사용성의 핵심은 여러 곳에서 코드 블럭을 사용할 수 있는 형태를 만드는 것, 좋은 부품을 만드는 것이 핵심

함수의 장점

  1. 재사용성

  2. 유지보수 용이 - 함수의 내용을 수정, 변경, 개선을 하게 되면 함수를 사용하는 모든 곳에서 똑같이 일어남 - 유지보수(maintenance) 용이 - 양날의 검(안 좋으면 함수를 사용하는 부분이 모두 않 좋음)

  3. 코드의 가독성이 좋다.

ps. 1, 2, 3번 모두 만족해야 잘 만들어진 프로그램, 수정하기 쉬운 프로그램이다. - 매우 중요한 것

함수의 입력

00:00

Javascript

 

Lecture 7.2 함수(3/5) : 함수의 입력

함수의 어원

  1. funtion을 중국인이 읽을 때 비슷하게 읽으면 '함수'라고 들

    림(응역)

  2. 함수의 함에서 함수가 가진 본질적인 요소를 반영한 창조적인 '조'

수학의 함수와 프로그래밍의 함수는 뗄 레야 뗄 수 없다.

함수

값에 따라 다른 결과가 출력되는 상자

입력에 따라 출력이 달라지는 것

출력

return 이라는 Keyword를 사용

return의 역할

  1. 함수를 종료시킨다.

  2. return 뒤의 값을 함수의 출력 값으로 반환한다.

if 복수의 return 존재 시

  • 맨 위의 하나의 요소만 반환하고 return시 행동을 종료한다.

함수의 출력

00:00

Javascript

 

Lecture 7.4 함수(4/5) : 함수의 출력

인자(argument)

  • 값 자체

매개변수(Parameter)

  • 값을 받는 변수

여러 개의 입력 값을 받을 수 있지만 return 값은 하나만 가질 수 있다.

다양한 함수 정의 방법

00:00

Javascript

 

Lecture 7.5 함수(5/5) : 다양한 정의 방법

  1. 함수의 정의 부분이 변수에 대

    입

변수 = function(){

실행하고 싶은 명령어;

}

  1. 익명 함수:함수 정의 및 호출, 일회성 호출

(function(){

실행하고 싶은 명령어;

})();

함수는 코드의 재활용성을 높여준다.

JavaScript의 경우 함수가 차지하는 위상이 높다.

배열

배열의 문법

00:00

Javascript

 

Lecture 8.1 배열(1/5) : 배열의 문법

배열(데이터를 담는 그릇)

연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입

배열 선언

var 변수명 = [원소1, 원소2, ... , 원소n]

index(색인)

원소는 저장될 때 자동으로 고유한 식별값을 부여된다.

index에 해당하는 값 가져오기

배열 변수[해당하는 index];

프로그래밍에서는 0부터 시작

배열의 효용성

00:00

Javascript

 

Lecture 8.2 배열(2/5) : 배열의 효용

함수는 여러 개의 값을 인자로 받아 1개의 값을 출력한다.

그러나 배열을 통해 값을 넣어줘서 반환하면 여러 개의 값을 빼서 쓸 수 있다.

배열은 연관되어 있는 정보를 한꺼번에 다룰 수 있게 해준다.

배열의 사용 - 배열과 반복문

00:00

Javascript

 

Lecture 8.3 배열(3/5) : 배열과 반복문의 조우

배열의 핵심 요소

배열에 담겨있는 값들을 빼내서 꺼내진 것을 가공하는 것이 배열의 핵심

반복문은 배열과 함께 사용하는 것이 핵심

변수.toUpperCase();

대문자로 바꿔준다.

배열.length

배열에 담겨있는 원소의 개수가 몇 개 인가를 출력

배열의 조작 - 추가

00:00

 

Javascript

 

Lecture 8.4 배열(4/5) : 데이터의 추가

  1. 배열.push(인자);

해당 배열의 맨 끝에 인자가 추가된다.(복수 인자 불가)

 

  1. 배열.unshift(인자);

해당 배열의 처음에 인자가 추가된다.(복수 인자 불가)

 

  1. 배열.concat(배열);

해당 배열에 내가 추가하고자 하는 배열이 끝부터 연결된다.(배열 자체는 하나이기에 복수의 원소가 추가 가능하다.)

 

  1. 배열.splice(index, index 위치로부터 지우려는 원소의 개수, 배열의 위치로부터 추가하려는 원소(복수 가능))

배열의 조작 - 제거, 정렬

00:00

Javascript

 

Lecture 8.5 배열(5/5) : 원소의 제거와 정렬

  1. 원소의 제거

1.1. 배열.shift();

배열의 앞에 있는 원소를 제거하고 제거한 원소를 출력한다.

1.2. 배열.pop();

배열의 가장 뒤에 있는 원소를 제거하고 제거한 원소를 출력한다.

  1. 정

    렬

배열.sort();

이 이후 해당 배열은 정렬된 상태로 저장된다.

배열의 기준을 정하고 싶다면 인자로 배열 기준을 정의하고 인자로 넣으면 된다.

객체(Object)

객체의 소개와 문법

00:00

Javascript

 

Lecture 9.1 객체(1/3) : 객체와 문법

객체

데이터를 담아내는 그릇이라는 점에서는 배열과 유사하다.

배열의 경우 index를 숫자로 자동으로 지정하지만 객체는 index를 직접 원하는 데이터를 지정할 수 있는 것이 차이

JavaScript의 경우 객체이지만 다른 언어에서는 연관 배열, 딕셔너리라고도 표현한다.

객체지향과는 다르다.

객체의 생성 1

var 변수 = {'index1' : 10, 'index2' : 15, ... };

객체의 생성 2

var 변수 ={};

변수['index'] = 내가 담고 싶은 값;

해당 생성 방식은 비어있는 객체를 만들고 객체를 채우는 방식

객체의 생성 3

var 변수 = new object();

변수['index'] = 내가 담고 싶은 값;

객체의 값 가져오기 1

객체명['Key(색인)'];

결과값 : Value(값)

장점 : [] 사이에 연산을 진행할 수 있어 편리하다.

객체의 값 가져오기 2

객체명.Key;

장점 : 간결

객체와 반복문

00:00

Javascript

 

Lecture 9.2 객체(2/3) : for in loop(객체와 반복문)

for in loop

배열과 객체는 index가 다르기에 for에서도 다르게 넣어줘야 한다.

ex)

for(var key in 객체){

실행하고 싶은 명령어;

}

key에는 객체의 key가 순서대로 들어간다.

객체 뿐만 아닌 배열에서도 사용이 가능하다.

추가

<ul>

내용

</ul>

  • 을 붙여준다.

<li> </li>

리스트를 만드는 것으로 <ul> </ul>안에서 리스트를 사용할 시 사용한다.

객체 지향 프로그래밍

00:00

Javascript

 

Lecture 9.2 객체(3/3) : 객체 지향 프로그래밍

객체 내부에는 또 다른 객체 뿐만 아니라 함수도 저장될 수 있다.

Javascript에서는 함수 또한 값으로 취급하기 때문이다.

this

함수가 속해있는 객체를 가르키는 변수(약속되어 있다.)

cosole.log(a,b,c,) : a, b, c가 줄을 띄어서 출력된다.

객체지향 프로그래밍

연관되어 있는 데이터와 연관되어 있는 처리를 하나의 그릇 안에 모아서 그룹핑

모듈

모듈이란?

00:00

Javascript

 

Lecture 10.1 모듈(1/5) : 모듈이란?

코드의 재활용성, 유지보수를 위한 방법 중 하나가 하나의 코드를 여러 개의 파일로 분리, 모듈화하는 것이다.

모듈의 장점

  1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.

  2. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.

  3. 필요한 로직만으을 로드해서 메모리의 낭비를 줄일 수 있다.

     

자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않는다.

그러나 호스트 환경에 따라 서로 다른 모듈화 환경이 제공되고 있기 때문에 호스트 환경마다 따로 알아봐야 한다.

모듈화

00:00

Javascript

 

Lecture 10.2 모듈(2/5) : 모듈화

<!DOCTYPE html>
<html>
<head>
   <mata charset="utf-8"/>
   <script src="greeting.js"></script>
</head>
<body>
   <script>
      function welcome(){
         return 'Hello world'
         }
      alert(welcome());
   </script>
</body>

위의 코드 블럭에서는 웹브라우저가 script라는 tag를 만나면 src라는 속성이 있는지 확인

 

속성에 파일이 있다면 script 사이에 파일을 치환한 것과 동일한 효과를 낸다.

 

<!DOCTYPE html>
<html>
<head>
   <mata charset="utf-8"/>
   <script src="greeting.js"></script>
</head>
<body>
   <script>
      alert(welcome());
   </script>
</body>

Node.js 의 모듈화

00:00

Javascript

 

Lecture 10.3 모듈(3/5) : Node.js의 모듈화

Node.js의 모듈 불러오기

Node.js가 제공하는 require(인자)이라는 함수를 통해 모듈을 불러온다.

Node.js의 모듈 사용

var 변수명 = require(모듈 인자)

변수명.모듈에서 불러올 함수(인자);

라이브러리

00:00

Javascript

 

Lecture 10.4 모듈(4/5) : 라이브러리란?

라이브러리는 모듈과 비슷한 개념

모듈은 프로그램을 구성하는 작은 부품으로서의 로직

라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합

라이브러리란 어떠한 목표를 선정해놓은 로직들의 집합

목적을 정해두고 목적을 쉽게 달성할 수 있도록 만들어놓은 코드들의 집합

라이브러리의 핵심

  1. 파일을 가져오는 것

  2. 가져온 파일의 라이브러리가 어떠한 기능이 있는지 파악하는 것

jQuery를 많이 사용

API Documentation

jQuery가 우리들에게 제공하는 명령어 리스트(사용설명서)

라이브러리 사용하기

00:00

Javascript

 

Lecture 10.5 모듈(5/5) : 라이브러리의 사용

생활코딩에 따로 jquery를 사용하는 방법이 나와있다.

network 탭을 보면 현재 웹페이지에서 다운 받은 파일이 나오는데 jquery가 있다면 잘 include 된 상태

<!DOCTYPE html>
<html>
<head>
   <mata charset="utf-8"/>
   <script src="greeting.js"></script>
</head>
<body>
   <script>
      function welcome(){
         return 'Hello world'
         }
      alert(welcome());
   </script>
</body>
위의 코드 블럭에서는 웹브라우저가 script라는 tag를 만나면 src라는 속성이 있는지 확인

 

속성에 파일이 있다면 script 사이에 파일을 치환한 것과 동일한 효과를 낸다.

 

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
   <ul id="list">
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
   </ul>
   <input type="button" value="execute" id="execute_btn" />
   <script type="text/javascript">
      $('#execute_btn').click(function(){
         ('#list li').text('cording everybody');
      })  
      alert(welcome());
   </script>
</body>

 

jquery에서는 약속되어있는 예약어는 $로 모든 경우에서 달러로 시작한다.

 

#의 기호는 id값이 # 뒤의 문자열인 tag를 가르키는 것

UI 와 API 그리고 문서보는 법

UI 와 API 수업 소개

00:00

Javascript

 

Lecture 11.1 모듈(1/3) : UI, API 그리고 문서(1/2)

자바스크립트를 스스로 프로그래밍을 하는 방법 핵심은 자신이 원하는 명령어, API를 찾는 방법

UI 와 API 소개

00:00

Javascript

 

Lecture 11.2 모듈(2/3) : UI, API 소개

UI

컴퓨터와 유저 사이의 접점, 하드웨어로는 입출력 장치가 존재하면 소프트웨어 측면에서는 버튼 같은 것도 포함된다.

API

코드의 형태를 띄고 있는 개발자들의 인터페이스

UI와 구분되기 위해 나온 용어로써 API를 통해 웹브라우저를 제어한다. 개발자와 개발자가 아닌자를 가르는 가장 큰 차이는, 

개발자가 아닌 사람들은 UI를 통해 시스템을 제어하고, 개발자는 API를 이용해서 자신의 맥락에 맞게 그것들을 응용해서 application(기반(웹브라우저))을 제어하게 되는 것이다.

체계도

사용자 - 소프트웨어 공학(웹 개발자 - 브라우저 - 운영체제 - C, C++, 어셈블리어 - 기계어) - 전자 공학 - 전기 공학

문서 보는법

00:00

Javascript

 

Lecture 11.3 UI, API 그리고 문서(3/3) : 수업 소개(2/2)

레퍼런스와 튜토리얼

튜토리얼

일종의 구문법(안내서), 튜토리얼을 통해서 환경이 어떠한 기능이 제공하고 있는가에 대해서 사전에 알고 있어야 하는 것을 공부, 이해

레퍼런스

일종의 사전, 튜토리얼 지식을 기반으로 환경이 제공하는 명령을 찾아야 하는데 이를 레퍼런스가 담당

자바스크립트의 레퍼런스

자바스크립트 자체의 API(Math, 정규표현식 등등), 자바스크립트가 동작하는 호스트 환경의 API(각각의 호스트 환경에 맞춘 API 공부(WB, Node.js, GA))

자바스크립트 API 문서

ECMAScript(Javascript 상표권 문제)

자바스크립트 사전(생활코딩 - 한글화)

자바스크립트 레퍼런스(MDN - FireFox - 영문)

iscript 레퍼런스(MSDN - MS - 한글)

호스트 환경의 API 문서

(당연하지만 Javascript에서 파생된 호스트 환경이므로 Javascript의 기본 API는 사용이 가능하다. 위의 것은 모두 사용 가능)

웹브라우저 API(WB, Web API Interfaces - MDN)

Node.js API(Node.js 홈페이지 MANUAL, DOCS)

Google Apps Script API

Javascript 와 정규표현식

오리엔테이션

00:00

Javascript

 

Lecture 12.1 정규표현식(1/7) : 오리엔테이션

정규표현식

문자열에서 특정한 문자를 찾아내는 도구, 문자열을 다른 문자로 바꾸는 문자열을 다루는 강력한 도구

패턴 만들기

00:00

Javascript

 

Lecture 12.2 정규표현식(2/7) : 패턴 만들기

정규표현식의 사용 방법

1. 컴파일

우리가 어떠한 작업을 하기 위해서 우리가 필요한 대상, 패턴을 찾는 것

2. 실행

대상, 패턴에 대해 어떠한 작업을 구체적으로 하는 것

정규표현식 방식

1. 정규표현식 리터럴

var pattern = /a/

2. 정규표현식 객체 생성자

var pattern = new RegExp('a');

여기서 new는 새로운 객체에 대한 생성을 말하고 RegExp는 정규표현식에 대한 것을 말한다

둘 모두 우리가 찾고자 하는 패턴이 'a'라는 것을 말한다.

RegExp 객체의 사용

00:00

Javascript

 

Lecture 12.3 정규표현식(3/7) : RegExp 객체의 사용

정규표현식을 통해 할 수 있는 주요한 작업

  1. 문자열 탐색

  2. 추출

  3. 치환

RegExp.exec() - 추출

exec는 정규표현식을 실행을 하는 것으로써, 예시에는 우리가 검색하고자하는 것이 인자 안에 존재하면 검색하고자 하는 것을 배열로 출력하고 아니면 null 값을 출력한다.

RegExp.test() - 존재유무 test

test는 정규표현식을 실행을 하는 것으로써, 예시에는 우리가 검색하고자하는 것이 인자 안에 존재하면 true를 출력하고 아니면 false를 출력한다.

exec와 test의 경우는 비슷하지만 그대로 실행하는가 boolean값을 출력하는 것인가에 대한 차이는 존재한다.

var pattern = /a/
patter.exec('abcde');
// ['a'], 출력삾은 배열로 출력한다.

var pattern = /a/
patter.exec('bcde');
//null, 검색하고자하는 문자열이 존재하지 않기 때문에 null값을 출력한다.

var pattern = /a./
patter.exec('abcde');
//['ab'], .의 경우는 a의 뒤에 있는 아무 문자 하나를 추가해서 같이 출력한다.

var pattern = /a/
patter.test('abcde');
//true

var pattern = /a/
patter.test('bcde');
//false

String과 정규표현식

00:00

Javascript

 

Lecture 12.4 정규표현식(4/7) : String과 정규표현식

문자열 메소드 실행

String.match()

RegExp.exec()와 비슷하다.

console.log('abcdef'.match(pattern)); //["a"]

String.replace()

문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 삾을 리턴한다.

console.log('abcdef'.replace(pattern, 'A')); //Abcdef 

var pattern = /a/;
var str = 'abcdef';
str.match(pattern);
//["a"]

var pattern = /a/;
var str = 'abcdef';
str.replace(pattern, 'A');
//문자열.replace(바꾸고자하는 문자열, 바꾸는 문자열)
//"Abcdef"

옵션(i, g)

00:00

Javascript

 

Lecture 12.5 정규표현식(5/7) : 옵션(i, g)

정규표현식 옵션(i)

i를 붙이면 대소문자를 구분하지 않는다.

정규표현식 옵션(g)

g를 붙이면 검색된 모든 결과를 리턴한다.

g를 붙이지 않은 경우는 검색된 결과를 한 개만 출력한다.

정규표현식 옵션의 동시 사용(ex. ig)

옵션을 같이 사용할 때는 붙여서 사용하면 동시에 사용된다.

//정규표현식 i옵션 : 문자열내의 대소문자를 구별하지 않고 검색하는 정규표현식의 옵션

var xi = /a/;
"Abcde".match(xi);
//null, 정확한 소문자 a를 찾는 것이기 때문에 null 값을 출력한다.

var xi = /a/i;
"Abcde".match(oi);
//["A"], i 옵션을 통해 대소문자를 구분하지 않고 문자열을 검색하여 출력한다.

//정규표현식 g 옵션 : 문자열 내의 모든 검색 결과를 출력하는 정규표현식의 옵션

var xg = /a/;
"abcdea".match(xg);
//["a"], 문자열을 검색해서 처음의 검색 결과만을 출력한다.

var og = /a/g;
"abcdea".match(og);
//["a", "a"], g옵션을 통해 문자열 내에 검색된 모든 결과를 출력한다.

var ig = /a/ig;
"AabcdAa".match(ig);
//["A", "a", "A", "a"], 문자열 내의 대소문자를 구분하지 않고 모든 탐색 결과를 출력한다.

캡처

00:00

Javascript

 

Lecture 12.6 정규표현식(6/7) : 캡처

캡처

그룹을 지정하고 지정된 그룹을 가져와 사용하는 기능, 개념

괄호 안의 패턴은 마치 변수처럼 재사용할 수 있다. 이때 기호 $를 사용한다.

(\w+)\s(\w+)

() : 그룹을 의미

\w : 모든 문자를 의미(a~z, A~Z, 0~9)

+ : 수량자, 앞의 명령에 하나 이상이라는 조건을 추가한다.

(\w+) : 어떠한 문자가 한 개 이상인 그룹

\s : 공백을 의미

$n : n번째 그룹을 의미

var pattern = /(\w+)\s(\w+)/;
var str = "cording everybody"
var result = str.replace(pattern, "$2, 달러1"); //pattern에 적힌 정규표현식대로 문자열을 인식하고 옆에 적힌 식대로 문자열을 재배치 
console.log(result);
//everybody, cording

치환

00:00

Javascript

 

Lecture 12.7 정규표현식(7/7) : 치환(replace)

정규표현식 더 공부해서 이해

함수의 부분의 경우 수업 : 함수지향 - 값으로서의 함수와 롤백 - 이 부분을 보기

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

함수지향 - 유효범위

전역변수와 지역변수

00:00

Javascript

 

Lecture 13.1 객체(1/5) : 전역변수와 지역변수

변수가 지정 받는 값

변수는 선언하지 않는 경우에는 가장 가까운 위치의 변수를 할당 받는다.

예를 들어 전역 변수와 지역 변수의 이름이 같고 함수내에 지역 변수가 존재하고 함수 내에서 변수를 호출하는 경우에는 당연히 가까이 있는 지역 변수를 할당 받지만 함수내에 지역 변수가 존재하지 않는 경우에는 전역 변수를 할당받는다.

지역 변수

함수의 중괄호 내에서만 접근할 수 있는 변수

전역 변수

자바스크립트 애플리케이션 전역에서 접근 할 수 있는 변수

전역 변수, 지역 변수 어떤 것을 사용해야 하는가?

왜 전역 변수를 사용해야 하는가? 라는 구체적인 이유를 인지하지 않은 상태라면 언제나 지역 변수를 사용해야 한다.

유효범위의 효용성

00:00

Javascript

 

Lecture 13.2 객체(2/5) : 유효범위의 효용

유효 범위의 효용

전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.

function a (){
    var i = 0; //결과 01234
    // i=0; // 결과 무한반복
}
for(var i = 0; i < 5; i++){
    a();//지역 변수 i 적용
    document.write(i);//전역 변수 i 적용 
}

//01234

function a (){
    i = 0;
    // i=0; // 결과 무한반복
}
for(var i = 0; i < 5; i++){
    a();//지역 변수 i 적용
    document.write(i);//전역 변수 i 적용 
}

//결과 무한 반복의 이유는 for문에서 i를 계속 1씩 올려도 a()함수에서 i를 계속 0으로 초기화시키기 때문에 무한 반복을 진행한다.

전역변수를 사용하는 법

00:00

Javascript

 

Lecture 13.3 객체(3/5) : 전역변수를 사용하는 법

변수의 속성

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

변수의 속성 생성 방식

var 전역변수.속성 = {}

전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.

익명함수(이름이 없는 함수)

익명 함수는 초기 생성 후 접근 할 수 없습니다.

변수에 함수를 할당하는 경우 할당된 변수를 함수 변수라고 말합니다.

(fucntion(){
   console.log('hello');
});

유효범위의 대상

00:00

Javascript

 

Lecture 13.4 객체(4/5) : 유효범위의 대상

자바스크립트의 경우 함수의 중괄호 안에서 선언된 변수만이 함수 안에서의 지역 변수이고 그 외의 for문, if문 등등에서 선언된 변수는 전역 변수 취급을 받는다.

정적 유효범위

00:00

Javascript

 

Lecture 13.5 객체(5/5) : 정적 유효 범위

동적 유효 범위

사용되는 대상에 따라서 그 대상이 갖고 있는 변수에 접근 할 수 있는 경우

정적 유효 범위

변수를 정의되는 시점, 정의되어 있는 그 시점에서 변수를 바라보게 된다면 누가 사용하던 똑같은 값을 가지는 경우

즉, 정적 유효 범위는 함수가 사용될 때가 아닌 정의될 때 변수가 정해진다면 정적 유효 범위이고 그 외는 정적 유효 범위이다.

함수지향 - 값으로서의 함수와 콜백

함수의 용도 - 1

00:00

Javascript

 

Lecture 14.1 값으로서의 함수와 콜백(1/4) : 함수의 용도 1

값으로서의 함수

자바스크립트에서는 함수도 객체다. 다시 말해서 일종의 값이다.

자바스크립트의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

"변수에 함수를 담을 수 있다. 함수도 자바스크립트에서는 값이기에"

함수가 값이 됨으로써 변화

  1. 객체의 속성으로 담겨질 수 있다.

     

  2. 다른 함수의 인자로 전달될 수 있다.

a = {
     b : function(){
         }
};
// 힘수는 객체의 값으로 포함될 수 있는데 객체의 속성값으로 담겨진 함수를 메소드라고 부른다.

function cal(func, num){
   return func(num);
}

function increase(num){
   return num + 1;
}
function decrease(num){
   return num - 1;
}

alert(cal(increase, 1));
alert(cal(decrease, 1));

 

메소드

 

함수는 객체의 값으로 포함될 수 있는데, 객체의 속성값으로 담겨진 함수를 메소드라고 부른다.

값으로서의 함수와 콜백 - 함수의 용도 2

00:00

Javascript

 

Lecture 14.2 값으로서의 함수와 콜백(2/4) : 함수의 용도 2

함수는 값으로서 사용될 수 있다.

  1. 리턴값으로의 함수의 사용

  2. 배열로서의 함수의 사용

이렇듯 변수, 매개변수, 리턴값으로 사용될 수 있는 다양한 용도로 사용될 수 있는 데이터를 first-class citizen object로 불림(자바스크립트의 함수는 이에 속함)

//리턴값으로서의 함수 사용
function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}
alert(cal('plus')(2,1));
alert(cal('minus')(2,1));

//배열로서의 함수 사용

var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input);

값으로서의 함수와 콜백 - 콜백이란?

00:00

Javascript

 

Lecture 14.3 값으로서의 함수와 콜백(3/4) : 콜백이란?

함수는 값으로서 사용될 수 있다.

콜백

콜백이란 기본적인 함수에서 인자를 값으로서의 함수를 사용함으로서 기본적인 함수의 기능에 변화를 주는 값으로서의 함수를 말한다.

콜백이 가능한 이유는 자바스크립트의 함수는 값으로서의 함수이기 때문이다.

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

비동기 콜백과 Ajax

00:00

Javascript

 

Lecture 14.4 값으로서의 함수와 콜백(4/4) : 비동기 콜백과 Ajax

동기적 처리

작업을 순서대로 처리하는 방식, 단계가 끝나야지만 다음 단꼐로 넘어간다.

비동기적 처리

오래 걸리는 작업의 경우 예약을 걸어두고 다른 작업을 처리하는 방식

정보를 가져오고 사용자에게 위임하여 함수를 인자로 주는 방식

Ajax

웹페이지가 변경되지 않고 서버와 웹브라우저가 내부적으로 조용히 통신하는 기법

  • 비동기적 제어

자바스크립트의 비동기적 처리는 호스트 서버마다 사용 방법이 다르기 때문에 jquery 사용

함수지향 - 클로저

내부함수, 외부함수

00:00

Javascript

 

Lecture 15.1 클로저(1/4) : 외부함수, 내부함수

내부 함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다.

함수 안에서 선언된 함수를 내부 함수라고 한다.

외부 함수

내부 함수를 감싸고 있는 함수를 외부 함수라고 한다.

클로저

내부 함수는 외부 함수의 지역 변수에 접근 할 수 있는데 이를 클로저라고 한다.

정확한 정의는 내부 함수가 외부 함수의 맥락에 접근하는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용된다.

클로저란?

00:00

Javascript

 

Lecture 15.2 클로저(2/4) : 클로저란?

클로저의 독특함

내부 함수를 포함하고 있는 외부 함수에 접근할 수 있을 뿐만 아니라 외부 함수가 종료된 이후에도 내부 함수를 통해 접근할 수 있다.

function outter(){
   var title = 'cording everybody';
   return fuction(){
      alert(title);
   }
inner  = outter();
inner();

private variable

00:00

Javascript

 

Lecture 15.2 클로저(3/4) : Private variable

function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title());
alert(matrix.get_title());
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title());
alert(matrix.get_title());

다음과 같은 코드에서 title이라는 외부 함수의 변수는 내부 함수의 get_title과 set_title을 통해서만 접근할 수 있다.(함수가 이미 종료되었기 때문에)

이럴 경우 장점은 누구나가 수정하는 것을 막아 오류가 생길 가능성을 예방할 수 있다. 안전하게 운용할 수 있다.

또한 내장 함수를 통해 조건을 걸어 안전한 입력값만을 입력하게 하거나 오류를 알려줄 수 있다.

이는 클로저를 통해 운용이 가능하다.

클로저의 응용

00:00

Javascript

 

Lecture 15.4 클로저(4/4) : 클로저의 응용

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

JavaScript에서는 var 키워드를 사용하여 선언된 변수가 함수 레벨 스코프를 가지고 있습니다. 여러 함수에서 같은 변수에 접근하는 경우, 그 변수는 해당 함수들에서 공유됩니다. 여러분의 코드에서는 반복문 안에서 var를 사용하여 선언된 변수 i가 모든 함수에서 공유되고 있습니다. 따라서 두 번째 루프에서 어떤 함수를 호출하든 이미 루프가 완료된 후에 i의 최종 값인 5가 사용됩니다.

 

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());
}

/* 결과
0
1
2
3
4
*/

함수지향 - arguments

arguments 소개

00:00

Javascript

 

Lecture 16.1 argument(1/2) : argument 소개

argument 객체

함수 안에서 함수의 여러가지 정보를 담고 있는, 인자와 관련된 정보를 담고 있는 객체

배열과 비슷해 유사 배열로 쓰인다.

이 배열에는 함수를 호출할 때 사용자가 입력한 인자가 담겨있다.

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다.

function sum(){
    var i, _sum = 0;    
    for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }   
    return _sum;
}
document.write('result : ' + sum(1,2,3,4));

P.s

자바스크립트의 경우 함수가 매개변수가 없게 설정해도 인자를 넣어줄 수 있다.

매개변수의 수 - function length

00:00

Javascript

 

Lecture 16.2 argument(2/2) : function.length

매개변수의 수

함수.length

함수가 매개변수로 정의한 매개변수의 숫자를 알려준다.

arguments.length

함수를 호출할 때 몇 개의 인자를 전달했는지에 대한 숫자를 알려준다.

  • 이것들을 사용하는 이유는 제작자가 매개변수에서 벗어나는지를 체크해서 오류를 강제로 일으킬때 사용

function zero(){
    console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
    );
}
function one(arg1){
    console.log(
        'one.length', one.length,
        'arguments', arguments.length
    );
}
function two(arg1, arg2){
    console.log(
        'two.length', two.length,
        'arguments', arguments.length
    );
}
zero(); // zero.length 0 arguments 0 
one('val1', 'val2');  // one.length 1 arguments 2 
two('val1');  // two.length 2 arguments 1

함수지향 - 함수의 호출

apply 소개

00:00

Javascript

 

Lecture 17.1 함수의 호출(1/2) : apply 소개

자바스크립트에서 함수는 일종의 객체이다.

객체는 속성을 가진다.

속성에 값이 저장되어 있으면 속성이라 부른다

속성에 함수가 저장되어 있으면 메소트라고 부른다.

함수는 객체이기 때문에 메소드를 가진다. - 내장 메소드를 가짐

ㅣ

apply(함수의 기본 내장 메소드) - call과 유사하다.

function sum(arg1, arg2){
   return arg1 + arg2;
}

sum(1,2);
sum.apply;
sum.apply(null, [1,2]);//null을 사용할 경우에는 apply를 사용하고 그 외의 경우는 사용할 필요가 없다.

apply 사용

00:00

Javascript

 

Lecture 17.2 함수의 호출(2/2) : apply의 사용

this

this를 통해 apply에 인자로 입력된 개체의 속성인 것처럼 실행이 가능하게 한다.

인디 함수 : 독립되어 있는 함수

o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
    var _sum = 0;
    for(name in this){
        _sum += this[name];
    }
    return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

//위의 방식과 다른 좀 돌아가는 방식
o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
    var _sum = 0;
    for(name in this){
       if(typeof this[name] !== 'function')
            _sum += this[name];
    }
    return _sum;
}
alert(o1.sum());
alert(o2.sum());
//alert(sum.apply(o1)) // 6
//alert(sum.apply(o2)) // 185

객체지향 - 객체지향 프로그래밍 소개

객체지향 프로그래밍 오리엔테이션

00:00

Javascript

 

Lecture 18.1 객체지향 오리엔테이션(1/3) : 객체 지향 프로그래밍 오리엔테이션

  1. 객체 지향 프로그래밍은 객체를 만드는 것

  2. 객체는 추상적인 것이 아닌 매우 구체적인, 문법적인 기능이 언어 차원에서 제공되는 기능

  3. 하나의 객체 안에는 객체가 가지고 있는 취지, 기능에 따라서 그에 연관된 변수와 메소드를 객체에 가둬둔 것

  4. 연관성이 없는 다른 로직과 구분해주는 역할

추상화

00:00

Javascript

 

Lecture 18.1 객체지향 오리엔테이션(2/3) : 설계와 추상화

객체지향 프로그래밍 교육은 크게 두 가지로 구분된다.

문법

문법을 이해하고, 숙지해야 객체를 만들 수 있다. 객체를 만드는 법에 대한 학습이라고 할 수 있다.

설계

좋은 객체를 만드는 법이다.좋은 설계는 현실을 잘 반영해야 한다.

추상화

현실을 간단하게 단순화 시켜서 만든 것

해결해야 할 문제, 반영해야 하는 현실을 소프트웨어적으로 단순화시키는 행위

부품화

00:00

Javascript

 

Lecture 18.3 객체지향 오리엔테이션(3/3) : 부품화

프로그램은 여러 개의 형태의 로직으로 구성되어 있다.

변수와 메소드를 그룹핑 시킨 것을 객체 - 재활용성

객체를 다른 곳에서 활용 가능 - 일종의 부품으로 사용

부품화 시켰을 때는 어디서 문제가 생겼는지 파악하고 해결하기가 수월해진다.

설계에는 정답이 있다기 보다는 적합한 것을 찾는 것이다. - 메소드

메소드

  1. 코드의 양을 극적으로 줄일 수 있다.

  2. 메소드 별로 기능이 분류되어 있기 떄문에 필요한 코드를 찾기도 쉽고 필요한 코드를 찾기도 쉽고 문제의 진단도 빨라진다.

그룹핑

 

연관된 것을 묶고 연관되지 않은 것을 분리하는 것

 

은닉화, 캡슐화

내부의 동작 방법을 단단한 케이스 안으로 숨기고 사용자에게는 그 부품의 사용방법(메소드의 사용법)만을 노출하고 있는 것이다.

 

인터페이스

표준에 맞게 모양을 만든 것의 연결점

객체지향 - 생성자와 new

자바스크립트의 객체지향

00:00

Javascript

 

Lecture 19.1 생성자와 new(1/3) : 자바스크립트의 객체지향

객체(prototype-based programming)

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.

자바스크립트에서는 객체는 예술과 같은 느낌

서로 연관된 변수와 메소드를 하나의 객체라는 그릇에 놓는 것, 연관되지 않은 것은 따로 객체로 묶음

좋은 부품의 로직을 만드는 것이다.