JSP - 4일차 (자바스크립트)

■ 자바스크립트

 

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.

 

자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.

 

스크립트 언어란? 

- 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도로 쓰이는 언어이다.

 

□ 자바스크립트 특징

 

자바스크립트가 가지고 있는 언어적 특징

 

1. 자바스크립트는 객체 기반의 스크립트 언어다.

2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어다.

3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

 

□ 자바와의 비교

 

자바와 자바스크립트는 이름만 놓고 보면 서로 관련이 있는 언어로 생각되기 쉽다. 하지만 두 언어는 서로 직접적인 관련은 없으며, 비슷한 점보다는 다른 점이 훨씬 많다. 문법상 비슷한 부분은 두 언어의 문법이 모두 C언어를 기반으로 만들어졌기 때문이다.

 

 

□ <script> 태그

 

자바스크립트 소스코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성할 수 있다. 웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바스크립트 소스를 작성하는 것이다. <script> 태그는 웹 문서안 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행된다.

 

자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다. 그래서 </body> 태그 직전에 자바스크립트 소스를 삽입한다. 영어 대소문자를 구별하므로 소스를 작성할 때 주의해야 한다.

 

 

□ 외부 스크립트 파일로 연결할 때

 

CSS와 마찬가지로 자바스크립트 소스도 따로 파일을 저장한 후 웹 문서에 연결해서 사용할 수 있다. 이렇게 하면 웹 문서안에는 직접 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS만 유지할 수 있어 소스가 깔끔해진다.

 

외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 *js 파일로 저장한다. 그리고 HTML 문서에서 <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 된다.

 

 

□ 기본 입출력 방식

 

알림창(alert)은 가장 많이 사용하는 간단한 대화상자이다. 웹브라우저에는 작은 알림창을 열어 메시지를 표시할 수 있어 간단한 실행결과를 표시할 때 사용한다.

 

확인창(confirm)은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있다. 그러면 선택한 결과에 맞게 프로그램이 동작한다.

 

프롬프트 창(prompt)은 텍스트 필드가 있는 창이다. 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다.

 

[prompt 예제1]

[prompt 예제2]

 

 

document.write()

 

웹브라우저 화면에 출력을 담당하는 document.write()문

doument.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있다. 괄호 안에서 큰 따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 엡 브라우저 화면에 그대로 표시된다.

 

 

console.log()

 

콘솔 창에 출력하는 console.log()문은 괄호안의 내용을 콘솔창에 표시한다. 콘솔창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다. console.log()문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있다. (이때 따옴표 안에 HTML 태그는 사용할 수 없다.)

 

■ 변수, 자료형, 연산자

 

□ 변수

 

변수(variable)란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킨다.

반면에 값을 한 번 지정하면 바뀌지 않는 데이터를 상수(constant)라고 한다.

 

작성규칙

1. 변수 이름은 영문자와 언더스코어(_), 숫자를 사용한다.

2. 영어 대소문자를 구별하며 예약어는 변수 이름으로 쓸 수 없다.

3. 여러 단어를 연결한 변수이름은 연결단어의 첫문자에 대문자를 쓴다.

 

□ 자료형

 

자바스크립트의 자료형은 숫자, 문자열, 논리형과 같은 기본유형과 배열, 객체를 다루는 복합유형 그리고 undefined, null 같은 특수유형이 있다.

 

 

□ 연산자

 

 

■ 조건문, 반복문, 함수

 

□ 조건문

 

if문이나 if-else문을 사용하면 스크립트 안에서 조건을 체크할 수 있다.

 

 

처리할 명령이 많다면 switch문이 더 간편하다.

 

 

□ 반복문

 

for문은 값이 일정하게 커지면서 명령을 반복적으로 실행할 때 사용한다.

 

 

while문은 조건이 true일 경우 명령을 반복한다.

 

 

do-while문은 조건이 false라 하더라도 명령은 최소한 한 번 실행된다.

 

 

□ 함수

 

프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러가지 동작이 연결된다. 이렇게 동작해야 할 목적대로 묶은 명령을 함수(function)라고 한다. 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행항 수 있다.

 

 

 

프로그램에서는 함수를 선언하는 것만으로 함수가 실행되지 않는다.

함수를 실행하려면 미리 선언한 함수명을 써서 사용한다.

 

선언한 함수를 사용하는 것을 함수를 호출한다 또는 함수를 실행한다라고 한다.

 

 

웹 브라우저에서 자바스크립트 소스를 해석할 때에는 함수 선언부분을 가장 먼저 해석한다. 그래서 개발자가 어느곳에 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함수를 실행할 수 있다.

 

[함수 1]

 

[함수 2]

 

 

□ 변수의 적용 범위

 

한 함수 안에서만 사용할 수 있는 변수를 지역변수 또는 로컬변수라고 하고, 스크립트 소스 전체에서 사용할 수 있는 변수를 전역변수 또는 글로벌변수라고 한다.

 

전역변수는 적용범위를 제한하지 않고 쓸 수 있다. 즉, 전역변수는 지역변수와 달리 스크립트 소스코드 전체에서 사용할 수 있다. 전역변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 한다.

 

함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역변수가 된다.

 

<자바스크립트 변수사용>

 

1. 전역변수는 최소한으로 사용한다.

- 전역변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있다. 하지만 그만큼 오류가 발생할 확률이 높아지므로 전역변수는 되도록 적게 사용하는 것이 좋다.

 

2. for문에서 카운트 변수를 사용할 때는 var 예약어를 사용하지 않는다.

- var 변수는 함수 레벨의 스코프기 때문에 for문의 카운트 변수는 let을 사용해서 블록변수로 선언하는 것이 좋다.

 

■ let과 const

 

var 예약어를 사용하는 변수는 재할당과 재선언을 할 수 있다. 그래서 var 예약어를 잘못 사용하면 예상하지 못한 프로그램 오류를 발생시킬 수 있다. 그래서 ES6부터는 var를 보완한 let과 const 예약어가 등장한다.

 

let 예약어로 선언한 변수를 변수를 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없다.

(전역변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초기값만 할당하면 된다.)

 

let 예약어를 사용하여 선언한 변수는 값을 재할당할 수 있지만 변수를 재선언할 수는 없다.

 

const 역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어이다. 이름에서 예상할 수 있듯이 const로 선언한 변수는 상수이다. 상수는 프로그램에서 변하지 않는 값을 뜻한다.

 

const로 할당한 변수는 재선언하거나 재할당할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가진다.

 

■ 이벤트와 이벤트 처리기

 

□ 마우스 이벤트

(마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다.)

 

 

□ 키보드 이벤트

(키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생한다)

 

 

□ 문서 로딩 이벤트

(서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트이다.

 

 

□ 폼 이벤트

(로그인, 검색, 게시판, 설문조사처럼 사용자가 입력하는 모든 요소를 가리킨다.)