개발자 노트

[HTML/JavaScript]HMTL에 script연동하는 방법 본문

Web

[HTML/JavaScript]HMTL에 script연동하는 방법

jurogrammer 2020. 3. 12. 12:09

HMTL에 script연동하는 방법

1.script태그를 통해.

<!DOCTYPE html>
<html>

<body>
    <input type ="button" id ="hw" value = "Hello world"/>
    <script>
        var hw = document.getElementById('hw');
        hw.addEventListener('click', fuction(){
            alert('Hello world');
        })
    </script>
</body>
</html>

2.external file load

html

<!DOCTYPE html>
<html>

<body>
    <input type ="button" id ="hw" value = "Hello world"/>
    <script src="./helloworld.js"></script>
</body>
</html>

javascript

var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
        })

head보단 body 태그가 끝나는 지점에 위치시키는 것이 중요하다.

  • head에 위치 시킨다면 자바스크립트 실행시 id값이 없을 수 있다.
  • 만약에 head에 위치시켜 script를 실행시키고 싶다면, window.onload = 함수정의 하는 방식으로 실행가능하다. 이것이 비동기식! 마지막에 실행됨.
window.onload = function(){
        var hw = document.getElementById('hw');
                hw.addEventListener('click', function(){
                    alert('Hello world');
                })
}
반응형

'Web' 카테고리의 다른 글

[jdbc]jdbc연동시 발생했던 에러  (0) 2020.03.12
[JavaScript]Object Model  (0) 2020.03.12
[HTML/JavaScript]Dom에 대하여  (0) 2020.03.12
[JavaScript]Ajax-Fetch에 대하여  (0) 2020.03.12
ObjectMapper import error  (0) 2020.03.09
'Web' Related Articles more
Comments