떠올리는 공간

210106 Object (DOM,BOM ....)

오리_꿀꿀 2021. 1. 6. 01:34

DOM(Document Object Model) : 웹페이지의 내용을 제어

BOM(Browser Object Model) : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것

Javascript core : 자바스크립트가 자체적으로 가지는 객체 (웹브라우저가 아니여도 node.js와 같은 곳에서 제어 가능)

 

이미지 출처 : Браузерное окружение, спецификации (javascript.ru)

 

 

  • 소스코드 - 이미지 불러오기
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <img src ="./dog.jpg" style = "width: 200px;">
    </body>
    <script>
        var imgs = document.getElementsByTagName('img') //객체화
        imgs[0].style.width = '50px'
    </script>
</html>

 

  • 소스코드 - alert : 알림창을 띄운다
<!DOCTYPE html>
<html>
<body>
    <input type="button" value="alert" onclick="alert('hello world')"/>
</body>
</html>

 

  • 소스코드 - confirm : 확인 - True / 취소 - False
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input type="button" value="confirm" onclick="fun_confirm()"/>
        <script>
            function fun_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?') === 'egoing'){
                    alert('welcome');
                } else {
                    alert('fail');
                }
            }
        </script>
    </body>
</html>