Chapter5.동작을 처리하는 자바스크립트와 제이쿼리 라이브러리

(function(인수리스트){처리할 문장})();

section01. 자바스크립트의 개요

<자바스크립트의 문장구조>

 

*자바의 리터럴(데이터의 값)

리터럴은 값을 의미하며 숫자 타입은 그냥 기술하고, 문자열 타입은 큰따옴표(" ")로 둘러 싸서 표현하다.

부울(boolean)타입, 문자(character)타입 및 함수, 객체 ,배열, 값도 리터럴로 취급한다.

 

리터럴(값)	설명
5	정수 리터럴
5.0	실수 리터럴
"test", 'test'	문자열 리터럴, 자바스크립트는 문자열 표현에" ", ' '를 둘다 사용할 수 있음
false	부울 리터럴
null	null 리터럴, 레퍼런스 타입(객체 타입)변수의 초기화 등에 사용. 객체 변수가 이 값을 갖게 되면, 할당된 객체가 없다는 의미
[1,2,3]	배열 리터럴
function(){}	함수 리터럴
{id: "aaa"}	객체 리터럴

 

*자바스크립트의 변수 선언

 

//var 변수명 = 리터럴;
// 데이터 타입은 값을 할당할 때 결정된다.
// 숫자 값을 넣으면 숫자 변수, 문자열을 넣으면 문자변수, 객체를 넣으면 객체 변수
var var1 = 5;
var star1 = "aaa";
var class1 = {classNo:"101", className:"HTML,CSS&JavaScrript"};

 

<데이터 타입>

프로그래밍은 데이터를 처리해서 원하는 결과를 얻어내는 과정으로 데이터의 종류에 따라 처리하는 방법이 다르다.

 

** undefined,null, empty 값의 차이

-undefined : 변수 등 타입이 정의 되지 않음(값이 할당되지 않음)

-null: 객체 레퍼런스 변수가 가리키는 객체가 없음, 객체 초기화 등에 사용

-empty: 문자열 변수 등의 값이 비어 있음(공백 값)

 

-데이터 타입 

숫자, 문자, 부울, 객체, undefined, null, empty

 

-기본 데이터

타입과 객체(참조, 레퍼런스)타입

1) 숫자 타입

산술 연산에 사용 0~9, 부호(-), 소수점

2)문자열 타입

숫자, 문자로 이루어진 문자열 데이터로 ""나 '' 로 둘러싸서 표현

3)부울 타입

true또는false값을 갖는 타입 표현

 

-참조 데이터 타입: 객체 타입

자바스크립트에서는 객체 및 배열, 함수, 정규 표현식도 객체 타입으로 취급

1)자바스크립트 객체 : {}

var 객체변수명 = {프로퍼티, 메소드};

객체에는 [키:값]의 쌍으로 표현

키가 프로퍼티명이고, 값이 프로퍼티가 갖는 값

메소드는 객체 수행하는 동작(작업처리)을 기술하는 곳으로 method1: function(){}

 

var obj1= {id:"aaa",pass:"pass",method1:function(){return1;}}

ob1.id ; // obj1객체의 id 프로퍼티에 접근
obj1.method1(); // obj 객체의 method1()에 메소드 접근 

 

2)배열: []

[ ] 안에 배열의 원소를 ,(쉼표)를 사용해서 나열

var 배열변수명 = [원소1, 원소2,....];

var arr1= [1,2,3];

arr1; // arr 1 배열 원소 전체
arr1[0]; //첫 번째 원소에 접근
arr1[arr1.length-1]; //마지막 원소에 접근

 

3)함수 : function(){

function(){}과 같은 익명함수를 변수에 넣어서 사용하는 함수 리터럴을 권장

var 함수변수명 = function(인수리스트){//처리코드}

 

 

var f1= function(){return 1};
var f2 = function(a,b){return a+b};

f(); //f1()함수 호출
f2(5,7); // f2(5,7)는 f2()함수를 인수 5,7을 사용해서 호출

section02.제어문

<조건문>

1) if문

조건: ~이면
결과가 2개 : 참, 거짓

// 복잡한 조건식을 구현할 때에는 and, or 연산자를 사용
-and 연산자 사용법 : 조건1&&조건2 &&...
-or 연산자 사용법: 조건1 || 조건2 || ...

 

2) 기본 if문

// 기본 if문
if(조건){ // 조건을 만족할 때
// 참
} else{ // 조건을 만족하지 않을(거짓)때
// 거짓
}

 

3) 다중 if 문

// 기본 if문
if(조건){ 
// 참
} else if(조건2){
/참
}else{
// 거짓
}

 

4) switch문

switch(표현식){
            case 값1 :
            //처리
                break;
             case 값2 :
            //처리
                break;
             default:
           // 처리
             break;
}

 

5) 조건 연산자

간단한 조건문 구현에 사용

? : 연산자를 사요하며 문법은(조건)?참:거짓;과 구성됨

 

<반복문>

1) for문 : 횟수 반복

for(var 카운터 변수 선언과 초기화 ; 반복횟수 제어 조건 ; 카운터변수 누적){
   //반복할 문장
}

 

for(var x=0; x<10; x++){
	document.write(x);
}

 

2) for-in문 : 객체 내의 프로퍼티 반복

객체 내의 프로퍼티 수만큼 반복 수행할 때 사용

for(var 변수 in 객체명){
  // 처리할 문장
}

 

var objName = {name: "김왕쌍" , subName: "kingdora"};
for(var v1 in objName){
	document.write(v1+":"+objName[v1]+"<br>");
}

 

3)for-of문 : 객체 반복

객체 내의 객체를 반복할 때 사용

객체의 모임(컬렉션)을 반복하는데, 객체가 객체의 값으로 여러 개의 객체를 갖는 것을 컬렉션이라고 함

for(let변수 of 컬렉션){
// 처리할 문장
}
-for of :문 컬렉션 내의 객체의 반복
- let 문 : 객체저장 변수에 값 할당

 

objName = [{name: "김태형" , subName : "taetae"},
			{name: "김연탄" ,subName : "tan"}];

for(let obj1 of objName){
	for(var v1 in obj1){
    	document.write(v1 + " : "+obj[v1]+"<br>");
	}
}

 

 

4. while문

· 조건을 만족하는 동안 반복수행하는 제어문으로 for보다 수행속도가 느리다는 단점이 있다.

· 무한루프를 사용할 때 사용한다.

​

5. do-while문

· 일단 1번 실행 후 조건비교 반복을 할 때 사용하는 제어문이다.

​

- 기타 제어문

1. break문 : 반복문 완전 탈출

· 특정 조건을 만족 시 while문 안에서 무한루프 또는 for문을 사용한 반복문을 중단할 때 사용한다.

​

2. continu문

· 특정 조건을 만족시 반복문을 일시적으로 탈출했다가 다시 반복문을 수행한다.

 

section03. 함수와 객체

- 함수개요와 내장 함수

1. 함수 개요

· 함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트){ }fh rntjdehlsek.

· 실행 결과는 return문을 사용해서 리턴한다.

· 함수를 사용할 때 알아야하는 3가지 사항

① 함수가 하는 일 : 함수명

② 함수 인수의 개수와 타입 : 인수리스트

③ 함수의 실행결과 타입(리턴타입) : return문

​

2. 내장 함수

· 시스템이 제공하는 함수로, 메세지 상자를 호출하거나 화면에 출력하는 등의 작업을 제공한다.

​

- 사용자 정의함수

· 특정 작업을 처리하기 위한 절차를 나열한 함수로 필요에 따라서 작성한다.

· var 함수명 = function(){}과 같은 형태로 작성하며, 작성한 함수를 사용할 때는 함수명()과 같이 호출한다.

​

1. 일반함수

· 기본적인 형태의 사용자 정의함수로 function문을 사용해서 함수를 정의한다.

· 함수 선언문으로 정의하는 방식과 함수 표현식으로 정의하는 방식이 있다.

함수 표현식으로 정의하는 것을 권장한다.

​

2. 익명함수 : 이름 없는 함수

· 이름이 없는 함수로 필요한 곳에서 이름을 정의하거나 이름을 굳이 줄 필요가 없는 경우에 사용한다.

· 특정 경우에만 사용되고 자동으로 제거된다. (메모리 관리에 좋음)

· 주로 이벤트처리(콜백함수), 즉시실행 함수, 클로저, 함수 표현식에 사용된다.

 

fucntion(){}

 

3. 콜백함수

· 이벤트에 반응하는 함수로 이벤트가 발생하면 자동으로 실행된다.

 

image.onload = function(){
   // 처리할 문장
}

// 이미지가 로딩되면 자동실행

 

4. 즉시 실행함수(Self-Invoking Functions)

· 함수 정의와 동시에 실행되는 함수로, 함수 호출 없이 자동으로 실행된다.

· ()로 함수 선언부와 바디를 감싸서 선언한다.

· 같은 함수를 다시 실행할 수 없으므로 최초에 1번만 실행해야하는 초기화 등에 사용된다.

 

- 클로저

· 즉시실행 내부함수로 함수의 캡슐화, 런타임 실행시 인자 값을 넘겨서 자동 동작되는 작업에 사용된다.

· 함수 안에 리턴값으로 정의되는 익명 함수로 카운터 딜레마에 사용된다.

​

1. 카운팅 딜레마

· 특정 함수가 실행될 때마다 1씩 누정되는 변수를 전역변수 또는 지역변수로 지정했을 때의 단점 때문에 발생한다.

· 카운터 변수가 전역변수일 때

변수 값이 1씩 증가하는 카운팅은 발생하나 보안상 취약하다.

· 카운터 변수가 지역변수일 때

보안상 좋으나 카운팅이 되지 않는다.

​

2. 클로저를 사용한 카운팅 딜레마 처리

· 즉시실행함수와 내부함수를 결합한 클로저를 사용해 변수의 보안 기능과 누적 기능을 모두 충족시킬 수 있다.

· 딱 1번만 실행되는 즉시실행함수를 사용하여 자식인 익명 내부함수가 부모함수의스코프에 접근한다.

​

- 객체

1. 자바스크립트에서 .방법

· 비즈니스로직(실무처리) 웹 프로그래밍에서 객체는 데이터 1건을 표현한다.

· 객체가 가진 값은 프로퍼티(속성, 멤버필드), 객체가 하는 일은 베서드(동작)으로 기술한다.

· 자바스크립트에서 객체는 var 객체변수명 = {프로퍼티 : 값}; 과 같이 객체 리터럴을 사용해서 생성한다.

​

2. 객체 사용(접근) : 프로퍼티나 메서드를 사용해서 접근

· 프로퍼티를 사용한 객체 값에 접근할 때는 객체명.프러퍼티명 또는 객체명["프로퍼티명"]과 같이 사용한다.

· 프로퍼티에 접근해서 프로퍼티 값을 얻어내거나(겟팅) 변경하거나(세팅) 프로퍼티를 생성(추가)할 수 있다.

​

3. 객체으 프로퍼티 반복 : for in

· 객체에서 속성 1개를 봅아서 속성저장변수에 넣어 속성의 개수만큼 반복처리한다.

​

4. 객체 프로퍼티 삭제 : delete 연산자

· 'delete 객체.프로퍼티명'과 같이 delete 연산자를 사용한다.

​

5. 객체 비교

· 두 객체는 객체를 가리키는 레퍼런스(객체주소를 저장) 변수가 같으면 같은 객체이다.

​

6. 생성자 함수

· 객체를 생성할 때 사용하는 틀로 해당 객체의 형태를 결정한다.

· 생성자 함수명은 클래스명을 작성하는 규칙과 같다.

· 생성자는 주로 프로퍼티값 겟팅/세팅에 사용하며, 생성자 함수 내의 프로퍼티는 this 키워드를 사용한다.

 

var PlayerCharacter = function(){};

 

7. 내장객체

· 자바스크립트는 숫자, 문자열, 배열, 날짜 객체를 제공한다.

(Number, String, Array, Date)

· 문서의 객체에 접근할 수 있도록 문서 객체 모델 객체도 제공한다.

(Attributes, Console, Document, Elemets, Events, Event Objects, History, Location, Navigator, Screen, Style, Window 등)

· 문서 객체에 대한 정보는 document 객체의 메서드를 사용해서 얻어내며 이를 사용해서 태그나 태그의 내용에 접근한다.

 

section04. 제이쿼리를 사용한 태그 제어와  Ajax

- 개요

· 빠르고 가볍고 다양한 기능을 가진 자바스크립트 라이브러리이다.

· 제이쿼리 라이브러리가 제공하는 기능

▸ HTML/DOM 작업

▸ CSS 작업

▸ HTML 이벤트 처리

▸ 각종 효과 및 에니메이션

▸ Ajax

▸ 각종 유틸리티

​

- 제이쿼리 기본 사용법

· http://jquery.com/ 사이트에서 다운로드 받아서 소스에 포함한다.

· CDN(Content delivery network, 콘텐츠 전송 네트워크)를 사용해 HTML 파일에 포함한다.

​

1. 기본 문법

· HTML 엘리먼트(태그)를 사용해서 어떤 동작을 수행한다.

· 어떤 태그에 어떤 동작이 발생했을 때 어떻게 제어할지 지정한다.

실렉터(selector) : 동작이 발생되는 태그

동작(action) : 실렉텅서 발생하는 특정 동작

 

$(selector).action()

$ : 제이쿼리에서 태그 접근에 사용
(selector) : HTML 엘리먼트(태그명)
action() : 해당 엘리먼트에서 수행할 동작

 

2. 실렉터(selector) - HTML 엘리먼트에 접근

· 어떤 작업을 처리하기 위해 특정 엘리머트를 선택하는데 사용된다.

· 실렉터에는 엘리먼트명, 엘리먼트의 id 속성 값, 엘리먼트의 class 속성 값을 사용할 수 있다.

· 모든 제이쿼리의 실렉터는 $로 시작해 $()와 같은 형태로 사용한다.

· () 안에는 엘리먼트명, 엘리먼트 id 속성 값, class 속성값 등이 올 수 있다.

 

$(엘리먼트명/#엘리먼트의 id 속성 값/.엘리먼트의 class 속성 값/ 객체명)

 

· 자바스크립트의 코드는 $(document).ready(function( ){// 코드}); 안에 작성하며, 현재 페이지(html)의 로딩이 끝나면 자동 실행된다.

​

- HTML 엘리먼트 내용에 접근하기 - get/set

 

<엘리먼트명>엘리먼트 객체의 내용</엘리먼트명>

· HTML 엘리먼트 객체의 내용에 접근해야 엘리먼트(태그)의 내용을 변경할 수 있다.

· $("엘리먼트명")와 같인 실렉터를 사용한 태그 선택 형태로 HTML엘리먼트의 객체 자체에 접근이 가능하다.

· 엘리먼트의 내용에 접근하려면 text(), html(), val() 메서드 중 하나를 사용해야 한다.

메서드	설명
text()	선택한 엘리먼트의 내용을 텍스트 형태로 지정하거나 얻어낸다.
html()	선택한 엘리먼트의 내용을 HTML 태그를 포함하여 지정하거나 얻어낸다.
val()	폼 필드의 값을 지정하거나 얻어낸다.

​

- 제이쿼리 이벤트 처리

1. 마우스 이벤트

마우스 이벤트	설명
click	엘리먼트를 클릭 시 발생
dbclick	엘리먼트를 더블클릭 시 발생
mouseenter	엘리먼트에 마우스 포인터가 위치
mouseleave	엘리먼트에 위치된 마우스 포인터가 나가면 발생

​

2. 키보드 이벤트

키보드 드이벤트	설명
keypress	키보드를 눌렀다가 놓으면 발생
keydown	키보드를 누르면 발생
keyup	눌린 키보드를 놓으면 발생

​

3. 폼 이벤트

폼 이벤트	설명
submit	폼을 전송 시 발생
change	폼 엘리먼트가 변경되면 발생
focus	폼 엘리먼트의 포커스가 위치되면 발생
blur	폼 엘리먼트가 포커스를 잃으면 발생

​

4. 도큐먼트/ 윈도우 이벤트

도큐먼트 / 윈도우 이벤트	설명
ready	페이지의 로드가 완료되면 발생
load	페이지가 로드되면 발생
resize	웹 브라우저의 창의 크기를 변경하면 발생
scroll	웹 브라우저의 창의 스크롤을 이동하면 발생
unload	페이지가 언로드되면 발생

​

- 제이쿼리 Ajax

· 서버로부터 TEXT, HTML, XML 또는 JSON 형태의 파일을 요청하고 응답받을 수 있는 기능을 제공하는 메서드를 사용하여 구현한다.

​

1. .load() 메서드

· 서버에서 요청하고 지정한 엘리먼트에 응답 받는 결과를 넣는다.

· 응답 받은 결과를 화면에 표시해야 하는 로그인 폼, 회원가입 폼, 글 목록 등을 실행할 때 주로 사용한다.

​

2. $.get()

· 서버로 HTTP get 방식의 요청을 한다.

· 이 메서드 대신 $.ajax() 메서드를 사용해 된다.

​

3. $.post()

· 서버로 HTTP post 방식의 요청을 한다.

· 이 메서드 대신 $.ajax() 메서드를 사용해 된다.

​

4. $.ajax()

· 서버로 비동기 Ajax 요청을 한다.

· 주로 로그인 처리, 회원가입 처리, 글쓰기 처리 등과 같이 DB와 연동 후 처리 결과만 반환하는 경우에 사용한다.