자바스크립트(javascript)란
자바스크립트는 객체(object) 기반의 스크립트 언어이다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.
자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
예를들어 웹페이지중 로그인 화면이 있다고 가정해보자.
이런 화면이 있다고 가정 했을 때 쉽게 html,, css, javascript 3가지의 관점으로 살펴보겠다.
NAVER, 아이디 입력칸, 비밀번호 입력칸, 로그인 버튼은 html로 구성되어 있다.
이때 버튼의 색, 글씨색, 글씨크기, 글씨체를 바꾸는 디자인과 같은 일련의 작업은 css로 한다.
생각보다 웹페이지에서 디자인은 무시못할 정도로 중요하다.
우리가 사용하는 웹페이지들이 단순히 흰 바탕에 글씨만 있다면 가독성이 떨어지고, 효율적으로 사용하기 어렵다.
위 로그인창에서 아이디와 비밀번호를 입력후 "로그인" 버튼을 눌렀을 때, 두 가지의 경우가 있다.
사용자가 로그인을 성공하거나, 실패하는 경우가 있는데 그에 맞는 화면을 보여줘야 한다.
따라서 로그인 페이지의 다음 페이지에는 "로그인 성공 페이지" or "로그인 실패 페이지"가 나온다.
로그인 성공시 > 보통 로그인과 함께 서비스 페이지의 홈으로 이동된다.
로그인 실패시 > 페이지는 이동하지 않고, 로그인 화면에서 빨간 글씨로 안내한다.
이처럼 버튼에 대한 효과, 사용자의 액션에 따른 이벤트를 만드는 것을 javascript로 구현한다.
스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다.
이런 관점에서 보면 자바스크립트는 자바(Java)와는 매우 다른 언어라고 할 수 있습니다.
자바스크립트의 특징
1. 자바스크립트는 객체 기반의 스크립트 언어이다.
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
C언어와 같은 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용한다.
하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미한다.
자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 준다.
자바와 자바스크립트
자바와 자바스크립트는 그 이름만 놓고 보면 서로 관련이 있는 언어로 생각되기 쉽다.
하지만 두 언어는 서로 직접적인 관련은 없다.
문법상 비슷한 부분은 두 언어의 문법이 모두 C언어를 기반으로 만들어졌기 때문이다.
| 자바 | 자바스크립트 |
| 컴파일 언어 | 인터프리터 언어 |
| 타입 검사를 엄격하게 함. | 타입을 명시하지 않음. |
| 클래스(class) 기반의 객체 지향 언어 | 프로토타입(prototype) 기반의 객체 지향 언어 |
자바스크립트 문법
자바스크립트의 실행문은 세미콜론(;)으로 구분된다.
따라서 문장의 끝을 세미콜론으로 구분하기 때문에 세미콜론을 하지 않고 다음줄로 넘어간 경우에 하나의 코드로 인식해 에러가 발생할 수 있다.
잘못된 예시)
var x = 10 // 세미콜론(;)이 없다
var result = x + 3; // 1번줄에 세미콜론이 없기 때문에 1번 줄과 2번 줄을 하나의 코드로 인식한다.
올바른 예시)
var x = 10;
var result = x + 3;
자바스크립트는 대소문자를 구분한다.
자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 한다.
var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.
식별자(identifier)
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다.
자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있다.
자바스크립트에서 식별자는 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없다.
식별자 작성 방식
자바스크립트에서는 식별자를 작성할 때 다음과 같은 작성 방식을 사용할 수 있다.
1. Camel Case 방식
2. Underscore Case 방식
Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식이다.
Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식이다.
자바스크립트에서는 식별자를 작성할 때 관행적으로 Camel Case 방식을 많이 사용한다.
var firstVar = 10; // Camel Case 방식
function my_first_func { // Underscore Case 방식
var firstLocalVar = 20; // Camel Case 방식
}
키워드(keyword)
자바스크립트에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있다.
이렇게 미리 예약된 단어들을 키워드(keyword) 또는 예약어(reserved word)라고 한다.
이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없다.
var firstVar = 10; // var는 변수의 정의를 위해 예약된 키워드입니다.
function myFirstFunc { // function은 함수의 정의를 위해 예약된 키워드입니다.
var secondVar = 20; // var는 변수의 정의를 위해 예약된 키워드입니다.
}
주석(comment)
주석(comment)이란 코드 내에 삽입된 일종의 설명문이다.
주석은 작성자나 다른 개발자가 나중에 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에도 사용된다.
이러한 주석은 자바스크립트 코드의 어느 부분에라도 작성할 수 있으며, 웹 브라우저의 동작에는 전혀 영향을 미치지 않는다.
자바스크립트 주석은 다음과 같은 두 가지 형식을 지원합니다.
1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */
var x = 10;
// var y = 20; 한 줄의 주석문 : 이 부분은 실행되지 않을 것입니다.
/*
x = x + y;
여러 줄의 주석문 :
이 부분 또한 실행되지 않을 것입니다.
*/
document.getElementById("text").innerHTML = x;