[Web] JavaScript
JavaScript
자바 스크립트는 인터프리터(JavaScript Engine)이 코드를 바로 해석한다.
※인터프리터를 사용하는 언어는 실행속도가 빠르지만 최적화에 용이하지 않다.
HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 작동하는 유일한 프로그래밍 언어이다.
HTML : 구조/ CSS : 디자인 / JavaScript : 기능
HTML에서 JavaScript를 사용하려면 <script> 태그 사용
· 변수 호이스팅(Variable Hoisting)
: var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성, 선언되기 이전에 참조 가능
var 키워드를 사용한 변수는 중복해서 선언 가능
not defined : 변수 자체 생성 X
undefined : 변수에 값 할당 X
※ ECMA6 : let을 사용하면 변수 호이스팅의 혼동을 막을 수 있다.
· 연산자
'+' 연산자 : 연산 대상의 값이 모두 숫자인 경우 산술 연산을 수행, 대상 중에 문자열이 포함된 경우 모든 연산 대상을 문자열로 반환하고 문자열 결합
'===' : 값이 일치하는지 확인(타입 포함)
'==' : 값만 비교
· 객체(Object) 개요
JavaScript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티들의 집합
JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 프로퍼티의 값으로 함수를 사용할 수 있다.
- 함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전다하는 전달인자(콜백함수) 또는 리턴 값으로 사용 가능
- 함수는 프로그램 실행 중에 동적으로 생성이 가능하다.
객체는 .이나 []를 사용해서 속성 값에 접근한다.(속성명에 연산자가 포함된 경우(ex.-) []표기법만 접근 가능)
속성값을 변경할 때는 .이나 []를 사용한다.
· 함수(function)
함수 정의 3가지 방법 : 함수 선언문, 함수 표현식, function 생성자
※ 함수 선언문으로 함수를 정의하면 사용은 쉽지만 대규모 개발 시 인터프리터가 너무 많은 코드를 변수 객체에 저장하므로 응답속도를 저하시킬 수 있다. -> 함수 표현식을 더 많이 사용해라.
함수 호이스팅 : 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능하다.
- 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.
Web Browser와 Window 객체
· Window 객체 사용
- alert() : 브라우저의 라림창
- confirm() : 브라우저의 확인/취소 선택창 (확인이면 true return)
- prompt() : 브라우저의 입력창 (입력메시지 return)
· 새 창 열기
window 객체의 open()함수를 사용하여 새 창을 열 수 있다.
window.open('페이지 URL', '창이름', '특성', '히스토리 대체 여부(생략가능)');
- 창이름(String) : open할 대상(_blank, _self등) 지정 혹은 창의 이름.
- _blank : 새로운 창이 뜨면서 새 창 띄움
- _self : 기존 창에서 페이지 이동 발생
- 특성 : 새로 열릴 창의 너비, 높이 등의 특성 지정
- 히스토리 대체 여부 : 현재 페이지 히스토리에 덮어쓸 지 여부(true/false)
window 객체의 opener 속성을 이용하면 부모 창(새로운 창을 열게 해준 창)을 컨트롤 가능
- 부모 창을 새로고침 하거나 페이지 이동
- 부모 창에 값 전달
Web Storage
· Web Storage - localStorage
- 데이터를 사용자 로컬에 보존하는 방식
- 데이터 저장, 삭제, 덮어쓰기 등 조작 가능
- 자바스크립트로 조작
- 모바일에서도 사용 가능
- 문자열만 저장
기본 구성
- 키(key)와 값(value)을 하나의 세트로 저장
- 도메인과 브라우저별 저장
- 값은 반드시 문자열로 저장