1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
<script type="text/javascript">
//DOM
//HTML 태그 <h1></h1> 만듦
var header =document.createElement('h1');
//Hello DOM 텍스트 만듦
var textNode =document.createTextNode('Hello DOM');
//두개를 연결
header.appendChild(textNode); //text를 <h1>에 연결
document.body.appendChild(header); //<h1>text</h1>을 <body>에 연결
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//DOM
//자바스크립트 태그를 <head> 태그 안에 넣을때는 다른 태그들이 생성되기 전이다. 따라서 window.onload 해줌
window.onload = function(){
//HTML 태그 <h1></h1> 만듦
var header =document.createElement('h1');
//Hello DOM 텍스트 만듦
var textNode =document.createTextNode('Hello DOM');
//두개를 연결
header.appendChild(textNode); //text를 <h1>에 연결
document.body.appendChild(header); //<h1>text</h1>을 <body>에 연결
}
</script>
</head>
<body>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//DOM
//클랙했을때 HTML태그를 생성 삽입
function addTag(){
var header =document.createElement('h1');
var textNode =document.createTextNode('Hello DOM');
header.appendChild(textNode);
document.body.appendChild(header);
//document.write -- 전체HTML을 지웠다가 다시 만듦
//appendChild -- 부분 수정
}
</script>
</head>
<body>
<input type="button" value='tag 추가' onclick='addTag()'>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//택스트 노드를 갖지 않는 DOM
function addTag(){
var img = document.createElement('img');
img.src = 'Penguins.jpg'; //태그 속성 추가
img.width = '500';
img.height = '350';
document.body.appendChild(img);
}
</script>
</head>
<body>
<input type="button" value='tag 추가' onclick='addTag()'><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//택스트 노드를 갖지 않는 DOM
function addTag(){
var img = document.createElement('img');
//img.src = 'Penguins.jpg'; //태그 속성 추가
//img.width = '500';
//img.height = '350';
img.setAttribute('src', 'Penguins.jpg');
img.setAttribute('width', 500);
img.setAttribute('height', 350);
//img.data-property = '350' 에러발생 //setAttribute로만 가능
img.setAttribute('data-property', 350)
document.body.appendChild(img);
}
</script>
</head>
<body>
<input type="button" value='tag 추가' onclick='addTag()'><br>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//innerHTML : 태그노드와 택스트노드를 손쉽게 생성
//새로작성하기 때문에 원래 <body>태그 안의 정보 사라짐
function addTag(){
var output = '';
output += '<ul>';
output += ' <li>Javascript</li>';
output += ' <li>JQuery</li>';
output += ' <li>Ajax</li>';
output += '<ul>';
output += '<img src="Penguins.jpg" width="500">';
document.body.innerHTML = output;
//document.body.textContent = output; //HTML태그를 그냥 문자로 인식
}
</script>
</head>
<body>
<input type="button" value='tag 추가' onclick='addTag()'><br>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//innerHTML
function addTag(){
var tag = document.body.innerHTML; //현재 HTML <body>를 읽어옴
console.log(tag)
}
</script>
</head>
<body>
<input type="button" value='tag 추가' onclick='addTag()'><br>
<table>
<tr>
<td>난 테이블</td>
</tr>
</table>
</body>
</html>
6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//getElementById() 특정 태그를 가져옴
var viewTag = function(){
var h1 = document.getElementById('header1');
console.log(h1); //태그 전체를 문자열로 가져옴
console.log(h1.innerHTML); //텍스트에 접근
console.log(h1.textContent);
}
var modifyTag = function(){
var h2 = document.getElementById('header2');
h2.innerHTML = '<b>Header20</b>';
}
</script>
</head>
<body>
<h1 id='header1'>Header1</h1>
<h1 id='header2'>Header2</h1>
<input type="button" value='내용보기' onclick='viewTag()'><br>
<input type="button" value='태그수정' onclick='modifyTag()'><br>
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family : '맑은 고딕';
font-size: 10pt
}
#t1 td, #t2 td{
padding: 5px;
border: 1px solid gray;
}
</style>
<script type="text/javascript">
//구구단 만들어서 HTML 수정하기
function viewGugudan(){
var start = document.frm.startdan.value; //시작단 가져오기
var end = document.frm.enddan.value; //끝단 가져오기
var output = '<table id="t2">';
for(var i=start;i<=end;i++){
output += '<tr>';
for(var j=1; j<10;j++){
output += '<td>'+i+' X '+j+' = '+i*j+'</td>';
}
output += '</tr>';
}
output += '</table>'
document.getElementById('result').innerHTML = output;
}
</script>
</head>
<body>
<table id='t1'>
<tr>
<td>
<form name='frm'>
시작단 : <input type="text" name='startdan' />~
끝단 : <input type="text" name='enddan' />
<input type="button" value='구구단 출력' onclick='viewGugudan()'>
</form>
</td>
</tr>
</table>
<hr />
<div id='result'>결과 : </div>
</body>
</html>
8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//여러개의 문서 객체를 가져오는 방법
var viewTag = function(){
var headers = document.getElementsByTagName('h1');
console.log(headers);
console.log(typeof(headers));
console.log(Array.isArray(headers)); //배열이 아니라고 나오지만 배열처럼 사용할 수 있음
for(var i=0; i<headers.length; i++){
console.log(headers[i].innerHTML);
}
}
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
<input type="button" value='tag 보기' onclick='viewTag()' />
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var viewTag = function(){
//querySelector 선택자로 가장먼저 선택되는 객체를 가져옴
//css 문법을 사용해서 태그를 선택할 수 있음
var header1 = document.querySelector('#header1');
console.log(header1.innerHTML);
//querySelectorAll 선택자로 선택되는 모든 객체를 배열로 가져옴
var headers = document.querySelectorAll('#header1');
console.log(headers[0].innerHTML);
console.log(headers[1].innerHTML);
};
</script>
</head>
<body>
<h1 id ='header1'>Header1</h1>
<h1 id ='header1'>Header2</h1>
<input type='button' value='tag 보기' onclick='viewTag()'>
</body>
</html>
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var changeTag = function(){
//css 수정
var header1 = document.getElementById('header1');
header1.style.border = '1px solid red';
header1.style.color = 'orange';
};
</script>
</head>
<body>
<h1 id ='header1'>Header1</h1>
<h1 id ='header2'>Header1</h1>
<input type='button' value='style 수정' onclick='changeTag()'>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var removeTag = function(){
//removeChild 태그 제거
var div = document.getElementById('div1')
document.body.removeChild(div);
};
var removeTag2 = function(){
//div 태그안의 h1태그 제거
var div = document.getElementById('div1')
var header1 = document.getElementById('header1');
div.removeChild(header1);
};
</script>
</head>
<body>
<div id='div1'>
<h1 id ='header1'>Header1</h1>
<h1 id ='header2'>Header1</h1>
</div>
<input type='button' value='tag 제거' onclick='removeTag()'>
<input type='button' value='tag 제거2' onclick='removeTag2()'>
</body>
</html>
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//고전 이벤트 모델 : 동적 이벤트 추가
window.onload = function(){
var h1 = document.getElementById('header');
h1.onclick =function(){
alert("click "+this); //this를 사용하면 이벤트 발생객채 찾을 수 있음
h1.onclick = null; //이벤트를 제거시킴 //1회성 이벤트 생성
}
};
//인라인 이벤트 : 정적 이벤트
function clicks(){ //click()은 예약어라서 사용하면 안됨
alert("click "+this);
}
</script>
</head>
<body>
<h1 id='header'>click</h1>
<h1 id='header2' onclick='clicks()'>click</h1>
<h1 id='header3' onmousewheel='clicks()'>click</h1> <!-- on... 여러가지 이벤트가 있음 -->
</body>
</html>
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//이벤트 안에서 this 사용
window.onload = function(){
document.getElementById('header').onclick = function(){
this.style.color = 'orange';
this.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<h1 id='header'>click</h1>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//이벤트 내부의 상황을 보기
window.onload = function(e){
//console.log(e);
document.getElementById('header').onclick = function(e){ //e는 클릭시 자동으로 받는 매개변수
var result = document.getElementById('result');
result.innerHTML = '';
/* 이벤트 전체 내용 보기
for(var key in e){
result.innerHTML += '<p>'+key+' : '+ e[key]+'</p>';
} */
result.innerHTML +='<p>'+e.x+'</p>'; //x좌표
result.innerHTML +='<p>'+e.y+'</p>'; //y좌표
}
}
</script>
</head>
<body>
<h1 id='header'>click</h1>
<div id='result'></div>
</body>
</html>
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var count1 = document.getElementById('count1');
var count2 = document.getElementById('count2');
btn1.onclick = function(){
count1.innerHTML = Number(count1.innerHTML)+1;
}
btn2.onclick = function(){
count2.innerHTML = Number(count2.innerHTML)+1;
btn1.onclick(); //이벤트 강제발생 //onclick을 함수처럼 사용할 수 있음
}
}
</script>
</head>
<body>
<button id='btn1'>하나 +1</button>
<button id='btn2'>모두 +1</button>
<h1>button1 - <span id='count1'>0</span></h1>
<h1>button2 - <span id='count2'>0</span></h1>
</body>
</html>
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//디폴트 이벤트 제거
window.onload = function(e){
document.getElementById('frm1').onsubmit = function(){
//return false;
//디폴트 이벤트를 제거함으로 비밀번호를 같을경우만 제출하도록 만들 수 있음
var pass1 = document.getElementById('pass').value;
var pass2 = document.getElementById('pass-check').value;
if(pass1 == pass2){
alert('동일한 비밀번호')
}else{
alert('다른 비밀번호')
return false;
}
}
}
</script>
</head>
<body>
<!-- action: 입력된 내용을 처리할 웹페이지 -->
<form action="test.jsp" id='frm1'>
<label for="name">이름</label><br>
<input type="text" name='name' id='name' /><br>
<label for='pass'>비밀번호</label><br>
<input type="password" name='pass' id='pass' /><br>
<label for='pass-check'>비밀번호 확인</label><br>
<input type="password" id='pass-check' /><br>
<input type="submit" value='제출submit' /> <!-- submit에는 페이지 이동 디폴트 이벤트 있음 -->
<input type="button" value='button' /> <!-- button에는 아무런 이벤트 없음 -->
</form>
</body>
</html>
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {border:3px solid black;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!-- 이벤트 버블링 : 자식노드에서 부모노드 순으로 이벤트를 실행 -->
<div onclick="alert('outer-div')">
<div onclick="alert('inner-div')">
<h1 onclick="alert('header')">
<p onclick="alert('pagagraph')">Pagagraph</p>
</h1>
</div>
</div>
</body>
</html>
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {border:3px solid black;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementById('header').onclick = function(){
alert('header');
}
//이벤트 전달 막는 방법
document.getElementById('paragraph').onclick= function(e){
alert('paragraph')
e.cancelBubble=true; //인터넷 익스플로러용
if(e.stopPropagation){ //그외 브라우저용
e.stopPropagtion();
}
}
}
</script>
</head>
<body>
<!-- 이벤트 버블링 : 자식노드에서 부모노드 순으로 이벤트를 실행 -->
<h1 id='header'>
<p id='paragraph'>Pagagraph</p>
</h1>
</body>
</html>
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window.onload = function(){};
//윈도우익스플로러 이벤트 모델
window.attachEvent('onload', function(){
alert('윈도우edge에서는 없어짐');
var header = document.getElementById('header');
header.attachEvent('onclick', function(){
alert('click');
});
});
</script>
</head>
<body>
<h1 id='header'>Click</h1>
</body>
</html>
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//표준 이벤트 모델 : W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델
// 이벤트 캡쳐링을 지원하지만 구현한 프로그램이 아직 없음
window.addEventListener('load',function(){
var header = document.getElementById('header');
header.addEventListener('click', function(){
alert('click');
});
header.addEventListener('mouseout', function(){
alert('mouseout');
});
});
</script>
</head>
<body>
<h1 id='header'>Click</h1>
</body>
</html>
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//예외처리
try{
willException.byeBye();
alert('try 구문종료');
}catch (e) {
alert('Exception 발생');
}finally{
alert('finally 실행')
}
</script>
</head>
<body>
</body>
</html>
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//예외 메세지 출력
try{
var array = new Array(999999999999);
}catch (exception) {
var output='';
for(var i in exception){
output += i+": "+exception[i] + '\n';
}
console.log(output);
}
</script>
</head>
<body>
</body>
</html>
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//예외 강제 발생 throw
try{
throw 'custom exception occur';
}catch (exception) {
//자바에서는 catch를 여러개 썼지만 자바스크립트는 if문으로 서로다른 에러를 구분
if(exception == 'custom exception occur'){
alert('custom exception occur');
}else{
alert('other');
}
}
</script>
</head>
<body>
</body>
</html>
24. HTML5 New Elements
http://www.w3schools.com/html/html5_new_elements.asp
자바스크립트에서 HTML태그를 효과적으로 사용하기 위해서
HTML5에서 새로운 의미론적 태그들이 생김
HTML5 Input Types
http://www.w3schools.com/html/html_form_input_types.asp
input태그에 새로운 속성들이 HTML5에서 생김
인터넷익스플로러에는 지원하지 않는 것이 있으므로 주의 할 것
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
HTML5 Graphics
http://www.w3schools.com/html/html5_canvas.asp http://www.w3schools.com/html/html5_svg.asp
HTML5에서 그래픽을 처리할 수 있는 태그가 생김
canvas: JavaScript 문법으로 그래픽 처리
svg: SVG 문법으로 그래픽 처리
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
action : 데이터처리 페이지 (웹프로그램)
method : 전송방식 (get/post)
-get: url뒤에 데이터를 싫어서 보냄
http://localhost:8080/WebEx03/페이지명?변수명=값
http://localhost:8080/WebEx03/test.jsp?id=aaaaa&passwd=12345
-post: url에 데이터를 표시 안 함
-->
<form action='test.jsp' method="get">
아이디 <input type="text" name='id' />
패스워드 <input type="password" name='passwd' />
<input type="submit" value='전송' />
</form>
</body>
</html>
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//document.getElementById('frm').onsubmit =function(){
document.getElementById('btn').onclick =function(){ //버튼일 경우 onclick 이벤트
var query = document.getElementById('query').value;
if(query.length <=1){
alert('한자이상 입력해야 합니다.')
//return false; //페이지 이동 막음
}else{
alert('네이버로 검색합니다')
document.getElementById('frm').submit(); //버튼일 경우 강제로 submit
}
}
}
</script>
</head>
<body>
<form id='frm' action='https://search.naver.com/search.naver' method="get">
<!-- hidden 화면에 보이지 않고 전송되는 데이터 -->
<input type='hidden' name='where' value='nexearch' />
<input type='hidden' name='sm' value='top_hty' />
<input type='hidden' name='fbm' value='1' />
<input type='hidden' name='ie' value='utf8' />
검색어 <input type="text" name='query' id='query' placeholder='검색어 입력' />
<!-- <input type="submit" value='네이버 검색' /> -->
<input type="button" value='네이버 검색' id='btn'/>
</form>
</body>
</html>
댓글 없음:
댓글 쓰기