JavaScript

1. JavaScript 소개

[ JavaScript 개요 ]

∘ 프로토타입 기반 스크립트 프로그래밍 언어

* 프로토타입 기반 프로그래밍

- 객체지향 프로그래밍의 한 형태

- 클래스 기반 언어의 상속과 다르게 객체를 원형(프로토타입)으로 하여 복제를 통해 재사용

- class-less, 프로토타입 지향, 인스턴스 기반 프로그래밍

∘ 객체지향 개념을 지원

∘ 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행

∘ 대부분 JavaScirpt Engine : ECMAScript

∘ 각 브라우저에서는 ECMAScript 스펙을 준수하는 방식으로 JS 지원한다.

[ JavaScript 특징 ]

∘ HTML, CSS와 함께 웹을 구성하는 요소

∘ 웹 브라우저에서 동작하는 유일한 PL
∘ 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

∘ 인터프리터&컴파일러의 장점을 결합한 JS 엔진은 처리속도가 느린 인터프린터의 단점을 해결

* JavaScript 엔진 ex) Chrome의 V8엔진

∘ 명령형, 함수형, 프로토타입 기반 OOP를 지원하는 멀티 패러다임 PL

2. JavaScript 시작

[ JavaScript 선언 ]

∘ HTML에서 <script> 태그를 사용하여 JavaScript 사용

∘ 태그 <script>

- src’, ‘type’ 속성을 사용하여 JS 선언 (HTML5부터 type 속성 생략가능)

- HTML 파일 내부의 <head> <body> 어느곳에서나 선언 가능 ( body의 끝 권장 )

- <head>의 JS : 브라우저의 입/출력 발생 이전에 초기화되어 브라우저가 먼저 점검 (느리다)

- <body>의 JS : 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자 입자에서 빠르다고 느낌

∘ 속성 ‘src’: 외부의 JS 파일을 HTML문서에 포함할 때 사용 (생략 가능)

∘ 속성 ‘type’ : 미디어 타입을 지정할 때 사용 (JS 코드는 ‘text/javascript’)

ex) <script src=“hello.js” type=“text/javascript”> </script>

[ JavaScript 예시 ]

∘ 반복문 : for(var i=1; i<10 ; i++) { }

∘ 변수 선언 : var num = 1;

∘ 콘솔창에 출력 : console.log(“num = ”+ num);

3. JavaScript 기본 문법

[ 주석 (Comment) ]

∘ // code : 한줄 주석

∘ /* code */ : 블록 주석

[ 변수 (Variable) ]

∘ 타입을 명시하지 않고 var를 사용하여 선언

∘ JS는 동적타입 언어이므로 값이 할당되는 과정에서 자동으로 변수 타입이 결정된다.

∘ Java와 변수/함수명 표기법 동일 (Camel Case)

[ 자료형 (data type) ]

∘ 원시타입과 객체타입으로 분류

∘ 원시 타입 : number, string, boolean, null, undefined

∘ 객체 타입 : 그외 나머지

1. 숫자 (number)

∘ JavaScript는 숫자의 정수/실수를 구분하지 않는다.

∘ 모든 숫자를 8byte 실수로 처리 ( 정수만을 표현하기 위한 자료형이 없다. )

∘ 숫자 연산시 실수 형태로 하기에 특정 소수점을 정확하게 표현 불가능

var x = 0.3 – 0.2;
var y = 0.2 – 0.1;
console.log(x == y); // false

∘ overflow, underflow, divided by zero 예외를 발생시키지 않는다.

∘ 숫자와 관려되 특별한 상수가 존재

- Infinity : 무한대를 나타내는 상수

- NaN(Not a Number) : 숫자가 아님을 나타내는 상수

ex) console.log(0/0); // Nan

2. 문자열 (string)

∘ 16bit Unicode 문자 사용

∘ 문자 하나를 표현하는 char과 같은 문자형을 제공하지 않는다. ‘a’도 문자열임

∘ ‘’, “” 둘다 사용 가능

∘ \ 도 사용 가능

∘ 문자열 안에 ‘’, “” 사용 : \‘ , \“

3. boolean, null, undefined

∘ 빈 문자열, null, undefined, 0 : false

∘ null : 값이 없거나 비어있음 [ 프로그램 레벨 ]

∘ undefined : 값이 초기화되지 않았음(정의되지 않았음)을 의미 [ 시스템 레벨 ]

4. 자동 형변환

∘ JavaScript는 매우 느슨한 형변환 규칙 적용

∘ 어떤 자료형이든 전달 가능, 그 값을 필요에 따라 변환 가능

∘ 서로 다른 자료형의 연산 가능

∘ 느슨한 규칙이 혼란을 야기하는 경우가 있다.

* 변수 호이스팅 (Variable Hoisting)

∘ var 키워드를 사요한 변수는 중복 선언 가능

∘ Hoisting

- var, function 등 모든 선언문이 해당 Scope의 처음으로 옮겨진것처럼 동작하는 특성

- Javascript는 모든 선언문이 선언되기 이전에 참조가 가능하다.

∘ 변수의 생성

- 선언 단계 : 변수 객체에 변수 등록

- 초기화 단계 : 변수 객체에 등록된 변수를 메모리에 할당 (undefined)

- 할당 단계 : undefined로 초기화된 변수에 실제 값 할당

* 선언단계와 초기화단계가 한번에 이루어진다.

console.log(num); // undefined
var num = 123;
console.log(num); // 123
{ var num = 456; }
console.log(num); // 456

∘ num이 선언되지 않았지만 모든 선언문은 Hoisting되므로 undefined로 초기화

var num=123;이 Hoisting되어 console.log(num); 앞에 var num;이 옮겨진것처럼 동작

∘ JavaScript는 블록레벨 스코프를 가지지 않는다.

num은 전역변수이므로 두번째 num에서 재할당된다.

[ 상수 ]

∘ ECMAScript6 이후 상수 표현 지원

∘ 상수 표기법 : 모든 문자를 대문자, 단어 사이는 ‘_’ 표기

∘ const LIST_COUNT = 10;

키워드	구분	선언위치	재선언
var	변수	전역 스코프	가능
let	변수	해당 스코프	불가능
const	상수	해당 스코프	불가능

[ 연산자 ]

∘ 산술연산자, 비교연산자, 논리연산자, 기타연산자 제공

∘ === 타입 + 값이 같은지 확인

[ 반복문 ]

∘ for (초기화 ; 조건식 ; 증감표현식) {}

∘ for (var 변수 in 배열 or 객체) {}

4. JavaScript 객체(Object)

[ 개요 ]

∘ 객체 : 이름과 값으로 구성된 프로퍼티의 집합

∘ 문자열, 숫자, boolean, null, undefined 를 제외한 모든 값

∘ 전역객체를 제외한 JS객체는 프로퍼티를 동적으로 추가/삭제 가능

∘ JavaScript의 함수는 일급객체, 값으로 사용 가능

[ 객체의 생성 ]

1. 객체 리터럴

∘ 가장 일반적인 방법

∘ { } 로 객체 생성

var student {
	name = ‘형준혁’,
	area = ‘서울’,
	info : function () { }
}

2. Object 생성자 함수

∘ new 연산자와 Object 생성자 함수를 호출하여 빈 객체 생성

∘ 빈 객체 생성 후 프로퍼티 or 메소드를 추가하여 객체 완성

var student = new Object();
student.name = ‘형준혁’;
student.area = ‘서울’;
studentc.info = function () { }

3. 생성자 함수

∘ 생성자 함수를 이용하면 클래스처럼 사용하여 프로퍼티가 동일한 객체 여러개를 간단히 생성할 수 있다.

function Student(name, area) {
  this.name = name;
  this.area = area;
  this.info = funtion () {}
}

var student1 = new Student(‘형준혁’, ‘서울’);
var student2 = new Student(‘동생준혁’, ‘대구’);

[ 객체의 속성값 조회 ]

∘ dot(.), []를 통해 속성값 접근

∘ [ ] 에 들어가는 프로퍼티 이름은 문자열이어야 한다.

∘ 객체에 없는 속성에 접근하면 undefined

∘ 객체 속성 조회시 || 연산자 사용 간ㅇ

var middle = employee[‘middle_name’] || ‘none’;

[ 객체의 속성 값 변경/추가/제거 ]

∘ 값 변경시 dot(.), [] 사용

member[‘age’] = 25; 
member.age = 25;

∘ 할당시 속성이 없으면 객체에 속성 추가

member.hobby = ‘코딩’; // member에 hobby 속성 추가

∘ delete 연산자로 속성 제거

delete member.city;

[ 객체의 참조 ]

∘ 객체는 복사되지 않고 참조된다.

∘ 참조타입 : Object, Array, Date, Error 등

∘ 타입확인 방법 : typeof( )

5. JavaScript 함수

[ 선언/호출 ]

∘ JavaScript의 함수는 일급 객체이다.

∘ 함수를 변수, 객체, 배열등에 저장할 수 있고, 다른 함수의 매개변수/리턴값으로 사용 가능

∘ 함수는 프로그램 실행 중 동적 생성

∘ 함수 정의 방법 : 1.함수선언문 2.함수표현식 3.Function생성자함수

[ 함수 호이스팅 ]

1. 함수 선언문

∘ 선언 위치와 상관없이 어디서든 호출 가능

∘ JavaScript는 모든 선언(var, function)을 호이스팅하기 때문

∘ 함수 선언문으로 정의된 함수는 JS엔진이 script가 로딩되는 시점에 이 함수를 변수객체 저장한다.

∘ 함수 선언, 초기화, 할당이 한번에 이루어짐

2. 함수표현식

∘ 함수 호이스팅 X, 변수 호이스팅이 발생

[ 매개변수 ]

∘ 함수 정의시 매개변수의 타입 명시 X

∘ 정의된 매개변수와 전달인자 개수가 달라도 호출 가능

[ 콜백함수 ]

∘ 특정 이벤트가 발생했을때 시스템에 의해 호출되는 함수

∘ 매개변수를 통해 전달되고, 전달받은 함수의 내부의 특정시점에 실행

∘ 주로 비동기식 처리 모델에서 사용

∘ 처리가 종료되면 호출될 콜백함수를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수 호출

setTimeout(
  function() {
    console.log(‘3초 후 실행’);
  } ,3000
);

6. Web Browser와 Window 객체

[ Window 객체 ]

∘ 웹 브라우저에서 작동하는 JavaScript의 최상위 전역객체

∘ 브라우저와 관련된 여러 객체와 속성/함수 존재

∘ JS에서 기본으로 제공하는 프로퍼티, 함수 포함 ex) Number 객체, setInterval() 함수

∘ BOM (Browser Object Model) 으로 불리기도 함

[ Window 객체 사용 ]

∘ window 객체 함수를 호출하면 브라우저에서 제공하는 창을 open

∘ alert( ) : 브라우저의 알림 창

∘ confirm( ) : 브라우저의 확인/취소 선택 창

∘ prompt( ) : 브라우저의 입력창

∘ navigator 객체

- 브라우저의 정보가 내장된 객체

- navigator 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우저 별 다르게 처리 가능

- HTML5에서 위치정보를 알려주는 역할

∘ location 객체

- 현재 페이지의 주소(URL)와 관련된 정보를 알 수 있다.

- location.href : 값 미할당시 현재 url 조회 / 값 할당 시 할당된 url로 이동

- location.reload() : 현재 페이지 새로고침

∘ history 객체

- history.back() / history.forward() : 브라우저의 뒤로가기/앞으로가기

[ 새 창 열기 ]

∘ window 객체의 open() 함수로 새 창을 열 수 있다.

∘ window.open(‘페이지 url’, ‘창이름’, ‘특성’, 히스토리 대체 여부);

- 창 이름(string) : open할 대상(_blank, _self ...) 지정 혹은 창의 이름

- 특성(string) : 새로 열릴 창의 너비, 높이 등

- 히스토리 대체여부(boolean) : 현재 페이지 히스토리에 덮어 쓸지 여부

∘ 창 여닫기

- 이벤트를 이용하여 특정 시점에 창을 열 수 있다.

- window.close(); 함수로 현재 창을 닫을 수 있다.

∘ 부모 창 컨트롤

- window 객체의 opener 속성을 이용하여 부모창 컨트롤 가능

- opener 객체는 부모 창의 window 객체

[ window 객체 프로퍼티 ]

∘ document 객체는 HTML 문서와 관련된 객체로 가장 많이 사용하는 객체

∘ self, document, history, location, opener, parent , top, frames, locationbar, menubar, statusbar etc.

[ window 객체 함수 ]

alert()	경고용 대화상자를 보여줌
confirm()	확인/취소 대화상자를 보여줌
prompt()	입력창 대화상자를 보여줌
open()	새로운 창 오픈
scroll()	창을 스크롤
find()	창안에 지정된 문자열이 있는가 (T/F)
stop()	불러오기 중지
print()	화면의 내용 프린터로 출력
moveBy()	창을 상대적 좌표로 이동, 수평/수직방향의 이동량 픽셀 지정
moveTo()	창을 절대적 좌표로 이동, 왼쪽 상단 모서리 기준 픽셀 지정
setTimeout()	지정한 밀리초 시간이 흐른 후 함수 호출
clearTimeout()	setTimeout 함수 정지
setInterval()	지정한 밀리초 주기마다 함수 반복 호출
clearInterval()	setInterval 함수 정지
eval()	문자열을 JavaScript 코드로 변환하여 실행

7. HTML & DOM

[ DOM(Document Object Model) 개요 ]

∘ HTML과 XML문서의 구조를 정의하는 API 제공

∘ 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현

∘ HTML 계층 구조 최상위에 document 노드가 존재

∘ 그 아래로 HTML 태그나 요소들을 표현하는 노드 & 문자열을 표현하는 노드 존재

∘ Document 계층 구조

- Document는 HTML & XML 문서 표현

- HTMLDocument는 HTML 문서와 요소만을 표현

- HTMLElement의 하위 타입은 HTML 단일 요소나 요소집합의 속성에 해당하는 JS 프로퍼티 정의

- Comment 노드는 HTML이나 XML의 주석 표현

[ Document 객체 만들기 ]

1. 객체 생성

∘ createElement(tagName) : element node 생성

∘ cretaeTextNode(text) : text node 생성

∘ appendChild(node) : 객체에 node를 자식으로 추가

window.onload = function() {
  var title = document.createElement(‘h2’);
  var msg = document.createTextNode(‘hello’);

  title.appendChild(msg); // <h2> <-- ‘hello’
  document.body.appendChild(title); // body <-- <h2>
}

2. 객체의 속성 설정

∘ setAttribute(name, value) : 객체의 속성 지정

∘ getAttribute(name) : 객체의 속석ㅇ값을 가져옴

3. inner

∘ innerHTML : 문자열을 HTML 태그로 삽입

∘ innerText : 문자열을 text node로 삽입

[ Document 객체 가져오기 ]

∘ document.function( )

∘ getElementById(id) : id로 element 객체 얻기

∘ getElementsByClassName(classname) : class로 element 배열 얻기

∘ getElementsByTagName(tagname) : tagname으로 element 배열 얻기

∘ getElementsByName(name) : 태그의 name으로 element 배열 얻기

∘ querySelector(selector) : selector에 일치하는 첫번째 element 객체 얻기

ex) var t = document.querySelector(‘#header’);

∘ querySelectorAll(selector) : selector에 일치하는 모든 element 배열 얻기

ex) var s = document.querySelectorAll(‘#abc’);

[ Document 객체 제거 ]

∘ removeChild(chilenode) : 객체의 자식 노드를 제거

저작자표시

gudwnsgur