[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)을 하나의 세트로 저장
• 도메인과 브라우저별 저장
• 값은 반드시 문자열로 저장