[JS] 자바스크립트의 객체 종류 - 브라우저 객체 모델 (BOM)

2. 브라우저 객체 모델 (BOM)

-브라우저 내부에 내장되어 있는 객체 정보

window,screen, location, history, navigator…

이벤트

-웹 브라우저에서 클라이언트가 수행하는 모든 동작

이벤트 리스너 : 웹 브라우저에서 이벤트가 발생하는지 체크하는 기능

실행할 수 있도록 만들어줌

이벤트 핸들러 : 이벤트가 발생시 자바스크립트 실행가능

이벤트 핸들러

<h3>1. onclick</h3>
<input type = button value="버튼1"> //클릭해도 동작x -> 보여지는 동작과 클릭시 동작이 분리되어있기 때문 --><br>
// -> 이벤트 핸들러 추가해야함<br><br>
<input type = button value="버튼1" onclick="alert('버튼1 클릭!'); "> //동작함<br><br>
<input type = button value="버튼1" onclick="alert('버튼1 클릭!'); alert('버튼2 클릭!');"> //alert 2번클릭<br>
몇개든 상관x, but 일반적사용x -> script태그 사용 + 함수<br><br>
<script>
    function test1() {
        alert('버튼1 클릭!');
        alert('버튼2 클릭!');
    }
</script>
<input type = button value="버튼2" onclick="test1();" > // function을 이용한 버튼
<h3>2. ondblclick</h3>
<input type = button value="버튼3" ondblclick="alert('버튼3 클릭!'); "> // function을 이용한 더블클릭 버튼

<!-- 버튼 4 생성, 마우스가 올라갔을때 메시지 출력 -->
<h3>3. onmouseover</h3>
<input type = button value="버튼4" onmouseover="alert('버튼4 클릭!'); "  >  // 마우스가 올라갔을때 메시지 출력

<h3>4. onkeyup </h3>
키보드 눌리면 alert뜸<br>
<input type ="text" onkeyup="alert('키업 이벤트');"> 

<h3>5.style.background </h3>
마우스 올리면 yellow, 마우스내리면 white<br>
<input type ="text" 
        onmouseover="style.background='yellow'" 
        onmouseout="style.background='white'">

 

 

브라우저 객체모델 - window

window : 최상위 객체, 다양한 하위 객체로 구성됨. 하위 객체들이 모여 하나의 브라우저(윈도우) 만듦

<script>
  alert(window); // [object window] 형태만 확인가능
</script>

console.log(window); // window 객체정보 확인가능(상세 확인)
// => 일반적으로 test해서 결과를 만들어 내는 경우

window.alert();
        // => window 객제정보는 생략 가능

• window.open(주소, 이름, 옵션)
• 확인, 처리하기 위한 기능

window.open(); // 새창 여는 method

window.open("<https://www.naver.com>","","width=880, height=800");

window.open("<https://www.naver.com>","","width=880, height=800, left=400, top=200");

• 모달창(팝업창 대신) → 공지 용도

• 홈페이지 열기 버튼 생성

• 홈페이지 닫기 버튼 생성

<input type = "button" value="홈페이지 닫기" 
    onclick="window.close();" > // 열어놨던 페이지가 닫혀버림

• 홈페이지 열기/ 닫기 버튼 생성

<input type = "button" value="홈페이지 열기" 
    onclick="window.open(' test7_1. html', '', 'width=880, height=800');" >

메시지 : 없는 파일 → 여기서 창닫기 만들어줄거임

-test7_1.html 새파일 만듦

1. 닫기 버튼 만들기

<input type ="button" value="홈페이지 닫기1"
        onclick="window.close();" >

<input type ="button" value="홈페이지 닫기2"
        onclick="opener.window.close();" >

⇒ test7 창 닫힘

 

 

브라우저 객체 모델 - document

<script>
    function fn1() {
        console.log(window.document);
    }
</script>

<input type = "button" value="document 속성확인" 
onclick="fn1();">

function fn1() {
    console.log(window.document);
    **window.document.title = "브라우저 객체모델(BOM)";**
}

title 바뀜

window.document.location = "test7_1.html";

⇒ lcoation의 주소가 test7_1.html로 바뀜

<script>
    function fn1() {
        console.log(window.document);
        window.document.title = "브라우저 객체모델(BOM)";
        //location:주소, bgColor:배경색, fgColor:글자색
        window.document.location = "test7_1.html";
    } //lcoation의 주소가 test7_1.html로 바뀜
</script>

<input type = "button" value="document 속성확인" 
onclick="fn1();">

---

• 속성변경 버튼(배경-검정, 글자-노랑)

<script>
    function fn2() {
        //bgColor:배경색, fgColor:글자색
        window.document.bgColor = "black";
        window.document.fgColor = "yellow";
    }
</script>

<!-- 속성변경 버튼(배경-검정, 글자-노랑) -->
<input type = "button" value="document 속성변경" 
onclick="fn2();">

• 라디오 버튼 만들기

<input type="radio" name="color"> PINK
<input type="radio" name="color"> BLUE
<input type="radio" name="color"> PURPLE
<input type="checkbox" name="color"> PURPLE

⇒ radio = 여러개 중 하나만 선택할 때 사용

⇒ checkbox = 여러개 선택할 때 사용

-체크 시 배경색상 변경

function fn3(c) { //color를 매개변수로 만듦
      //bgColor:배경색, fgColor:글자색
      document.bgColor = c; 
      document.fgColor = c; 
  }

<input type="radio" name="color" onclick="fn3('pink');"> PINK
<input type="radio" name="color" onclick="fn3('DodgerBlue');"> BLUE
<input type="radio" name="color"> PURPLE
<input type="checkbox" name="color" onclick="fn3('SlateBlue');"> PURPLE

 

• document에 이미지 태그를 사용하면 이미지 정보들은 작성된 순서에 따라 배열로 저장 (배열의 요소 사용해서 접근)

<script>
    alert(document.images[0].src);
</script>

 

location 객체 (p.576~600)

• 페이지 이동

location.href="naver";

location : 객체

href : 속성

console.log(window.location);

메서드로 사용 가능

document.write("호스트 : " + location.host + "<br>");
document.write("href : " + location.href + "<br>");

• 새로고침(F5)

location.reload();

• 페이지 이동

location.replace("test7_1.html");

⇒ test7_1.html파일로 페이지 변경

location.href="test7_1.html";

⇒ 둘 다 주소창에서 수정이 안됨(test7 변경시 변경x)

⇒ 차이점 : 뒤로가기 버튼의 유무

 

history 객체

test7~test7_3까지 페이지 이동

test7

<a href="test7_1.html"> 7_1 페이지 이동 </a>

test7_1

<a href="test7_2.html"> 7_2 페이지 이동 </a> <hr>

<input type="button" value="뒤로" onclick="history.back();">
<input type="button" value="앞으로" onclick="history.forward();">

test7_2

<a href="test7_3.html"> 7_3 페이지 이동 </a>

<input type="button" value="뒤로" onclick="history.go(-1);">
<input type="button" value="앞으로" onclick="history.go(1);">

test7_3

<input type="button" value="뒤로(1칸)" onclick="history.go(-1);">
<input type="button" value="뒤로(2칸)" onclick="history.go(-2);">