Kwon Jung hun

Chap 1. JAVA SCRIPT 소개

JAVA SCRIPT란?

HTML 언어에 부가되어 웹페이지를 좀더 동적이고 다양하게 제작할 수 있는 기법을 제공하는 스크립트 언어이다.

JAVA SCRIPT 특징

  • 스스로 실행하지 못하고 HTML 언어에 포함되어 실행된다.[※ PHP, ASP, JSP도 모두 다른언어(HTML등)에 포함되어 이용]
  • Client(클라이언트) 쪽에서 실행되어 서버에 부담을 주지 않는다.[※ PHP, ASP, JSP는 서버쪽에서 실행]
  • 객체지향 프로그램 언어이다. 속성변수와 메소드로 구성된 객체를 사용한다.
  • 프로그램 작성 후 별도의 컴파일(compile) 과정이 필요 없다.
  • [보안성],[소스 중요성]이 없을 경우 SCRIPT가 담당하고, 반대로 보안이 필요한경우(개인정보 등) 서버 쪽 스크립트 언어(PHP, ASP, JSP 등)이 담당한다.

  • ※ Server 와 Client

    • Selrver : 다수의 클라이언트에게 동시에 정보를 제공하는 H/W
    • Client : server 에게서 정보를 얻는 H/W

JAVA SCRIPT 장점

  • HTML 태그 관리, 입력 데이터의 유효성 체크(설계된 DB와 맞는지),화면 이동 등을 수행한다.
  • HTML 소스코드 안에서 바로 작성이 가능하고 컴파일 과정이 없다.
  • Client 쪽에서 실행이 되므로 Server 에 부담을 주지 않는다.
  • 변수, 연산자, 조건문, 반복문, 객체등을 사용하여 프로그래밍 수준에서 처리할 수 있게 한다. AJAX를 이용한 간접 DB연동 기능
  • 문법이 간단하여 학습이 쉽다. ex) 모든 변수의 형식 검사를 하지 않음 등.

JAVA SCRIPT 단점

HTML 소스코드 안에 포함되어 있기 때문에 소스가 노출되며, JAVA, C 언어 같은 강력한 기능(직접 DB 연동 기능 등)의 프로그램을 만들 수 없다.

JAVA SCRIPT 종류

여러 회사가 자바스크립트를 조금씩 다른 방향으로 구현해서 브라우저 마다 다른 이름의 자바스크립트를 사용하고 있다.

웹 브라우저 별 자바스크립트 이름
웹브라우저 자바스크립트명
Mozilla Firefox JavaScript
Google Chrome
Apple Safari
Adobe Acrobat
Internet Explorer JScript
Opera ECMAScript
.NET JScript.NET
Adobe Flash & Adobe Flex ActionScript

JAVA SCRIPT 형식

방법 1

파일명.html
~
<script language="JavaScript버전번호">
<!--
        자바 스크립트 코드
⁄ ⁄-->
<⁄ script>
~

»<script language="JavaScript버전번호">
⇒ 웹브라우저가 자바스크립트 버전을 지원하지 않으면 실행되지 않게 한다.
<!--      ⁄ ⁄-->
⇒ 웹브라우저가 자바스크립트 자체를 지원하지 않으면 코드를 주석(설명이나 소스코드 숨길때도 사용함)처리해준다.

방법 2

파일명.html
~
<script>
        자바 스크립트 코드
<⁄ script>
~

» 대부분의 웹브라우저가 자바스크립트를 지원하므로 설정을 생략해 쓴다.

JAVA SCRIPT 수입

파일명1.js
자바 스크립트 코드;

JAVA SCRIPT 프로그램을 독립된 파일로 만들 경우 확장자는 js로 저장하고 html 파일에 위에처럼 수입해 삽입한다.

파일명2.html
~
<script language="JavaScript" src = "파일명1.js"><⁄ script>
~

JAVA SCRIPT 위치

  • 함수인 경우 : 삽입 위치가 자유로우나 관용적으로 <head> ~ <⁄ head> 사이에 삽입한다.
  • 함수가 아닌 경우 : 원하는 실행 위치에 삽입한다.
  • js파일(jQuery) 수입 : 빠른 페이지 로딩을 위해 페이지 하단 <⁄ body> 바로 위에 삽입한다.

Chap 2. 자료형, 변수

자료형 (data type)

데이터 유형
자료형 종류 설명
숫자형
  • 정수, 실수 데이터를 말한다
  • 8진수 숫자 경우 숫자앞에 0을 붙이고, 16진수 숫자 경우 숫자앞에 0x를 붙인다.
  • ※ 16진수 숫자 경우 10에서 15까지는 A,B,C,D,E,F로 표기한다.
문자형
  • 문자 데이터를 말한다.
  • 반드시 " 또는 ' 로 감싼다.[※ 오라클에서는 '로 감싼다.]
  • " 자체를 문자열로 표현 할 때는 \"를 쓰고, ' 자체를 문자열로 표현 할 때는 \' 를 쓴다.
    • ※ "로 감싼 문자열 안에 ' 는 \ 없이도 그냥 문자로 취급한다.
    • ※ '로 감싼 문자열 안에 " 는 \ 없이도 그냥 문자로 취급한다.
  • ※ 숫자를 " 또는 ' 로 감싸면 문자 취급한다.
boolean형
  • true(진실), false(거짓) 데이터를 말한다.[조건문이나 반복문에서 사용]
undefined형
  • 알 수 없는 데이터를 말한다. 즉사용할 수 없는 데이터[나머지 5가지 자료형이 아닌 자료형]
함수형
  • 실행구문을 말한다. ex) var getTot = function(){~}; [순수JAVA에서는 함수가 없다.]
객체형
  • 속성변수와 메소드를 정의한 단위 프로그램을 말한다.
    ex) var today = new Date();
    ex) NULL(객체형):객체메모리 주소값이 없음
          ※ 함수를 자료형의 일종이라고 보는 개념은 다른 프로그래밍 언어에서는 찾아 보기 힘든 개념이다.

JAVA의 자료형

1. 기본형 : byte, short, cror, int, long, floot, double, boolean
2. 참조형 : 객체의 메모리 위치주소 값

변수(variable)

변수명 규칙

  • 변수 이름은 [영문(한글, 일어, 한자 등)],[숫자], _, $ 로 만 구성된다. 단, 영문 중 예약어(var, if 등)은 불가능하다
    ※ 될수 있는데로 영문을 사용, 변수명 중간에 공백이 있으면 안된다.
  • 변수명의 첫 글자는 반드시 영문으로만 시작해야한다.
  • 변수명은 영문 대, 소문자를 구별한다.
  • 변수명 사용 불가능 예
    • ⇒ 273alpha(숫자로 시작), has space(중간에 공백문자)
    • ⇒ break, else, instanceof, true, case, false, new, try, catch, finally, null, typeof, continue, for, return, var, default, function, switch, void, delete, this, while, do, ln, throw, with 등(예약어)

변수 사용 형식

var 변수명 = 데이터;
  • var 변수명            ⇒   변수의 선언. 데이터 저장을 위한 메모리 공간을 확보해 달라고 부탁하는 행위
  • 변수명 = 데이터    ⇒   변수에 데이터를 저장하는 것을 말한다. = 은 데이터를 저장하라는 의미로 대입 연산자라고 한다.
  • 같은 변수 안의 데이터는 재 갱신이 가능하고 같은 유형 또는 다른 유형의 데이터로도 갱신이 가능하다.
  • 문자와 숫자를 + 기호로 더 하면 숫자가 순자문자로 변환되어 붙여진다. 이때 + 를 연결 연산자라고 한다.
  • 변수 선언 후 데이터를 저장하지 않으면 undefined 이 저장된다.
  • 변수에 변수를 입력하면 변수가 저장되는 것이 아니라 변수 안의 데이터가 저장된다.
  • 변수와 변수를 더하면 변수 안의 데이터 끼리 연산한다.
  • var는 생량해도 가능하나 전역변수로 사용되어 프로그램이 잘못 진행될 수 있으므로 var를 붙인다.

변수 종류

변수 종류
전역변수
  • 하나의 HTML 파일 안의 모든 자바스크립트에서 공유 가능한 변수
  • 주로 함수 밖에서 var를 붙이거나 var 없이 선언된 변수
지역변수
  • 함수 안에서 var 로 선언되어 함수 안에서만 사용되는 변수
  • ※ 함수 안에서 var 없이 선언된 변수는 함수 밖에서도 호출 가능한 전역변수가 된다.
  • ex) function getTot(){ var base = 80; ~ }
매개변수
  • 함수 호출 시 전달되는 데이터를 저장하는 변수
  • 함수 안에서만 사용가능하다
  • ex) function 함수명 (매개변수){실행구문;}
    • function getTot(kor){ ~ } getTot(go)
  • ※ 매개변수 앞에는 var 를 붙이지 않는다.

Chap 3. 연산자

연산자

프로그램에 있는 자료들을 처리하기 위한 각종 기호를 의미

대입 연산자

  • 변수에 데이터를 입력하는 연산자로 = 를 말한다.
  • var uid = "toby;

연결 연산자

  • 문자와 문자를 붙여주는 연산자로 + 를 말한다.
  • var uid = "Tom" + "sir";

사칙 연산자

  • 숫자끼리의 더하기, 빼기, 곱하기, 나누기, 누눈후 나머지를 구하는 연산자다.
  • 사칙연산자
    연산자 기호 의미 사용 예 결과
    + 더하기 3+5 8
    - 빼기 6-2 4
    * 곱하기 4*8 32
    / 나누기 8/2 4
    % 나머지 7%3 1
              ※ %(나머지)는 특정숫자를 골라낼때 사용

증감 연산자

  • 변수 앞 또는 뒤에 붙어 변수에 저장된 값을 1씩 증가 또는 1씩 감소시키는 연산자이다.
  • [증감 연산자]가 붙은 변수가 다른 연산에 참여하거나 매개변수로 전달되는 경우 [증감 연산자]가 붙은 위치에 따라 다른 연산이 된다.
    • [증감 연산자]가 앞에 붙을 경우 --> 먼저 증감하고 연산에 참여
    • [증감 연산자]가 뒤에 붙을 경우 --> 연산에 참여한 후 증감
  • 사칙연산자
    증감연산자 의미 사용 예 결과
    ++ 1씩 증가 var num1 = 5;
    num1++;     		->변수 num1 선언 후 5 저장
    ->num1에 1증가
    var num1 = 5;
    ++num1;     		->변수 num1 선언 후 5 저장
    ->num1에 1증가
    var num1 = 5;
    var num2 = ++num1;     		->변수 num1 선언 후 5 저장
    ->num1에 1증가 후 num2에 변수 num1의 값 6을 저장
    var num1 = 5;
    var num2 = num1++;     		->변수 num1 선언 후 5 저장
    ->num2에 변수 num1의 값 5를 저장후 num1에 1증가.
    var num1 = 5;
    document.write(num1++);     		->변수 num1 선언 후 5 저장
    ->num1 변수 데이터 5출력 후 num1 에 1증가.
    var num1 = 5;
    document.write(++num1);     		->변수 num1 선언 후 5 저장
    ->num1 에 1증가 후 num1 변수 데이터 6출력
    -- 1씩 감소 var num1 = 5;
    num--;     		->변수 num1 선언 후 5 저장
    ->num1에 1감소
    var num1 = 5;
    --num;     		->변수 num1 선언 후 5 저장
    ->>num1에 1감소
    var num1 = 5;
    var num2 = --num1;     		->변수 num1 선언 후 5 저장
    ->num1에 1감소 후 num2에 변수 num1의 값 4를 저장
    var num1 = 5;
    var num2 = num1--;     		->변수 num1 선언 후 5 저장
    ->num2 에 변수 num1의값 5를 저장후 num1에 1감소
    var num1 = 5;
    document.write(num1--);     		->변수 num1 선언 후 5 저장
    ->num1 변수 데이터 5출력 후 num1 에 1감소
    var num1 = 5;
    document.write(--num1);     		->변수 num1 선언 후 5 저장
    ->num1 에 1감소 후 num1 변수 데이터 4출력

비교 연산자

  • 2개 자료의 같음, 다름, 대소관계를 판단하여 true또는false를 리턴하는 연산자
  • 주로 조건문이나 반복문에서 사용
  • 비교 연산자 종류
  • 비교연산자
    비교연산자 의미 사용 예 결과
    == 좌우가 같으면 true 리턴
    ※ 다른 유형의 데이터를 비교할 경우 형변환이 일어남.     		var avg = 80;
    var result = avg==80;     		result에 true 저장
    var avg = 80;
    var result = avg=="80";     		result에 true 저장
    != 좌우가 같지 않으면 true 리턴 var avg = 80;
    var result = avg!=83;     		result에 true 저장
    > 왼쪽이 크면 true 리턴 var avg = 80;
    var result = avg>100;     		result에 false 저장
    < 오른쪽이 크면 true 리턴 var avg = 80;
    var result = avg<80;     		result에 false 저장
    >= 왼쪽이 크거나 같으면 true 리턴 var avg = 80;
    var result = avg>=80;     		result에 true 저장
    <= 오른쪽이 크거나 같으면 true 리턴 var avg = 80;
    var result = avg<=80;     		result에 true 저장
    === 좌우가 같으면 true 리턴(자료형 까지 같아야만 true)
    ※ 다른 유형의 데이터를 비교할 경우 무조건 false 리턴.     		var avg = 80;
    var result = avg===80;     		result에 true 저장
    var avg = 80;
    var result = avg==="80";     		result에 false 저장

논리 연산자

  • true 또는 false 값을 가지고 논리적 연산을 하여 true 또는 false 를 리턴하는 연산자다.
  • 주로 조건문이나 반복문에서 사용된다.
  • 논리연산자
    종류 의미 사용 예 결과
    && 좌우 모두 true 경우 true 리턴, 외 경우 false 리턴.
    false 리턴 시 이후 남아있는 연산은 안함.     		var kor = 85, eng = 70;
    var result = kor>=80 && eng >=80;     		result에 false 저장
    var kor = 85, eng = 70;
    var result = eng>=80 && kor >=80;     		result에 false 저장
    & 좌우 모두 true 경우 true 리턴, 외 경우 false 리턴.
    무조건 모두 연산     		var kor = 85, eng = 70;
    var result = kor>=80 & eng >=80;     		result에 false 저장
    var kor = 85, eng = 70;
    var result = eng>=80 & kor >=80;     		result에 false 저장
    || 좌우 중 하나 이상 true 경우 true 리턴
    true 리턴 시 이후 남아있는 연산은 안함.     		var kor = 85, eng = 70;
    var result = kor>=80 || eng >=80;     		result에 true 저장
    var kor = 85, eng = 70;
    var result = eng>=80 || kor >=80;     		result에 true 저장
    | 좌우 중 하나 이상 true 경우 true 리턴
    무조건 모두 연산     		var kor = 85, eng = 70;
    var result = kor>=80 | eng >=80;     		result에 true 저장
    var kor = 85, eng = 70;
    var result = eng>=80 | kor >=80;     		result에 true 저장
    ! 우측이 true 몉 false 리턴, false 면 true 리턴 var kor = 85, eng = 70;
    var result = !(kor>=80 && eng >=80);     		result에 true 저장

삼항 연산자

  • 조건식이 true 이면 설정 데이터를 리턴하는 연산자
삼항연산자
종류 의미 사용 예
var 변수 = 조건식? 데이터1:데이터2 조건식이 true 일 경우 데이터 1 리턴, 아니면 데이터2 리턴 var avg = 80;
var result = (avg>=80) ? "합격":"불합격";

Chap 4. 조건문

조건문

  • 설정한 [조건]에 따라 지정한 [실행구문]를 수행하여 [프로그램의 흐름]을 제어하는 문장

조건문 종류

if 문

  • 조건식의 결과가 true 일 때만 {~} 안의 처리내용을 수행한다. ※ 처리내용이 1개의 명령어 일 경우 {,} 는 생략 가능.
  • 조건식의 결과는 반드시 true 또는 false 이어야한다.
if문
if 문 형식 설명
if(조건식1){
        실행구문;
}
  • 하나의 조건식을 설정한.
if(조건식1){
        실행구문1;
}
else if(조건식2){
        실행구문2;
}
.......
else if(조건식n){
        실행구문n;
}
  • n개의 조건식을 설정한다
  • 실행구문을 처리한 후에는 더이상 남은 조건식을 연산하지 않는다.
if(조건식1){
        실행구문1;
}
else if(조건식2){
        실행구문2;
}
.......
else if(조건식n){
        실행구문n;
}
else{
        실행구문n+1;
}
  • 모든 경우의 조건식을 설정한다.
  • 실행구문을 처리한 후에는 더 이상 남은 조건식을 연산하지 않는다.
  • 조건식1 부터 조건식 n까지 모두 false 면 실행구문 n+1이 실행된다.

switch 문

  • [변수]의 값이 설정한 [데이터]와 같을 때 [실행구문]을 수행한다.
switch문
switch 문 형식 설명
switch (변수){
        case 데이터1 : 실행구문1;
}
  • 하나의 조건식을 설정한다.
  • [변수]가 [데이터1]과 같으면 [실행구문1]을 수행한다.
switch (변수){
        case 데이터1 : 실행구문1;break;
        case 데이터2 : 실행구문2;break;
        ..........
        case 데이터n : 실행구문n;break;
}
  • n개의 조건식을 설정한다.
  • [실행구문] 실행 후 break 을 만나면 바로 switch 문을 탈출한다.
  • ※ [실행구문] 실행 후 break이 없으면 다음 case 문의 조건을 무시하고 다음 case 문의 [실행구문]을 실행한다.
switch (변수){
        case 데이터1 : 실행구문1;break;
        case 데이터2 : 실행구문2;break;
        ..........
        case 데이터n : 실행구문n;break;
        default : 실행구문n+1;
}
  • 모든 경우의 조건식을 설정한다.
  • [실행구문] 실행 후 break 을 만나면 바로 switch 문을 탈출한다.
  • default는 if 구문의 else 와 동일한 기능이다.
  • ※ [실행구문] 실행 후 break 이 없으면 다음 case 문의 조건을 무시하고 다음 case 문의 [실행구문]을 실행한다.
  • 부등호 사용이 불가능하므로 if 구문보다 사용이 제한적이다.

Chap 5. 반복문

반복문

  • 설정한 [조건]이 true 이면 블록 안의 [실행구문]을 [반복수행]하는 구문이다.

반복문 종류

반복문 종류
반복문 종류 형식 실행순서
for 문 for(초기값설정 ; 조건식 ; 증감식){
        실행구문;
}
  1. ① [초기값]을 설정한다.(=변수에 숫자 대입)
  2. ② [조건식]의 결과가 true 면 ③으로, false 면 반복문 탈출
  3. ③ [실행구문]을 수행
  4. ④ [증감식]에서 증감
  5. ⑤ [조건식]의 결과가 true 면 ③으로, false 면 반복문 탈출
while 문 while(조건식){
        실행구문;
}
  1. ① [조건식]의 결과가 true 면 ②으로, false 면 반복문 탈출
  2. ② [실행구문]을 수행
  3. ③ [조건식]의 결과가 true 면 ②으로, false 면 반복문 탈출
do~while 문 do{
        실행구문;
}while(조건식)
  1. ① [실행구문]을 수행
  2. ② [조건식]의 결과가 true 면 ①로, false 면 반복문 탈출

  • [for 문] 특징

    • =>초기값설정, 조건식, 증감식이 서두에 등장하므로 가독성이 좋아 제일 많이 사용된다.
    • =>처음에 조건식이 false 면 실행구문이 한번도 실행 안될 수도 있다.
    • =>초기값설정 또는 조건식 또는 증감식이 생략 될 수도 있다.
    • =>※ 조건식, 증감식을 잘못 설정하면 무한 반복된다.

  • [while 문] 특징

    • =>처음에 조건식이 false 면 실행구문이 한번도 실행 안될 수도 있다.

  • [do while] 특정

    • =>조건식이 뒤에 있어 실행구문이 최소한 한번은 실행된다.

분기문

  • 반복문 안에서 사용되어 강제로 명령어의 [처리 순서]를 바꾸는 명령문을 말한다.
  • 분기문 종료
    분기문 종류
    분기문 종류 설명
    break
    • 반복문(for, while, do while) 안에서 사용되어 강제로 반복문을 탈출한다.
    • 원하는 작업을 다 끝냈으니 반복문을 중단하라는 의미이다.
    • ※ 조건문인 switch 문 안에서도 사용되어 강제로 switch 문을 탈출한다.
    continue
    • 반복문(for, while, do while) 안에서 사용되어 강제로 다음 반복 구문으로 건너뛴다.
    • 특정 작업은 원하는 작업이 아니므로 건너뛰라는 의미이다.
  • 분기문 형식

    break
    형식

    for( 초기값설정 ; 조건식 ; 증감식 ) {
    ~
    if( 조건식2 ) { break; }
    실행구문2;
    }
    실행구문3;

    [조건식2]가 false면 계속 반복 진행..
    [조건식2]가 true면 break 실행으로 [실행구문2] 실행 않고 반복문 탈출해서 [실행구문3] 실행.

    continue
    형식

    for( 초기값설정 ; 조건식 ; 증감식 ) {
    ~
    if( 조건식2 ) { continue; }
    실행구문2;
    }
    실행구문3;

    [조건식2]가 false면 계속 반복 진행..
    [조건식2]가 true면 continue 실행으로 [실행구문2] 실행 않고 바로 증감식으로 이동.

  • ※ 제어문?
    • 위에서 아래로 처리되는 명령어의 처리 순서를 변경시키는 문장을 말한다.
    • 종류에 조건문, 반복문, 분기문 등이 있다.

2주차 숙제

Chap 6. 함 수

함수(function)

  • 반복 사용하는 [실행구문]에 이름을 붙여 선언한 후 필요 시점에 이름을 호출하여 [실행구문]을 실행하는 단위 프로그램이다.
  • 반복 사용하거나 단위화 시켜 가독성을 높이기 위해 사용한다.
  • ※ 자주 사용하지 않는 실행구문 또는 단순한 실행구문을 함수로 만드는 것은 비효율적이다.

함수 특징

  • 반복 호출이 가능하다
  • 함수명을 호출해야 함수 내용이 실행된다.함수명이 호출되기 전까지 함수의 내용은 처리되지 않는다.

함수 종류

함수 종류
함수 종류 설명
정적함수(선언적 함수)
  • [함수명]을 붙여 선언하는 함수.
익명 함수
  • [함수명] 없이 선언하는 함수. 변수에 저장하기도 함.
내장 함수
  • 자바스크립트 자체에 미리 만들어져 제공하는 함수.
사용자 정의 함수
  • 개발자가 만들어 사용하는 함수.
내부 함수
  • 함수 내부에 선언된 또 다른 함수.
콜백 함수
  • 함수의 매개변수로 전달되는 [익명함수].

함수 선언 형식과 함수 호출

분기문 종류
정적 함수 익명 함수
선언 형식

function 함수명1( [매개변수1, ~, 매개변수n]) {
    실행구문;
    [return 반환값;]
}

var 변수명1 = function 함수명1( [매개변수1, ~, 매개변수n]) {
    실행구문;
    [return 반환값;]
}

함수호출 형식
  • 함수명1([데이터1, ~, 데이터n])
  • 변수명1 = 함수명1([데이터1, ~, 데이터n])
  • 변수명1([데이터1, ~, 데이터n])
  • 변수명2 = 변수명1([데이터1, ~, 데이터n])
  • 함수명3(변수명1)
  • 함수명3( function(~){~})
함수호출 시점
  • [정적 함수] 선언 전후
    • 웹브라우저는 [정적 함수]를 먼저 골라 읽어 들인 후 나머지 코딩을 순차적으로 실행하기 때문이다.
  • [익명 함수]선언 이후
    • 웹브라우저는 [정적 함수]만 먼저 골라 읽어 들인 후 나머지 코딩을 순차적으로 실행하기 때문이다.
  • 함수명은 변수명 제작 규칙과 동일하다.<주의>함수명 호출 시 함수명 철자와 대소문자가 일치해야한다.
  • [매개변수]는 0개 이상 나올 수 있다.
  • [매개변수]가 있을 경우 함수 호출 시 매개변수 개수와 자료형에 맞게 데이터를 전달하여 함수를 호출한다.
  • return 반환값; 이 나오면 함수를 중단하고 함수를 호출한 곳으로 [반환값]을 리턴한다. <주의>return; 이 나오면 반환값 없이 함수를 중단한다.
  • return function(~){~};도 가능하다. 익명함수도 데이터의 일종이므 가능하다. 이렇게 익명함수를 리턴받는 곳은 함수명(~){~}로 호출한다.
  • 함수 안에서 다시 자기 자신의 함수를 호출할 수도 있다. => 재귀호출 함수

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  • <참고>[익명함수]는 주로 매개변수로 전달되어 호출되는 경우가 대부분이다.
        <주의>자바스크립트에서는[익명함수]도 데이터의 일종으로 취급한다.
        <주의>자바스크립트에서는 함수를 매개변수로 전달하기 위해 익명함수를 데이터로 취급한다.
  • <주의>실수로[정적함수] 끼리 또는 [익명함수] 끼리 같은 함수명으로 2개 이상의 정의하면 마지막에 선언된 함수가 호출된다.
  • <주의>실수로[정적함수]와 [익명함수]를 같은 함수명으로 정의하면 순서에 관계없이 무조건 [익명함수]가 먼저 호출된다. 웹브라우저는 [정적함수]만 먼저 읽어들인 후에 이외 코드를 읽어 들이기 때문에 [익명함수]가 항상 [정적함수] 이후에 읽여진 다음
  • <주의>함수명과 HTML 양식이름이 같으면 함수가호출되지 않을 수 있으므로 반드시 다르게 준다.

함수 안의 변수

분기문 종류
전역변수
  • 하나의 HTML 파일 안의 모든 자바스크립트에서 공유 가능한 변수다.
  • 주로 { } 밖에서 선언된다.
지역변수
  • { } 안에서 var 로 선언된 변수이다.
  • { } 안에서만 사용되므로 함수 밖에서 호출할 수 없다.
  • <주의>{ } 안에서 var 없이 선언된 변수는 전역변수가 된다.
매개변수
  • 함수 호출 시 전달되는 데이터를 저장하는 변수다.
  • <예>function 함수명( 매개변수 ){ 실행구문; }
  • <주의>매개변수 앞에는 var 를 붙이지 않는다. 붙이면 에러 발생.
  • 함수 안에서만 사용되므로 함수 밖에서 호출할 수 없다.

내부 함수

  • 함수 내부에 선언된 또 다른 함수를 말한다.
  • 부모 함수 내부에서만 반복적으로 사용되거나 단위화 시킬 경우 사용한다.
  • [부모 함수] 영역 안에서만 호출이 가능하다.

  • 내부 함수 형식

    function 부모함수명( [매개변수1, ~, 매개변수n] ) {
        ~
        function 내부함수명( [매개변수1, ~, 매개변수n] ) {
            실행구문;
            [return 반환값;]
        }
        ~
    }

  • <주의>[내부 함수]와 [외부 함수] 이름이 같을 경우 [부모 함수] 안에서 [내부 함수]를 호출 할 때 [내부 함수]가 우선 호출된다.

    function a( ) {
        return "사오정";
    }
    function b( ) {
        function a( ) {
            return "저팔개";
        }
        return a( );
    }
    document.write( b( ) ); // 저팔개 출력

콜백 함수 (callback function)

  • 함수의 매개변수로 전달되는 [익명함수]를 말한다.
  • <주의>자바스크립트에서 함수를 데이터의 한 종류로 보는 것은 다른 프로그래밍 언어에서는 찾아 보기 힘든 개념이다.

  • 콜백 함수 호출 형식

    콜백 함수 호출 형식
    형식1 형식2

    var 변수명 1 = function ( ~ ) {
        ~
    }
    함수명1( 변수명1 );

    함수명1( function( ~ ){ ~ } );

내장 함수

  • 자바스크립트 자체에서 미리 만들어져 제공하는 함수를 말한다. ※ 자스 = 자바스크립트

    내장함수 종류
    내장함수 종류 기능
    eval( 문자열 )
    • 문자열을 자바스크립트 실행 코드로 바꾸어 실행한다.
    parseInt( 숫자문자, 10 )
    • 10진수로 표현된 [숫자문자]를 [정수]로 리턴.
    • <참고>[숫자문자]가 실수인 경우 소수 첫째자리부터 모두 버림.
    isNaN( 데이터 )
    • 데이터가 [순수문자]면 true 리턴. [숫자] 또는 [숫자문자] false 리턴.
    • <참고> isNaN => Not A Number
    alert( 문자열 )
    • [경고상자]를 보여주고 [확인] 버튼을 누르면 true 리턴.
    conflrm( 문자열 )
    • [확인상자]를 보여주고[확인] 버튼을 누르면 true 리턴,
      [취소] 버튼을 누르면 false 리턴
    prompt( 문자열 )
    • [문자열입력상자]를 보여주고 [확인] 버튼을 누르면 입력문자열 리턴,
      [취소] 버튼 누르면 undefined 리턴
    Number( 데이터 )
    • 데이터가 [숫자] 또는 [숫자문자]면 숫자 리턴, 아니면 NaN 리턴.
    typeof( 데이터 )
    • 데이터의 자료형을 리턴.
    isFinite( 숫자 )
    • 숫자가 유한 값이면 true 리턴. 무한 값이면 false 리턴
    • <예>isFinite(3/1) => true 리턴, <예>isFinite(3/0) => false 리턴.
    setTimeout( "자스코딩", n초x1000)
    시한폭탄
    • n초 뒤에 자스코딩 실행. <주의>"자스코딩"에서 "를 빼면 안된다.
    • setTimeout( function(~){자스코딩;}, n초x1000 ) 도 가능
    setInterval( "자스코딩", n초x1000)
    정해진시간마다 반복실행
    • n초 마다 자스코딩 실행. <주의>"자스코딩"에서 "를 빼면 안된다.
    • setInterval( function(~){자스코딩;}, n초x1000 ) 도 가능
    clearTimeout( id )
    • setTimeout( ~ )를 종료 시킹
    clearInterval( id )
    • setInterval( ~ )를 종료 시킹

클로저 (closer)

  • <정의1>함수 안에서 var 로 선언된 [지역 변수]가 함수 종결 이후에도 살아 있는 [지역 변수]를 말한다.
  • <정의2>함수 안에서 var 로 선언된 [지역 변수]로 함수 종결 이후에도 살아 있도록 해주는[익명함수]를 말한다.
  • <정의3>함수 안에서 var 로 선언된 [지역 변수]로 함수 종결 이후에도 살아 있는 현상을 말한다.

Chap 7. 기본 내장객체

객체 (Object)

  • [속성변수],[메소드]로 구성된 단위 프로그램이다.
  • [속성변수]는 데이터를 저장하고, [메소드]에는 실행 구문을 저장하여 필요 시 호출해서 사용한다.
  • 자바스크립트에서 객체도 자료형의 한 종류이다.
  • 객체의 종류에는 [내장 객체], [사용자 정의 객체]가 있다.

내장 객체

  • 자바스크립트 자체에서 미리 만들어져 제공하는 개체를 말한다.

  • 내장 객체의 객체 생성, 속성/메소드 호출 형식

    분기문 종류
    형식1 형식2 형식3
    <1>객체 생성

    var 객체참조변수 = new 내장객체명( ~ );
    <2>메소드 호출 객체참조변수.메소드(~)

    제공객체참조변수.메소드(~)

    내장객체명.메소드(~)
    document.write(math.ceil(3.7));

    <2>송성변수 호출 객체참조변수.속성변수

    제공객체참조변수.속성변수

    내장객체명.속성변수
    document.write(math.ceil(3.7));

    • 객체 생성 시 객체는 메모리에 올라가며 [객체참조변수]에는 객체의 [메모리 위치 주소값]이 저장되어 있다.

    • 속성변수는 데이터를 취득하거나 데이터를 셋팅한다.

      • 데이터 취득 => var 변수 = 객참변수.속성변수; ※객참변수 = 객체참조변수
      • 데이터 셋팅 => 객참변수.속성변수 = 데이터;
    • <형식2> 경우 자바스크립트 자체에서 미리 객체 생성을 하고 객체참조변수까지 제공한다.
    • <형식3> 경우 객체 생성 없이 메소드나 속성변수를 호출한다.

Array객체

  • 같은 유형 또는 다른 유형의 데이터 들을 [순차적]으로 저장하여 관리하는 객체이다.
  • 저장 데이터는 변수에 저장하여 관리하고 이 변수를 [배열변수]라 한다.

  • 객체 생성, 메소드 호출, 속성변수 호출 방법

    Array객체
    1차원 Array 객체 2차원 Array 객체
    객체 생성 객참변수 = new Array( 데이터1, ~, 데이터n ); var 객참변수 = new Array(
        new Array(데이터1, ~, 데이터n),
        ~,
        new Array(데이터1, ~, 데이터n)
    );
    객참변수 = new Array();
    객참변수.push( 데이터1 );
    ~
    객참변수.push( 데이터n );     		var 객참변수 = new Array(
        [데이터1, ~, 데이터n],
        ~,
        [데이터1, ~, 데이터n]
    );
    객참변수 = [ 데이터1, ~, 데이터n ]; var 객참변수 = new Array();
    객참변수.push( new Array(데이터1, ~, 데이터n) );
    ~
    객참변수.push( new Array(데이터1, ~, 데이터n) );
    객참변수 = [ ];
    객참변수.push( 데이터1 );
    ~
    객참변수.push( 데이터n );     		var 객참변수 = new Array();
    객참변수.push([데이터1, ~, 데이터n]);
    ~
    객참변수.push([데이터1, ~, 데이터n]);
    var 객참변수 = [
        [데이터1, ~, 데이터n],
        ~,
        [데이터1, ~, 데이터n]
    ]
    메소드 호출 객참변수.메소드(~)
    속성변수 호출 객참변수.속성변수
    • <참고>데이터1, ~, 데이터n 이 생략되면 데이터가 없는 Array 객체가 생성이 된다.
    • <참고>Array 객체 생성 후에 데이터를 추가 저장할 수 있다.
    • <참고>배열변수명은 "객참변수[인덱스번호]"이다. 인덱스번호는 0부터 시작한다.

    • <주의>var 객체참조변수 = new Array(정수 );

      • => 배열객체 객체 생성 후 정수만큼의 배열 변수를 생성.
      • => 정수 1개를 저장하라는 의미가 아님.

  • 메소드, 속성변수

    메소드, 속성변수
    속성변수
    메소드

  • < 1차원 Array 객체의 상상도>

    19페이지

  • < 2차원 Array 객체의 상상도>