내부 자바스크립트

내부 자바스크립트

이런 방식으로 자바스크립트를 실행하는 것은 스타일 어트리뷰트를 이용해 CSS를 실행하는 것과 매우 유사하다. 실행은 되지만 번잡하다. 그리고 간단한 alert 명령어 이상의 작업에 대한 코드를 쓰려고 하면 매우 어렵다.

CSS와 마찬가지로 내부internal 자바스크립트를 이용해 HTML로부터 자바스크립트를 분리할 수 있다. CSS에서는 <style> 태그를 사용했다. 

자바스크립트에서는 <script> 태그를 사용한다. 이런 태그들은 HTML 페이지의 헤더 부분에 넣을 수도 있지만 우리는 이를 페이지의 마지막에 넣을 것이다. 일반적으로 이런 식의 배열을 더 선호한다. 이는 자바스크립트를 페이지의 내용에 시험해보고 실행하기 전에 브라우저를 통해 만들어진 페이지의 모든 구성요소를 확인할 수 있기 때문이다.

페이지를 로드할 때 Hello there!라는 팝업창이 뜨도록 alert라는 명령어를 이용해 자바스크립트를 만들려면 아래 코드를 웹페이지의 </body> 태그 바로 앞에 추가한다.

​<script>

    alert("Hello there!")

</script>

내부 자바스크립트: 클릭에 응답하기

인라인 자바스크립트를 사용할 때는 어떤 요소가 자바스크립트를 구동시키는지가 확실하다. onclick어트리뷰트가 구성요소 안에 위치하기 때문이다. 그렇다면 내부 자바스크립트는 어떻게 버튼과 연계시킬 수 있는가? 해답은 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!’라는 텍스트를 보여주게 만들어라. 간단하다!

아마 위 내용을 두세 차례 반복해서 읽으면 모든 의미를 명확하게 이해할 수 있을 것이다. 그런 다음 과제에 도전해보자.