Object Model 자바스크립트를 통해서 브라우저를 제어하기 위해서는 자바스크립로 제어할 무엇인가가 준비되어야 한다. 그것이 바로 Object(객체)이다.웹브라우저의 구성요소들은 하나 하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.자바스크립트로 브라우저를 제어하기 위해서는 객체를 제어한다.--> 객체화(자바스크립트로 브라우저를 제어하기 위해서는 모든 것이 객체화 되어 있어야 한다.)브라우저 또는 웹페이지를 제어하기 위해서는 객체가 필요하고 그 객체를 만드는 주체는 웹브라우저가 준비하고 개발자는 준비된 그 객체를 자바스크립트를..

arguments(유사 배열 객체) argument라는 객체는 함수 안에서 함수의 여러가지 정보를 담고있는 특히 인자의 정보를 담고 있는 객체이다.(사용법이 배열과 유사)함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다. --> 몇 개의 인자가 있는지 알 수 있다, sum()으로 들어온 특정자리수의 값을 알수 있다. function sum(){// 매개변수가 없다. var i, _sum = 0; for(i = 0; i 사용자가 전달한 인자 수 만큼 for문의 루프를 돌린다. document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; } return _sum;}document.w..

클로저 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 1. 내부함수자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.function outter(){// 외부 함수 function inner(){ //내부 함수 var title = 'coding everybody'; alert(title); } inner();}outter();실행결과)coding everybody위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수..

유효범위 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global';// 전역 변수function fscope(){ alert(vscope);}fscope();실행결과)global 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. var vscope = 'global';function fscope(){ var vscope = 'local';// 로컬 변수 alert('함수안 '+vscope);//local}fscope(..

Object Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. var grades = {'test1': 10, 'test2': 6, 'test3': 80};동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.Object의 prototype은 모든 객체의 prototype이 된다.Object가 가지고 있는 prototype는 모든 객체가 사용할 수 있는 기능이다. 즉, 모든 객체가 공통적으로 사용할 기능이 있다면 Object의 prototype으로 지정해 쓸 것이다. 모든 객체가..

prototype 한국어로 원형이다. 자바스크립트는 prototype를 통해 상속 기능을 제공한다. 1. prototype그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra(){}Ultra.prototype.ultraProp = true; function Super(){}Super.prototype = new Ultra(); function ..

상속 1. 상속(inheritance)이란?객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 상속 받은 객체가 부모 객체의 어떠한 기능은 제외하고 어떠한 기능은 추가해서 자신의 맥락에 맞게 부모의 객체의 로직을 재활용하면서 또 그 맥락에 맞는 로직을 제거하거나 추가하면서 재활용할 수 있다. 아래 코드는 이전 시간에 살펴본 코드다.function Person(name){ this.name = name; this.introduce = function(){ return 'My name ..

this vo.) context: 의미가 고정적이지 않고 그것을 사용하는 상황에 따라 의미가 달라질수 있다. 가변적이다this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.this는 함수 안에서 사용할 수 있는 일종의 변수이면서 그 변수안에 값은 그 함수를 어떻게 호출하느냐에 따라서 달라진다. 1. 함수호출함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.function func(){ if(window ..

생성자와 new new를 붙이면 객체가 된다. 1. 객체객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.자바스크립트는 어느 객체지향언어와 같지 않다. 자바스크립트만의 독특한 체계를 가지고 있다. 자바스크립트 계열에 속하는 언어들은 prototypeBased 프로그래밍 언어이다. 자바스크립트 객체 : 전통적인 함수의 특징을 그대로 가지고 있지 않고 객체지향적인 문법 비슷하게 사용하면서 함수형 언어이다. 알면 알수록 난해하다. 하지만 자바스크립트가 추구하는 스타일은 자유롭고 유연하다.엄격성, 규제(자바)가 깐깐하는 것과는 대비된다. 언어를 바라보는 넓어지는 기회로 삼자. var pers..

함수의 호출 자바스크립트에서 함수는 일종의 객체이다. 객체는 속성을 가지고 있다. 그 속성에 값이 저장되어 있다면 속성(프로퍼티)라고 한다. 그 속성에 함수가 있다면 메소드라고 한다. 함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다. function func(){// func라는 이름의 함수는 객체이기 때문에 이 함수는 메소드를 가지고 있다. 이 메소드는 자바스크립트에서 만든 것이기 때문에 내장된 객체이다. }// func라는 이름의 함수를 정의하면 func.apply/func.call(객체.메소드)--> func라는 함수(객체)를 호출하는 역할을 한다.func();JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서..