ITC 출판사의 웹사이트 최적화 기법 - UI 개발자를 위한 필수 지침서 위 책을 보면서 몇가지 괜찮은 것들을 알게 되었네요. (이미 알고 있거나 애매한 부분들에 대한 정리가 되어 좋았습니다.) 그 중 몇가지를 아래 소개합니다. 좀더 자세한 내용은 책을 참고하면 좋을 듯 하네요. 1. StyleSheet는 헤더에 넣어라. display가 되기 전에 해당 스타일이 지정이 되어야 한다. 만약 display가 된 이후 스타일이 지정이 되면 화면이 재 로딩이 되어야 하기 때문에 그만큼 리소스가 낭비된다. 2. JavaScript는 아래에 넣어라. function안에 존재 하지 않는 JavaScript 함수와 변수는 페이지가 로딩되면서 바로 호출이 된다. 따라서 페이지가 로딩되면서 호출되는 JavaScript가 ..

constructor는 객체를 만드는 기능함수를 반환하거나 설정을 하는 메소드이다. 아래와 같이 어떤 함수에 대해 function A() { document.writeln("a함수"); } document.writeln(A.constructor); 호출한 결과는 아래와 같다. function Function() { [native code] } constructor는 객체를 만드는 기능 함수를 반환하므로 object로 된 JavaScript의 모든 요소들이 다 가지고 있다. 예를 들어 아래와 같이 Object를 생성하게 되면 var a = new Object(); document.writeln(a.constructor); 호출한 결과는 아래와 같다. function Object() { [native cod..

자바스크립트에 메소드 오버로딩이 없는 것과 마찬가지로 클래스 상속 또한 없다. 하지만 구현은 가능하다. JSON의 창시자로, JavaScript The Good parts의 저자로 유명한 Douglas Crockford가 구현한 소스이다. 원글 : http://javascript.crockford.com/inheritance.html 이 소스의 분석을 시작하기 전에 먼저 말해야 할 것이 있다. 이 코드를 제안한 Crockford 마저 버린 소스라는 것이다. -ㅅ-;;; 프로토타입적이고 함수적인 JavaScript의 소스에서 클래스 상속을 구현하긴 했지만 실제로 자신조차 사용하질 않는다고 말미에 달아놓은 소스이다. 하지만 JavaScript를 공부하기엔 좋은 예제이다. 이 소스를 이해하게 되면 protot..

기본 데이터 형식 JavaScript에는 데이터 형식으로 아래의 형식이 있다. 기본 형식 String Number Boolean 합성(참고) 형식 Object Array 특정 형식 null undefined이중 null과 undefined라는 특정 형식이 늘 사람을 혼란스럽게 만든다. null null은 보통 객체 타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다. null은 다른 모든 값들과 구분되는 고유한 값이다. 어떤 변수가 null값을 가지면 그 변수는 기본 형식(String, Number, Boolean)이나 합성 형식(Object, Array)의 값을 담고 있지 않다는 것을 의미한다. 따라서 어떤 변수의 값을 초기화 하고 싶을 경우엔 null을 사용한다. var a = "문자..

JavaScript는 메소드 오버로딩이 없다. 매개변수의 갯수나, 속성, 리턴값의 일치여부를 체크하지 않는다. 함수를 선언하고 해당 함수가 호출되기 전 동일 네임의 함수가 다시 선언되는 경우 그대로 덮어쓴다. 하지만 메소드 오버로딩의 구현은 가능하다. 이를 구현한 소스가 있다. 자바스크립트의 전도사로, jQuery의 개발자로 유명한 John Resig의 소스이다. 원글 : http://ejohn.org/blog/javascript-method-overloading 아래와 같다. // addMethod - By John Resig (MIT Licensed) function addMethod(object, name, fn){ var old = object[name]; object[name] = functio..

JavaScript로 구현한 소스 중 눈에 띄는 소스를 소개합니다. jQuery를 이용한 fisheye menu : http://www.ndesign-studio.com/blog/design/css-dock-menu/ JavaScript만을 이용한 fisheye menu : http://eudock.jules.it/index-eudock2.0.php 정말 멋진 JavaScript 소스 중 하나. 현재 이 블로그의 아래에 달린 RSS 구독 아이콘에 적용된 것이 바로 fisheye menu 입니다. 아이콘의 출처 : http://krang.tistory.com/378

prototype 속성은 객체에 새로운 속성이나 메소드를 추가할 때 사용한다. 그냥 추가하면 되는데 왜 prototype이란 개념이 있을까? '함수의 호출 - 3. 생성자 호출 패턴'에서 사용한 호출 구문을 보자. var A = function(string) { this.aValue = string; this.getValue = function() { return this.aValue; } } var a = new A("a의 값"); document.write(a.getValue()); 예제1. 생성자 A는 aValue라는 속성과, getValue라는 메소드를 가지고 있다. 위에서 선언한 A 생성자를 prototype을 이용하면 다음과 같다. var A = function(string) { this.aV..

브라우저는 처음 호출된 페이지의 반복성 파일들(image파일, js, css파일)을 사용자의 로컬 디스크에 임시 인터넷 파일로 저장하고 재 호출시에 저장된 파일을 불러들여 사용하게 된다. 매번 같은 파일을 다운로드해야하는 불편함을 줄여주는 좋은 기능이지만 만약 js파일이 시시각각 달라지는 내용을 담고 있는 경우 호출을 어떻게 해야할까? 이런 경우 파일의 뒤에 요청하는 파라메터의 값을 매번 바꾸어주면 된다. 위의 코드가 너무 길다면 아래와 같이 써도 무방하다. "); d라는 이름의 파라메터로 매번 변하는 시간을 값으로 요청을 하면 매번 브라우저는 js파일을 새롭게 갱신하게 된다. 굳이 파라메터의 이름이 d일 필요는 없다. 주의해야 하는 점은 위와 같이 사용한 경우 아래와 같이 브라우저는 인식하게 된다. 따..