제어할 태그 선택하기

자바스크립트로 할 수 있는 중요한 일 사용자와 상호작용해서 HTML, CSS를 동적으로 변경해 보다 사용자와 대화하는 듯한 느낌의 애플리케이션을 만드는 핵심적 원리

프로그램, 프로그래밍, 프로그래머

컴퓨터 언어 (HTML, CSS)

컴퓨터 프로그래밍 언어(JavaScript)

프로그램 이란, 순서.

그 순서를 만드는 행위가 '프로그래밍'

그 순서를 만드는 사람이 '프로그래머'

HTML은 웹 페이지를 묘사, 자바스크립트는 사용자와 상호작용하기 위해 개발된 언어

반복적으로, 조건에 따라 다른 기능을 실행

조건문 예고

비교 연산자와 Boolean 데이터타입

조건문

조건문의 활용

리팩토리(refactoring)

중복을 끝까지 찾아서 없애라!

반복문 예고

배열, 반복적인 작업 처리를 위한 반복문

배열(Array)

배열은 데이터 중 연관 된 데이터를 잘 정리정돈 해 담아 놓는 수납상자, array

반복문(Loop)

반복해야 할 2줄의 코드가 1억개라면 copy&paste가 불가능합니다. 만약 했더라고 오류가 발생한다면 다시 수정해야 하는 어려움이 발생, 이때 반복문을 사용합니다.

배열과 반복문

스크립트에 신경 쓸 필요 없이 데이터 자체에 집중하는 효과를 얻을 수 있습니다.

배열은 연관된 데이터를 정렬, 순서대로 자동화된 처리하는 것이 반복문

배열과 반복문의 활용

WEB

 

    
HTML
    
CSS
    
JavaScript
 

WEB

 

    
HTML
    
CSS
    
JavaScript
 

출처 : 생활코딩 강의

전역객체

모든 객체는 전역객체의 프로퍼티입니다. window라는 전역객체의 프로퍼티입니다.

function func(){                         var o = {'func':function(){

    alert('Hello?');                                alert('Hello?');

}                                            }}

func();                                     o.func();

window.func();                          window.o.func();

func();와 window.func();는 모두 실행 가능합니다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주됩니다.

this

객체지향에 대한 시야를 높이기 위한 수업입니다.

This는 함수 내에서 함수의 호출 맥락을 의미합니다. 의미가 고정에 되어 있지 않고 가변적일 때 맥락을 사용합니다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 둘을 연결시키는 연결점의 역할을 합니다. 함수내의  this 값은 window를 의미합니다.

메소드와 this

var o = {

    func : function(){ //func 프로퍼티는 함수이기에 메소드입니다.

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();

객체 안에서 메소드를 호출하면 메소드가 소속되어있는 객체를 this로 접근할 수 있습니다.

func라는 함수가 객체에 소속되어 있지 않은 경우 this는 window라는 전역객체를 가리킵니다.

o.func() 호출 시 this는 o가 됩니다.

생성자와 this

생성자로 사용 될 때는 this값은 생성될 객체를 가리킵니다.

함수로 호출하면 함수 안의 this는 window를 가리킵니다.

var funcThis = null;

function Func(){

    funcThis = this;

}

var o1 = Func();

if(funcThis === window){

    document.write('window <br />'); //window

}

var o2 = new Func();

if(funcThis === o2){

    document.write('o2 <br />'); //o2

}

생성자는 빈 객체를 만듭니다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킵니다. 이것은 매우 중요한 사실이다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문입니다.

객체로서의 함수

apply, call

마지막의 인자가 함수의 본문에 해당

Sum()이라는 함수 객체를 만든 것, 문법적으로 작성해 자바스크립트가 함수 객체를 만들어줍니다.

이를 함수 리터럴(Literal)이라고 합니다. 문법적으로 리터럴이라고 부릅니다.

함수가 가질 수 있는 프로퍼티 중 ecma에서 정의한 것이 apply, call입니다.

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;         

    }

}

func(); //window

func.apply(o); //o

func.apply(p); //p 객체p를 의미

ecma의 표준 메소드인 apply()

객체의 포함되어 있는 것이 메소드, 다른 곳에 가지 못하고 고정되어 있습니다.

자바스크립트는 유연하다.

언어에서 함수는 일반적인 객체지향의 메소드보다 위상이 높다. 어떻게 호출하느냐에 따라 함수는 어떠한 객체에 종속되는 존재이기도 합니다. This는 어떤 맥락에서 어떤 의미를 갖는가를 알아야합니다. this는 소속되어 있는 객체를 의미합니다.

 출처 : 생활코딩 강의