Kendrick's Blog

클라이언트 탐지모든 브라우저가 공통 기능을 지원하지 않습니다. 브라우저 사이의 차이로 인해 발생되는 혼란스러운 점이 너무 많아서 개발 전략에 빼놓을 수 없는 중요 파트입니다.클라이언트 탐지보다는 일반적인 솔루션이 있다면 그걸 사용해야 하며, 지원되지 않는 부분을 메꾸기 위한 용도로 사용하시기 바랍니다.기능 탐지클라이언트 탐지중 가장 널리 쓰이는 방법입니다. 브라우저 자체에 대한 지식은 불 필요하며, 기능의 존재 여부에 따라 해결책을 찾을 수 있습니다.function getElement(id){ if(document.getElementById){ return document.getElementById(id); }else if (document.all){ return document.all[id]; }els..

브라우저 객체모델 브라우저 객체 모델(BOM)은 웹에서 사용하는 자바스크립트의 핵심입니다. 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. 제대로 된 명세가 없는 기간이 너무나 길어서 제조사별로 BOM이 확장되서 좋은 점도 있지만 문제도 많았습니다. 그런 이유로 현재도 표준화를 하고 있으며 이제 HTML5명세에서 BOM의 주요 부분을 다루고 있습니다. window 객체 브라우저 인스턴스입니다. 브라우저 창의 자바스크립트 인터페이스 구실을 하며, ECMAScript Global 객체로 기능하기도 합니다. 즉 웹페이지에서 정의하는 모든 객체, 변수, 함수에서는 window가 Global객체 구실을 하며, window에 정의된 parseInt()등의 메서드를 이용합니다. 전역 스코프 Glob..

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

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

이번 포스트에서 알아볼 참조타입들원시타입이 아닌 참조 타입은 여러 종류가 있습니다. 이번 포스트는 각종 참조 타입의 설명과 참조 타입별로 지원하는 메서드를 정리해놓은 포스트입니다. 포스트를 시작하겠습니다.참조 값(객체)이란특정 ‘참조 타입’의 인스턴스 입니다. 참조 타입을 ‘클래스’라 부르는데 이는 잘못된 표현입니다. 비슷하긴 하지만 다른 개념이며, 참조 타입은 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점 때문에 객체 정의 라고 불리기도 합니다. 객체를 생성할 떄는 new 연산자를 사용합니다.var person = new Object(); 이 코드는 Object에 기본 프로퍼티와 메서드만 가진 단순한 객체를 생성합니다.Object 타입Object는 많은 기능이 들어있지 않지만 데이터 저장및 전송에..

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

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

함수함수에 대하여자바스크립트에서 함수는 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..

문장제어문에 대해서 알아봅시다.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..

연산자연산자는 계산연산자, 비트연산자, 관계연산자, 일치 연산자 등이 있습니다. 폭 넓은 데이터를 조작할 수 있으며, 객체에 연산자를 적용하면 일반적으로 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..

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

키워드와 예약어키워드키워드는 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰입니다. 이런 기능들이 정의되어 있기 때문에 식별자나 프로퍼티 이름으로 사용할 수 없습니다. *이 붙은 키워드는 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 -..