Home » 웹 표준 -4. Java Script (1)

웹 표준 -4. Java Script (1)

4.1. Java Script 개요

  • 기존의 정적인 HTML로는 사용자와 상호 작용할 수 있는 기능이나 즉각적인 응답을 받는 기능을 해결 할 수 없다. 이런 문제와 제약을 해결하기 위한 시도중의 하나로 자바 스크립트가 개발 되었다.
  • 자바스크립트 (JS로 줄여 불리기도 하는) 가볍고 인터프리터가 있는 객체 지향 언어로, 1급 함수를 지원한다.
  • 주로 웹 페이지에 사용되는 스크립트 언어로 알려져 있지만 node.js나 Apache CouchDB처럼 웹 브라우저가 아닌 환경에서도 사용되며, JavaScript는 역동적이고 자료 형이 자유로우며(type safe) 객체지향형(Orient-Object), 명령형(Imperative), 함수형(Functional) 프로그래밍 스타일을 사용할 수 있는 Prototype 기반의 다중 패러다임 스크립트 언어이다.

  • Java Script의 특징

 동적인 HTML 문서 작성 지원
 클라이언트 측의 응용프로그램 개발에 사용
 복수개의 프레임을 지원
 데이터의 유효성 검사 수단
 대화식 폼의 생성
 CGI없이 데이터베이스 제어
 클라이언트의 참조 테이블 생성
 클라이언트와 서버 간의 데이터 교환과 같은 상태 관리 기능
 HTML 객체, 자바 애플릿, Active-X Control, Plug-in과 같은 클라이언트의 확장 기능 제공
 웹 서버의 확장

  • 적용 방법1. HTML 문서 내에서 정의

  • 적용 방법2. 외부 파일로 만든 후 적용(확장자는 js가 된다.)

  • 두 방법 모두 문제는 없다. 다만, 웹 접근성을 고려한다면 방법2를 사용하여 java script와 html을 분리 시키는 것이 더 옳은 방법이다.

4.2. Java Script 변수 및 연산자

변수(Variables)

  • Java Script에서 새로운 변수는 var 키워드로 선언 됩니다.
  • 변수에 값을 넣는 방법은 =(대입 연산자 또는 할당 연산자)를 통해 할당 할 수 있습니다.

번호 설명
(1) 변수에 아무런 값을 주지 않은 상태라면 해당 변수의 타입은 undefined가 됩니다.
(2) 숫자(정수) 타입의 변수가 되고 20이 할당 됨
(3) 숫자(실수) 타입의 변수가 되고 94.5가 할당 됨
(4) 문자열 타입의 변수가 되고 seoul이 할당 됨

* Java Script에는 블록 유효 범위가 따로 없다. 즉, 대입하는 값의 타입으로 자동 변환 된다.

연산자(Operators)

연산자 설명
산술 연산자 (+, -, *, /, %) 값의 덧셈, 뺄셈, 곱하기, 나누기, 나머지 값을 구하는 연산자
ex) var a = 5 + 6; // a는 11이 된다.
연결 연산자(+) 문자열 이어 붙이는 연산자. 만약 문자열에 숫자 타입을 더하면 모두 문자열로 바뀐다.
ex) var result = “hel” + “lo” // result의 값은 hello가 된다.
ex2) var result = “hel” + 2 // result는 hel2가 된다.
할당 연산자(=) 변수에 값을 할당한다.
ex) var a = 10; // a 변수의 값은 10이 된다.
비교 연산자
(>, <, >=, <=, ==, ===)
두 값을 비교하여 어느 한쪽이 큰(>)지, 작은(<)지, 같은(==)지, 크거나 같은지(>=) 등을 비교한다. ===의 경우에는 값의 타입까지 비교를 한다.
ex)
var a = “20”;
var b = 20;
if(a == b) // 이 경우에는 값이 같으므로 true
if(a === b) // 이 경우에는 값은 같으나 타입이 다르므로 false
복합 대입 연산자
(+=, -=, /=, *=, %=)
산술 연산을 먼저 한 후, 값을 대입한다.
ex) var a = 10;
var b = 10;
a += b; // a = a + b 와 같다. 즉, a는 20이 된다.
증감 연산자(++, –) 값을 증가 및 감소 시킨다.
var x = 10;
x++ // x는 11이 된다.
논리 연산자
(&&, ||, !)
AND, OR, NOT 연산자 &&(AND)의 경우 비교 조건 두 가지가 모두 참일 경우 true, ||(OR)의 경우 두 비교 조건 중 한 가지만 참이어도 true가 되며, !(NOT)의 경우 결과를 반대로 만들어 주는 연산자이다.
ex)
var a = 10;
var b = 9;
var c = 8;
if(a > b && b>c) // 이 경우, 두 조건을 만족하여 true가 된다.
if(a < b || b>c) // 이 경우, 앞의 조건은 만족하지 못했지만 뒤의 조건을 만족했으므로 true가 된다.
삼항 연산자 변수 = (비교 조건) ? 결과1(참일 경우):결과2(거짓일 경우) 의 형식으로 되어 있는 연산자
ex) var result = (10 > 9) “t” : “f” // 이 경우 t가 리턴
  • Java Script의 연산자는 상당히 많기 때문에 자주 사용되는 연산자를 소개 했으며, 더 많은 내용을 원한다면 아래 홈페이지를 참고할 것.
    Link:MSDN

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 연산자

4.3. Java Script 제어구조

  • Java Script는 다른 프로그래밍 언어와 유사한 제어 구조를 가지고 있다. 종류로는 조건 문, 반복 문 이 있다.

조건 문(if, if ~ else if, if ~ else, switch)

  • 조건에 근거하여 다음에 실행 할 처리를 결정하는 수행 문이다.
  • if 문의 경우 기본 구조는 아래와 같다.
    [php]
    if(조건) {
    수행 할 문장
    }
    [/php]
    [php]
    if(조건) {
    수행 할 문장 1
    } else if(조건2) {
    수행 할 문장 2
    } else if(조건3) {
    수행 할 문장 3
    }
    … 생략
    [/php]
    [php]
    if(조건) {
    수행 할 문장 1
    } else {
    수행 할 문장 2
    }
    [/php]

[js language=”/if.js”][/js]

번호 설명
(1) ifExam이라는 이름의 함수를 만든다.(함수에 관한 것은 이후 자세히 설명하도록 함)
(2) 변수 a에 10을 할당
(3) 변수 b에 5를 할당
(4) 변수 result 선언
(5) if문으로 a와 b를 비교, 조건이 a>b 이므로 만약 a가 더 크다면 if 안의 문장이 실행된다.
(6) 조건이 참(true)일 경우 result에 값을 할당
(7) alert라는 내장함수를 이용 해 alert 메시지로 결과를 표시한다.
(8) if문장이 참이 아닐 경우 else 안의 문장이 실행 된다.
(9) 처음 if의 조건이 참이 아닐 경우 다음 else if가 실행 된다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 분기문IF

  • switch문은 변수를 비교함에 있어서 if보다 가독성이 더 좋다. 또, 컴파일러 최적화를 쉽게 할 수 있어서 속도도 더 빠른 편이다.
  • switch 문의 경우 기본 문법은 아래와 같다.
    [php]
    switch (값) {
    case 1 :
    수행 할 문장
    break;
    case 2 :
    수행 할 문장
    break;
    …생략
    default :
    조건에 맞는 case가 하나도 없을 경우 실행 할 문장
    break;
    }
    [/php]

[js language=”/switch.js”][/js]

번호 설명
(1) 변수 a에 2를 할당
(2) a 값이 1일 경우
(3) 만약 a 값이 1이면 실행 되는 문장
(4) 만약 조건이 참이라면 이후의 조건은 비교하지 않아도 되므로 break;를 사용하여 멈춰준다. 만약 break;를 사용하지 않으면 이후의 모든 문장들이 실행된다.
(5) 여러 개를 한꺼번에 기입하여 비교할 수 있다.
(6) 조건이 맞는 case가 없으면 default가 실행 된다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 분기문 Switch

반복 문(for, while, do~while)

  • 말 그대로 어떠한 작업을 원하는 횟수만큼 반복하는 기능이다.
  • 특정 문장을 100번을 실행 해야 할 경우, 100개의 문장을 모두 기입해야 한다면 많은 시간이 소요 될 것이다. 하지만 반복 문을 이용 할 경우 간단하게 해결 할 수 있다.
  • 아래는 반복 문 중 for 문의 기본 형식이다.
    [php]
    for(초기 값; 조건 문; 증감 값;) {
    수행 할 문장
    }
    [/php]

[js language=”/week2/for.js”][/js]

번호 설명
(1) 1부터 시작하여 10이 될 때까지 반복 문이 실행된다.
(2) sum 변수에 증가하는 i 값을 더하여 다시 sum 변수에 할당. sum = sum + i와 같다.
(3) 문서에 텍스트를 써준다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 반복문 For

아래는 반복 문 중 while 문의 기본 형식이다.
[php]
while(조건) {
반복 수행 할 문장
}
[/php]

[/js/week2/while.js]

번호 설명
(1) i의 값이 10이 될 때까지 while문 안의 문장을 반복 수행한다.
(2) sum 변수에 증가하는 i 값을 더하여 다시 할당 해준다.
(3) 증감 연산자를 통해 i 값을 증가 시킨다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 반복문 While

아래는 반복 문 중 do ~ while 문의 기본 형식이다.
[php]
do {
반복 수행 할 문장
} while(조건)
[/php]

  • do ~ while과 while의 차이점은 do ~ while의 경우 조건을 나중에 확인 한다는 것이다. 즉, 처음 1회는 무조건 문장이 실행 되고 그 이후 조건을 비교하여 문장을 수행 한다는 것이다.

[js language=”/week2/dowhile.js”][/js]

번호 설명
(1) 1회 문장이 실행 된 후 조건을 검사한다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 반복문 Do~While

break와 continue

  • break문은 반복 문이 실행 되고 있는 도중 중간에 끊어야 할 때 사용해주는 문장이며 continue는 이후의 문장을 건너 뛰어주는 역할을 한다.

[js language=”/week2/breakContinue.js”][/js]

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> Break/Continue

4.4. Java Script 내장 함수

  • Java Script 내에 이미 구현되어 내장 되어 있는 어떠한 기능을 하는 함수를 말한다.
    함수 설명
    alert 경고나 확인 메시지 등을 사용할 때 사용 확인 단추가 있는 메시지 창이 나타난다.
    confirm [확인]과 [취소] 단추가 있는 메시지 창이 나타난다.
    prompt 입력 상자가 있는 메시지 창이 나타난다.
    eval 수식으로 입력 한 문자열을 계산하여 출력한다.
    parseInt 문자열을 정수로 바꿔준다.
    parseFloat 문자열을 부동 소수점으로 바꿔준다.
    isFinite 유한 수인지 판별한다.
    isNaN 숫자인지 문자열인지를 구분하여 출력
    Number 숫자인지를 판별
    String 값을 문자열로 바꿔준다.

[js language=”/week2/defafultFunction.js”][/js]

번호 설명
(1) 경고 및 확인 메시지를 출력하며, 형식은 alert(메세지);
(2) 확인 취소 버튼이 존재하는 메시지를 출력하며, 형식은 confirm(메세지)
(3) confirm에서 확인을 누르면 true 취소를 누르면 false를 리턴한다.
(4) 값을 입력할 수 있는 창이 뜬다. 형식은 prompt(메시지)
(5) 수식으로 입력 한 문자열을 계산한다. 형식은 eval(수식)
(6) 문자열을 정수 형태로 변환한다. 형식은 parseInt(값)이며, 참고로 typeof는 변수의 타입을 알아내는 함수이다.
(7) 문자열을 부동소수점으로 바꿔주며, 형식은 parseFloat(값)
(8) 유한 수인지 아닌지 판단해주며, 형식은 isFinite(값)이고 유한 수이면 true 리턴
(9) 입력 받은 값이 문자인지 숫자인지 판단해주며, 형식은 isNaN (값)이고 문자면 true 리턴 숫자면 false 리턴
(10) 입력 받은 값이 숫자인지 판단해주며, 형식은 Number(값)이고 숫자면 true 리턴
(11) 값을 문자열로 바꿔준다. 형식은 String(값)

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 내장함수