SH's 개발일기

■ 동기화 (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..

* form validation (폼 검증) - form 데이터를 서버에 제출(submit) 하기 전에 클라이언트에서 1차적으로 값의 유효성을 체크해주는게 좋다. - 이때 JavaScript 를 사용하여 검증합니다. ex) - '필수 항목'들은 입력이 되었는지? - 숫자만 입력하는 경우 숫자로만 입력되었는지? - n글자 이상이 입력되었는지? - checkbox 의 경우 n개 이상이 체크 되었는지? - 특정포맷 (이메일, url 등..) 으로 입력되었는지? * 의 onsubmit 이벤트 처리 코드 : true 를 return 하면 정상적으로 submit 됨 : false 를 return 하면 submit 안됨 ★주의! 안의 에 type을 특별히 명시 안하면 submit 버튼으로 작동한다! - focus()..

JavaScript 로 다양한 form element 들의 '값을 가져 올수도' 있어야 한며, 반대로 '값을 입력해야 할수도' 있다. JavaScript 는 form element 들을 접근할수 있는 다양한 방법들을 제공한다. (특히 name 값 활용!) ★ form 에서 읽어온 값은 무조건 string 이다! * 객체 가져오기 1. 일반적인 input 값 .value 2. checkbox 의 값 .checked 로 판단 3. checkbox 동일 name 이 여럿인 경우 4. radio : 이 또한 동일 name 으로 구성. 3. 과 유사. 5. : 단일 .value 사용 result += "좋아하는차1: " + frm['cars'].value + " "; 6. : multiple 3. 과 유사 .se..

* Javacript JavaScript 는 client(브라우저)에서 구동되는 스크립트 프로그램. 주로 HTML 페이지 내의 element 들의 동적인 변화, 폼 데이터 검증, 브라우저 제어, AJAX 등에 사용. HTML element 에 접근 할때는 id, class, name, tag명 을 통해서 접근가능. JavaScript 를 HTML 에 적용하는 방법 3가지 1. inline 방식 : 태그의 onxxx 속성(이벤트) 값으로 JavaScript 코드 동작. 2. internal 방식 : 태그 안에 JavaScript 코드 기입 3. external 방식 :