<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

1. Javascript Inline 방식 : 

<input onclick="alert('hello world')" type="button" name="inline"><br/>


2. <h2 id="hw">script 태그 내에 삽입하는 방식 :</h2>


<script type="text/javascript">

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

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

alert("hello world");

})

</script>

<br/>


3. 외부 파일로 분리하는 방식 :

<script type="text/javascript" src="./script2.js"></script>

<br/>


4. 스크립트의 위치 :


스크립트는 어느 위치에나 올 수 있지만 body 태그의 마지막 부분에 위치시키는 것이 좋다.

why??

=> 제어할려는 태그가 다 로딩된 다음에 작업이 수행되어야 하니까(로딩되지 않은 상태에서 작업시 제어 불가)


=> 위치에 상관없이 태그가 다 로딩된 후 수행토록 하려면

: javascript의 경우

=> window.onload = function(){

이 내부 코드는 태그가 다 로딩된 이후 수행하게 된다.

      }


     jquery의 경우

      => document.ready(function(){


      })



</body>

</html>


-----------------------------------------------------------------------------------------------------------------------------

script.js 파일

window.onload = function(){
// 웹브라우저의 모든 구성요소가 로딩된 이후에 수행되게 됨. window.onload = function(){}
var hw = document.getElementByid("hw");
hw.addEventListener("click",function(){
alert("외부 스크립트 파일");
});
}


+ Recent posts