본문 바로가기

프로그래밍/자바스크립트(javascript)

(17)
[자바스크립트/javascript] 클라이언트 탐지, 기능탐지, 퀵스 탐지 브라우저 제조사들이 공통 인터페이스를 구현하기 위해 노력하긴 하지만 브라우저마다 기능과 단점이 있을 수 밖에 없습니다. 여러 플랫폼에서 동작하는 브라우저는 종종 플랫폼별로, 심지어는 기술적으로 같은 버전인데도 서로 다른 문제를 갖고 있습니다. 이러한 차이 때문에 웹 개발자들은 모든 브라우저에서 공통인 최소한의 기능만 이용하여 디자인하거나 다양한 클라이언트 탐지 방법을 통해 제한점을 우회하여 개발합니다. 클라이언트 탐지는 웹 개발에서 가장 고민이 많은 주제입니다. 모든 브라우저가 공통 기능을 지원한다면 이 주제는 논란거리가 대부분 사라질 겁니다. 브라우저 사이의 차이와 혼란스러운 점이 너무 많아서 클라이언트 탐지는 보험처럼 만약을 대비한 수단일 수도 있지만 개발 전략에서 빼놓을 수 없는 중요 파트입니다. ..
[자바스크립트/javascript] 브라우저 객체 모델 - location, navigator, screen, history 객체 location 객체 location은 BOM에서 가장 유용한 객체 중 하나입니다. location 객체는 현재 창에 불러온 문서 정보와 함께 일반적인 내비게이션 기능을 제공합니다. location 객체는 window의 프로퍼티인 동시에 document의 프로퍼티 입니다. window.location과 document.location은 같은 객체를 가리킵니다. location는 현재 문서에 대한 정보를 갖고 있으며 URL을 파싱해서 몇 가지 조각으로 분리해 각각을 프로퍼티로 저장합니다. 프로퍼티 이름 예 제 설 명 hash "#contents" # 기호 다음에 문자가 오는 형태의 URL 해시, URL에 해시가 없다면 빈 문자열 입니다. host "localhost:8080" 서버 이름과 포트번호입니다. ..
[자바스크립트/javascript] 브라우저 객체 모델, 전역스코프(window), 시스템대화상자(alert, prompt, confirm) 브라우저 객체 모델(BOM)은 정말로 웹에서 사용하는 자바스크립트의 핵심입니다. BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. 제대로 된 명세가 없는 기간이 너무나 길었기에 브라우저 제조사들은 자신들이 원하는대로 확장했고, 이는 많은 문제가 발생하였습니다.브라우저 사이의 공통점이 사실상의 표준이 되고 브라우저 개발 목적은 거의 상호작용성에 치중하게 되었습니다. 이제 HTML5 명세에서 BOM의 주요 부분을 다루며 W3C는 브라우저에서 동작하는 자바스크립트에서 가장 기본적인 부분 중 하나에 대해 표준화 방법을 찾고 있습니다. Window 객체 BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있습니다.window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고..
[자바스크립트/javascript] 함수 표현식, 클로저 함수 표현식은 자바스크립트에서 가장 강력하면서도 혼란스러운 부분 중 하나입니다. 함수를 선언하는 방법은 함수 선언과 함수 표현식 두가지입니다. 첫 번쨰 방법인 함수 선언은 다음과 같이 function 키워드 다음에 함수 이름을 쓰는 형태입니다. function functionName(arg0, arg1, arg2) { // 함수 본문 } 파이어폭스와 사파리, 크롬, 오페라는 모두 함수에 비표준 프로퍼티인 name을 지원합니다. 이 값은 function 키워드 다음에 쓴 함수 이름과 항상 일치합니다. function functionName(arg0, arg1, arg2) { // 함수 본문 } console.log(functionName.name); // "functionName" 함수 선언에서 가장 뚜렷..
[자바스크립트/javascript] 상속 (프로토타입 체인, 생성자 훔치기, 기생 상속) 상속은 객체지향 프로그래밍과 관련하여 가장 자주 설명하는 개념입니다. 대부분의 객체지향 언어는 메서드 시그너치만을 상속하는 인터페이스 상속과 실제 메서드를 상속하는 구현 상속 두 가지 타입을 지원합니다. 프로토타입 체인 프로토타입 체인의 기본 아이디어는 프로토타입 개념을 이용해 두 가지 참조 타입 사이에서 프로퍼티와 메서드를 상속한다는 것입니다. 모든 생성자에는 생성자 자신을 가리키는 프로토타입 객체가 있으며 인스턴스는 프로토타입을 가리키는 내부 포인터가 있습니다. 프로토 타입 체인을 구현하려면 다음 코드 패턴을 사용합니다. function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { retur..
[자바스크립트/javascript] 객체 (Object) , 프로퍼티, 팩터리 패턴, 생성자 패턴, 프로토타입 패턴, 기생 생성자 패턴, 방탄 자바스크립트는 객체를 "프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시 값이나 객체, 함수를 포함한다"라고 정의합니다.객체가 측별한 순서가 없는 값의 배열이란 의미 입니다. 객체를 만드는 가장 단순한 방법은 Object의 인스턴스를 만들고 여기에 프로퍼티와 메서드를 추가하는 방법이다. var person = new Object(); person.name = "Nick"; person.age = 29; person.job = "software Engineer"; person.sayHo = function() { console.log(this.name); } person 이라는 객체를 만들고 name, age, job 세가지 프로퍼티가 있고 sayHo() 이란 메서드가 있습니다.초기 자바사크립트 개발자들..
[자바스크립트/javascript] 내장된 싱글톤 객체 ( Global 객체, eval() 메서드 , Math 객체 ) 내장 객체는 자바스크립트 프로그램이 실행되는 즉시 이미 존재하며 개발자가 내장 객체를 명시적으로 인스턴스화 할 필요 없다는 것입니다. Global 객체 Global 객체는 명시적으로 접근할 수 없다는 점에서 자바스크립트에서 가장 독특한 객체입니다. Global 객체를 소유자가 없는 모든 프로퍼티와 메서드를 담는 객체로 정의합니다. 전역 변수나 전역 함수라는 것은 존재 하지 않습니다. 전역에서 정의한 변수와 함수는 모두 Global 객체의 프로퍼티가 됩니다. encodeURI()와 encodeURIComponent() 메서드는 브라우저에 전달한 URI를 인코드하는 메서드입니다. 유효한 URI는 공백문자 등의 일부 특수 문자를 포함할 수 없습니다. URI 인코딩 메서드는 특별한 UTF-8 인코딩을 써서 UR..
[자바스크립트/javascript] 원시 래퍼 타입 ( Boolean, Number, String ) Boolean, Number, String 은 원시 값을 편리하게 조작하기 위해 디자인된 참조타입입니다. 볼리언 타입 Boolean 타입은 볼리언 값에 대응하는 참조 타입입니다. Boolean 객체를 생성하려면 다음과 같이 Boolean 생성자에 true 나 false 를 넘깁니다. Boolean 인스턴스는 원시 값 true나 false를 반환하도록 ValueOf() 메서드를 오버라이드합니다. toString() 메서드 역시 문자열 "true" 나 'false" 를 반환하도록합니다. 하지만 Boolean 객체에는 혼란스러운 점이 있어 자주 쓰지 않습니다. var falseObject = new Boolean(false); var result = falseObject && true; console.log(..