자바스크립트에서 스크립트의 위치를 다양하게 배치 시킬 수 있는데요
오늘은 스크립트들이 놓이는 위치들에 대해서 한번 알아보도록 하겠습니다!
스크립트가 놓이는 위치가 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 여기입니다.
제가 개인적으로 공부하는데 도움을 많이 받는 곳이에요. 필요하신분들은 한번 들어가시는 것도 좋을거에요.
이상 백자까였습니다.