1. BOM(Browser Object Model)
- HTML 과 Java Script 는 Browser 안에서만 실행이 된다.
- BOM 은 DOM 보다 한 단계 더 큰 개념이다.
2. Window Object
- Window 는 브라우저 “창” 을 의미 한다.
- 우리는 window 객체를 이용해 새로운 “window” 를 “open” 할 수도 “close” 할 수도 있다.
open()
- open 함수는 새로운 윈도우 창을 생성 해 준다. 총 3개의 인자값을 갖는다.
- window.open(보여줄 페이지 주소,＂창 이름＂,＂옵션");
close()
- 열었던 새 창을 닫는 역할을 수행하는 함수
- location 객체는 창을 이동시키거나 이동 주소에 대한 정보를 제공해 준다.
- window.location 이 정식 명칭이나 window 는 생략할 수 있다.
Location 예제
<script>
// href는 현재의 위치를 알려준다.
// 또는 특정 위치로 이동시킨다. <a href=""></a>의 기능
var btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click",function(e){
location.href="https://www.naver.com";
})
console.log(location.href); // http://127.0.0.1:5500/08_location.html
console.log(location.protocol); // http:
console.log(location.hostname); // 127.0.0.1
console.log(location.pathname); // 08_location.html
console.log(location.port); // 5500
</script>3. 부모 창과 자식 창
- 새 창을 열면 새 창은 “자식” 기존 창은 “부모” 가 된다.
- 자식 입장에서 부모 창은 opener 라고 명명 한다.
- 부모와 자식 사이에 데이터를 전달 할 수 있다.
부모 창과 자식 창 예제
- 부모 창
<body>
<button onclick="winOpen()">창열기</button>
<button onclick="winClose()">창닫기</button>
<br/>
자식 창으로 보낼 값 :
<input type="text" id="toChild"/>
<button onclick="sendVal()">보내기</button>
<br/>
자식 창에서 보낸 값 :
<input type="text" id="fromChild"/>
</body>
<script>
var win;
function winOpen(){
console.log('open');
win = open('09_child.html','','width=415, height=100');
}
function winClose(){
console.log('close');
win.close();
}
function sendVal(){
// 어떤 값을?
var tag = document.getElementById("toChild");
console.log(tag.value);
// 어디에 표시?
var ch = win.document.getElementById("fromParent");
console.log(ch);
ch.value = tag.value;
}
function plus(a,b){
console.log('부모함수 : '+a+'+'+b);
}
</script>- 자식 창
<body>
부모 창으로 보낼 값 :
<input type="text" id="toParent"/>
<button onclick="sendVal()">보내기</button>
<br/>
부모 창에서 보낸 값 :
<input type="text" id="fromParent"/>
</body>
<script>
function sendVal(){
// 어떤 값을?
var tag = document.getElementById("toParent");
console.log(tag.value);
// 어디에 표시?
var parent = opener.document.getElementById("fromChild");
console.log(parent);
parent.value = tag.value;
// 부모 함수 접근하기
opener.plus(3,5);
}
</script>🔍 부모 창과 자식 창 서로에게 데이터를 전달할 수 있다.
4. Alert
- Browser 에서는 새 창 이외에도 “경고 창” 을 제공 한다.
- 경고 창은 새 창과 달리 tool bar 가 존재하지 않으며 기능이 한정되어 있다.
Popup 만들기 예제
<body>
<button onclick="popup()">alert</button>
<button onclick="conf()">confirm</button>
<button onclick="prom()">prompt</button>
</body>
<script>
function popup(){
console.log('popup');
//window.alert("message") : 경고창
alert("경고창 입니다.");
}
function conf(){
console.log('confirm');
//true|false = window.confirm("message");
var yn = confirm("정말로 삭제 하시겠습니까?");
console.log(yn);
if(yn == true){
alert("삭제 되었습니다.");
}else{
alert("삭제가 취소 되었습니다.");
}
}
function prom(){
console.log('prompt');
//사용자가 입력한 값=window.prompt("message");
var name = prompt('당신의 이름을 입력해 주세요');
console.log(name);
if(name == ''){
alert('이름을 입력해 주세요!');
}else{
alert(name+' 님 반갑습니다.');
}
}
</script> Popup 예제 결과물
5. Timing
- Browser 에서는 특정 시간마다 어떤 일을 수행 할 수 있습니다.
- 특정 시간 후에 어떤 일을 수행 할 수도 있습니다.
- 그 시간의 단위는 1/1000 초(milliseconds) 입니다.
Interval을 이용한 예제
<body>
<h1 id="cnt">0</h1>
<button onclick="interval(this)">증가</button>
<button onclick="stop()">정지</button>
<button onclick="timeout()">3초후 경고</button>
</body>
<script>
var i = 0;
var tag = document.getElementById("cnt");
var time;
function timeout(){
//window.setTimeout(실행함수,시간)
setTimeout(function(){
alert('경고!!');
},3000);
}
function interval(elem){
console.log('setInterval');
elem.disabled=true;
//window.setInterval(실행함수,간격);
time=setInterval(function(){
i++;
tag.innerHTML = i+"초";
console.log(i);
},1000);
}
function stop(){
console.log('stop');
//window.clearInterval(멈출녀석);
clearInterval(time);
var btns = document.getElementsByTagName('button');
console.log(btns);
btns[0].disabled = false;
}
</script> 6. Animation
Interval을 이용하여 애니메이션 효과 적용
<style>
#count{
color: red;
}
#download{
width: 500px;
height: 25px;
display: none;
}
#proc{
width: 10px;
height: 10px;
position: absolute;
background-color: red;
left: 10px;
display: none;
}
</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 i = 5;
var time = setInterval(function(){
i--;
document.getElementById("count").innerHTML = i;
},1000);
setTimeout(function(){
clearInterval(time);
download();
},5000);
function download(){
var proc = document.getElementById("proc");
var bar = document.getElementById("download");
proc.style.display="block";
bar.style.display="block";
var per = 0;
var tag = document.querySelector("h1");
var inter = setInterval(function(){
per += 10;
tag.innerHTML="다운로드 중("+per+"%)";
bar.value = per;
proc.style.left = per*5;
console.log(per);
if(per == 100){
clearInterval(inter);
tag.innerHTML="다운로드 완료";
}
},1000);
}
</script> Animation 예제 결과물
7. Cookie
- Cookie 는 Web 사용 흔적을 담기 위해 만들어졌다.
- Html 간에 데이터 공유가 이루어 지지 않아 Cookie 를 활용 할 수 있다.
- java Script 에서 제어 가능 하고, 사용자 PC 에 저장된다는 점 때문에 보안상 사용을 권하지 않고 있다.
- Cookie 는 Session 과 함께 JSP 에서 사용법을 다룰 예정이다.
헨젤과 그레텔이 지나온 길을 표시하기 위해 쿠키 조각을
떨어뜨리며 표시했다는 이야기에서 따온 것
8. JSON(Java Script Object Notation)
- 말 그대로 JavaScript Object 형태로 전송을 한다는 뜻이다.
- XML과 함께 최근 데이터 전송 시 굉장히 많이 활용 된다.
- 다만 보안이 강조되는 데이터에서는 사용하지 않는 편이 좋다.
JSON 예제
<body>
<h3>Java Script Object Notation(자바스크립트 오브젝트 표기법)</h3>
<p>서버와 통신에서 이 방식으로 통신할 수 있다.</p>
</body>
<script>
var obj = {}; // 키:값 형태로 데이터를 넣는다.
var arr = []; // 여러값을 넣을 수 있다.(주소는 숫자로...)
var info = {age:22};
info.firstName = "ji-hoon";
info["lastName"] = "han";
console.log(info);
arr.push(info);
console.log(arr);
obj.list = arr;
console.log(obj);
// json -> text
var txt = JSON.stringify(obj);
console.log(txt);
// text -> json
var jsonTxt = '{"employees" : [{"firstName":"Jonh","lastName":"Doe"},';
jsonTxt += '{"firstName":"Jonh","lastName":"Doe"},';
jsonTxt += '{"firstName":"Jonh","lastName":"Doe"}]}';
console.log(jsonTxt);
var json = JSON.parse(jsonTxt);
console.log(json);
</script>📌 TIP
1. JSON 은 작성시 문법 오류가 굉장히 많이 나타난다.
2. 그래서 작성된 JSON 이 맞는지 확인 하기 위해 아래 사이트를 활용 하자
3. http://json.parser.online.fr/
