Languages/Java Script

[Js] 자바스크립트 | html에서 javascript 로드 하는 방법

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

위 강의 중 기초적인 내용이나, 필요 지식 등의 내용은 따로 포스팅 하지 않겠습니다. (html, css, 실습 환경 등..)

웹 브라우저를 동작시키기 위해서는 html, css, javascript가 필요하다. 이는 각각 정보, 디자인, 제어 를 담당하고 있다.

HTML에서 JavaScript 로드하기

JavaScript로 웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.

방식은 inline방식과, script방식 그리고 마지막으론 외부 파일로 분리하는 방식이 있다.

inline방식은 직접 자바스크립트를 기술 하는 방식이다.

<inuput type = "button" onclick="alert('haeun hello~');" value="click" />

위와 같이 html 코드에 이벤트를 삽입하는 방식이다.

장점은 태그에 연관된 스크립트가 분명하게 드러난다는 것이다.

하지만 정보와 제어가 섞여있기 때문에 정보로서의 가치가 떨어지게 된다.

다음 방식으로 script태그를 따로 빼서 써주는 방식이 있다.

<input type= "button" id="btn" value="click" />

<script>

    var btn = document.getElemnetById('btn');

    btn.addEvevntListener('click',function(){

    alert('hello haeun');

    })

</script>

위 방식은 스크립트를 따로 정의해주는 것으로,

이러한 방법은 위에 방법보다 정보로서의 가치는 높아질 수 있지만,

여러 코드에서 함께 사용해야 하는 내용의 경우 따로 빼놓는 것이 코드의 효율성도 높아지고 재사용성이 높아지기 때문에 외부 파일로 분리하는 방법이 생겨나게 되었다.

외부 파일로 분리하는 것은 이전의 강좌들에서도 다룬 내용으로, 같은 위치상에 따로 뺄 js 코드만 빼서, 저장 하고

이를 <script src="./haeun.js"> </script> 와 같이 정의하여 불러와서 사용할 수 있는 방법이다.

이때 자바스크립트 파일의 위치에 따라 에러가 발생할 수 있는데, 그 예시는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
<script src="haeun.js"></script> //외부에 스크립트 정의
</head>
<body>
<input type= "button" id="btn" value="click" />

<script>//비교를 위해 이 파일 내에서 정의 함 
	var btn = document.getElementById('btn');
	btn.addEventListener('click',function(){
	alert('소스 제대로 읽음');
	})
</script>


	
</script>
</body>
</html>

먼저 main.html 코드를 살펴보면 head에 있는 script는 haeun.js라는 파일을 읽어온다.

haeun.js코드의 내용은 아래와 같다.

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert('소스 읽기 전임!!');
})

코드를 동작시켰을 때 예상되는 결과는 아래와 같다.

소스 읽기 전임!!
소스 제대로 읽음

하지만, 웹 브라우저에서는 에러가 뜨고, 버튼을 클릭 시 소스 제대로 읽음 이라는 경고창만 출력된다.

이유는 바로, 헤드에 있는 스크립트를 읽을 당시에는 아래의 정의된 Element를 찾지 못하기 때문이다.

그래서 존재하지 않는 객체의 메소드를 호출하게 되어 에러가 나게 된 것이다.

이러한 에러를 해결하려면, window.onload = function()이라는 코드를 추가해주어야 한다.

아래 추가된 코드를 살펴보자. haeun.js의 코드이다.

window.onload = function(){
	var btn = document.getElementById('btn');
	btn.addEventListener('click',function(){
	alert('소스 읽기 전임!!');
	})	
}

이때 예상 결과는 아래일 것이라 생각한다.

소스 읽기 전임!!
소스 제대로 읽음

하지만, 실제 실행 결과는 반대로 동작한다. 왜 그럴까?

소스 제대로 읽음
소스 읽기 전임!!

그 이유는 window.onload = function이라고 코드를 추가해주면, 윈도우라는 객체에 onload라는 메소드를 호출하는 것인데

이 메소드는 웹 브라우저의 모든 동작이 끝난 후 실행시킨다.

즉 한번 쭉~ 읽고 이후에 동작하게 되는 것이다.

그렇기 때문에 스크립트 태그를 <body>태그 맨 끝에 위치 시키는 것이 조금 더 효율적으로 동작 할 수 있다는 것이다.

만약 두 코드를 맨 아래에 함께 위치 시켰다면, 굳이 window.onload 메소드를 웹 브라우저 동작이 끝난 후 다시 실행 시킬 필요가 없어지기 때문이다.

'Languages > Java Script' 카테고리의 다른 글

[Js] Browser Object Model \| BOM \| 전역객체 Window (0)	2021.02.07
[Js] Object Model \| 객체화란? \| Core \| BOM \| DOM (0)	2021.02.07
[Js] 패턴 \| 재귀함수 (0)	2021.02.04
[Js] 참조 \| 복제 \| 함수와 참조 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 자바스크립트 | html에서 javascript 로드 하는 방법

HTML에서 JavaScript 로드하기

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바