웹프로그램을 작동하는 자바스크립트(JS)
HTML과 CSS가 프로그램의 모양을 만드는 언어였다면 JS(Javascript)는 프로그램이 특정한 기능을 할 수 있도록 생명을 불어 넣는 역할을 하는 언어입니다.
HTML과 CSS는 프로그램이 동작하도록 할 수 없기 때문에 엄밀히 보면 코딩언어로 분류하기 힘들지만 JS는 프로그램을 동작시킬 수 있는 진정한 코딩 언어라고 할 수 있습니다. 특히 자바스크립트는 다른 코딩 언어에 비해 사용하기 쉽고 웹프로그램뿐만 아니라 모바일 앱이나 PC프로그램, 서버도 만들 수 있기 때문에 매우 강력한 언어입니다.
HTML 문서에 자바스크립트를 사용하는 방법은 '<script>' 에 명령문을 적고 문장에 맞춤점을 찍듯이 ';' (쎄미콜론)을 넣으면 명령문장이 완성 되는데 '<script>' 를 삽입하는 위치에 따라 내부스크립트, 외부스크립트 2가지 유형이 있습니다.
1) 내부스크립트
<html> 안에 <script> </script>라고 적고 그 사이에 JS 명령문을 작성합니다. 위치는 어디에 넣어도 상관은 없지만 일반적으로 <body>태그 최 하단부에 작성합니다. 그 이유는 브라우저가 HTML을 해석할때(랜더링) js 파일을 만나면 자바스크립트 해석을 위해 랜더링을 멈추기 때문에 용량이 큰 js 파일이 마크업보다 먼저있다면 해석할때까지 <body>안의 마크업(태그)들이 랜더링이 되지않아 사용자 입장에서는 멈춰있는 느낌을 받을수 있기 때문입니다.
<body>안에 요소들이 보여지기 전에 반드시 JS로 처리해야할 명령은 <head> 에 삽입 하고 그렇지 않은 명령은 <body> 태그 최하단에 작성하는 것이 프로그램의 성능에 좋습니다.
2) 외부스크립트
<head> </head> 부분에 <script src=" "> 라고 표시하고 src=" " 부분에 외부에 별도로 저장된 자바스크립트 파일의 경로를 작성합니다. 간단한 JS명령은 내부스크립트로 작성하지만 프로그램의 효율적인 관리와 성능향상을 위해 대부분의 자바스크립트는 별개의 분리된 파일로 만들어서 외부스크립트로 사용하는 것이 좋습니다.
( 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시(브라우저 임시저장소)로부터 스크립트를 가져와 사용하면 되므로 트래픽이 절약되고 속도가 빨라집니다. )
<head> 위치에 외부스크립트를 사용할 경우 스크립트 명령어가 <body>안의 마크업(태그)보다 먼저 실행하게 되는데 <body> 안의 랜더링을 마치고 실행되게 하려면 <script> 안에 'defer' 라고 넣어주면 됩니다.
<script src="b.js" defer></script>
자바스크립트에서 사용할 수 있는 문법과 명령어들은 매우 다양하지만 모두 외울 필요없이 5가지 정도의 개념만 알면 누구나 쉽게 자바스크립트로 코딩을 할 수 있습니다.
변수 / 자료형 / 조건문 / 반복문 / 함수
크롬의 개발자도구에서 '콘솔'을 클릭하면 자바스크립트 명령을 실행할 수 있는 콘솔창이 나타납니다. 이곳에서 변수, 조건문, 반복문, 함수 등의 명령들을 테스트해 볼 수 있습니다. 특히 'console.log()' 는 콘솔창에 특정한 값을 출력하는 명령어 인데 자바스크립트로에서 테스트를 위해 가장 많이 사용되는 명령어 입니다.
