자바스크립트에서 스크립트의 위치를 다양하게 배치 시킬 수 있는데요


오늘은 스크립트들이 놓이는 위치들에 대해서 한번 알아보도록 하겠습니다!


스크립트가 놓이는 위치가 3군데 정도 있는데요


첫번째, inline 방식입니다.


inline 말 그대로 코드의 안에 배치시키는 방식인데요 코드로 먼저 볼게요.


1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>


javascript가 <input> 태그안에 들어있는게 보이시죠? 이렇게 사용하는 방시이 inline 방식인데요 일일이 이렇게 코드를 치려면 힘들겠죠?


두번째, script 태그를 이용하는 방식입니다.


<script>  이곳에 코드가 들어가지요 </script>  이번에도 코드로 먼저 볼까요?


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>


<script>


이곳에 코드들이 위치한게 보이죠? script태그안에 이렇게 javascript 코드들을 배치시켜서 사용하시면 됩니다.


</script>


세번째, 외부 파일로 분리!


js라는 확장자로 파일을 별도로 분리할 수 있는데요 장점은 재활용성을 높일 수도 있고, 캐쉬를 통해서 속도가 향상 될 수 있어요


1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="script2.js"></script>
</body>
</html>


script2.js

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


<script src="script2.js">  이 부분입니다!  src 를 통해서 외부스크립트 파일에 연결 가능하게 해줍니다.


이렇게 javascript가 위치할 수 있는 부분을 알아봤는데요, 마지막으로 보너스 팁을 드릴까합니다.





마지막 뽀너스 : 헤드태그에 위치한 script파일


script를 head 태그에 위치시킬 수 도 있습니다. 그런데 head태그에 달았을 경우에는 생각해 줘야할 부분이 있어요. 


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<script src="script2.js"></script>
</head>
<body>
<input type="button" id="hw" value="Hello world" />
</body>
</html>


쪼금 달라진 script2.js

1
2
3
4
5
6
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}


head 태그에 달았을 경우에는 script에 작성되어 있는 변수들을 찾지 못해 오류가 발생합니다.


코드를 위에서부터 읽기때문에 아직 body태그에 있는 hw라는 변수를 알지 못해서 오류가 발생하게 되는데요 이러한 오류를 막기위해서 


window.onload = function() { 스크립트 코드 } 이렇게 만들어 주는데요 


window.onload = function() 얘가 해주는 역할이 뭐냐면 현재 웹페이지가 다 읽혀서 완성이 되었을 때 window객체의 onload라는 메소드를 호출 되도록


약속되어 있습니다.  그런데 body와 head에 두었을 때를 조금 비교해 보자면 head태그에 두었을 경우가 웹페이지가 더 느립니다. 


head 태그에 두었을 경우 웹페이지가 모두 로드된다음 실행되기 때문에 더 느려요.


그리고 이 코드들의 출처를 알려 드릴게요. 


생활코딩 : https://opentutorials.org/course/1375/6620  여기입니다.


제가 개인적으로 공부하는데 도움을 많이 받는 곳이에요. 필요하신분들은 한번 들어가시는 것도 좋을거에요.


이상 백자까였습니다.

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

3.javascript 조건문  (0) 2017.09.19
2.Javascript 연산자  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15
Window 객체  (0) 2017.07.20
오브젝트모델(Object Model)  (0) 2017.07.20

+ Recent posts

티스토리툴바