티스토리 뷰
목차
CSS와 마찬가지로 '내부자바스크립트'를 이용해 HTML로부터 자바스크립트를 분리할 수 있다. CSS에서는 <style> 태그를 사용하지만 자바스크립트에서는 <script>태그를 사용한다. 이 <script>태그는 페이지의 마지막에 넣을 것이다.
일반적으로 이런 식의 배열을 더 선호한다. 그 이유는 자바스크립트를 페이지의 내용에 시험해보고 실행하기 전에 브라우저를 통해 만들어진 페이지의 모든 구성요소를 확인할 수 있기 때문이다.
페이지를 로드할때 HELLO THERE!라는 팝업창이 뜨도록 alert라는 명령어를 이용해 자바스크립트를 만들려면 아래의 코드를 웹페이지의 </body> 태그앞에 바로 추가한다. 아래 코딩을 입력하고 실행한 결과이다.
위의 코딩을 실행하면 아래와 같은 메시지의 팝업창이 뜬다.
인라인 자바스크립트를 사용할 때는 어떤 요소가 자바스크립트를 구동시키는지 확실하다 onclick 어트리뷰트가 구성요소안에 위치하기 때문이다.
<button onclick ='alert("hello rob!')'> click me! </button>
그러면 인라인 자바스크립트가 아닌 내부 자바스크립트에서는 어떻게 버튼과 연계시킬 수 있는지 알아보자.
그에 대한 답은 CSS에서 처럼 아이디를 이용하는 방법이다
버튼에서 onclick 어트리뷰트를 삭제하자 그리고 'click-me'라는 아이디를 새롭게 만들어라 아래와 같다.
<button id="click-me"> click me!</button>
이제 위처럼 새롭게 만들어진 버튼을 클릭하면 무언가 새로운 것이 발생하도록 만들어 보자.
아래 코드를 </script>태그 사이에 넣는다.
document.getElementById("click-me").onclick = function() {
alert("hello there!")
}
위의 소스코드를 모두 입력하면 아래와 같다
아마 지금까지 본 코드중 가장 복잡할 것이다. 하지만 이를 분석해보면 무척 단순한 내용이다.
첫째, 'document'는 HTML페이지 자체를 이르는 말이다. 브라우저에게 페이지 안의 무언가를 찾고 있다고 알려준다.
다음, getElementById("click-me") 는 정확히 말그대로다. 아이디(id)에 의해(by) 구성요소(element)를 가져오는(get) 것이다. 이 경우 아이디는 'click-me'이다.
'onclick = function()' 부분은 구성요소의 onclick 어트리뷰트를 일정함수 (함수는 특정 기능을 수행하는 일련의 코드를 말한다)와 대응시킨다. 빈 괄호는 해당 함수에 어떤 값도 전달하지 않았다는 의미다.
중괄호{ 와 }는 함수를 위한 코드를 담는다. 중괄호는 자바스크립트를 포함한 코딩 언어들에서 함수를 위한 코드를 담는 일반적 방법이다. 마지막으로 중괄호 안에는 팝업창을 띄워 해당 문구를 보여줄 이미 친숙한 코드 alert( "hello there")가 들어있다. 이 코드를 모두 합쳐서 쉽게 말로 풀면 아래와 같은 의미가 된다.
html페이지를 가져와서 'click-me'라는 아이디를 가진 구성요소를 찾아라. 그리고 해당구성요소에 변화를 줘서 사용자가 이를 클릭할때 팝업창과 함께 'hello there!'라는 텍스트를 보여주게 만들어라.
위 내용을 두세번 반복해서 읽으면 의미를 명확하게 이해할 수 있을 것이다.
연습문제
페이지에서 버튼과 스크리브 태그를 삭제하라 (즉 비어있는 html페이지에서 시작하라) 그리고 who am i? 라는 텍스트링크 (버튼이 아닌)를 추가한다. 그리고 자바스크립트를 추가해서 링크를 클릭했을때 자신의 이름이 팝업창에 뜨게 만들어라.(링크를 연결하려면 아이디를 부여해야 한다) 코드는 아래와 같다
<a id="my-link"> WHO AM I?</a>
<script>
document.getElementById("my-link").onclick=function() {
alert("Rob")
}
</script>