HTML CSS JavaScript(웹 페이지를 제어하는 역할)

HTML에서 JavaScript로드하기

Inline 방식은 태그에 직접 자바스크립트를 직접 기술하는 방식입니다.

장점은 연관된 스크립트가 분명하게 드러난다는 점입니다. 하지만 정보와 제어가 같이 있기 때문에 정보로서 가치가 떨어집니다.

<input type="button" onclick="alert('Hello world')" value="Hello world" />

<script>태그 이용

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript">

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

</script>

html코드 안에 자바스크립트가 존재하지 않습니다. 또한, 자바스크립트 유지보수하기에 바람직합니다.

외부 파일로 분리

정보와 제어의 결합도를 낯추며 유지보수의 편의성이 높아집니다.

<script src="./script2.js"></script>

script2.js  파일 내 코드

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

    alert('Hello world');

})

Script파일의 위치

head 태그에 위치시킬 수 있지만 이 경우는 오류가 발생할 수 있습니다.

Id가 hw의 존재를 해석하기 전의 상태에서 조회를 하고 있기 때문에 null의 상태가 됩니다. 존재하지 않는 객체를 호출한 상태이기 때문에 오류가 발생합니다.

window.onload = function(){

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

} //윈도우 객체 onload를 호출하도록 약속, 태그가 화면이 등장한 이후 스크립트 //코드가 실행되기 때문에 오류를 없앨 수 있습니다.

script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법입니다.

Object Model

객체화란 무엇인가?

테두리와 같은 역할을 합니다.

각각의 태그마다 객체를 만들어 준비를 해놓은 상태, 태그에 해당하는 객체를 찾아 메소드를 호출하거나 프로퍼티를 가져오는 것

객체화 = 객체 제어 방법

var imgs = document.getElementsByTagName(‘img’);

imgs[0].style.width=’300px’;

JavaScript Core, BOM DOM(윈도우 객체의 프로퍼티)

window : 전역객체

JavaScript Core : JavaScript 언어 자체에 정의되어 있는 객체들

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

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

출처 : 생활코딩 강의