1. 부모-자식 창
새 창을 열면 새 창은 “자식” 기존 창은 “부모” 가 된다.
자식 입장에서 부모 창은 opener 라고 명명 한다.
부모와 자식 사이에 데이터를 전달 할 수 있다.
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<button>창열기</button>
<button>창닫기</button>
<br/>
자식 창에서 받은 값 : <input type="text" id="fromChild"/><br/>
자식 창으로 보낼 값 : <input type="text" id="toChild"/><br/>
<button onclick="sendVal()">보내기</button>
</body>
<script>
var win;
var btn = document.getElementsByTagName('button');
// console.log(btn);
var win;
btn[0].addEventListener('click', function(){
win = open('09_child.html','',
'width = 200, height = 200, top = 0, left = 0');
});
btn[1].addEventListener('click', function(){
win.close();
})
function sendVal(){
var val = document.getElementById('toChild').value;
console.log(val);
win.document.getElementById('fromParent').value = val;
}
function plus(a,b){
console.log(a + b);
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
부모 창에서 받은 값 : <input type="text" id="fromParent"/><br/>
부모 창으로 보낼 값 : <input type="text" id="toParent"/><br/>
<button onclick="sendVal()">보내기</button>
</body>
<script>
function sendVal(){
var val = document.getElementById('toParent').value;
console.log(val);
opener.document.getElementById('fromChild').value = val;
opener.plus(5,10);
}
</script>
</html>
2. alert
Browser 에서는 새 창 이외에도 “경고 창” 을 제공 한다.
경고 창은 새 창과 달리 tool bar 가 존재하지 않으며 기능이 한정되어 있다.
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<button>alert()</button>
<button>confirm()</button>
<button>prompt()</button>
</body>
<script>
var btn = document.getElementsByTagName('button');
console.log(btn);
btn[0].addEventListener('click', function(){
console.log('alert');
alert('경고창 입니다!');
});
btn[1].addEventListener('click', function(){
console.log('confirm');
var flag = confirm('진짜로 모두 삭제하시겠습니까?');
console.log(flag);
alert('모두 삭제되었습니다.');
});
btn[2].addEventListener('click', function(){
console.log('prompt');
var name = prompt('당신의 이름은?');
if (name == '') {
alert('이름을 입력해 주세요.');
}else {
alert(name + "님, 안녕하세요!");
}
});
</script>
</html>
3. timing
Browser 에서는 특정 시간마다 어떤 일을 수행 할 수 있습니다.
특정 시간 후에 어떤 일을 수행 할 수도 있습니다.
그 시간의 단위는 1/1000 초(milliseconds) 입니다.
| method | Description |
| myTime = setInterval( doIt , 1000 ) | 1 초 마다 doIt 함수를 실행 하라(멈출 수 없음) |
| clearInterval(myTime) | 설정한 interval 을 없애라 |
| setTimeOut(doIt , 1000 ) | 1 초 후 doIt 함수를 실행 하라(1번만 실행) |
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<h1 id="cnt">0</h1>
<button>증가</button>
<button>정지</button>
<button>3초 후 경고</button>
</body>
<script>
var cnt = document.getElementById('cnt');
var btn = document.getElementsByTagName('button');
var i = 0;
var inter;
btn[0].addEventListener('click', function(e){
// setInterval(실행할 함수, 시간(ms))
inter = setInterval(function(){
i++;
console.log(i);
cnt.innerHTML = i;
}, 1000);
e.target.disabled = true;
});
btn[1].addEventListener('click', function(){
// clearInterval(중지할 인터벌이 들어있는 변수)
clearInterval(inter);
btn[0].disabled = false;
i = 0;
cnt.innerHTML = i;
});
btn[2].addEventListener('click', function(){
// setTimeout(실행할 함수, 시간(ms))
setTimeout(function(){
alert('3초가 지났습니다.')
}, 3000);
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
#count{
color: red;
}
progress{
display: none;
width: 450px;
height: 25px;
}
#proc{
display: none;
position: absolute;
width: 10px;
height: 10px;
top: 100px;
left: 10px;
background-color: red;
}
</style>
</head>
<body>
<h1><span id="count">5</span> 초 후 다운로드가 진행됩니다.</h1>
<progress id="download" max="100" value="0"></progress>
<div id="proc"></div>
</body>
<script>
var cnt = document.getElementById('count');
var str = document.getElementsByTagName('h1');
var down = document.getElementById('download');
var red = document.getElementById('proc');
var i = 5;
var inter;
var val = 0;
var pos = 5;
inter = setInterval(function(){
i--;
cnt.innerHTML = i;
if (i == 1) {
clearInterval(inter)
}
}, 1000);
setTimeout(function(){
inter = setInterval(function(){
down.style.display = 'block';
red.style.display = 'block';
cnt.innerHTML = '';
str[0].innerHTML = '다운로드 중 (' + val + '%)';
down.value = val;
red.style.left = pos;
if (val == 100) {
str[0].innerHTML = '다운로드 완료';
clearInterval(inter);
}
val += 10;
pos += 45;
}, 1000);
}, 4000);
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
#screen{
width: 256px;
height: 256px;
top: 50px;
left: -256px;
position: absolute;
background: url('../img/sprite.png') 0 0;
}
</style>
</head>
<body>
<div id="screen"></div>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
</body>
<script>
var scrn = document.getElementById('screen');
var pos = 0;
var i = -256;
function start(){
inter = setInterval(function(){
scrn.style.backgroundPosition = pos + 'px 0';
scrn.style.left = i;
pos -= 256;
i += 20;
if (i >= 1500) {
i = -256;
}
}, 75);
}
function stop(){
clearInterval(inter);
}
</script>
</html>
4. JSON
JavaScript Object 형태로 전송을 한다는 뜻이다. (JavaScript Object Notation)
XML 과 함께 최근 데이터 전송 시 굉장히 많이 활용 된다.
다만 보안이 강조되는 데이터에서는 사용하지 않는 편이 좋다.
JSON 은 작성시 문법 오류가 굉장히 많이 나타난다.
그래서 작성된 JSON 이 맞는지 확인 하기 위해 아래 사이트를 활용 하자
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
input[type="text"]{
width: 350px;
}
</style>
</head>
<body>
<input type="text" value=""/>
<button id="btn">JSON 변경</button>
</body>
<script>
// JSON = Java Script Object Notation
var obj = {};
var arr = [];
var info = {age:22};
info.firstName = 'ji-hoon';
info.lastName = 'kim';
// console.log(info);
arr.push(info);
// console.log(arr);
// 마지막엔 object 형태로 만들어주는게 좋다.
obj.list = arr;
console.log(obj);
// json 을 문자열로 만드는 함수
var txt = JSON.stringify(obj);
document.getElementsByTagName('input')[0].value = txt;
console.log(txt);
document.getElementById('btn').addEventListener('click',function(){
// 문자열을 json 으로 만드는 함수
var json = JSON.parse(txt);
console.log(json);
});
</script>
</html>'JS-DOM' 카테고리의 다른 글
| 03. Window Object (0) | 2024.03.08 |
|---|---|
| 02. Event (0) | 2024.03.08 |
| 01. JS-DOM의 기초 (0) | 2024.03.08 |