SH's 개발일기

* hide(), show(), toggle() 함수 ** size 와 opacity 변함 $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); - speed 는 millisecond 나 혹은 "slow", "fast" $(document).ready(function(){ // #hide1 버튼이 click 되면 #p1 을 hide() // #show1 버튼이 click 되면 #p1 을 show() $("#hide1").click(function(){ $("#p1").hide(); }); $("#show1").click(function(){ $("#p1").show(); }..

* 다양한 이벤트 함수들 1. 마우스 관련 이벤트 - click ( ↓,↑ / 왼쪽 버튼만) - dblclick (왼쪽 버튼만) - mousedown (↓ 모든 버튼) - mouseup (↑ 모든 버튼) - mouseenter 마우스 올려놓으면 - mouseleave 마우스 올려져 있다가 나가면 2. 키보드 관련 이벤트 - keydown - keypress (keydown과 비슷: ALT, CTRL, SHIFT, ESC 등의 키에는 동작 안함 ) - keyup 3. 폼 관련 이벤트 - submit - change - focus - blur 4. Document/Window 관련 이벤트 - load - resize - scroll - unload * 대부분의 jQuery '이벤트 함수'들이 위 DOM 이벤..

jQuery 란? JavaScript 라이브러리 중 하나입니다. JavaScript 의 프로그래밍을 혁신적으로 단순화 시키고 편리하게 제작가능케 함 가장 널리 쓰이고, 가장 오래 쓰여온 JavaScript 라이브러리로 오늘날 주요 웹사이트는 거의다 jQuery를 사용함. 주요기능) - HTML DOM을 쉽게 다룰수 있다 - CSS를 쉽게 다룰수 있다. - HTML 이벤트 등도 쉽게 다룰수 있다 - 다양한 이펙트와 애니메이션도 쉽게 다룰수 있다. - AJAX를 쉽게 다룰수 있다. - 코드 보안성(?) 쉽게 다룰수 있다 (?) 공식사이트: http://jquery.com/ 모토: write less, do more 일본어: ジェイクエリー 다운로드시 2가지 버젼) 압축된 버젼 : jquery.min.js (배..

■ 동기화 (Synchronous) 방식 request - response 관계 ■ AJAX 1. Asynchronous JavaScript And XML. : 자바스크립트를 활용한 비동기 프로그래밍 : 꼭 XML만 다루지는 않음.. 텍스트, JSON 등 다룰수 있음 2. AJAX는 프로그래밍 언어가 아니다! 3. XMLHttpRequest object 를 사용하여 서버에 request를 보내고 DOM 을 사용하여 화면에 업데이트 한다. ■ AJAX 장점 1. 페이지 로딩 후에도, 서버로부터 데이터 끌고 올 수 있다. 2. 페이지 리로딩 없이, 서버로부터 데이터 끌고 와서 페이지 업데이트 가능 → 페이지 변경시 필요한 네트웍 트래픽(시간, 대역폭) 절약 3. 서버에 데이터 전송이 서버 조작이 가능하다 (..

window 객체에 다음의 함수들이 있다. setInterval(함수, 시간간격) : '시간간격' 으로 '함수' 수행 , ms 단위 : 리턴값은 '애니메이션id' 객체 리턴 clearInterval('애니메이션id') : ''애니메이션id' 의 애니메이션 종료 frame을 0.001초에 한번씩 실행 가로세로 400, 위와 왼쪽으로부터 이동하다가 pos가 350이면 끝

node 를 생성할수 있다. 생성된 노드를 원하는 node 에 붙일수 있다. document.createElement() document.createTextNode() E.appendChild(A) : A를 E의 마지막 child 로 append 된다. E.insertBefore(A, B) : E 의 child 중에 B 앞에 A를 child 로 insert 한다. E.removeChild(A) : E 의 child 중에 A 를 제거한다. - attribute를 세팅 E.setAttribute("attribute 이름", "attribute 값"); - attribute 를 제거 E.removeAttribute("attribute 이름"); - attribute 값 리턴 E.getAttribute("att..

* DOM 에서 node node type (종류)와 nodeType 값 Element node 1 W3Schools Attribute node 2 class = "heading" (deprecated) Text node 3 W3Schools Comment node 8 Document node 9 HTML 문서 자신, 의 부모 DOCUMENT_TYPE_NODE 10 ** 명심! Element node 가 text 를 갖고 있는 것이 아니다!!! JS 로 DOM의 node 간 navigate 할수 있다. - parentNode - childNodes[nodenumber] - firstChild - lastChild - nextSibling - previousSibling - attributes * Text..

- event : ~~할때 - event listener : 위 event 때에 동작하는 함수 * 특정 element에 event listener 를 추가 하는 방법 element.addEventListener("이벤트", 함수) element.on이벤트 = 함수 * 특정 element에 event listener 를 삭제 하는 방법 element.removeEventListener("이벤트", 함수) element.on이벤트 = undefined - Listener로 동작하는 함수는 이벤트 발생 때마다 동작(호출)되는데 - 이때 발생된 이벤트 정보가 담긴 event 객체를 매개변수로 받을수 있다. event.type : 이벤트 타입 event.target : 이벤트가 발생한 객체 DOM 모든 이벤트 h..

■ DOM (Document Object Model) HTML 페이지가 로드 되면 브라우저는 이 HTML 페이지를 다루기위한 DOM을 생성합니다. ■ DOM 은 'W3C 표준' 입니다. - 이는 모든 언어에 오픈된 규약입니다. 즉, JavaScript 외에 다른 언어로도 DOM 표준을 따르는 HTML문서를 다룰수 있다. - 'W3C DOM 표준'은 크게 3파트로 구성 1. Core DOM 2. XML DOM 3. HTML DOM ■ HTML DOM 표준의 목적은 HTML element를 다루기 위한 표준방법을 제시하는 겁니다. ■ JavaScript 는 DOM 구조의 HTML페이지를 다루기 위한 언어입니다. - JS는 DOM 안의 모든 element를 변경할 수 있다. - JS는 DOM 안의 모든 att..

BOM : Browser Object Model (브라우저 객체 모델) JavaScrpt 는 소위 BOM 이라 불리우는 '브라우저 객체 모델' 을 통해 '브라우저' 를 제어 합니다. BOM 은 특별히 '표준' 이 정해져 있는 모델이 아닙니다. 그러나, 오늘날 대부분의 브라우저들이 'JavaScript' 를 통해 그리고 'BOM 의 object 들과 method' 들로 통해 제어되고 있으며 이들 브라우저들이 대체로 같은 이름의 object 와 method 들은 사용하다 보니 BOM 이 마치 '표준'처럼 여겨져 사용되고 있습니다. (사실, 브라우저마다 조금씩 다르게 구현된 부분도 있습니다) BOM 의 object 계층은 다음과 같습니다. window ├─ document ├─ screen ├─ locatio..