-
[WebPage] 4. 웹 프로그래밍의 필수요소, JavaScript와 jQuery - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 7. 11:44
4.1 웹 스크립트 언어, JavaScript
자바스크립트는 웹 프로그래밍을 위해서는 반드시 알아야할 언어입니다. HTML 만으로는 페이지를 표현하는 것 밖에 할 수 없기 때문에, 다양한 기능을 적용한 웹을 위해서 자바스크립트를 사용하기 때문입니다. 문법도 어렵지 않고, 바로바로 실행해 볼 수 있어서 쉬운 편에 속하는 언어입니다. 이 장에서는 자바스크립트의 문법과 활용을 알아보겠습니다.
4.1.1 자바스크립트란?
- 자바스크립트(JavaScript)는 HTML, CSS와 함께 브라우저가 서버나 컴파일러 등의 다른 외부 모듈 없이 직접 해석 할 수 있는 객체 기반 스크립트 언어 입니다. 객체기반이라는 말이 어려울 수 있으나 자바스크립트의 모든 것은 객체로 이루어져 있다는 것이고, 지금 어렵다해도 프로그래밍을 하면서 이해하리라 생각됩니다.
4.1.1.1 개발환경의 설정
본 프로젝트는 모두 이클립스와 Aptana Studio를 사용합니다. 이 장에서 설명할 JavaScript와 jQuery 역시 동일한 환경에서 작업할 것입니다.
JavaScript는 HTML 파일 내부에 <script> 태그로 내장할 수 있고, 확장자가 js인 파일로 외부에 작성한 뒤에 포함시킬 수도 있습니다. 브라우저가 직접 해석하기 때문에 컴파일 없이 바로바로 확인해 볼 수 있습니다.
4.1.1.2 개발할 때의 주의사항
자바스크립트를 이용한 개발을 할 때 주의사항은 크로스 브라우징입니다. 특히나 크롬을 이용해서 개발을 하다보면 많이 생기는 문제 중에 하나가 바로 인터넷 익스플로러에서 오류가 난다는 것 입니다. 자바스크립트는 무척 오래되었고, 많은 발전이 있었으며 방대한 언어입니다. 때문에 각 브라우저마다 호환되는 버전도 다르고 양식도 조금 다릅니다. 크롬에서 사용하는 자바스크립트 엔진은 무척이나 많은 것을 허용하기 때문에 대부분 스크립트가 잘 동작합니다.
4.1.1.3 개발 시작
아래 순서대로 시작해보도록 하겠습니다.
1) 우선 Aptana Studio를 실행하여 Web 프로젝트를 생성합니다.
2) 프로젝트 이름은 Chapter4 라고 정합니다.
3) 파일을 하나 추가합니다. HTML 포맷으로 선택하여 4-1이라 지정합니다.
4.1.2 자바스크립트의 기초
- 언어를 배울 때 기본은 문법입니다. 자바스크립트는 문법적인 부분에서 무척 자유로운 언어입니다. 어느 정도의 규칙을 무시해도 오류가 없거나, 오류가 있다고 해도 실행이 되는 부분이 있습니다. 문법을 작성시에 정확한 문법과 구조를 가지고 프로그래밍을 하는 습관을 들이는 것이 중요합니다.
4.1.2.1 다양한 활용을 위한, Pop-up(Dialog)
1) alert
alert()은 경고 창을 화면에 띄우는 함수입니다.그럼 아래 코드를 <head> 태그 안에 작성하여 실행해봅시다.123<script>alert("경고!!");</script>cs 실행을 시키면 아래처럼 경고창이 하나 뜨게됩니다.
2) confirm
confirm() 함수는 사용자에게 선택을 하게 하는 Dialog 함수입니다.사용자에게 Yes 혹은 No를 확인 받아 처리할 수 있도록 만들어졌습니다.1234<script>confirm("당신은 학생입니까?");</script>cs 3) prompt
prompt() 함수는 사용자에게 직접 값을 입력 받도록 하는 함수입니다.12345<script>prompt("당신의 나이를 알려주세요", 0);</script>cs 4.1.2.2 C 혹은 JAVA와는 조금 다른 자바스크립트
1) 주석
그럼 이번에는 프로그래밍 언어에는 반드시 들어가 있는 특징인 주석에 대해서 알아보겠습니다. 주석은 브라우저가 코드를 한줄 한줄 해석할 때 해석하지 않고 그냥 넘어가도록 하는 부분을 만드는 것으로 사실 상 코드의 실행과는 관계없는 무시해버리는 상태로 만드는 것을 뜻합니다.// : 한 줄 주석
/* */ : 범위 주석
자바스크립트의 주석 문법
2) 변수
프로그래밍 언어들에서 다양한 값을 가질 수 있고 변경될 수 있는 개념을 가진 것을 변수라고 합니다. 이 변수는 모든 프로그래밍 언어의 기본이며 앞으로 가장 많이 다루게 될 것 입니다.1234567<script>var numberVar;numberVar = 1;var stringVar;stringVar = "Test";</script>cs 자바스크립트에서는 변수를 선언할 때 다른 언어와는 다르게 var형식으로 선언을 하고 있습니다. 정수나 문자열 배열 등 모든 변수에는 var를 통해 선언하게 됩니다.
자바스크립트의 특징 중에 var 키워드를 생략할 수 있습니다. 추후에 Scope를 다루는 부분에서 다시 설명하겠지만 지금까지 선언되지 않았던 변수가 var 키워드 없이 사용되었다면 그 위치에서 선언된 것처럼 인식하게 됩니다.
3) 자료형
변수에서 설명한 것처럼 자바스크립트는 선언할 때 자료형을 지정하지 않습니다. 코르들 해석할 때 할당된 값을 가지고 형태를 나중에 자동으로 브라우저가 해석하여 지정하는 것 입니다.아래는 자바스크립트가 지원하는 자료형입니다.123456789<script>var number_ = 1;var number2_ = 1.0;var string_ = "STRING";var boolean_ = true;var function_ = function() {};var object_ = {};</script>cs 4.1.2.3 객체를 활용하자, Number, String, Array
1) 배열 - Array 객체
자바스크립트는 객체형 언어입니다. 다른 언어에서 클래스라고 불릴만한 개념도 모두 다 객체로서 처리하고 있습니다. 그 중에서 대표적인 것이 Array 객체입니다.그럼 배열의 선언하는 법부터 알아보도록 하겠습니다.var numbers = [1, 2, 3];
var basket = ["apple", "banana", "orange"];
[]를 통한 배열 선언
var numbers = [];
var basket = [];
빈 배열 선언
var numbers = new Array();
var basket = new Array("apple", "banana", "orange");
new Array() 를 통한 배열 선언
다음은 유용한 배열 객체 속성과 메서드를 살펴보도록 하겠습니다.
변수명
설명
length
배열의 크기를 리턴
유용한 Array 객체 속성
메서드명
설명
concat()
인자로 들어간 배열을 모두 합쳐 하나의 배열로 리턴
indexOf()
인자로 넣은 아이템의 위치(Index)를 리턴
lastIndexOf()
indexOf()와 같지만 배열의 뒤에서부터 찾아서 위치를 리턴
slice()
지정한 위치(시작, 끝)를 배열로 리턴
pop()
배열의 마지막 맴버를 리턴하고 삭제함
push()
인자로 넣은 아이템을 배열에 마지막 맴버로 추가
reverse()
배열의 맴버들을 역순으로 재 정렬함
sort()
배열의 맴버들을 지정된 방법으로 정렬함. Default는 알파벳순.
splice()
배열의 요소들 중에서 지정된 부분을 삭제하고 인자에 요소들을 추가함.
유용한 Array 객체 메서드
진하게 표시된 메서드들은 Array 자신이 변하는 메서드이고, 그 밖의 메서드들은 자신이 실제로 변하지 않고, 값을 전달하는 순간에만 다른 값을 전달하고 변수자체의 값은 변하지 않습니다.
2) 숫자 - Number 객체
Array 이외에도 자바스크립트 자체적으로 지원하는 객체들이 있습니다. 그 중에서 Number 객체는 이름 그대로 수를 표현하는 객체입니다.속성명
설명
MAX_VALUE
자바스크립트에서 표현되는 가장 큰 수를 리턴
MIN_VALUE
자바스크립트에서 표현되는 가장 작은 수를 리턴
유용한 Number 객체 속성
메서드명
설명
toExponential()
숫자를 지수로 리턴
toFixed()
숫자를 고정 소수점으로 리턴
toPrecision()
자리수를 지정한 숫자로 가변적으로 고정소수점 or 지수로 표현
toString()
숫자를 문자열로 변환하여 리턴
유용한 Number 객체 메서드
3) 문자열 - String 객체
자바스크립트에서는 문자열도 객체로 되어 있습니다.변수명
설명
length
문자열의 길이
String 객체의 속성
메서드명
설명
charAt()
지정한 위치에 있는 문자 하나를 리턴
charCodeAt()
지정한 위치에 있는 문자의 유니코드를 리턴
concat()
2개 이상의 문자열을 합쳐서 리턴
indexOf()
지정한 문자열의 위치를 리턴
lastIndexOf()
지정한 문자열의 위치를 뒤에서부터 찾아서 리턴
replace()
지정한 문자열을 찾아서 새로운 문자열로 바꿔서 리턴
slice()
지정한 위치(시작, 끝)을 찾아서 그 부분을 문자열로 리턴
split()
지정한 Separator를 가지고 문자열로 나누고 배열로 만들어서 리턴
substr()
지정한 시작지점부터 지정한 길이만큼의 문자열을 리턴
substring()
지정한 시작지점부터 지정한 끝지점까지의 문자열을 리턴
toLowerCase()
모든 문자열을 소문자로 바꿔서 리턴
toUpperCase()
모든 문자열을 대문자로 바꿔서 리턴
유용한 String 객체 메서드
4.1.3 자바스크립트의 활용
- 지금부터는 기본에서 벗어나 자바스크립트를 활용하는 기술들에 대해 알아보겠습니다.
4.1.3.1 특정한 시점의 감지, 이벤트
이벤트라는 것은 어떤 액션이 발생되는 것을 말하며 그 순간을 감지하여 원하는 코드가 동작하도록 할 수 있습니다. 예를 들면 키보드가 입력되는 것에 대한 이벤트가 있으면 그것을 이용하여 눌러진 키를 화면에 출력하도록 할 수 있습니다.
이벤트의 종류는 아래와 같은 것들이 있습니다.
1) 마우스 움직임, 오버, 클릭
2) 키보드 타이핑
3) 페이지, 이미지 로딩
4) 데이터 변경
5) HTML Form Submit
아래 예제는 button에 onclick 이벤트를 사용하는 예제입니다. click이 발생할 때 자바스크립트 부분에서 직접 작성한 clickButton() 함수를 실행하도록 하였습니다.
12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>4-1</title><meta name="description" content=""><meta name="author" content="Yeonsu"><meta name="viewport" content="width=device-width; initial-scale=1.0"><!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><script>function clickButton() {alert("Clicked!!!");}</script></head><body><button type="button" onclick="clickButton()">Click</button></body></html>cs 4.1.3.2 객체조작의 기본, DOM
DOM이라는 것은 Document Object Model의 약자로 HTML에서의 객체 모델을 뜻하는 것입니다. HTML은 DOM이라는 개념으로 페이지를 인식하고 처리합니다. 결국 HTML은 DOM의 집합으로 이루어져 있다고 볼 수 있습니다. DOM을 다룰 때 가장 중요한 점은 DOM이 로드가 완료된 뒤에 제어를 해야 한다는 점 입니다.
아래 예제들을 통해 확인해 보도록 하겠습니다.
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>4-1</title><meta name="description" content=""><meta name="author" content="Yeonsu"><meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><script>document.getElementById("name").innerHTML = "My name is Jackson";</script></head><body><h1 id="name"></h1></body></html>cs 위 예제는 <h1> 태그에 스크립트를 통하여 텍스트를 매핑시키는 예제입니다. 그러나 실행결과 아무것도 나타나지 않습니다.DOM이 생성되기 이전에 자바스크립트에서 접근하였기 때문에 아무일도 일어나지 않는 것 입니다.
아래와 같이 수정된 방법이 주로 쓰이는 방법입니다.
1234567891011121314151617181920212223242526272829<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>4-1</title><meta name="description" content=""><meta name="author" content="Yeonsu"><meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><script>window.onload = function() {document.getElementById("name").innerHTML = "My name is Jackson";}</script></head><body><h1 id="name"></h1></body></html>cs * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다
'Web > WebPage' 카테고리의 다른 글
[WebPage] 실전 웹 프로젝트 구축 !!(Server Part 2) - 웹 페이지 제작 강좌 (0) 2015.07.09 [WebPage] 실전 웹 프로젝트 구축 !!(Server Part 1) - 웹 페이지 제작 강좌 (0) 2015.07.08 [WebPage] 실전 웹 프로젝트 구축 !!(실전 예제) - 웹 페이지 제작 강좌 (0) 2015.07.07 [WebPage] 3-3. 장고 프로젝트 시작 - 웹 페이지 제작 강좌 (0) 2015.06.26 [WebPage] 3-3. 서버개발을 빠르게, 웹 프레임워크 Django (0) 2015.06.26 [WebPage] 3. 서버 프로그래밍을 위한 Python과 Django - 웹 페이지 제작 강좌 (0) 2015.06.21
