05. HTML과 JavaScript

qpress 2020년 2월 19일 26

개발자가 아니더라도 자바스크립트(JavaScript)라는 말은 무수히 들어 보았을 것입니다. 내용을 잘 모를 경우 Java라는 개발 언어와 관련 있을 것으로 생각하지만 사실 Java와는 직접적인 관련이 없습니다.
자바스크립트이 이름은 모카(Mocha)로 시작하여 중간에 라이브스크립트(LiveScript)였다가 최종적으로 자바스크립트가 되었습니다. 단지 Java와는 이름이 유사할 뿐입니다.

자바스크립트는 원래 브라우저 내에서 HTML과 함께 사용하는 클라이언트 언어입니다. 비교적 최근에 node.js의 등장으로 서버사이드 언어로 확장 되었지만, 주된 사용 용도는 HTML 문서를 보다 동적으로 만들거나 사용자 인터페이서에 기능을 추가할 때 사용되는 언어입니다.

현대의 웹사이트 구현에 있어서 JavaScript는 필수 요소가 되었습니다. 앞 글들에서 언급한 CSS까지 포함하면 사실 웹사이트 또는 웹문서의 3대 필수 요소(언어라고도 할 수 있고 개념이라고도 할 수 있는 요소들)는 HTML, CSS, JavaScript 라고 할수 있습니다.

개발자 뿐만 아니라 마케팅 종사자, 서비스 또는 사업 기획자에게 까지도 HTML, CSS, JavaScript의 개념 정도는 최소한 필요한 지식이라고들 말합니다.

자바스크립트로 HTML을 단순 문서 이상으로 확장 할수 있다!!

HTML과 CSS는 보여지는 서식이라고 할 수 있습니다. 만약 문서 내의 특정 버튼을 클릭했을때 숨겨져 있던 문단이 나타나게 하는 경우는 HTML과 CSS로는 해결되지 않습니다. 이러한 경우에 자바스크립트가 개입하는 것입니다.
아래 간단한 예제를 보겠습니다.

See the Pen JavaScript Basic by Andy Jung (@Samchogo) on CodePen.

버튼을 클릭 했을 경우 어떻게 처리하라는 내용이 Head의 <script> 영역에 정의되어 있습니다. 이 <script> 영역의 코드가 바로 자바스크립트 입니다. 처음 코드를 접하는 경우에는 무척 어렵게 보일 수 있습니다. 개념적으로는 이용자와의 인터페이스에서 다양한 기능을 가능하게 하는 언어라고 이해 하면 되겠습니다.

자바스크립토로 HTML 문서내의 모든 요소(Element)를 변경할 수 도 있고 새로운 요소를 추가 할 수도 있습니다. 또한 접속자의 다양한 액션에 반응하여 적절한 처리를 동적으로 할수도 있습니다.