Dev. Language/Javascript (26) 썸네일형 리스트형 네이버 오픈 API 활용 예제(검색) 파일 참조하시면 됩니다. 이클립스 3.4.2 ganymede 버전으로 작업했습니다. (그래서 DOCTYPE 등이 미리 정의되어서 나옵니다. 굉장히 편하죠) 드래그 앤 드롭 예제) 위치 지정과 이동 + 프로퍼티 position 값 : relative, absolute, static, inherit, fixed 대부분의 엘리먼트에는 static이 기본값으로 설정되어 있다. 따라서 static으로 지정된 엘리먼트는 페이지 내에서 차례대로 그 위치가 결정된다. 즉, 먼저 위치한 엘리먼트에 따라 현재 엘리먼트의 위치가 결정된다. relative는 static의 위치에서 지정된 offset 만큼 떨어진 위치에 놓는 방식이다. absolute는 엘리먼트의 위치를 절대값으로 지정하기 때문에 다른 엘리먼트에 영향을 받지 않는다. 즉, 다른 엘리먼트와 겹쳐서 위치 시키는 것도 가능해진다. fixed는 absolute와 비슷하며 특정 시야각에서 상대적인 위치에 엘리먼트를 놓는다는 점이 다르다. 주로 사용하는 것은 a.. DHTML : style 프로퍼티 프로퍼티로서의 style 개념은 마소에서 처음 제안했고 이를 W3C에서 채택하여 DOM 레벨 2 CSS 모듈에 포함되었다. W3C DOM을 통해서 모든 노드가 관련 style 객체를 프로퍼티로 가질 수 있게 되었다. 따라서 style 프로퍼티를 갖는 모든 객체를 자바스크립트를 사용해서 변경할 수 있게 된 것이다. 예) element.style.color = "#FFF"; 이 방법을 사용하면 유효한 XHTML 객체에 CSS2 속성을 적용할 수 있다. 예제) 여러 개의 CSS 속성을 변경하는 방법 function changeElement() { var div = document.getElementById("div1"); div.style.backgroundColor = "#F00"; div.style.wid.. 일회용 객체 객체지향에서는 객체 인스턴스를 여러 개 생성하여 다양한 목적으로 활용할 수가 있다. 그러나 가끔 단 하나의 객체만 필요한 경우가 있다. Prototype Ajax 라이브러리에서는 이러한 일회용 객체를 많이 사용한다. + 참고 ; 자바에서는 Singleton 패턴을 사용하여 단 하나의 객체만 뽑을 수 있다. (디자인패턴 참조) 일회용 객체를 생성하는 방법 중 하나는 프로퍼티와 메소드들로 구성된 연관 배열을 생성해 변수에 배정하는 것이다. var oneOff = { variablea : "valuea", variableb : "valueb", 생성자 체인과 상속 상속은 다른 객체의 메소드와 프로퍼티를 새로운 객체에 병합시키는 것이다. 이는 클래스 기반 개발의 근간이다. 새로운 클래스가 다른 클래스로부터 상속받은 기능 중 일부를 재정의할 수 있기 때문이다. 자바스크립트도 1.3 버전부터 apply와 call 함수를 이용하여 이를 흉내낼 수 있게 되었다. apply와 call 메소드를 사용하면 다른 객체의 컨텍스트 내에서 메소드를 적용하거나 호출할 수 있다. 자식 객체 생성자 안에서 사용하면 부모 객체의 모든 프로퍼티와 메소드를 상속받도록 생성자들을 연결시킨다. 두 메소드는 전달되는 인자만 다르고 동작 방식은 같다. obj.call(this, arg1, arg2, ..., argn); obj.apply(this, arguments); call 메소드에서는 첫 번째 .. 객체 캡슐화 사용자 정의 객체가 페이지 객체를 캡슐화하면 외부에 구현 부분이 드러나지 않도록 할 수 있다. 캡슐화를 지원하는 라이브러리를 사용하면 메소드를 호출하는 것만으로 투명도를 변경할 수 있다. 이러한 라이브러리를 사용하면 브라우저에서 구현 방식이 바뀌더라도 객체 캡슐화가 그러한 변화에 대응해준다. 이로써 세련된 동적 인터랙티브 프로그램을 더욱 손쉽게 만들 수 있다. 즉, 브라우저의 구현 방식이 바뀌더라도 프로그램을 변경할 필요가 없는 것이다. 그리고 브라우저의 지원 여부를 매번 검사할 필요도 없다. 검사는 객체를 생성할 때 자동으로 하게 된다. 예제) 자바스크립트의 객체 캡슐화 동작 방식 설명) 위 예제에서는 메소드들을 객체 안에서 직접 구현하지 않고 외부에 별도의 함수로 구현했다. 이러한 방법은 크로스 브라.. 객체 탐지 객체 탐지를 사용하면 자바스크립트가 조건문에서 탐지된 객체에 접근한다. 예전 스크립트에서 많이 사용한 document.all을 검사하면 브라우저가 IE 4.x 버전 모델을 지원하는지를 알 수 있다. 그리고 document.layers를 검사하면 넷스케이프 네비게이터 4.x 버전 모델을 지원하는지 여부를 알 수 있다. 현재 사용되는 모든 브라우저는 매우 일관성 있는 모델을 지원한다. 즉, 모든 브라우저가 document.getElementById를 지원하며, 이는 특정 엘리먼트에 접근하는데 있어 매우 중요하다. 또한 엘리먼트의 CSS 스타일 프로퍼티들을 바꾸는 style 프로퍼티도 모든 브라우저가 지원한다. 예제에서는 opacity를 잠시 다뤄보도록 하겠다. + 참고 엘리먼트의 투명도는 opacity를 사.. 이전 1 2 3 4 다음