윤제니

Form 객체 document 객체의 하위 객체 중에 하나 'form 유효성' 검사 등과 같은 여러 가지 form 요소에 관련된 작업을 수행 가능 form 객체의 선택 document.폼요소.요소.속성 요소를 선택할 때 보통 id 속성을 사용하지만 form 객체에서는 'name 속성'을 사용 document.forms[index].elements[index].속성 document.forms[index][index].속성 document.forms["폼명"].elements["요소명"].속성 document.forms["폼명"]["요소명"].속성 form 객체의 속성 속성 및 메서드 설명 value input, textarea 요소의 value 값을 반환 checked checkbox나 radio가 che..

요소의 생성 및 삭제 1) 요소의 생성 메서드 설명 createElement() createElement("div")이면 div 요소를 생성 createTextNode() createTextNode("자바스크립트")이면 "자바스크립트" 텍스트 노드를 생성 appendChild() 요소 A.appendChild(child)일 때 child 요소의 '요소A'의 자식 요소로 만들어 줌 ex) 요소의 생성 요소 생성 메서드 설명 setAttribute(속성, 값) 요소의 속성을 설정 getAttribute(속성) 요소의 속성값을 반환 removeAttribute(속성) 요소의 속성을 제거 ex) 요소의 속성(attribute) 추가 요소 생성 속성 제거 >> [요소 생성] 버튼을 클릭 시 결과 >> [속성 제거..

DOM('Document Object Model') '문서 객체 모델' 이라하며 document 객체를 의미 HTML 요소(element)를 제어(생성, 삭제 등)하기 위해 사용 HTML 문서가 만들어지면 눈에 보이지 않지만 위의 그림처럼 HTML 요소들을 노드(node)와 노드가 연결된 tree 구조로 만들어 준다. html, head, meta, title, body, h1, p와 같은 태그 요소들 => '요소 노드' 텍스트 => '텍스트 노드' * DOM에 대한 작업 * 먼저 요소를 선택할 수 있어야 한다. 요소를 직접 선택하는 방법 노드와 상대 위치로 선택하는 방법 요소의 선택 1) 요소를 직접 선택하는 방법 메서드 설명 getElementById() document.getElementById("..

Document 객체 write() 메서드 : 출력 결과를 보기 위해 사용 Location 객체 브라우저의 주소창의 URL과 관련된 객체 1) 속성 속성 설명 hash 주소의 앵커명(#)을 반환 https://jenny-daru.tistory.com#jenny => #jenny host 주소의 호스트명과 포트번호를 반환 https://jenny-daru.tistory.com/ => https://jenny-daru.tistory.com:8000 hostname 주소의 호스트명을 반환 https://jenny-daru.tistory.com/ => https://jenny-daru.tistory.com port 주소의 포트번호를 반환 https://jenny-daru.tistory.com/ => 8000 p..

BOM Browser Object Model(브라우저 객체 모델)의 약자 브라우저의 정보나 URL 정보, 모니터 화면 정보 등을 취득하거나 제어할 수 있는 객체 브라우저 객체의 최상위 객체 'window 객체' 'window 객체의 하위 객체' document location screen history navigator window객체 => 전역 변수나 전역 함수를 만들 때 자동으로 생성되는 '글로벌 객체' window객체의 내장 메서드들 =>사용할 때는 보통 앞에 window 객체를 생략하고 사용 alert() prompt() confirm() alert("window 객체") window.alert("window 객체") Window 객체 1) open(), close() 메서드 open() 메서드 ..

이벤트 객체 사용자가 직접 만들지 않아도 기본적으로 제공 속성과 메소드가 존재 ex) 마우스 클릭시 클릭한 좌표값, 이벤트를 발생시킨 객체가 어떤 것인지 1) 기본형식 익명함수의 매개변수(event)가 '이벤트 객체'를 의미 매개변수 이므로 꼭 변수명을 'event'로 사용할 필요는 없지만 보통 이벤트 객체의 의미로 'event'나 'e'로 많이 사용 bt.onclick = function(event) { event.속성 event.메서드 } 2) 주요 속성 속성 설명 target 이벤트를 발생시킨 객체를 반환 type 이벤트의 이름을 반환 clientX 이벤트가 발생한 X좌표값을 반환(브라우저 기준) clientY 이벤트가 발생한 Y좌표값을 반환(브라우저 기준) screenX 이벤트가 발생한 X좌표값을..