프로그래밍/자바스크립트 (39) 썸네일형 리스트형 [자바스크립트] 이벤트 : key 이벤트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 key 이벤트 /* 이벤트 이름 설명 발생순서 keydown 키보드가 눌러질 때 발생 1 keypress 글자가 입력될 때 발생(한글로 사용할 수 없음) 2 keyup 키보드가 떼어질 때 발생 3 */ //3가지 이벤트가 한번에 발생하므로 보통 한가지만 명시해서 사용. window.onload=function(){ var content = document.getElementById('content'); //이벤트 연결(키보드 떼어질 때 이벤트 발생) content.onkeyup = function(){ //입력한 글자 수 var inputL.. [자바스크립트] 이벤트 : script에서 이벤트 연결 1. 선언적 함수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 script에서 이벤트 연결 window.onload=function(){ var header = document.getElementById('header'); //선언적 함수 function whenClick(){ alert('CLICK'); } //이벤트 연결 //이벤트 핸들러 header.onclick = whenClick; //이벤트 연결을 하는 것이 아니라 함수가 1회 호출되고 이벤트 발생 시 함수가 호출 되지 않음. //header.onclick = whenClick(); } 클릭 Colored by Color Scripter cs 2. 익명 .. [자바스크립트] 이벤트 : onmouseover, onmouseout, onchange, onsubmit 1. onmouseover - 마우스 커서를 올리는 순간 이벤트 발생 2. onmouseout - 마우스 커서를 떼는 순간 이벤트 발생 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 onmouseover/onmouseout a{ color:white; text-decoration:none; } td{ width:100px; margin-top:10px; text-align:center; background-color: #ff8888; } function changeBgColor(cell, newColor){ cell.style... [자바스크립트]이벤트 : 이벤트 처리 방법 1. 인라인 방식 1 2 3 4 5 6 7 8 9 10 11 12 인라인 이벤트 처리 Colored by Color Scripter cs 2. 함수 이용 방식 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 인라인 이벤트 처리 - 함수 이용 div{ background-color:orange; } function whenClick(){ alert('CLICK'); } 클릭 Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 이벤트 처리 function changeColor(color){ document.body.style.backgroundColor = color; } 파.. [자바스크립트]DOM : 문서 객체 제거(removeChild) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 문서 객체 제거 window.onload=function(){ //문서 객체 읽기 var willRemove = document.getElementById('will_remove'); //3초 후에 함수 호출 setTimeout(function(){ //문서 객체 제거 document.body.removeChild(willRemove); //문서 객체의 하위 요소를 모두 제거 //document.body.innerHTML = ''; },3000); }; Header Header2 Colored by Color Scripter cs [자바스크립트]DOM : innerHTML, 문서 객체의 스타일 처리 1. innerHTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 문서 객체의 innerHTML 속성 사용 window.onload=function(){ //변수 선언 var output = ''; output += ''; output += 'Java'; output += 'Oracle'; output += 'HTML'; output += 'JavaScript'; output+=''; document.body.innerHTML = output; //HTML태그 허용 //document.body.textContent = output; //HTML태그를 허용하지 않고 텍스트로만 처리 //JavaOracleHTMLJavaScrip.. [자바스크립트]DOM : 문서 객체의 동적 생성 1. createElement(tagName) : 요소 노드 생성 2. createTextNode(text) : 텍스트 노드 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 태그 생성 window.onload = function(){ var header = document.createElement('h1'); //h1태그 생성 var textNode = document.createTextNode('Hello DOM'); //텍스트 생성 //노드 연결 header.appendChild(textNode); //h1태그에 텍스트를 추가 document.body.appendChild(header); //body에 h1을 추가 }; //출력결과 Hello.. [자바스크립트] DOM : getElementsByTagName(), getElementById(), getElementsByName(), getElementsByClassName() 1. DOM(문서 객체 모델) - 넓은 의미로 웹 브라우저가 HTML페이지를 인식하는 방법 - 좁은 의미로는 document객체와 관련된 객체 집합 - 사용시 HTML페이지에 태그를 추가, 수정, 제거 할 수 있다. - 문서객체 : 태그를 자바스크립트에서 이용할 수 있는 객체로 만든것 2. getElementsByTagName() - 태그명을 통해서 태그를 탐색해서 문서객체로 반환 - 복수의 태그가 존재할 수 있기 때문에 배열로 반환 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 태그명을 통해서 문서 객체 탐색 window.onload=function(){ var spans = document.getElementsByTagName('span'); span.. 이전 1 2 3 4 5 다음
