Development/Javascript

Hello World로 시작하기

에반젤리™ 2016. 3. 10. 13:20

프로그래밍을 처음으로 시작했다면 가장 먼저 해보는 것이 아마 Hello World 일 것입니다.

그래서 처음 시작하는 마음으로 JavaScript를 이용해서 Hello World를 출력해보겠습니다.


* 목표 : Hello World를 JavaScript로 출력하기


먼저 index.html 파일 하나를 만들어 줍니다.



<!DOCTYPE html>
<html>
<head>
<title>No.1 Hello World</title>
</head>
<body>
<div id = "content_area">
</div>
</body>
</head>


위와 같이 빈 html 이 있습니다. html 파일을 실행해보세요. 

브라우저에 아무것도 안나옵니다.


여기에 Java Script로 페이지가 로딩 될때 동적으로 Hello World를 출력하는 코드를 추가하면 되겠네요.


그래서 <script> 태그를 사용해서 아래와 같이 추가해줍니다.



<!DOCTYPE html>
<html>
<head>
<title>No.1 Hello World</title>
<script type="text/javaScript">
    window.onload = function() { // 윈도우객체가 로드되면 아래를 실행하세요.
    document.getElementById('content_area').innerHTML= '<h1> Hello World </h1>'; // content_area를 ID로 가지는 DOM 객체를 가져와서 거기에 다음과 같은 HTML을 넣어주세요.
};
</script>
</head>
<body>
	<div id = "content_area">
	</div>
</body>
</html>



자 이제 다시 한번 html 파일을 실행해보세요.

짠! Hello World 가 나타납니다.


지금까지 JavaScript로 Hello World 출력하기 였습니다.