Web/JavaScript
객체
BOM(Browser Object Model) 자바스크립트로 브라우저를 제어하기 위해 지원되는 객체 브라우저 공통 BOM 객체와 기능 window – 브라우저 윈도우 모양 제어. 새 윈도우 열기/닫기 history - 브라우저 윈도우에 로드한 URL 리스트의 히스토리 관리 location – 브라우저 윈도우에 로드된 HTML 페이지의 URL 관리 window 객체 열려 있는 브라우저 윈도우나 탭 윈도우의 속성을 나타내는 객체 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성 이름 없는 윈도우 열기 새 윈도우 열기 window 객체의 타이머 기능 타임아웃 코드 1회 호출 setTimeout()/clearTimeout() 메소드 ex) 3초 후 경고창 출력 function myAlert(time..
자바스크립트 문제
숫자와 개수만큼 별 그리기 var ary = [1,2,3,4,5]; // 배열 생성 for(var i=0; i 0) { document.write("*"); n--; } document.write(ary[i] +" "); } 우하단 증가 별 찍기 var star = "*"; for(var i=0; i
JS - EVENT
onload 웹페이지(DOM)의 로딩이 끝나는 시점(이벤트)에 실행되는 함수를 지정함 문서가 다 읽어지고 난 후 (로딩 후) 실행시킬 자바스크립트 코드를 넣어준다 1) window.onload = function(){} 2) 위 두개를 동시에 사용할 수는 없다 // 방법 2. var p; function init(){ p = document.getElementById("a"); p.addEventListener("mouseover", over); p.addEventListener("mouseout", out); } /* 방법 1. var p; function init(){ p = document.getElementById("a"); p.onmousemove = over; p.onmouseout = out..
DOM 객체 동적 생성
DOM 객체 동적 생성: document.createElement("태그이름") 클릭 시 div 생성 과 삭제 function di(){ var n = document.getElementById("parent"); var m = document.createElement("div"); m.innerHTML = "new div"; m.setAttribute("id", "new"); m.style.backgroundColor = "gold"; m.style.width = "300px"; m.style.height = "50px"; m.style.border = "1px solid #000"; m.onclick = function(){ var p = this.parentElement; //부모 태그 요소 p.r..
자바스크립트 객체 종류
코어 객체 DOM 객체 BOM 객체 코어 객체 Date, String, Math, Array... DOM 객체 Document Object Model 웹 페이지 모든 요소를 Document 객체가 관리한다 Document 객체 모델인 DOM은 트리 자료구조 형태를 갖는다 웹 브라우저가 html 문서를 읽어들인다 Document 객체로 시작하는 DOM 트리가 생성된다 객체 하나하나를 노드(Node) 라 부른다. 문서노드 : 최상위 계층 / 전체 문서를 가리키는 Document 객체 요소노드 : html 태그에 해당하는 요소들 텍스트 노드 : html 태그 안에 있는 텍스트들 자바 스크립트 더보기 클릭 시 이미지 띄우기 클릭 해보세요 클릭 시 지정된 색으로 변경하기 클릭 시 버튼의 지정된 색으로 변경 버튼1..