하이브리드 특강 2일차 오전: 자바스크립트
웹에서 가져온 데이터를 뿌려줄때 자바스크립트를 이용해 DOM을 제어함
생성자를 이용한 객체 생성
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>생성자 함수를 이용한 객체 생성</title> <script type="text/javascript"> // 생성자 함수 지정 function Student(name, korean, math, english, science) { this.이름 = name; this.국어 = korean; this.영어 = english; this.수학 = math; this.과학 = science; // 메서드 this.getSum = function(){ return this.국어 + this.수학+ this.영어 + this.과학 }; this.getAverage = function(){ return this.getSum() / 4; }; this.toString = function(){ return this.이름 + ', ' + this.getSum() + ',' + this.getAverage(); }; } // 생성자 함수를 이용한 객체 생성 var student = new Student('홍길동', 100, 90, 98, 97); document.write(student.toString()); </script> </head> <body> </body> </html> | cs |
라이브러리를 만들어서 이용할떄 위와 같이 사용
위와 같은 형태로 자바스크립트 상속도 가능(이번 수업에서는 배우지 않는다)
애플릿 -> 플래쉬 -> 자바스크립트
DOM 객체 트리 생성
출력
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript"> window.onload = function() { //변수 선언 var output = ''; output += '<ul>'; output += ' <li>JavaScript</li>'; output += ' <li>JQuery</li>'; output += ' <li>Ajax</li>'; output += '</ul>' //innerHTML 속성에 문자열을 할당 document.body.innerHTML = output; }; </script> </head> <body> </body> </html> | cs |
요소선택
window.onload : HTML 문서가 완전히 업로드 된후 자바 스크립트 실행
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript"> window.onload = function () { var spans = document.getElementsByTagName('span'); spans[0].innerHTML = '호수'; spans[1].innerHTML = '들판'; }; </script> </head> <body> <span>하늘</span> <span>하늘</span> </body> </html> | cs |
For 문 이용해서 요소 선택후 HTML 내용 바꾸기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript"> window.onload = function () { var spans = document.getElementsByTagName('span'); for (var i = 0; i<spans.length; i++){ if(i%2==1){ spans[i].innerHTML = '우주'; } else { spans[i].innerHTML = '지하'; } } }; </script> </head> <body> <span>하늘</span> <span>하늘</span> <span>하늘</span> </body> </html> | cs |
ID를 이용한 접근
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript"> window.onload= function(){ //문서 객체를 가져옴 var header1 = document.getElementById('header_1'); var header2 = document.getElementById('header_2'); header1.innerHTML = '하하'; header2.innerHTML = '호호'; }; </script> </head> <body> <h1 id="header_1">Header</h1> <h1 id="header_2">Header</h1> </body> </html> |
태그에 접근하는 많은 방법중 가장 빈번한 방법은 태그와 아이디
Event - inline 이벤트 처리
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event - 인라인 이벤트 처리</title> </head> <body> <input type="button" value="이동" onclick="location.href='http://www.naver.com'"> <!-- 한라인에 여러 이벤트 삽입 끝을 제외하고는 ; 삽입 --> <input type="button" value="확인" onclick="alert('클릭');alert('클릭')"> </body> </html> | cs |
이벤트 연결 처리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event - script에서 이벤트 처리</title> <script type="text/javascript"> window.onload = function(){ var header = document.getElementById('header'); //이벤트가 발생할 때 호출되는 함수 function whenClick(){ alert('Click'); } //이벤트 연결 header.onclick = whenClick; }; </script> </head> <body> <div id="header">클릭</div> </body> </html> | cs |
다른 이벤트 연결 처리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event - script에서 이벤트 처리</title> <script type="text/javascript"> window.onload = function(){ var header = document.getElementById('header'); //이벤트 연결 header.onclick = function whenClick(){ alert('클릭'); } }; </script> </head> <body> <div id="header">클릭</div> </body> </html> | cs |
자바스크립트 기본이벤트와 기본 이벤트 제거를 학습해야 한다.
기본 이벤트 연결 및 제거 예제
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>기본 이벤트</title> <script type="text/javascript"> window.onload = function(){ var aa = document.getElementById('aa'); //이벤트 연결 aa.onclick=function(){ alert('이벤트 연결'); //기본 이벤트 제거 return false; }; var myForm = document.getElementById('myForm'); //이벤트 연결 myForm.onsubmit = function(){ alert('이벤트 연결'); // 기본 이벤트 제거 return false; }; }; </script> </head> <body> <a id="aa" href="http://www.naver.com">이동</a> <br><br> <form id="myForm" action="a.jsp" method="get"> <input type="text" name="name"><br> <input type="submit" value="전송"> </form> </body> </html> |
이벤트 버블링 (모든 브라우저에서 지원하므로 표준)
자시쪽에서 부모쪽으로 이벤트 전파
이벤트 캡쳐링(IE는 지원하지 않는다)
부모쪽에서 자식쪽으로 이벤트 전파
전달 막는것 예제
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 46 47 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 전파</title> <script type="text/javascript"> window.onload = function(){ //문서 객체에 접근 var header = document.getElementById('header'); header.onclick = function(){ alert('header'); //this : 이벤트가 발생한 객체 this.style.background='pink'; }; var paragraph = document.getElementById('paragraph'); paragraph.onclick = function(e){ alert('paragraph'); this.style.background='yellow'; /* 인터넷 익스플로러 8이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하지만, 다른 브라우저는 핸들러의 매개 변수로 전달 인터넷 익스플로러 9이상에서는 매개변수, window.event 둘 다 지원 */ var event = e || window.event; //이벤트 전달을 제거 event.cancelBubble = true; if(event.stopPropagation){ event.stopPropagation() } }; }; </script> </head> <body> <h1 id="header">header <p id="paragraph">Paragraph</p> </h1> </body> </html> | cs |
자바스크립트 마무리
'App Development > Hybrid Programming' 카테고리의 다른 글
| 특강 3일차 (오후) - AJAX, JQueryMobile (0) | 2015.01.07 |
|---|---|
| 특강 3일차 (오전) - JQuery, AJAX (0) | 2015.01.07 |
| 특강 2일차 (오전, 오후) - 제이쿼리 (0) | 2015.01.06 |
| 특강 1일차 (오후) (0) | 2015.01.05 |
| 특강 1일차 (0) | 2015.01.05 |