CategoryJavaScript (27)

10. DOM - Document Object Model - API

DOM문서 객체 모델은 HTML, XML문서에 대한 API입니다. 문서의 노드를 계층 구조 트리로 표현하고 있습니다. 개발자는 이를 추가, 제거, 수정 할 수 있습니다.노드의 계층 구조아래 HTML을 봅시다. Sample Page Hello World! 위 HTML을 계층 구조로 보면 아래와 같습니다문서 노드의 자식은 html 하나 뿐인데 이를 문서 요소라고 합니다. 문서 하나에 문서 요소하나만 있을 수 있습니다. XML은 미리 지정된 문서 요소가 없으며 어떤 요소든 문서 요소가 될 수 있습니다.각 마크업은 트리에서 노드로 표현되며 HTML 요소들은 요소 노드로, 속성은 속성 노드로, 문서 타입은 문서 타입 노드로, 주석은 주석 노드로 표현됩니다. 이렇게 총 12가지 노드 타입이 있으며 이에 대해서 알아..

[ETC] highlight.js for HarooPad and Markdown-Here

highlight.js? 자바스크립트로 만들어진 코드 구문 강조 라이브러리 입니다. 거의 모든 마크업에서 작동하고 자동 언어 감지 기능을 가지고 있습니다. 공식사이트 꾸준히 업데이트가 이루어 지고 있습니다. (Language, Style 등) 라이브러리이기 때문에 어디든 추가 하여 사용 가능합니다. 하지만 이 포스트는 설치가 아닌 하루패드와 Markdown-Here에 대해서 다루고 있으므로 설치 관련해서는 아래 블로그를 참조 부탁드리겠습니다. WEBDRI - highlight.js 하루패드, Markdown-Here에서의 Highlight.js 하루패드와 Markdown-Here는 모두 코드 구문강조를 지원하며, 둘 다 Highlight.js 라이브러리를 사용하고 있습니다. 하루패드 코드 구문 강조 문서..

7. 자바스크립트 - 함수 선언식, 함수 표현식

함수 표현식5장에서 설명한 것과 같이 함수를 정의하는 방법은 함수 선언과 함수 표현식이 있습니다. 함수 선언식에 대해서 간단하게 알아본 후에 함수 표현식에 대해서 알아보겠습니다.함수 선언식functionName(); function functionName(arg0, arg1, arg2){ alert("hi"); } 함수 선언에서 뚜렷한 특징은 함수 선언 끌어올림 입니다. 함수 선언부를 다른 코드보다 먼저 읽고 실행한다는 뜻 입니다. 그렇기 때문에 위에 예제에서 함수 선언 전에 functionName()을 호출해도 정상적으로 동작하게 됩니다.함수 표현식일반적인 변수 할당과 비슷합니다.functionName(); //오류 발생 - 함수가 존재하지 않습니다. var functionName = function(..

6. 자바스크립트 - 객체 지향 프로그래밍

객체 지향 프로그래밍ECMAScript는 클래스라는 개념이 없습니다. 따라서 ECMAScript의 객체는 다른 클래스 기반 언어와 다릅니다.이번 포스트에서는 자바 스크립트에서 어떻게 객체 지향 프로그래밍을 구현하는지 배워봅시다.객체에 대한 이해객체에 대해 설명을 시작하기 전에 객체를 만드는 방법 부터 한번 보고 갑시다.var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name); } 위와같이 객체를 생성 후 프로퍼티와 함수를 추가해 주었습니다. 이 예제는 객체 리터럴 표기법을 이용하여 아래와 같이 수..

4.2 자바스크립트 - 가비지컬렉션(Garbage Collection)

가비지 콜렉션자바스크립트도 자바와 마찬가지로 코드 실행 중 메모리를 관리합니다. C나 C++같은 언어는 프로그래머가 직접 메모리를 관리해 줘야 하며, 이는 매우 골치아픈 작업입니다. 자바스크립트 같은 가비지콜렉션을 지원하는 언어는 필요한 메모리를 자동 할당하고, 더 이상 사용하지 않는 메모리를 자동으로 회수합니다.원리간단합니다. 더 이상 사용하지 않을 변수를 찾아내서 해당 변수가 차지하는 메모리를 회수합니다. 이 프로세스는 주기적으로 실행되며, 특정 시점에서 메모리를 회수하게 할 수도 있습니다.사용여부 판단은?그렇다면 어떻게 사용여부를 판단할 수 있는 걸까요? 사용여부 판단을 위해서 표시하기 지우기, 참조 카운팅 두 가지 중 하나의 방식을 사용합니다. 참조 카운팅은 순환참조 등에 문제가 있기때문에 일반적..

4.1 자바스크립트 - 실행 컨텍스트와 스코프 (Execution Context, Scope)

시작하기 전어찌해야 간결하고 이해하기 쉽게 작성할지 고민이 많았었습니다. 다시 About Javascript 카테고리 포스트 관련하여 공부한 내용 중 정리가 된 부분들을 작성해보도록 하겠습니다.실행 컨텍스트/스코프에 대해 배우기 전아래 요소에 대해서 먼저 설명을 합니다. 이부분을 이해하고 다음 실행 컨텍스트/스코프 섹션을 들으시면 이해에 도움이 되실겁니다.원시값참조값동적 프로퍼티값 복사매개변수타입판별원시값과 참조값변수에는 원시값과 참조값을 담을 수 있습니다. 원시값은 Undefined, Null, 불리언, 숫자, 문자열인 값입니다. 참조값은 메모리에 저장된 객체입니다.자바스크립트는 메모리 위치에 직접 접근하는 것을 허용하지 않으며, 객체를 조작한다는 것은 객체 자체가 아니라 해당 객체에 대한 참조를 조작..

3.6 자바스크립트 기초 - 함수

함수함수에 대하여자바스크립트에서 함수는 function 키워드로 정의하며 그 뒤에 매개 변수와 함수 본문을 순서대로 씁니다.function sayHi(name, message) { console.log("Hello " + name + ", " + message); } ECMAScript의 함수는 꼭 값을 반환하지 않아도 됩니다. 모든 함수는 언제든 return 문 뒤에 반환할 값을 써서 값을 반환할 수 있습니다.function sayHi(name, message) { console.log("Hello " + name + ", " + message); return ; console.log("JB"); } 함수는 return문을 만나는 즉시 종료됩니다. 그렇기 때문에 JB라는 문자열을 출력하는 console..

3.5 자바스크립트 기초 - 문장(제어문)

문장제어문에 대해서 알아봅시다.if문프로그래밍에서 제일 많이 쓰이는 제어문입니다. if (condition) statement1 else statement2 condition(조건)에는 어떤 표현식이든 쓸 수 있습니다. ECMAScript에서 자동으로 해당 표현식 겨로가에 Boolean()함수를 호출해 불리언 값으로 변경하기 때문입니다. condition이 true라면 statement1이 실행되며, false라면 statement2가 실행됩니다. 만약 statement가 한줄이라면 코드블록으로 감싸지 않아도 되지만, 항상 코드 블록을 쓰길 권장하고 있습니다. var i = 24; if (i > 25) { console.log("Greater than 25.") } else if (i < 0) { con..

3.4 자바스크립트 기초 - 연산자

연산자연산자는 계산연산자, 비트연산자, 관계연산자, 일치 연산자 등이 있습니다. 폭 넓은 데이터를 조작할 수 있으며, 객체에 연산자를 적용하면 일반적으로 valueOf()나 toString()메서드를 먼저 호출 해 해당 연산자가 조작할 수 있는 값을 얻습니다. 데이터를 다루는 여러 연산자에 대해서 알아보겠습니다.단항연산자단 하나에 값에만 적용되는 연산자입니다. ECMAScript에서 가장 단순한 연산자입니다.증감연산자피연산자에 ++ 혹은 —를 추가하여 사용할 수 있습니다.var age = 15; var number = 15; console.log(age++); //15 console.log(age); //16 console.log(++number); //16 console.log(number); //16..

3.3 자바스크립트 기초 - 변수, 데이터타입

변수, 데이터타입변수ECMAScript는 느슨한 변수 타입을 사용합니다. 변수에 어떤 타입의 데이터라도 저장할 수 있다는 의미입니다. 변수를 정의할 때는 var 연산자 다음에 변수 이름을 씁니다. var는 키워드이며 변수 이름은 식별자입니다.var message; message라는 변수를 정의하였으며 이 변수에는 어떤 값이든 할당 할 수 있습니다. 변수를 초기화 하지 않으면 undefined가 할당되게 됩니다.초기화는 아래와 같이 할 수 있습니다.var message = "hi"; 변수 선언과 동시에 문자열값 hi를 저장하였습니다. 이를 초기화라고 합니다.변수에 값을 지정했다고 변수 타입이 고정이 되는것은 아닙니다.var message = "hi"; message = 100; 위와같이 문자열에서 숫자형으..

3.2 자바스크립트 기초 - 키워드와 예약어

키워드와 예약어키워드키워드는 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰입니다. 이런 기능들이 정의되어 있기 때문에 식별자나 프로퍼티 이름으로 사용할 수 없습니다. *이 붙은 키워드는 5판에서 추가된 키워드입니다.- break - case - catch - continue - debugger* - default - delete - do - else - finally - for - function - if - in - instanceof - new - return - switch - this - throw - try - typeof - var - void - while - with 예약어예약어는 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해 둔 것입니다.- abstract -..

3.1 자바스크립트 기초 - 문법

문법ECMAScript의 문법은 C, JAVA, Perl등 C와 비슷한 언어에서 차용한 것입니다. 이미 위 언어들에 익숙한 개발자들은 다소 느슨한 ECMAScript문법이 매우 쉽게 느껴지실 겁니다.대소문자 구분어디서든 대소문자를 구별합니다. test와 Test는 다른변수입니다. typeof 같이 이미 지정되 키워드는 변수명 등으로 사용 할 수 없으나, typeOf는 사용 할 수 있습니다.식별자변수 함수, 프로퍼티, 함수 매개변수의 이름을 식별자로 부릅니다.첫 번째 문자는 반드시 글자, 밑줄(_), 달러기호($) 중 하나여야 합니다.첫 번째 이후 문자는 글자, 밑줄, 달러기호, 숫자를 자유롭게 쓸 수 있습니다.카멜케이스(낙타표기법)식별자는 관습적으로 카멜케이스로 씁니다. 카멜케이스란 첫번째 글자는 소문자..