[JavaScript]JavaScript

JSP만으로는 완벽한 웹 서비스를 제작할 수가 없다. 모든 사용자 입력에 대한 처리를 서버에게 떠맡길 수는 없기 때문이다. 따라서 클라이언트에서 어느정도 로직의 처리가 들어가야 한다.

웹 개발자로써 반드시 알아야할 클라이언트단 요청 처리 언어 중 하나가 JQuery이다. JQuery는 JavaScript의 라이브러리중 하나이기 때문에, JQuery를 공부하기 전에 JavaScript에 대해서 기본적인 지식을 알고 넘어가려고 한다.

목적

웹 페이지를 동적으로 움직이기 위한 스크립트 언어이다. 기존 HTML과 CSS만으로 작성된 웹 페이지는 데이터를 동적으로 처리하기에는 부족함이 있다. 물론 최신의 HTML5와 CSS3는 어느정도 동적인 처리가 가능하지만, 이는 복잡한 로직을 처리하기에는 한계가 있다.

따라서 웹 페이지를 프로그래밍하고자 하여 등장하게 되었고, 사용자 입력을 처리하고, 네트워크 전송, 경고 메시지, 페이지의 내용 변경 등의 모든 동적인 요소를 구현할 수 있다.

기본개념

1. 자바스크립트는 인터프리트 언어

자바스크립트는 컴파일의 과정이 없다. 브라우저가 자바스크립트를 로딩하고, 코드를 한 줄씩 바로바로 실행시켜 나가는 방식이다. 따라서 과거에는 성능이 많이 좋지 않았다. 하지만 인터프리터 언어도 컴파일을 할 수 있기 때문에, 성능이 상당히 좋아졌다고 한다.

2. HTML에서 자바스크립트의 위치

head태그나 body태그 안에 script태그로 감싸서 존재한다. 위치에 따라서 실행의 순서가 달라진다.

head태그에 존재하면, 웹 페이지가 읽어지기 전에 스크립트가 실행된다. 따라서 페이지가 보여지기도 전에 실행이 되므로, 페이지 로드전에 어떤 로직을 처리해야할 때 이 위치에 스크립트를 위치시킨다.

body태그에 존재하면, 웹 페이지가 모두 보여지고 난 후에 스크립트가 실행된다. 따라서 스크립트를 통해 웹 페이지의 어떤 요소를 조작하고자 한다면 여기에 위치한다. 하지만 최근 프로그래밍 패턴에서는 이와같이 사용하지는 않는다.

또한 자바스크립트는 js확장자를 가지는 파일로 분리해서 관리가 가능하다.

3. 객체생성 가능

객체라는 것은 현실세계를 컴퓨터에서 표현하기에 아주 적합한 형태의 자료형이다. 대표적으로 자바와 파이썬 언어는 객체지향적으로 설계된 프로그래밍 언어이다. 자바스크립트는 객체지향 언어라고는 할 수 없지만, 객체를 생성할 수 있도록 지원해준다. 하나의 객체안에 여려 속성들을 가질 수 있는 구조로 되어있고, 내부에 메소드도 지닐 수 있다.

4. DOM(Document Object Model)

브라우저는 웹 페이지를 로딩할 때 DOM을 생성한다. DOM은 문서 객체 모델로 각 요소들의 객체가 저장된 모델을 말한다. 따라서 우리가 어떤 웹 페이지를 로딩하면, 각 요소들이 객체화되어 DOM에 저장되는 것이다. 이 생성된 객체를 통해서 자바스크립트 코드에서 각 요소에 접근하여 동적으로 갱신할 수 있는 것이다.

문법

1. 모든문장의 끝은 세미콜론(;)

var i;
i = i + 1;
alert(i);

2. 주석

// 한 줄만 주석처리 하고 싶을 때
/*
    여러줄을
    주석으로
    처리하고
    싶을 때
*/

3. 문자열은 큰따옴표 또는 작은따옴표로 묶어서 표현

name = "Hey";
nickName = 'HeyHyo';

큰따옴표 작은따옴표 모두 사용이 가능하지만, 처음과 끝이 같아야 한다.

4. 변수는 var로 선언

var num1;
var num2 = 3;

5. 함수선언 및 사용

// 함수 선언
function add(num1, num2) {
    return num1+num2;
}

// 함수 사용
add(1, 2);

6. 객체 선언 및 사용

var person = {
    name: "Yun",
    age: 25,
    skill: 0,
    study: function() {
        kill = kill + 1;
    }
};
person.age = 20;
person.study();

참고

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

Head First JavaScript Programming - Eric Freeman, Elisabeth Robson