BOM (Browser Object Model) 이란?? 

 

웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단

BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어

 

 

Window 객체

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

 

전역객체

Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능

 

이런식으로 생략 가능

 

 

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

alert

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

 

확인을 누를때 까지는 아무것도 할수 없음

 

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="button" value="alue" onclick="alertfnc">

    <script>
      function alertfnc(){
        alert(1);
        alert(2);
        alert(3);
      }
      console.log(alertfnc())
    </script>
</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 버튼을 누르고 id값 입력하라는 창이 나옴

 

 

test라는 입력값을 받게 되면 welcome

 

 

그외 다른값을 입력 받으면 fail이 나옴

 

 

 

출처 및 참고 : https://www.youtube.com/watch?v=mFawNZz_Uu0 얄코님 유튜브 

                        https://opentutorials.org/module/904/6633 생활코딩

'Javascript > BOM' 카테고리의 다른 글

창 제어(window.open, 새 창에 접근, 팝업 차단 )  (0) 2023.01.25
Navigator 객체  (0) 2023.01.25
Location 객체 ( URL 관련 )  (0) 2023.01.25

+ Recent posts