[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문
: 특정 조건을 만족시 반복문을 일시적으로 탈출했다가 다시 반복문 수행