클라이언트/JavaScript (49) 리스트형 [자바스크립트(JavaScript)] Axis // Axis(Traversing) - 본인을 기준으로 주변의 요소(부모, 자식, 형제)를 검색하는 도구 - 자식 태그 - childNodes: 자식 노드들 - firstChild; 첫 번째 자식 노드 > me.childNodes[0]; - lastChild> 마지막 자식 노드 > - 바로 위의 형제 ~ previousSibling ~ previousElementSibling - 바로 밑의 형제 ~ nextSibling ~ nextElementSibling - 자식 Axis 할아버지 큰아버지 사촌 아버지 큰형 조카 작은형 나 큰애 둘째 손자 막내 동생 막내동생 조카 작은아버지 사촌 Axis 할아버지 큰아버지 사촌 아버지 큰형 조카 작은형 나 큰애 둘째 손자 막내 동생 막내동생 조카 작은아버지 사촌 - 손.. [자바스크립트(JavaScript)] DOM // DOM, Document Object Model > 돔 - BOM을 개선한 모델 - 현재까지 계속 사용(주력) - BOM 기반 + 기능 추가 - DOM > BOM 확장 > DOM의 모든 기능을 BOM의 document 내부에 구현해놨다. - 모든 태그를 인식 > 모든 태그 조작 가능 - name, id, class 모두 인식할 수 있다.(name 비권장) - 버전이 있다. (DOM Level 1 > DOM Level 2 > DOM Level 3) ~ DOM Level 0: BOM을 일컫기도 한다. - 태그 검색 1. id 검색 > document.getElementById('id') 2. class 검색 > document.getElementByClassName('id') 3. name 검색 > d.. [자바스크립트(JavaScript)] 타이머 // 타이머, toLocaleTimeString - 타이머 생성 1. setTimeout(함수, 시간) - 일회성 타이머 2. setInterval(함수, 시간) - 반복성 타이머 - 타이머 종료 1. clearTimeout(id) 2. clearInterval(id) 타이머 [자바스크립트(JavaScript)] 메시지 박스 // 메시지 박스, 대화 상자(Dialog Box) 1. void alert(message): 메시지 전달용 2. boolean confirm(message): : 메시지 전달용(선택) ----------------------------- 3. string prompt(message, value): - alert - confirm - prompt [자바스크립트(JavaScript)] Collection // 내장 배열(컬렉션) - 문서 코드를 기반으로 자동 생성되는 배열을 제공한다. 1. window.document.images: 문서 내의 모든 태그 2. window.document.links: 문서 내의 모든 태그 3. window.document.anchors: 문서 내의 모든 태그 4. window.document.forms: 문서 내의 모든 태그 5. window.document.forms[index].elements: 특정 태그 내의 모든 입력 태그 6. window.document.forms[index].select.options: 태그 7. window.document.all: 문서상의 모든 태그: 비표준(MS) // links 링크 네이버 확인 // images 이미지 // forms .. [자바스크립트(JavaScript)] BOM(Window, Screen, Location, History) // window 객체 - BOM 트리 구조의 최상위 객체 - 브라우저 창을 참조하는 객체 - window 객체 조작 > 브라우저 창 조작 - 열기☆, 닫기☆, 이동하기, 사이즈 조절 등 ~ window.open(URL, Name, Options); //부모창 > 자식창 생성 1. URL: 새 창의 URL 2. Name: 새 창 이름 (이름을 비워두면 계속 새 창이 뜨고, 그렇지 않으면 새로고침 된다.) 3. Options ~ window.close(); //자기 스스로 종료 - 부모창에서 자식창을 조작하려면, 변수를 선언한 후 open할 때 변수에 담는다. - 자식창에서 부모창을 조작하려면, opener라는 예약어를 사용한다. - 부모창에서 자식창 조작 var child; //변수 선언 child = .. HTML 속성 제어(태그 조작) // HTML 속성 제어하기 - CSS: 선택자 > 태그 검색 > 접근 > 서식 조작 - JavaScript: 검색 도구 > 태그 검색 > 접근 > 태그 조작 - HTML 계층 구조를 활용하여 탐색 1. BOM 2. DOM 1. HTML 태그 대부분의 속성은 JavaScript의 프로퍼티로 제공된다. - HTML : - JavaScript : txt1.size 2. HTML 태그의 속성명을 그대로 JavaScript 프로퍼티명으로 사용한다. 3. 대부분 읽기/쓰기 모두 지원한다. (일부 쓰기 or 읽기 전용이 있긴 하다.) 4. 태그의 식별자나 근본적인 속상은 조작하지 않는다. 5. 플래그 타입의 속성은 boolean으로 조작한다. 6. HTML 속성명이 복합어면 캐멀표기법으로 작성한다. 7. HTML .. 자바스크립트(JavaScript) 이벤트 //이벤트, Event - 사건 - 객체(혹은 태그)에서 발생하는 사건 - 언제 발생할지 예측 불가능(시간) // JavaScript Event Handling★★ - 이벤트 등록(구현) - 사건 처리 - 언제 발생할지 예측 불가능한 사건에 대해 처리를 하고 싶다. > 언젠가 사건이 발생하면 처리하기 위한 코드를 미리 준비한다. > 사건과 연결 > 이벤트 처리, 이벤트 매핑, 이벤트 구현 등 1. 정적 - HTML 코드에 직접 사용 2. 동적 - JavaScript 코드를 사용 - this: 이벤트 주체(이벤트가 걸린 태그) ※ 함수 내의 this는 window 객체(전역 객체)를 말한다. Event // 마우스 관련 이벤트 - onmouseXXX 1. onmouseover(= onmouseenter) .. < 1 2 3 4 5 6 7 > 5/7