BOM ( Browser Object Model )
: DOM 객체들은 HTML 페이지의 각 HTML 태그들을 객체화 한 것으로 자바스크립트 코드로 화면에 출력된 HTML 태그의 콘텐츠나 모양을 변경하기 위해 설계되었다.
BOM은 윈도우, 윈도우에 로드된 문서의 URL, 브라우저가 출력된 스크린장치, 브라우저의 종류와 기능 등 브라우저와 브러우저가 실행되고 있는 환경을 자바스크립트 코드로 접근하고 제어 할 수 있도록 설계된 객체들의 그룹을 일컫는다.
BOM의 종류
: 대부분의 브라우저들은 다음의 BOM을 제공하며, 개발자들이 자바스크립트를 이용하여
브라우저와 관련된 정보를 얻고 브라우저와 윈도우를 제어하도록 한다.
window 객체는 브라우저가 제어하는 BOM 객채의 최상위에 존재한다.
- window
- navigator
- history
- location
- screen
BOM에 대한 W3C의 표준은 없다.
브라우저마다 BOM 객체의 종류가 다르고, 이름이 같더라도 브라우저에 따라 프로퍼티와 메소드가 다를 수 있다.
window 객체
: window 객체는 열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체로, 윈도우마다 하나의 window 객체가 생성된다.
window 객체가 생성되는 경우는 다음 3가지이다.
- 브라우저가 새로운 웹 페이지를 로드할 때 window 객체 자동 생성
- <iframe> 태그 당 하나의 window 객체 자동생성
- 개발자가 다음 자바스크립트 코드로 임의의 window 객체 생성
(ex) window.open( " 웹페이지 URL ", " 윈도우 이름 ", " 윈도우 속성 " )
window.open()이 실행되면 새 윈도우 (혹은 탭 윈도우)가 열리고 웹페이지가 출력된다.
*window 객체의 프로퍼티와 컬랙션, 메소드
프로퍼티 / 컬랙션
| window | 현재 윈도우 객체에 대한 레퍼런스 |
| self | 현재 윈도우 객체에 대한 레퍼런스 |
| document | 윈도우에 담긴 document 레퍼런스 |
| name | 윈도우 이름 문자열 |
| location | location 객체에 대한 레퍼런스 |
| history | history 객체에 대한 레퍼런스 |
| locationbar | 위치 바 객체에 대한 레퍼런스 |
| menubar | 메뉴바 객체에 대한 레퍼런스 |
| personalbar | 북마크 툴바 등 사용자 개인의 취항에 따라 기능을 두는 바 |
| scrollbars | 스크롤바 객체에 대한 레퍼런스 |
| toolbar | 툴바 객체에 대한 레퍼런스 |
| status | 상태바에 출력한(출력되는) 문자열, 보안의 이유로 대부분 브라우저에서 이를 허용하도록 세팅을 해야 문자열 변경가능 |
| closed | 현재 창이 닫혀 보이지 않는 상태이면 true |
| frames | 윈도우에 존재하는 iframe 객체에 대한 컬렉션 |
| length | 윈도우에 존재하는 iframe의 갯수 |
| top | 윈도우 계층 구조에서 최상위 윈도우 객체에 대한 레퍼런스 |
| parent | 현재 윈도우의 부모 윈도우 객체에 대한 레퍼런스 |
| navigator | navigator 객체에 대한 레퍼런스 |
| outerWidth | 윈도우 전체 폭 |
| outerHeight | 윈도우 전체 높이 |
| screenX | 스크린상의 윈도우 X좌표 |
| screenY | 스크린상의 윈도우 Y좌표 |
| pageXOffset | scrollX와 동일하며 현재 문서의 스크롤 x 값 |
| pageYOffset | scrollY와 동일하며 현재 문서의 스크롤 Y 값 |
| scrollX | pageXOffset과 동일하며 현재 문서의 스크롤 X 값 |
| scrollY | pageYOffset과 동일하며 현재 문서의 스크롤 Y값 |
메소드
| open( ) | 새 윈도우를 연다 |
| close( ) | 윈도우를 닫는다. |
| focus( ) | 윈도우에 포커스를 주어 키보드 입력을 받을 수 있는 상태로 만든다 |
| blur( ) | 현재 윈도우는 포커스를 잃는다. |
| getSelection( ) | 윈도우 내에 선택된 텍스트를 문자열로 리턴한다. |
| stop( ) | HTML 페이지 로딩을 중단시킨다. 브라우저의 STOP 버튼을 누른 것과 동일하다. |
| alert( ) | 경고 다이얼 로그 출력 |
| colfirm( ) | 확인 다이얼 로그 출력 |
| prompt( ) | 프롬프트(입력) 다이얼로그 출력 |
| print( ) | 현재 페이지를 출력하기 위해 프린트 다이얼로그 출력 |
| postMessage( ) | 다른 윈도우나 워커 태스크로 문자열 데이터를 보낸다. |
| setInterval( ) | 타임아웃 코드가 반복 호출되도록 타이머를 가동시킨다. |
| clearInterval( ) | setInterval() 로 가동중인 타이머를 중단시킨다. |
| moveBy( ) | 지정된 픽셀만큼 윈도우를 이동시킨다. |
| moveTo( ) | 지정된 위치로 윈도우를 이동시킨다. |
| resizeBy( ) | 지정된 크기만큼 윈도우 크기를 조절한다. |
| resizeTo( ) | 지정된 크기로 윈도우를 조절한다. |
| scrollBy( ) | 주어진 픽셀만큼 상하좌우 스크롤한다. |
| scrollTo( ) | 특정한 좌표로 스크롤 한다. |
윈도우 열기 , window.open()
window.open(URL, WindowName, Feature)
| URL | 윈도우에 출력할 웹페이지 주소 문자열 |
| WindowName | 새로 여는 윈도우의 이름 문자열로서 생략 가능 |
| Feature | 윈도우의 모양, 크가 등의 속성들을 표현하는 문자열 속성들은 빈칸 없이 콤마(' , ')로 분리하여 작성하며 생략가능 |
location 객체
location 객체는 윈도우에 로드된 웹 페이지의 URL 정보를 나타내는 객체로서, 윈도우 열릴때 자동 생성된다.
URL 정보는 다음과 같이 window의 location 프로퍼티를 통해 알아 낼 수 있다.
(ex) window.location 혹은 location
실습
close()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window close()</title>
<script>
var newWin = null; // 새로 연 윈도우 기억
function load(URL) {
newWin = window.open(URL, "myWin", "left=300,top=300,width=500,height=400")
//window.open(URL, WindowName, Feature)
}
function closeNewWindow() {
if (newWin == null || newWin.closed)// 윈도우가 열리지 않았거나 닫힌경우
return; // 윈도우가 없는 경우 그냥 리턴
else
newWin.close(); // 열어놓은 윈도우 닫기
}
</script>
</head>
<body>
<h3> window의 close()로 윈도우 닫기</h3>
<hr>
<a href="javascript:load('http://www.disneyworld.com')"> 새 윈도우 열기(디즈니월드)</a><br>
<a href="javascript:window.close()">현재 윈도우 닫기</a><br> <!--현재 윈도우 닫힘-->
<a href="javascript:closeNewWindow()">새 윈도우 닫기</a> // <!--새로연 디즈니 월드가 닫힘-->
</body>
</html>
target
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 객체의 target</title>
<script>
window.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() != "span") return;
//마우스가 올라간 이벤트 e에 대해 e의 타겟의 이름을 소문자로 했을때
//span이 아니면 return 아무일도 안일어남
e.target.style.textDecoration = "underline";
//이벤트가 발생한 객체의 스타일의 텍스트에 밑줄을 긋는다.
}
window.onmouseout = function (e) {
if (e.target.tagName.toLowerCase() != "span") return;
e.target.style.textDecoration = "none";
}
</script>
</head>
<body>
<h3> span 태그에만 onmouseover/onmouseout </h3>
<hr>
<p>span 태그에 대해서만 <span>마우스</span>가 올라올 때 밑줄이 그어지고
<span>마우스</span>가 내려갈 때 밑줄이 사라지도록 <span> 자바스크립트 코드</span>를 작성한다.
</p>
</body>
</html>
span 태그에만 onmouseover/onmouseout
span 태그에 대해서만 마우스가 올라올 때 밑줄이 그어지고 마우스가 내려갈 때 밑줄이 사라지도록 자바스크립트 코드를 작성한다.
✔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover과 onmouseout</title>
<script>
var text=["빨간 자전거를 타고 서울, 대전, 대구, 부산 찍고, 목포, 인천을 거쳐 달린다.",
"한국 고전 50권, 외국 고전 50권을 읽는 목표",
"아침에는 수영을 배우고, 점심먹고 자전거 훈련 30KM, 저녁에서는 10KM 달리기 하기",
"문제가 많고 잘 정리된 자바스크립트 책을 구입하여 본격적으로 연습문제 풀기"];
var commentDiv;
function init(){
commentDiv = document.getElementById("commentDiv");
var liArray = document.getElementsByTagName("li");
for(i = 0; i < liArray.length; i++){
liArray[i].addEventListener("mouseover", over, false);
liArray[i].addEventListener("mouseout", hideCommentDiv, false);
// true : 이벤트 흐름 중 캠쳐 단게에서 실행될 리스너 등록
// false : 버블 단계에서 실행 될 리스너 등록
// 생략 가능하며 default : false
// 캡쳐단계 : window에서 타겟 객체까지 이벤트 객체가 전파되는 과정 (위에서 아래로)
// 버블단계 : 다시 타겟에서 window까지 이벤트가 전파되는 과정 (아래에서 위로 )
// 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.
// 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
// 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
// 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
}
}
function over(e){
var n = 0;
switch(e.target.id){
case "10" : n = 0; break;
case "11" : n = 1; break;
case "12" : n = 2; break;
case "13" : n = 3; break;
}
setCommetDiv(text[n], e);
}
function setCommetDiv(commet, e){
commentDiv.innerHTML = commet;
commentDiv.style.left = e.clientX + "px"; // e.clientX,Y를 통해서 div의 위치를 지정
commentDiv.style.top = e.clientY + "px";
commentDiv.style.border = "1px solid yellowgreen";
commentDiv.style.background = "#bb997744";
commentDiv.style.visibility = "visible";
commentDiv.style.width = "200px";
commentDiv.style.height = "80px";
}
function hideCommentDiv(){
commentDiv.style.visibility = "hidden";
}
</script>
</head>
<body onload="init()">
<h3>아이템에 마우스를 올리면 설명 출력</h3>
<hr>
<p>여름 방학 때 하고 싶은 것들</p>
<ul>
<li id="10">자전거로 대한민국 일주</li>
<li id="11">책 100권 읽기</li>
<li id="12">철인 3종 경기 준비</li>
<li id="13">자바스크립트 정복</li>
</ul>
<div id="commentDiv" style="position:absolute"></div>
</body>
</html>아이템에 마우스를 올리면 설명 출력
여름 방학 때 하고 싶은 것들
- 자전거로 대한민국 일주
- 책 100권 읽기
- 철인 3종 경기 준비
- 자바스크립트 정복
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 흐름</title>
</head>
<body>
<p style="color: blue;">이것은
<span style="color: red;" id="span">문장입니다.</span></p>
<form >
<input type="text" name="ss">
<input type="button" value="테스트" id="button">
<hr>
</form>
<div id="div" style="color: green;"></div>
<script>
var div = document.getElementById("div"); // 이벤트 메세지 출력 공간
var button = document.getElementById("button");
//body 객체에 캡쳐 리스너 등록
document.body.addEventListener("click",capture,true); // 캡쳐단계(1)
//타겟 객체에 버블 리스너 등록
button.addEventListener("click",bubble,false); // 버블 단계(2)
//body 객체에 버블 리스너 등록
document.body.addEventListener("click",bubble,false); // 버블 단계(3)
function capture(e){ // e는 이벤트 객체
var obj = e.currentTarget; // 현재 이벤트를 받은 DOM 객체
var tagName = obj.tagName; // 태그 이름
div.innerHTML += "<br>capture 단계 : "+tagName +"태그, "+e.type+"이벤트";
}
function bubble(e){ //e는 이벤트 객체
var obj = e.currentTarget; // 현재 이벤트를 받은 DOM 객체
var tagName = obj.tagName;
div.innerHTML += "<br>bubble 단계 : "+tagName +"태그, "+e.type+"이벤트";
}
</script>
</body>
</html>
onload 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload로 이미지 크기 출력</title>
<script>
function changeImage() {
var sel = document.getElementById("sel");
var img = document.getElementById("myImg");
img.onload = function () {
//이미지 크기 출력
var mySpan = document.getElementById("mySpan");
mySpan.innerHTML = "사이즈 : "+img.width + "X" + img.height;
}
var index = sel.selectedIndex; // 선택된 옵션 인덱스
img.src = sel.options[index].value; // <option>의 value 속성
//이미지 로딩 시작, 완료 후 onload 리스너 호출
}
</script>
</head>
<body onload="changeImage()">
<h3>onload로 이미지 크기 출력</h3>
<hr>
<form>
<select id="sel" onchange="changeImage()">
<option value="../images/apple.png">사과</option>
<option value="../images/banana.png">바나나</option>
<option value="../images/mango.png">망고</option>
</select>
<span id="mySpan">이미지 크기</span>
</form>
<p><img id="myImg" src="../images/apple.png" alt="apple"></p>
</body>
</html> |
 |
순환하는 이미지 구조 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new Image()로 이미지 로딩</title>
<script>
// 미리 로딩해둘 이미지 이름 배열
var files = [
"../images/penguins.png",
"../images/lighthouse.png",
"../images/Chrysanthemum.png",
"../images/Desert.png",
"../images/Hydrangeas.png",
"../images/Jellyfish.png",
"../images/Koala.png",
"../images/Tulips.png"
];
var imgs = new Array();
for (var i = 0; i < files.length; i++) {
imgs[i] = new Image(); // 이미지 객체 생성
imgs[i].src = files[i]; // 이미지 미리 로딩
}
var next = 1; // 처음 인덱스는 0 이므로 처음 클릭했을때는 1번이 되어야 한다.
function change(img) {
img.src = imgs[next].src; // 이미지 변경
next++; //다음 이미지 인덱스
next %= imgs.length; // 갯수를 넘으면 처음으로
}
</script>
</head>
<body>
<h3>new Image()로 이미디 로딩</h3>
<hr>
이미지를 클릭하면 다음 이미지를 보여줍니다. <p>
</p>
<img style="border: 20px ridge wheat;" src="../images/Penguins.png" alt="animal" width="300" height="300"
onclick="change(this)">
</body>
</html>new Image()로 이미디 로딩
이미지를 클릭하면 다음 이미지를 보여줍니다.
next %= imgs.length 를 살펴보자.
우선 files 배열속에 8개의 이미지가 담겨 있다.
next %=8 인 것이다. 그러므로 0번부터 7번까지 클릭하며 넘어갈 때는 8로 나누어도 그대로 본인의 인덱스가 나온다
만약 마지막 번호인 7번까지 돌리고 다시 클릭을 하면 next는 8이 될것이다. 그리고 이를 %해주면 0번으로 되돌아간다.
즉 next %= 8을 통해 계속 순환시켜주는 것이다.
순환소수의 개념에서 보면 다음 사진들은 순환 마디가 8인 순환 소수로 볼 수 있다. 그러므로 8로 나눌 때 마다 값이 같다.
(8로 나눈 나머지가 같을때 그때 나오는 이미지가 같음)
8씩 끊어주는 개념으로 %=8해줌
여러가지 방법으로 값을 전달 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 이벤트 모델</title>
<script>
function btnClick(v) {
alert(v);
}
</script>
</head>
<body>
<input type="button" value="클릭11" onclick="alert('클릭1')"> <!--직접 값 입력-->
<input type="button" value="클릭22" onclick="var str ='클릭2'; alert(str);"> <!--변수로 전달-->
<input type="button" value="클릭33" onclick="btnClick(value)"><!--속성으로 값 입력-->
</body>
</html>
| onfocus | 포커스가 들어왔을때 |
| onblur | 포커스를 잃었을때 |
| onchange | select 태그에서 선택을 바꾸었을때 |
| onkeydown | 키보드 눌렀을때 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onfocus 와 onblur</title>
<script>
function checkFilled(obj){
if(obj.value == ""){
alert("enter name !!!");
obj.focus();// obj에 다시 포커스
}
}
</script>
</head>
<body onload="document.getElementById('name').focus();" >
<h3>onfocus and onblur</h3>
<hr>
<p>이름을 입력하지 않고 다른창으로 이동 할 수 없습니다. </p>
이름 <input type="text" id="name" onblur="checkFilled(this)"><p></p> <!--onblur : 포커스를 잃었을때 실행됨-->
학번 <input type="text">
</body>
</html> |
 |
keydown ( 키보드를 누를때 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onkeydown</title>
<script>
function calculate(e) {
if (e.keyCode == 13) {
var exp = document.getElementById("exp");
var result = document.getElementById("result");
result.value = eval(exp.value);
}
}
</script>
</head>
<body>
<h3> 계산기 만들기</h3>
<hr>
수식을 입력하고 <Enter>를 입력하세요.
<p></p>
<form>
식 <input type="text" id="exp" value="" onkeydown="calculate(event)"><br>
값 <input type="text" id="result">
</form>
</body>
</html>
계산기 만들기
수식을 입력하고 <Enter>를 입력하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라디오 버튼 선택</title>
<script>
function findChecked() {
var found = null;
var kcity = document.getElementsByName("city");
for (var i = 0; i < kcity.length; i++) {
if (kcity[i].checked == true) // 체크되면 true
found = kcity[i]; // found = 버튼 ;
}
if (found != null)
alert(found.value + "이 선택되었음");
//found는 버튼을 담았음으로 버튼의 value이므로 found.value로 표현
else
alert("선택된 것이 없음");
}
</script>
</head>
<body>
<h3> 버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3>
<hr>
<form>
<input type="radio" name="city" value="seoul">서울
<input type="radio" name="city" value="busan">부산
<input type="radio" name="city" value="inchon">인천
<input type="radio" name="city" value="chunchen">춘천
<br>
<input type="button" value="find checked" onclick="findChecked()">
</form>
</body>
</html>alert는 영어로 나옴 (value는 영어로 작성했음으로 )
라디오 버튼은 1개만 체크된다 (중복체크 x) 여러개를 checked라고 작성해도 가장 하단의 것만이 체크되어 나온다.
버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 물품 계산하기</title>
<script>
var sum = 0;
function calc(cBox) {
if (cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
document.getElementById("sumtext").value = sum;
}
</script>
</head>
<body>
<h3>물품을 선택하면 금액이 자동 계산 됩니다.</h3>
<hr>
<form>
<input type="checkbox" name="hap" value="15000" onclick="calc(this)">모자 1.5만원
<input type="checkbox" name="shose" value="33000" onclick="calc(this)">구두 3.3만원
<input type="checkbox" name="bag1" value="57000" onclick="calc(this)">명품 구두 5.7만원
<input type="checkbox" name="bag2" value="80000" onclick="calc(this)">명품가방 8만원 <br>
지불하실 금액 <input type="text" id="sumtext" value="0">
</form>
</body>
</html>물품을 선택하면 금액이 자동 계산 됩니다.
키 이벤트 객체의 프로퍼티
| keyCode | 입력된 키의 유니코드값 |
| altkey | <Alt>키가 눌러진 상태이면 true |
| altLeft | 왼쪽 Alt 키가 눌러진 상태이면 true |
| ctrlkey | <Ctrl>키가 눌러진 상태이면 true |
| ctrlLeft | 왼쪽 Ctrl 키가 눌러진 상태이면 true |
| shiftKey | <Shift>키가 눌러진 상태이면 true |
| shiftLeft | 왼쪽 Shift 키가 눌러진 상태이면 true |
onreset 과 onsubmit
onreset 리스너는 reset 버튼을 클릭하여 폼을 초기화 할 때 호출되며,
onsubmit 리스너는 submit 버튼을 클릭되어 폼을 서버로 전송 할 때 호출된다.
onreset 리스너에서 false를 리턴하면 폼이 초기화되지 않고, onsubmit 리스너에서 false를 리턴하면 폼은 서버로 전송되지 않는다. 이 두 리스너는 <form>태그에서 작성된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키 이벤트</title>
<script>
function whatKeyDown(e) {
var str = "";
var div = document.getElementById("div");
div.innerHTML = ""; // div 객체 내용 초기화
str += "e.key = " + e.key + "<br>";
str += "e.code = " + e.code + "<br>";
div.innerHTML = str;
}
</script>
</head>
<body>
<h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3>
<hr>
텍스트 창에 키를 눌러 보세요. <br>
<input type="text" id="text" onkeypress="whatKeyDown(event)">
<div id="div" style="background-color: skyblue; width:250px; height:70px;"></div>
<!--onkeyoress : <Enter>,<Space> 키와 문자키에 대해서만 키가 눌려지는 순간 추가 호출
-<F1>,<Shift>,<PgDn>,<Del>,<Ins>등 문자 키가 아닌 경우 호출되지 않음 -->
</div>
</body>
</html>
키 리스너와 키 이벤트 객체의 프로퍼티
텍스트 창에 키를 눌러 보세요.
'KH > JavaScript' 카테고리의 다른 글
| JS_BOM(3) (0) | 2022.09.27 |
|---|---|
| JS_BOM(2) screen 객체, history 객체 (0) | 2022.09.26 |
| JS_DOM(Document Object Model) (1) | 2022.09.22 |
| JS_ 사용자 객체(Object) 생성 (0) | 2022.09.22 |
| JS_Math , String ,Equality,Identity (0) | 2022.09.22 |