[Frontend] Java Script & jQuery Library

Chapter #5 동작을 처리하는 Java Script & 제이쿼리 라이브러리

Section 1. Java Script 개요

✴︎ Java Script란?

: 넷스케이프사에서 웹 페이지의 처리 능력을 향상시킬 목적으로 개발한 LiveScript 기반

: 넷스케이프사와 선마이크로시스템즈가 공동으로 개발한 스크립트 언어

: 연사자와 제어문은 C/C++과 유사, 객체지향의 상속 방식은 프로토타입 (Prototype) 기반

• 프로토타입 기반(Prototype-based)

: 객체지향의 한 형태, 클래스가 없이 객체의 프로토타입을 복제해서 재사용하는 방식으로 상속

• 웹상에서 HTML의 프로그래밍 언어, HTML 태그에 어떤 동작을 부여해서 작업을 처리

✴︎ 사용 방법

: JS를 기술 및 사용할 때는 <script> 태그를 사용해서 함

: HTML 페이지 내부에 포함해서 작성할 수 있고, 별도의 파일로 작성 후 필요한 페이지에서 가져다 쓸 수 있음

: 재사용성을 위해 외부 파일로 저장한 후 필요할 경우 사용하는 것이 좋음

: 일종의 라이브러리와 같은 역할

 

→ HTML 페이지 내부에 포함해서 작성하는 방법

<script>
	// 자바스크립트 코드 기술
</script>

 

→ 별도의 파일로 작성 후 필요한 페이지에서 가져다 쓰는 방법

<script src = "경로를 포함한 자바스크립트파일명"></script>

 

✴︎ 문장 구조

• 유니코드(Unicode) 기반의 프로그래밍 언어

• 대소문자를 구분

• 문장의 끝은 세미콜론(;)으로 구분

• 자바, C계열의 주석인 //, /**/를 사용

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

: 리터털 = 값을 의미, 숫자 타입은 그냥 기술, 문자열 타입은 큰따옴표("")로 표현

: boolean, character, 함수, 객체, 배열 값도 리터럴로 취급

• 식별자 규칙

: 첫글자는 영문자, _, $ 사용 가능, 나머지 글자는 숫자도 사용 가능

• 변수 선언

: var 키워드를 사용

var 변수명 = 리터럴;

 

• 키워드

: 소문자로만 이루어짐

: 해당 프로그래밍 언어에서 특별한 목적으로 사용되는 단어기 때문에, 목적 외의 것으로 사용할 수 없음

if = 5; 와 같이 변수명으로 사용 불가

 

✴︎ 데이터 타입

: 데이터 타입에는 숫자, 문자, 부울, 객체, undefined, null, empty 등이 있음

: 기본데이터 타입과 객체 타입으로 나뉨

• 기본 데이터 타입

① 숫자 : 산술연산에 사용 0~9, 부호, 소수점으로 이루어짐

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

③ boolean : true 또는 false 값을 찾는 타입 표현에 사용

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

: 객체 및 배열, 함수, 정규 표현식도 객체 타입으로 취급

① 객체 {} : {} 안에 property, method 등을 기술, 쉼표(,)를 사용해서 나열

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

 

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

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

 

③ 함수 : function(){}

: 익명 함수를 변수에 넣어서 사용하는 함수 리터럴을 권장

: 실행 결과를 함수를 호출한 곳으로 반환하려면 return 값; 과 같은 형태로 기술

• 변수 선언 방법

: 변수는 값 저장소로 프로그램에서 필요한 값을 일시로 메모리에 저장

 

✴︎ 프로그래밍 권고사항

• 전역변수는 가급적 사용을 자제

• 지역변수를 사용시 선언하고 사용

• 참조대상은 먼저 선언하고 사용

• 변수는 사용 전에 초기화

• 숫자, 문자, boolean 값은 객체 형태로 쓰지 않음

• 문자열, 객체, 배열, 함수 생성시 new 키워드를 사용해서 생성하지 않음

• 자동 형변환에 주의

 

Section 2. 제어문

: 실행 순서를 제어하는 제어문에는 조건문, 반복문, 기타 제어문이 있음

• 조건문 : 조건을 사용해서 프로그램 실행 순서 제어

→ if문, switch문 : switch문은 요즘 잘 사용하지 않음

• 반복문 : 프로그램 실행을 반복문을 사용해서 제어

→ for문, while문, do-while문

• 기타 제어문 : 그 밖의 프로그램 실행 순서 제어

→ break문, continue문 : 반복문을 탈출 또는 일시 탈출

→ with문 : 객체 생략

→ try-catch-finally문 : 예외처리

 

✴︎ 조건문

• if문

: 주어진 값에 따라 결과가 2개로 분기 시 사용, 조건과 결과로 구성

• 기본 if문

: 주어진 값에 따라 결과가 2개로 분기될 때 사용

: 조건을 만족할 때와 조건을 만족하지 않을 때 처리를 갖음

• 다중 if문

: 주어진 값에 따라 결과가 3개 이상으로 분기일 때 사용

• switch문

: 표현식의 값에 따라 분기되는 제어문

: 다중 if문을 대체할 때 주로 사용

: 표현식의 결과가 정수만 가능하기 때문에 권장하지 않음

• 조건 연산자

: 간단한 조건문 구현에 사용

: ? : 연산자를 사용

// 문법
(조건) ? 참 : 거짓 ;

 

✴︎ 반복문

: 반복 작업 처리에 사용, 여러 건의 작업처리에 사용

: 카운터 변수는 반복문의 반복 횟수를 제어하기 위해서 사용

• for문 → 횟수 반복

: 지정된 횟수만큼 반복수행할 때 사용

• for-in문

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

• for-of문 → 객체 반복

: 객체 내의 객체를 반복할 때 사용 → 컬렉션을 반복

: 컬렉션 → 객체가 객체의 값으로 여러 개의 객체를 갖는 것

// 문법

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

 

• while문

: 조건을 만족하는 동안 반복수행하는 제어문, for보다 수행속도가 느림

: 객체반복을 주로 하기 때문에 무한루프를 사용할 때를 제외하고는 잘 사용되지 않음

• do-while문

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

: 반드시 1번 수행 후 조건을 비교

: 특수한 상황에서만 사용

 

✴︎ 기타 제어문

• break문 → 반복문 완전 탈출

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

while(true){ // 무한루프
	if(조건){
    	break;
    }
}

 

• continue문

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