웹 개발의 첫걸음은 자바스크립트(JavaScript)의 기본 사항을 이해하는 것에서 시작됩니다. 자바스크립트는 동적(dynamic) 프로그래밍 언어로, 가볍고 주로 웹 페이지의 구성 요소로 활용됩니다. 클라이언트 측 스크립트가 사용자와 상호작용할 수 있도록 하여 동적인 페이지를 구현할 수 있게 해주며, 객체 지향 기능을 갖춘 인터프리터 방식의 프로그래밍 언어이기도 합니다.
변수(Variables)
다른 많은 프로그래밍 언어와 마찬가지로 자바스크립트에도 변수가 존재합니다. 변수는 이름이 붙은 컨테이너라고 생각할 수 있습니다. 데이터를 이 컨테이너에 담아두면, 컨테이너의 이름만으로 해당 데이터를 손쉽게 참조할 수 있습니다.
변수의 스코프(Scope of Variables)
변수의 스코프(scope)란 프로그램 내에서 해당 변수가 정의되어 유효한 영역을 의미합니다. 자바스크립트 변수에는 다음과 같이 두 가지 스코프만 존재합니다.
- 전역 변수(Global Variables) - 전역 변수는 전역 스코프를 가지므로, 자바스크립트 코드 어디에서든 정의하고 접근할 수 있습니다.
- 지역 변수(Local Variables) - 지역 변수는 정의된 함수 내부에서만 유효합니다. 함수의 매개변수(parameter) 역시 항상 해당 함수에 국한된 지역 변수로 취급됩니다.
<script> 태그의 위치
자바스크립트는 <script>...</script> 태그 안에 작성된 자바스크립트 문장들을 통해 실행됩니다.
<script> 태그는 웹 페이지 내 어디에나 배치할 수 있지만, 일반적으로는 <head> 태그 안에 두는 것이 권장됩니다.
Hello World 출력 예제
간단한 예제를 통해 "Hello World"를 화면에 출력해 보겠습니다. 아래 코드에는 자바스크립트 코드를 감싸는 선택적인 HTML 주석이 추가되어 있는데, 이는 자바스크립트를 지원하지 않는 구형 브라우저로부터 코드를 보호하기 위한 것입니다.
주석은 "//-->"로 끝납니다. 여기서 "//"는 자바스크립트에서 주석을 의미하므로, 브라우저가 HTML 주석의 끝부분을 자바스크립트 코드로 잘못 해석하지 않도록 방지하는 역할을 합니다. 그다음 document.write 함수를 호출하여 문자열을 HTML 문서에 출력합니다.
이 함수는 텍스트, HTML 또는 둘 모두를 출력하는 데 활용할 수 있습니다. 다음 코드를 직접 확인해 보세요.
<html>
<body>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>이처럼 자바스크립트는 변수 선언과 스코프 개념, 그리고 간단한 출력 함수만으로도 웹 페이지와 상호작용하는 첫 번째 단계를 밟을 수 있습니다. 기본기를 탄탄히 다진 후 조건문, 반복문, 함수 등으로 학습 범위를 넓혀가는 것을 추천합니다.