Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 (1) 웹에서의 자바스크립트 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 (1) 웹에서의 자바스크립트

Romantic_Developer 2018. 7. 25. 22:28

안녕하세요 영감을 주는 개발자 방민방민입니다.


오늘은 HTML 에서 자바스크립트를 로드하는 방법에 대하여 알아보고자 합니다.


웹 자바스크립트의 첫 포스팅인 만큼 바로 시작하도록 하겠습니다!


1. inline


inline 은 자바스크립트 태그 내부에 javascript 코드를 기술하는 방식입니다. 아래 코드를 보도록 하겠습니다.

<!DOCTYPE html>
<html>
	<body>
		<input type="button" onclick="alert('Hello world')" value = "Hello world">
	</body>
</html>


onclick 은 이벤트의 발생시 " " 내부에 있는 javaScript 코드를 실행하게 됩니다. 즉 버튼이 클릭되었을때, 내부에 있는 alert('hello world') 코드를 실행하는 방식입니다.


이러한 방식의 장점은 태그에 연관된 자바스크립트 코드를 명확하게 확인이 가능하다는 점입니다. 그러나 제어와 HTML 정보가 함께 섞여있기 때문에 복잡해 질 수 있고, 그 정보로써의 가치가 떨어집니다.


2. Script 태그


Script 태그를 이용하여 스크립트 코드를 삽입 할 수도 있습니다.

<!DOCTYPE html>
<html>
	<body>
		<input type="button" id="hw" value ="Hello world">
		<script type>//스크립트 코드 시작
			var  hw = document.getElementById('hw');//id 가 hw 일 엘리먼트를 가져옴
			hw.addEventListener('click', function(){//click event 추가
				alert('Hello world');
			})
		</script>//스크립트 코드 종료
	</body>
</html>


<script></script> 이 html 코드 내부에 script 코드를 분리하여 작성하는 것이 최근 script 코드 작성의 대세입니다. 이렇게 하면 코드를 분리할 수 있기때문에 가독성이 올라갑니다.



3. Script 파일 분리


Script 태그를 활용하면 Script 파일을 분리할 수 있습니다. 2개의 파일이 필요합니다.

html 문서

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>

js 문서

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


이렇게 되면, HTML 문서 내에는 javascript 코드가 들어가지 않고, js 문서를 읽어와서 실행하게 됩니다. 그러면 자바스크립트 코드가 완전하게 분리되기 때문에, 모듈화가 가능해 효율성이 올라가고 HTML파일은 정보만을 포함하기 때문에 그 정보로써의 가치가 올라갑니다.

js 파일에 오류가 발생하면 js 코드만 보면 되기 때문에 유지보수가 용이해 집니다.



js 파일은 body 태그 마지막에 위치 시킬수도 있지만, head 태그에도 위치시킬 수 있습니다. 이 경우 위의 예제에서는 오류가 발생합니다. 이는 이벤트가 형성되지 않기 때문이며 js 파일에 있는 코드를 아래의 윈도우 코드로 묶어주어야 합니다.


window.onload = function(){}



이러한 이벤트에 대한 내용은 뒤에서 더 자세하게 다루도록 하겠습니다.



오늘은 간단하게 웹에서 자바스크립트를 활용하는 다양한 방법에 대하여 알아보았습니다.

이제 시작입니다! 화이팅!


지금까지 영감을 주는 개발자 방민방민 이었습니다.



저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션  (0) 2018.07.27
(Web JavaScript) 웹 자바스크립트 (2) 오브젝트 모델  (0) 2018.07.26
(Web JavaScript) 웹 자바스크립트 시작  (0) 2018.07.24
'Romantic Developer/Web JavaScript' Related Articles more