티스토리 뷰
1. JavaScript의 기본 개념
우리가 HTML로 웹 페이지의 구조를 만들어서 내용을 작성하고 HTML 요소들의 스타일을 CSS로 지정해서 하나의 웹 페이지를 만들었다고 하지만 그 페이지는 어떠한 기능도 없는 상태입니다. 예를 들어 내가 '자바스크립트'라는 단어를 검색하기 위해 검색 버튼을 눌렀을 때 아무런 반응이 없는 상황과 마찬가지인 것입니다. 웹 페이지에 동적으로 동작하는 기능을 넣어서 사용자가 웹 페이지를 역동적으로 이용할 수 있도록 해주는 것이 바로 자바스크립트(JavaScript)입니다. 자바스크립트는 브렌든 아이크(Brendan Eich)에 의하여 개발되었습니다. 처음에는 라이브스크립트(LiveScript)라는 이름이었지만 최종적으로는 현재 이름 자바스크립트가 되었습니다. 자바스크립트는 브라우저마다 지원되는 버전이 다르며 가장 최근 버전은 안정적인 ECMAScript 2021입니다. 자바스크립트는 웹 페이지에서 다양한 동작들을 처리하는 데 사용되었으며 웹 브라우저의 내장 객체들에도 접근할 수 있었습니다. 그렇기 때문에 자바스크립트는 웹 페이지를 사용자와 상호작용할 수 있도록 도와주고 즉각적인 반응 또한 보여줄 수 있기 때문에 웹 개발자가 반드시 알아야 할 개발 언어 중 하나입니다. 클라이언트 웹 페이지를 위한 개발 언어였지만 자바스크립트는 점점 더 용도가 확장되고 있습니다. 자바스크립트를 서버 프로그래밍 언어로 변화시키려는 Node.js, 자바스크립트의 라이브러리인 jQuery, 독립적인 데이터 형식으로 객체 형태로 데이터 전송을 하는 JSON 등 클라이언트와 서버에서도 자바스크립트가 확장되어서 사용되고 있습니다. 추가로 리액트 (React), 앵귤러 (Angular), 뷰.js (Vue.js) 등 다양한 프레임워크와 라이브러리가 자바스크립트 기반으로 구축되고 있어 복잡한 개발을 단순화할 수 있습니다.
2. JavaScript의 특징과 비교
자바스크립트 특징은 굉장히 다양합니다. 컴파일 과정을 거치지 않고 바로 실행시켜 라인 하나하나 실행시킬 수 있는 인터프리트 언어입니다. 그리고 변수의 자료형을 굳이 선언하지 않고도 변수를 사용할 수 있는 장점이 있습니다. 덧붙여 호이스팅 개념이 자바스크립트에서도 존재하게 되는데 이 때문에 겪는 에러 상황을 피하기 위해 let, const 자료형 선언이 있습니다. 그리고 자바스크립트는 C에서 영향을 받은 개발 언어이기 때문에 C언어의 구조를 지원합니다. 즉 if-else문, while 문, for 문 등과 같은 개발 언어 문법을 완벽하게 지원할 수 있다는 것 입니다. 그리고 전반적으로 자바스크립트는 클래스라는 개념이 없기 때문에 기존 객체를 사용하여 새로운 객체를 또 생성할 수 있는 프로토타입의 객체 지향 언어입니다. 자바스크립트에서 사용하는 함수는 그 자체로 객체라는 것을 의미합니다. 여기서 또 궁금해하실 수 있는 점이 '자바(Java)와 자바스크립트(JavaScript)는 다른 것인가?'입니다. 우선 자바는 소스 파일을 반드시 컴파일하여 실행할 수 있는 컴파일 언어이며 자바 가상 기계(Java Virtual Machine)의 위에서 실행이 됩니다. 추가로 별도의 소스 파일에서 작성을 해야 하며 변수의 타입은 반드시 선언해주어야 하는 특징을 가지고 있습니다. 반면에 자바스크립트는 위에서 언급했듯 웹 브라우저가 소스 코드들을 직접 해석하는 인터프리트 언어이며 웹 브라우저 위에서 실행이 됩니다. 물론 자바스크립트도 따로 파일을 생성하여 HTML 문서에 적용시킬 수 있지만 기본적으로 HTML 문서 내용 안에 삽입이 가능합니다.
3. JavaScript의 삽입하는 방법
자바스크립트를 삽입하는 방법은 CSS와 마찬가지로 3가지 방법이 있습니다. 내부 자바스크립트, 외부 자바스크립트, 인라인 자바스크립트가 있으며 아래의 예시와 함께 살펴보도록 하겠습니다.
우선 내부 자바스크립트는 <script>...</script> 태그를 사용하여 이러한 형태로 HTML 문서의 <head> 부분이나 <body> 부분 안에 위치할 수 있습니다. 하지만 보통 <head> 부분에 넣는 것이 바람직하다고 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>자바 스크립트</title>
<script>
document.write("웹코노미의 자바스크립트");
</script>
</head>
<body></body>
</html>위의 코드에서 자바스크립트 부분을 의미하는 <script> 부분을 해석하자면, "웹코노미의 자바스크립트"라는 텍스트를 HTML 문서에 추가하는 write() 메서드를 동작시키도록 document 객체 내에서 호출시켜달라는 의미입니다. 여기서 객채는 속성과 동작을 모두 정의한 것을 말하고, 메서드는 동작을 하는 역할을 합니다. 추가적으로 자바스크립트에서 가장 중요한 문법 중 하나는 자바스크립트에서는 반드시 세미콜론 (;)으로 코드를 마무리해주어야 한다는 것입니다.
다음으로 외부 자바스크립트는 자바스크립트 파일을 작성하고 난 후 외부에 저장하여 파일을 사용하는 것입니다. 외부 파일을 사용할 경우 CSS와 마찬가지로 웹 페이지 전체적으로 원하는 동작을 적용시키고 싶을 때 또는 효율적인 동작 관리를 하고 싶을 때 큰 이점이 있습니다. 보통 외부 자바스크립트는 <head> 부분에 작성하지만 <body>에도 작성 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="javascript.js"></script>
</head>
<body></body>
</html>이렇게 javascript.js 라는 외부 자바스크립트 파일이 있다면 해당 파일의 경로 또는 파일명을 지정하여 스크립트를 적용시키는 방법이 있습니다.
마지막으로 인라인 자바스크립트는 HTML 태그 요소 내부에 이벤트 속성으로 삽입하는 방법입니다. 주로 해당 방법은 필요한 경우에만 쓰이게 됩니다.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('웹코노미의 자바스크립트')">버튼</button>
</body>
</html>위의 코드는 <button>이라는 HTMl 태그 요소에 클릭이 발생할 때 이벤트가 발생하도록 작성된 코드이며, 버튼이 클릭되면 '웹코노미의 자바스크립트'라는 텍스트를 가진 알림창을 띄우라는 의미를 가진 코드입니다.
이번 포스팅은 HTML의 동작 기능을 책임지는 웹 개발자가 알아야 할 개발 언어 3가지 중 하나인 자바스크립트를 소개해드렸습니다. 현직으로 웹 개발을 하고 있는 저에게도 자바스크립트는 굉장히 필수적으로 사용되는 개발 언어이기 때문에 웹 개발 입문자 분들께서 반드시 자바스크립트를 학습하셨으면 좋겠으면 하는 바람입니다.