코딩도전기/Dom
CODO Day8_Java Script_DOM
by 코도꼬마
2023. 2. 10.
Alert
- 경고창
- 새 창과 달리 tool bar가 존재하지 않으며 기능이 한정적임
<body>
<button onclick="popup()">alert</button>
<button onclick="conf()">confirm</button>
<button onclick="promp()">prompt</button>
</body>
<script>
function popup(){
//alert이 나타나면 문서내 모든 프로세스가 멈춘다.
alert('경고창입니다.');
}
function conf(){
var result = confirm('정말로 삭제하시겠습니까?'); //확인|취소
console.log(result); //true|false
if(result == true){
alert('삭제가 완료 되었습니다.')
}else{
alert('삭제가 취소 되었습니다.')
}
}
function promp(){
var name = prompt('당신의 이름을 입력하세요.');
console.log(name);
alert('안녕하세요 ' + name + '님:)');
}
</script>
Timing
- Browser에서는 특정 시간마다 어떤 일을 수행 할 수 있습니다.
- 특정 시간 후에 어떤 일을 수행 할 수도 있습니다.
- 그 시간의 단위는 1/1000 초(milliseconds) 입니다.
<body>
<h1 id="cnt">0</h1>
<button onclick="interval(this)">증가</button>
<button onclick="clearInter()">정지</button>
<button onclick="setTime()">3초 후 경고</button>
</body>
<script>
var i = 0;
var time;
function interval(elem){
console.log(elem);
elem.disabled = true;
//setInterval(실행할 함수, 간격);
time = setInterval(function(){ //clearInterval함수에 넣어주기 위해 변수에 담음
i++;
console.log(i);
document.getElementById('cnt').innerHTML = i;
},1000); //1000 : 1초
}
function clearInter(){
//console.log('click');
//clearInterval(중지할 인터벌)
clearInterval(time);
i = 0; //숫자 초기화
document.getElementById('cnt').innerHTML = i;
document.getElementsByTagName('button')[0].disabled = false; //비활성화 버튼 활성화
}
function setTime(){
//setTimeout(실행할 함수, 간격);
setTimeout(function(){
alert('3초가 경과했습니다.');
},3000);
}
</script>
- 이 기능을 이용해 남은시간 측정이나 특정시간 후에 페이지를 이동하는 기능을 수행할 수 있다.
- css를 이용하여 시각적인 애니메이션 효과도 줄 수 있다.
<head>
<meta charset="UTF-8">
<title>Dom Script</title>
<link rel="icon" href="../img/chrome.png">
<style>
#cnt{
color: red;
}
progress{
display: none;
width: 500px;
height: 25px;
}
#proc{
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 100px;
left: 10px;
}
</style>
</head>
<body>
<h1><span id="cnt">5</span>초 후에 다운로드가 시작됩니다.</h1>
<progress id="download" min="0" max="100" value="0"></progress>
<div id="proc"></div>
</body>
<script>
var count = 5;
var msg = document.getElementById('cnt');
var bar = document.getElementById('download');
var inter = setInterval(function(){
count--;
msg.innerHTML = count;
},1000);
setTimeout(function(){
clearInterval(inter);
download();
},5000);
function download(){
var tag = document.getElementsByTagName('h1')[0];
tag.innerHTML = '다운로드 진행중(0%)';
bar.style.display = 'block';
var per = 0;
var obj = document.getElementById('proc');
inter = setInterval(function(){
per += 1;
obj.style.left = per*5;
bar.value = per;
tag.innerHTML = '다운로드 진행중(' + per +'%)';
console.log(per);
if(per == 100){
clearInterval(inter);
tag.innerHTML = '다운로드 완료';
}
},100);
}
</script>
Cookie
- Web 사용흔적을 담기 위해 만들어졌다.
- Html간에 데이터 공유가 이루어 지지 않아 Cookie를 활용함
- java Script에서 제어 가능하고, 사용자 PC에 저장된다는 점 때문에 보안상 사용을 권하지 않음
JSON(Java Script Object Notation)
- JavaScript Object 형태로 전송한다는 의미
- XML과 함께 최근 데이터 전송 시 굉장히 많이 활용
- 보안이 강조되는 데이터에서는 사용하지 않는 편이 좋다.
<body>
<input type="text" value=""/>
<button id="btn">JSON 변경</button>
</body>
<script>
var obj = {}; //object : 키:값으로 구성(자바스크립트 한정 문자열로 구성)
var arr = []; //array : 인덱스와 값으로 구성
// 위 두개의 형태를 JSON(Java Script Object Notation)이라고 부름
var info = {'age':22};
info.firstName = 'su-yeon';
info['lastName'] = 'lee';
console.log(info);
arr.push(info);
console.log(arr);
obj.list = arr;
console.log(obj);
//json -> string
var txt = JSON.stringify(obj);
document.getElementsByTagName('input')[0].value = txt; //객체자체가 나옴(색글씨)
console.log(txt); //문자열로 나옴(검정글씨)
document.getElementById('btn').addEventListener('click',function(){
//text -> JSON
var json = JSON.parse(txt);
console.log(json);
})
</script>
