자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기

2018. 11. 3. 08:36

지금까지 코드를 웹브라우저 콘솔에 직접 작성해 왔는데, 작성한 코드를 파일로 저장하는 방법을 알아봅시다.

자바스크립트 코드는 웹문서 파일인 HTML 파일에 저장되거나, 별도의 파일로 저장된 후 웹문서 파일에서 호출될 수 있습니다. 두가지 방법 다 HTML 파일을 필요로 합니다.

HTML

HTML은 Hyper Text Markup Language로 웹문서를 작성하기 위한 언어입니다. 프로그래밍을 하기 위한 언어가 아닌 웹페이지를 만들기 위한 언어로, 그 구조와 용법이 자바스크립트와 상당히 다릅니다. 하지만 어렵진 않으므로 이번 기회에 간단하게 정말 기초만 배워보도록 합시다.

HTML파일은 아래와 같은 기본 구조를 가지고 있습니다.

<html>
  <head></head>
  <body></body>
</html>

html, head, body 등 <>안에 들어있는 이들을 HTML 태그(tag)라고 부르고, 태그들은 <html>와</html>, <head>와</head>, <body>와</body>같이 일반적으로 여는 태그와 닫는 태그 두가지가 짝으로 존재합니다. 태그 안에 다른 태그들이 들어 갈 수 있는데, 위 코드는 html 태그 안에 head 태그와 body 태그가 들어 있는 형태입니다.

head 태그에는 페이지 설정에 관한 내용이 들어갑니다. 웹페이지 제목을 설정하는 title 태그를 head 태그 안에 작성해 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>    
  </head>
  <body></body>
</html>

메모장 등의 텍스트 에디터 프로그램을 열고 위 코드를 붙여넣기 해 봅시다.

hello_world.html이라는 이름으로 저장합니다. html 확장자는 HTML 코드 파일을 나타내는 확장자로, 웹브라우저로 열 수 있습니다. 파일 형식은 모든 파일 (*.*)으로, 인코딩은 UTF-8으로 합니다. 위치는 아무곳이나 괜찮습니다.

hello_world.html파일을 브라우저로 엽니다.

작성한 페이지 제목이 상단에 표시되는 것을 볼 수 있습니다.

다음으로 body에는 페이지에 표시될 내용을 작성합니다. 문단(paragraph)을 작성하는 p 태그를 사용해 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
  </body>
</html>

다시 hello_world.html파일을 저장하고 페이지를 새로고침해봅시다.

이런식으로 간단한 웹페이지를 만들 수 있습니다. 그림을 넣으려면? 그림을 넣을 수 있는 img 태그를 사용하고, 글씨 모양, 크기를 조절하려면 font 태그를 사용하는 등, HTML 코드를 사용하여 웹페이지를 만들 수 있습니다. 관심이 있으신 분들은 따로 찾아서 공부해 보시기 바랍니다.

HTML과 자바스크립트

위에서 살펴봤듯이 HTML은 단순히 문서를 작성하기 위한 언어입니다. 정보(텍스트, 그림, 영상, 소리 등)의 표현만 가능하고, 페이지 이동 외에는 어떠한 기능도 지원하지 않습니다. 그래서 자바스크립트가 나오기 전까지 웹페이지의 모든 프로그래밍적 기능들은 서버에서 처리하여야만 했습니다.

그 시절 웹사이트의 프로그래밍적 기능들은 주로 폼을 작성하고 처리하는 기능들이 였는데, 인터넷이 굉장히 느렸던 시절이라 폼을 전송하고 결과를 받기 까지 시간이 꽤 걸렸습니다. 한번에 몇 초씩 걸렸다고 합니다.

특히 사람들은 폼에 입력된 정보가 규격에 맞는지 판단을 서버에서 처리하는 것에 불만이 많았습니다. 예를들어 id와 password를 입력하여 로그인을 하는 폼이 있고, id와 password는 4글자 이상 8글자이하여야 한다고 합시다. id나 password에 이 규칙에 맞지 않는 글자수가 들어가면 로그인이 안되는 것은 분명한데도 무조건 입력된 정보를 서버로 전달하고 서버가 글자수가 맞지 않다는 것을 사용자에게 알리게 되서 불필요하게 시간이 걸리게 됩니다.

이런 문제를 해결하기 위해 브라우저에서 작동하는 자바스크립트를 만들게 되었습니다. 서버로 정보를 보내기전에 간단한 규칙 정도는 스스로 판단하고 경고를 띄워서 시간을 절약할 수 있게 되었습니다. 스크립트라는 이름에서 알 수 있듯이 처음에는 언어가 아니라 단순한 명령어로서 발전해오다가 지금은 상당한 발전을 하여 독립된 프로그래밍 언어가 되었습니다.

HTML파일에 자바스크립트 코드 넣기

자바스크립트 코드는 script 태그안에 작성될 수 있고, script 태그는 body에 넣을 수 있습니다. 이 방법은 하나의 파일로 모든 것을 저장 할 수 있지만, 요즘은 HTML과 자바스크립트는 분리시키는 것이 대세이므로 연습할 때만 사용하기 바랍니다.

위에서 작성한 HTML 파일에 hello world 예제를 넣어 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
    <script>
      console.log("hello world");
    </script>
  </body>
</html>

들여쓰기는 html 코드를 더 잘 볼 수 있게 하기 위한 것인데, 우린 자바스크립트에만 관심이 있으므로 아래와 같이 script 태그에 들여쓰기를 없애면 코드 작성에는 더 편합니다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
<script>

console.log("hello world");

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

파일을 저장하고 브라우저에서 새로 고침 해봅시다. console.log 함수는 브라우저 콘솔에 문자열을 출력하므로 브라우저 콘솔을 엽니다.

콘솔에 "hello world"라는 문자열이 출력되고, 우측에는 hello_world.html:9라고 표시되는데, 이는 해당 문자열이 hello_world.html 파일의 9번째 줄에 의해서 출력되었음을 나타냅니다.

코드를 별도의 파일로 저장 한 후 HTML에서 호출하기

자바스크립트는 .js 확장자를 사용합니다. 메모장 등의 텍스트 에디터 프로그램을 열고 hello world 코드를 작성한 후 hello_world.js라는 이름으로 저장합시다. 파일 위치는 hello_world.html과 같은 위치, 파일 형식은모든 파일 (*.*)으로, 인코딩은 UTF-8으로 합니다.

hello_world.html은 아래와 같이 내용을 수정합니다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
    <script type="text/javascript" src="hello_world.js"></script>
  </body>
</html>

이 스크립트 코드는 head에 넣어도 작동하지만, 일반적으로 body가 끝나기 바로 전에 넣는 것이 좋습니다. 페이지 내용을 수정하는 코드의 경우 페이지 내용 전에 스크립트가 호출되면 작동하지 않기 때문입니다.

수정된 hello_world.html파일을 브라우저에서 열어서 결과를 확인해 봅시다.

"hello world" 우측에 표시되는 코드의 위치가 hello_world.js:1로 바뀐 것을 볼 수 있습니다.

단순히 코딩 연습 파일을 저장하는 용도로는 파일이 하나인 것이 편하지만, 브라우저의 cache 기능때문에 실무에서는 js를 따로 빼는 것이 맞습니다. 실무에서는 반드시 js파일을 따로 빼도록 합시다.

'프로그래밍 입문' 카테고리의 다른 글

자바스크립트로 프로그래밍 입문 18. 배열(Array) (0)	2018.11.14
자바스크립트로 프로그래밍 입문 16. 변수2-지역변수, 전역변수, 스코프 (0)	2018.11.07
[자바스크립트 연습문제] 13 풀이 (0)	2018.10.30
[자바스크립트 연습문제] 13 별찍기 예제 (0)	2018.10.27
자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break, (0)	2018.10.25

Ian H Blog