Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS Bom(Browser Object Model) 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS Bom(Browser Object Model)

호IT 2021. 2. 7. 01:25

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

- BOM(Browser Object Model) 

 

BOM(Browser Object Model)이란 웹브라우저의 창이나 프레임을 추상화해서

프로그래밍적으로 제어할 수 있도록 제공하는 수단입니다.

 

BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있습니다.

 

 

 

 

 

- 전역 객체 Window

 

 

 

Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미합니다

 

 

 

 

 

이미지 출처 :   https://learn.javascript.ru/browser-environment

 

 

 

 

 

 

 

브라우저에서 윈도우 객체를 확인해볼수있습니다.

console에서 window를 입력하면 위와같이 출력됩니다.

 

 

 

 

document 와 navigateor, Array 속성들도 console에 입력하면 위와같은 출력값이 나옵니다.

 

document,navigator,Array 모두 window의 메소드로 구동되고있습니다.

 

평상시 많이쓰던 console.log도 window의객체로 사용중이였습니다.

하지만 console.log을 사용할때 window.console.log를 안해주는 이유는 window는 생략을 해줘도 무방하기때문에 위의 사진처럼 같은  결괏값이 나옵니다

 

 

전역변수 라는 것은 window 라는 전역 객체의 프로퍼티라고 할 수 있습니다.

 

 

 

 

 

- 사용자와 커뮤니케이션 하기

HTML은 form태그를 통해 사용자와 커뮤니케이션을 합니다.

 

자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공합니다. 

 

 

 

 

 

- alert

 

경고창이라고 부릅니다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용합니다.

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="alert" onclick="alert('hello world');" />
    </body>
</html>

 

 

 

- confirm

 

확인과 취소 버튼이 생기고, 확인을 누르면 true, 취소를 누르면 false 를 리턴합니다.

 

 

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="confirm" onclick="func_confirm()" />
        <script>
            function func_confirm(){
                if(confirm('ok?')){
                    alert('ok');
                } else {
                    alert('cancel');
                }
            }
        </script>
    </body>
</html>

 

 

컨펌 실행
확인 버튼을 눌렀을때
취소 버튼을 눌렀을때

 

 

- prompt

 

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="prompt" onclick="func_prompt()" />
        <script>
            function func_prompt(){
                if(prompt('id?') === 'test'){
                    alert('welcome');
                } else {
                    alert('fail');
                }
            }
        </script>
    </body>
</html>

 

- prompt : true

 

  

 

 

 

- prompt : false

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS Navigator 객체  (0) 2021.02.07
[ JavaScript ] JS location 객체  (0) 2021.02.07
[ JavaScript] JS Object Model  (0) 2021.02.06
[ JavaScript ] 복제와 참조데이터  (0) 2021.02.04
[ JavaScript ] JS 원시데이터,wrapper object,  (0) 2021.02.04
'SUA 정보보안/JavaScript' Related Articles more
Comments