자바스크립트와 웹 애플리케이션 개발

자바스크립트는 클라이언트 사이드에서 웹 애플뢰케이션을 개발하는데 많은 도움을 주는 언어이다. 클라이언트 사이드에서 자바스크립트는 주로 HTML, CSS와 결합하여 Ajax라는 기술을 통해 동적인 웹 페이지를 만드는데 사용된다.

 

HTML과 CSS

HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만드는 방법을 제공한다. 또한 웹 페이지 콘텐츠 안의 <>에 둘러싸인 태그로 구성된다.

HTML을 중심으로 자바스크립트 코드와 CSS코드를 불러온다.

 

Ajax

Asynchronous JavaScript and XML. 즉, 클라이언트 측에서 비동기 웹 애플리케이션을 개발할 수 있는 웹 개발 기술이다. 이를 사용하면 웹 애플리케이션 화면을 새로고침 하지 않고도 데이터를 주고받을 수 있다.

데이터는 일반적으로 XMLHttpRequest라는 객체를 사용하여 주고받게 되는데, 이름에 XML이 포함되어 있지만 최근에는 JSON형식이 더 많이 사용된다. 비동기 방식이 아니더라도 Ajax 기술의 범주에 들어가는 기술도 많다.

Ajax는 하나의 기술로 구성되지 않는다. HTML과 CSS는 정보를 효율적으로 보여주기 위해 사용되고, DOM은 자바스크립트가 동적으로 화면을 변경할 수 있도록 접근하는데 사용된다. 자바스크립트는 XMLHttpRequest 객체를 이용하여 서버와 데이터를 비동기적으로 교환하고 전체 페이지를 새로고침하지 않고도 정보를 갱신하도록 한다.

 

jQuery

대부분 웹사이트에서 사용되고 있는 자바스크립트 라이브러리.

무료이며 오픈 소스 프로젝트이다. 기본 API보다 더 쉽게 DOM요소에 접근할 수 있다. 또한 Ajax 애플리케이션을 개발하기 쉽게 만들어주고, 플러그인 형태를 통해 기능을 쉽게 확장할 수 해준다.

 

jQuery의 간단한 소개

▶ jQuery Selector

Selector(셀렉터): jQuery에서 DOM 객체를 찾아 쉽게 다룰 수 있도록 해주는 녀석. (자바스크립트의 document.getElementById() 혹은 document.getElementsByName())

• $("#ID") : 해당하는 ID값을 찾아 한 개만 반환함
• $("element_tag_name") : 해당하는 태그 이름으로 된 모든 요소를 찾아 객체집합으로 반환함
• $(".class_name") : 해당하는 클래스 이름을 가진 모든 요소를 찾아 객체집합으로 반환함
• $("*") : 모든 요소를 찾아 객체 집합으로 반환함
• $("div, span") : <div>와 <span> 태그를 찾아 객체 집합으로 반환함

8. 30분 요약시리즈 - JS 2부

위 링크의 10.jQuery 요약을 보면 더 이해하기 쉬울 것이다.

 

▶ 자바스크립트와 jQuery

위 링크에서와 마찬가지로, 자바스크립트의 방식과 jQuery 방식에는 큰 차이가 느껴진다.

jQuery로 표현하면 간결하고 직관적으로 기술하게 되어 편리하다.

(ex)

// JavaScript
<script>
    document.getElementById("contents").style.background-color = "red";
</script>

// jQuery
<script>
    $("#contents").css("background-color", "red");
</script>