쉽게 ready(준비)가 load보다 빠르다라고 생각하면 이해가 빠를 것입니다. window 객체와 document 객체는 서로 의존적이지는 않으나 window의 크기나 URL 주소 등이 문서에 따라 새로이 정의되는 부분이 있어 document 객체에 따라 window 객체도 새로 정의된다는 생각이 있는 것입니다.
window는 document보다 상위 개념이라고 하는 것은 브라우저 객체모델에서 정의한 것일 뿐, 그 상위 개념이 순서에 따라 먼저 존재한다거나 나중에 존재해야 한다는 것은 각 웹브라우저의 기술적 방법의 정의일 뿐입니다. 기술적인 방법에는 차이가 있을지라도 더욱 빠르고 효과적으로 다가서려보니 비슷비슷한 구현(일부 컨텐츠가 파싱되고 화면에 나타나는 동안 계속해서 남은 컨텐츠를 네트워크로부터 받아온다거나...)이 나올 수밖에 없고, 다년간에 축적된 경험을 통해서 형성되고 브라우저끼리 서로 모방하면서 지금과 같이 성립이 된(표준 명세에도 없는..) 것이기에 그러한 순서를 제공한다고 보시면 이해가 되시라 봅니다. (실제 물리적인 구현과 이론적인 순서는 다를 수 있다는 말)
추가 : 브라우저에서 alert(window == document.body) 를 확인해 보세요. 웹브라우저에 따라 기술적으로 구현이 다를 수 있습니다. window객체도 모두 초기화가 될 것이라는 생각도 잘못된 생각입니다. 실제 우리가 확인할 수 없는 부분도 있고, 실제 우리에게 그렇게 작동 되도록 보이는 것도 일부 있습니다.
alert(window == document.body); //익스플로러의 경우 false
Ready
$(document).ready
= 브라우저에서 DOM이 완성된 시점. DOM트리 생성 직후이므로 window.onload보다 빠름 (HTML의 소스코드만의 로딩이 끝나서 어떻게 표현할 것인지나 내부속성이 완성)
$(document).ready(function(){
// 태그 등의 셋팅이 완료되었을 시점에 이벤트 발생
});
DOMContentLoad
document.ready와 크게 다를 바 없습니다. ie8이하에서는 지원하지 않습니다. (>대체 방안)
window.addEventListener('DOMContentLoaded', function()
{
// 할 것
});
load
$(window).load , window.onload
= 외부호출(src) 등의 로딩이 완료된 시점 (외부호출까지 끝난 시점)
동일한 페이지 내에서 onload 함수는 하나만 존재해야 하며, 또한 <body onload="">와 같은 설정이 되어 있는 경우에는 attribute의onload=""만 작동할뿐window.onload 는 동작하지 않습니다.
scrollbar-base-color
스크롤 바 전체 배경
scrollbar-face-color
상하좌우로 움직이는 부분(thumb),
화살표가 포함된 상하좌우 끝 사각형 부분(button)
scrollbar-track-color
thumb을 제외한 나머지 부분
scrollbar-arrow-color
화살표
scrollbar-highlight-color, crollbar-3dlight-color
thumb, button의 밝은 부분
scrollbar-darkshadow-color, scrollbar-shadow-color
thumb, button의 어두운 부분
배열 말고 객체의 길이를 구하는 방법입니다. Object의 경우 length를 지정하면 undefined가 나타나기에Object.keys를 이용해서 구합니다.{key : value}로 이루어진 JSON 형식의 key 개수를 구할 때도 쓰입니다. for 반복문으로도 결과를 도출할 수 있지만 더 효율적으로 key 개수를 구하는 방법입니다.
var ex_obj = { 'a' : '1st', 'b' : '2nd', 'c' : '3rd', 'd' : '4th' };
var obj_length = Object.keys(ex_obj).length;
// ex_obj -> 열거형 고유 속성이 반환될 개체
// 리턴값 -> 지정된 개체의 모든 나열형 속성들을 나타내는 문자열 배열
// 참고
// http://egloos.zum.com/beewee/v/947615
// https://ipex.tistory.com/entry
childElementCount
자식 요소의 개수를 세는 방법. childElementCount 프로퍼티를 이용하는 것입니다. 자식의 자식 요소는 포함되지 않습니다. IE 9 이상과 최신 브라우저에서 잘 동작합니다.
함수 리터럴 : 이름이 없는 함수, 익명 함수, 무명 함수. function(x) { ... } 부분이다.
함수 선언문에서는 끝에 세미콜론을 붙일 필요가 없지만 함수 리터럴 사용 시 끝에 세미콜론을 반드시 붙인다.
함수 선언문과 함수 리터럴로 정의한 함수의 사용법은 같다. square(5);
함수 리터럴, 함수 선언문 모두 내부적으로 square 변수에 함수 객체의 참조를 저장
var square = function(x) { return x*x; };
JS 엔진이 함수 선언문으로 정의한 함수는 끌어올리지만 함수리터럴로 정의한 함수는 끌어올리지 않는다
함수 리터럴로 정의한 익명 함수는 변수 할당 후에 square라는 이름을 갖게 되고, 그 이름으로 호출 가능
따라서 함수 미정의 상태에서 함수를 사용하면 타입 오류 발생
console.log(square(3)); // Uncaught TypeError: square is not a function
var square = function(x) { return x*x; };
익명 함수 코드는 디버거에 모두 anonymous function이라고 표시되므로 함수를 구별할 수 없는 단점
익명 함수에도 이름을 붙이면 확인 할 수 있으나 코드에서 sq라는 이름은 함수 내에서만 유효
함수 바깥에서 sq 이름으로 호출할 수 없음
var square = function sq(x) { return x*x; };
객체의 메서드
메서드 : 객체의 프로퍼티 중 함수 객체의 참조를 값으로 담고 있는 것
메서드 정의 : 프로퍼티 값으로 함수 리터럴을 대입
함수 객체 안 this는 그 함수를 메서드로 가지고 있는 객체, 아래에서는 circle
this.radius 는 circle.radius와 같다
메서드는 일반 함수처럼 소괄호를 붙여서 실행
메서드도 프로퍼티의 일종이어서 나중에 추가 가능
메서드는 일반적으로 메서드가 속한 객체의 내부 데이터 (프로퍼티 값) 상태를 바꾸는 용도로 사용
var circle = {
center: { x:1.0, y:2.0 }, // 원의 중심점 표현 객체
radius: 2.5, // 원의 반지름
area: function(){ // 원의 넓이 메서드
return Math.PI * this.radius * this.radius;
}
};
console.log(circle.area()); //19.634954084936208
객체 지향 언어에서는 데이터와 스 상태를 바꾸는 메서드를 하나로 묶는 용으로 객체를 사용
메서드는 외부 호출에 반응하여 내부 데이터(프로퍼티값)의 상태를 바꾼다.
객체 지향 프로그래밍 : 객체를 기본 부품으로 삼아 프로그램을 만들어 가는 기법
메서드는 프로퍼티
C++, JAVA 등의 객체지향언어에서는 객체 안의 데이터와 메서드를 별개로 다룬다.
그러나 JS의 메서드는 함수를 값으로 가진 프로퍼티
프로퍼티 값의 데이터 타입만 다를 뿐 객체 안의 데이터와 메서드는 모두 프로퍼티이다.
JS의 프로퍼티 : 객체 내부의 데이터와 메서드를 모두 뜻한다.
그래서 객체의 프로퍼티 목록을 열거하면 프로퍼티 값의 데이터 타입에 관계없이 모든 프로퍼티를 열거하는 것
프로퍼티와 함수를 구분하는 상태에서의 프로퍼티 : 함수를 값으로 가지지 않은 프로퍼티, 메서드는 함수를 값으로 가진 프로퍼티로 구분해서 사용
함수를 활용하면 얻을 수 있는 장점
1. 재사용할 수 있다
2. 만든 프로그램을 이해하기 쉽다
3. 프로그램 수정이 간단해진다.
생성자
생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.
자바 등은 같은 프로퍼티를 갖는 객체를 여러 개 생성하는 수단으로 클래스를 제공한다.
JS는 클래스 대신 생성자 함수로 객체를 생성한다.
생성자로 객체를 생성할 때는 new 연산자를 사용한다.
function Card(suit, rank) { // Card 객체
this.suit = suit;
this.rank = rank;
}
// Card 생성자로 생성한 객체 :
var card = new Card("하트", "A");
// suit 프로퍼티, rank 프로퍼티에 값이 저장된 객체가 생성되고
// 객체의 참조가 변수 card에 할당된다.
console.log(card); // Card {suit: "하트", rank: "A"}
객체를 출력하면 앞에 생성자 이름이 표시된다.
생성자 : new 연산자로 객체를 생성할 것을 기대하고 만든 함수
생성자 이름은 관례적으로 파스칼 표기법 (첫 글자 대문자)을 사용
생성자 내에서 this.프로퍼티 이름에 값을 대입하며 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성된다.
this는 생성자가 생성하는 객체를 가리킨다.
생성자의 인스턴스 : 생성자와 new 연산자로 생성한 객체
인스턴스 : 클래스로 생성한 실체
클래스 : 객체를 실체로 만들기 위한 설계도
생성자 자체가 함수 객체라는 실체이며, 생성자로 생성한 객체는 인스턴스가 아니나 생성자가 클래스처럼 객체를 생성하므로 인스턴스로 부름
역할 : 객체를 생성하고 초기화
// 생성자 Card를 이용해서 객체를 생성하고 변수 여러 개에 저장하는 예
var card1 = new Card("하트", "A");
var card2 = new Card("클럽", "K");
var card3 = new Card("스페이드", "2");
생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러개를 간단히 생성
생성자는 함수이므로 프로퍼티에 값을 대입할 수 있고, 함수처럼 다양한 처리를 할 수도 있다.
응용 : 객체를 생성할 때 초기화 작업을 병행
메서드를 가진 객체를 생성하는 생성자
생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면 메서드를 정의한다.
메서드 함수 안의 this : 생성될 인스턴스를 가리킨다. 그 값은 인스턴스의 프로퍼티
내장객체
내장객체 : JS에 있는, 처음부터 사용할 수 있는 빌트인 오브젝트
내장객체는 프로그래밍 언어의 뼈대를 구성
ES5에서 사용할 수 있는 내장 생성자
생성자 이름
생성되는 객체
Object
일반 객체
String
문자열 객체
Number
숫자 객체
Boolean
논리값 객체
Array
배열
Date
날짜와 시간을 다루는 객체 (var now = new Date(); now.getFullYear();)
Function
함수 객체 (var square = new Function("x", "return x*x");
RegExp
정규 표현식 객체
Error
오류 객체
EvalError
eval() 함수와 관련된 오류를 표현하는 객체
InternalError
자바스크립트 내부에서 발생한 오류를 표현하는 객체
RangeError
값이 허용 범위를 넘었을 때 발생한 오류를 표현하는 객체
ReferenceError
없는 변수를 참조할 때 발생한 오류를 표현하는 객체
SyntaxError
잘못된 문법일 때 발생한 오류를 표현하는 객체
TypeError
기대한 타입의 값이 아닐때 발생한 오류를 표현하는 객체
URIError
잘못된 URI를 만났을 때 발생한 오류를 표현하는 객체
ES6에서 사용할 수 있는 내장 생성자
생성자 이름
생성되는 객체
Symbol
심벌을 생성
Int8Array8
부호가 있는 8비트 정수 배열을 생성
Uint8Array8
부호가 없는 8비트 정수 배열을 생성
Int16Array16
부호가 있는 16비트 정수 배열을 생성
Uint16Array16
부호가 없는 16비트 정수 배열을 생성
Int32Array32
부호가 있는 32비트 정수 배열을 생성
Uint32Array32
부호가 없는 32비트 정수 배열을 생성
Float32Array32
32비트 부동소수점 배열을 생성
Float64Array64
64비트 부동소수점 배열을 생성
ArrayBuffer
고정 길이 이진 데이터 버퍼를 생성
DataView
ArrayBuffer 데이터를 읽고 쓸 수 있는 수단 제공
Promise
처리 지연 및 비동기 처리를 관리 수단 제공
Generator
제너레이터 함수를 다룰 수 있는 수단 제공
GeneratorFunction
제너레이터 함수 생성
Proxy
객체의 기본적인 동작을 재정의하는 기능 제공
Map
key/value 맵 생성
Set
중복을 허용하지 않는 데이터 집합 생성
WeakMap
약한 참조를 유지하는 key/value 맵 생성
WeakSet
약한 참조를 유지하는 고유한 데이터 집합 생성
기타 내장 객체
내장 객체
설명
전역 객체
프로그램 어디에서나 사용 가능한 객체
JSON
JSON 처리 기능 제공
Math
수학적 함수와 상수 제공
Reflect
프로그램의 흐름을 가로채는 기능 제공 (ES6)
전역 객체
전역 객체의 프로퍼티는 프로그램 어디에서나 사용가능
JS 인터프리터가 시작될 때나 웹브라우저가 새페이지를 읽을 때마다 새 전역 객체가 생성되고 아래 표와 같은 프로퍼티를 갖게 된다.
클라이언트 측 JS에서는 Window 객체가 전역 객체
Window 객체 : 아래 표의 프로퍼티와 웹브라우저 고유의 다양한 프로퍼티가 있다. 궁금하면 콘솔에 console.dir(window)를 찍어보자.
분류
프로퍼티
전역 프로퍼티
undefined, NaN, Infinity
생성자
Object(), String(), Number() ...
전역 함수
parseInt(), parseFloat(), isNan() ...
내장 객체
Math, JSON, Reflect
자바스크립트 객체 분류
JS 객체는 네이티브객체, 호스트객체, 사용자 정의 객체로 나누어진다.
네이티브 객체
ECMAScript 사양에 정의된 객체
내장 생성자로 생성된 객체(Object, String, Number, Boolean, Array, Function) 와 JSON, Math, Reflect 등
호스트 객체
ECMAScript에 정의되어 있지 않지만 JS 실행환경에 정의된 객체
브래우저 객체, Dom 객체, Ajax용 XMLHttpRequest 객체, HTML5의 각종 API 등
클라이언트 측 JS에 정의된 호스트 객체
사용자 정의 객체
사용자가 정의한 JS 코드를 실행한 결과 생성된 객체
배열의 기초
배열 리터럴로 생성하기
var evens = [ 2, 4, 6, 8 ];
배열 리터럴 : 쉼표로 구분한 값을 대괄호로 묶어서 표현
배열 요소 : 배열 값 하나
인덱스 (요소 번호) : 배열 요소를 왼쪽부터 순서대로 0부터 순서를 매긴 것.
JS의 배열은 객체 타입
배열을 변수에 대입하면 배열의 참조가 변수에 저장
변수의 요소에는 모든 타입의 값 가능
var empty = [ ]; // 빈 배열 만들기
var a = [2, , 4]; // 리터럴 요소의 값을 생략하면 그 요소는 미생성
length 프로퍼티
배열 길이 : 배열의 lenght 프로퍼티는 배열요소의 최대 인덱스값 + 1이랑 같음
C,Java에서는 배열길이가 배열요소의 개수지만 JS는 아닐 수도 있다.
length 프로퍼티에 배열의 길이보다 큰 정수를 대입하면 새로운 요소가 추가되지 않고 length 프로퍼티 값만 바뀐다
var a = ["A", "B"];
a.length = 1;
console.log(a); //["A"]
var a = ["A", "B"];
a.length = 1;
console.log(a); //(3) ["A", "B", empty]
Array 생성자로 생성하기
var evens = new Array(2, 4, 6, 8);
var empty = new Array(); // 빈 배열
var various = new Array(3.14, "pi", true, {x:1, y:2}, [2,4,6,8]);
console.log(evens);
console.log(empty);
console.log(various);
Array 생성자의 인수가 양의 정수 한 개일 때, 인수는 배열 길이를 뜻한다.
Array 생성자의 인수가 음수이면 오류 발생
var x = new Array(3);
console.log(x);
var y = new Array(-3);
console.log(y);
특정 인덱스의 요소는 대괄호 연산자를 사용해서 읽고 쓴다. (evens[2])
배열 요소 하나는 변수 하나로 사용 가능
배열은 객체
C, Java 의 배열 요소는 메모리의 연속된 공간에 차례대로 배치되어, 인덱스를 지정하면 인덱스가 가리키는 요소를 빠르게 읽고 쓸 수 있다.
JS의 배열은 Array 객체로 C, Java와 다르다.
객체로 배열의 기능을 가상으로 흉내낸 것으로 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 사용한다.
배열에 대괄호 연산자를 사용하는 것은 객체에 대괄호 연산자를 사용하는 것과 마찬가지
배열의 요소 번호로 숫자값 대신 문자열 사용도 가능
객체에 없는 프로퍼티 (없는 배열 요소)를 읽으려고 시도하면 undefined가 반환
ES6부터 TypedArray 객체 추가 : 이 배열 요소는 C, Java처럼 메모리의 연속된 공간에 차례대로 배치되어 배열요소를 빠르게 읽고 쓸 수 있다.
배열 요소의 추가와 삭제
없는 배열 요소에 값을 대입하면 새로운 요소가 추가된다.
push 메서드를 사용하면 요소를 배열 끝에 추가한다.
delete 메서드는 특정 배열 요소를 삭제한다. (배열 요소를 삭제해도 length 프로퍼티 값은 그대로며 삭제한 요소만 사라져서 undefined가 된다.)
var a = ["A", "B", "C"];
delete a[1];
console.log(a);
희소 배열
희소 배열 (length=5)
일반 배열 (length=4)
0
"A"
0
"A"
1
"B"
1
"B"
2
"C"
2
"C"
4
"E"
3
"D"
배열 요소가 있는 지 확인하는 방법 = 객체의 프로퍼티가 있는 지 확인하는 방법
for/in 문이나 hasOwnProperty 메서드를 사용해 확인한다.
for(var i in a) console.log(i); // 0,1,2,4
a.hasOwnProperty("3"); //false
숫자, 문자열, 객체 등 JS가 다루는 값(데이터타입)과 값을 저장하기 위한 변수를 배웁니다. 변수는 프로그램을 작성하는데 가장 중요한 요소입니다. 프로그램은 알고리즘을 사용하여 문제를 해결하는데 알고리즘 표현을 위해서는 대부분 변수를 필히 사용해야 합니다. 변수 선언하는 방법과 변수명 짓는 방법을 배웁니다.
1. 변수
1. 변수
값을 담기 위해 이름을 붙인 상자
컴퓨터의 메모리에 일정한 크기의 영역으로 생성
일반적인 프로그램은 변수 값을 알고리즘에 따라 변화시켜 프로그램이 의도한 목적을 달성
2. 변수 선언
var sum;
var a, b; // 쉼표를 사용해 변수 여러개를 하나의 문장으로 선언 가능
문장이 실행 -> 메모리에 sum이라는 이름의 영역이 생성
var : 자스의 키워드로 변수를 선언하기 위한 선언자
sum 부분은 변수 이름이라고 부르며 이 변수 이름을 이용해 변수값을 읽거나 쓸 수 있음
자스에는 변수 타입이 없어 변수 선언자는 var 하나 (ECMAScript6는 let, const 추가) -> 모든 데이터 타입의 값 저장 가능
쉼표를 사용해 변수 여러개를 하나의 문장으로 선언 가능
var x;
console.log(x); //undefined
x = 2;
// 변수를 선언하면서 초깃값 설정하기
var x = 5;
var a=1, b=2, c=3; // 한 문장으로
변수 선언만 하면 정의되지 않은 (undefined) 값이 들어감
대입 연산자(=)로 변수에 값을 대입한다
대입 연산자는 오른쪽 값을 왼쪽 변수에 대입...보다는 메모리 공간을 연결한다는 뜻
수학의 연산자 = 는 양 변이 같다는 뜻이지만 프로그램에서는 대입하겠다는 뜻
3. 변수 선언 생략
선언하지 않은 변수 값을 읽으면 참조 오류가 발생
선언하지 않은 변수에 값을 대입하면 자동으로 전역변수로 선언하여 오류가 발생하지 않음 -> 그러나 버그의 원인이 될 수 있어 의도한 게 아니라면 선언해 줄 것.
ECMAScript5 의 Strict 모드는 선언하지 않은 변수에 값을 대입하면 오류가 발생해 찾아내기 쉽다
console.log(z); // ReferenceError: z is not defined
c = 2;
console.log(c); // 2 (전역변수)
4. 변수 끌어올림, 변수 중복 선언
프로그램은 작성 순서에 따라 윗줄부터 차례대로 실행되나 변수 선언은 이 원칙을 따르지 않음
호이스팅(hoisting) : 프로그램 중간에서 변수를 선언해도 프로그래밍 첫머리에 선언된 듯 다른 문장 앞에 생성되는 것, 끌어올림
단 선언과 동시에 대입하는 코드는 호이스팅되지 않음
같은 이름의 변수를 여러 개 선언할 수 있으며 모두 끌어올린 후에 단 하나의 영역에만 할당
호이스팅은 자스의 고유한 특징
// 1
console.log(x); // undefined. 값만 없고 참조 오류가 발생하지 않는다
var x;
// 2
console.log(x); // undefined이며 이 경우 호이스팅 안됨
var x = 5;
console.log(x); // 5
ECMAScript 6 이후 추가 예정 : await, enum, implements, package, protected, interface, private, public
미리 정의된 전역 변수와 전역 함수 : arguments, Array, Boolean, Date, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, Error, eval, EvalError, Function, Infinity, isFinite, isNan, JSON, Math, NaN, Number, Object, parseFloat, parseInt, RangeErrror, RefferenceError, RegExp, String, SyntaxError, TypeError, undefined, URIError
위에 나온 키워드와 Window 객체의 이름, DOM에서 사용하는 객체 이름도 식별자 이름으로 피하기를 권장
서버 측 자스 코드 실행시에도 실행 환경이 미리 정의한 객체이름을 피할 것
2. 데이터 타입
1. 데이터타입
프로그래밍 언어의 기본적인 구성 요소로 숫자나 문자열처럼 변수에 저장하는 데이터 종류
정적 타입 언어 : C, Java처럼 정수 타입 변수, 부동소수점 타입 변수 등이 있어 그 변수의 타입과 일치하는 데이터만 저장할 숭 ㅣㅆ어 변수에 타입이 있는 언어
동적 타입 언어 : 실행할 떄 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어
자스는 변수에 타입이 없어 모든 타입의 데이터 저장 가능
var pi = 3.14;
console.log(pi); //3.14
pi = "원주율";
console.log(pi); //원주율
2. 데이터 타입의 분류
자스가 처리할 수 있는 데이터타입읜 원시타입과 객체 타입 두 가지
원시 타입의 값 : 숫자, 문자열, 논리값, 특수한 값(undefined, null), Symbol
원시 타입 데이터 : 데이터를 구성하는 가장 기본적인 요소로 불변 값으로 정의
객체 : 원시 타입에 속하지 않는 자스의 값. 변수 여러개가 모여서 만들어진 복합 데이터 타입으로 객체는 참조하는 타입이기 때문에 객체 안의 값은 바꿔 연결해 저장할 수 있다
객체 타입의 값을 변수에 대입 -> 변수에 객체에 대한 참조 (메모리에서의 위치주소 정보)가 할당
객체 타입의 값 : 배열, 함수, 정규 표현식 등
3. 숫자
자스는 숫자를 모두 64비트 부동소수점으로 표현 (C, Java의 double 타입에 해당)
배열 인덱스와 비트 연산은 32비트 정수로 처리
리터럴(literal) : 프로그램에 직접 작성할 수 있는 상수 값으로 정수리터럴, 부동소수점 리터럴이 있음
숫자 리터럴
분류
표기
예시
설명
비고
정수 리터럴
10진수
123
정수를 그대로 표현
16진수
0x2a
숫자 앞에 0x를 붙임
8진수
0o73
숫자 앞에 0o를 붙임
Es6
2진수
0b101
숫자 앞에 0b를 붙임
Es6
부동소수점 리터럴
정수.소수
3.14
소수를 그대로 표현
소수
0.123
정수부가 0일 때 0 생략 가능
가수부e지수부
6.02e23
6.02 x 1023
가수부E지수부
1.1616199E-35
1.1616199 x 10-35
특별한 숫자를 표현하기 위한 문자열 (Es5에서는 모두 읽기 전용)
분류
표기법
설명
비고
전역 변수
Infinity
플러스 무한대
NaN
부정 값 (Not a Number)
Number의 프로퍼티
Number.POSITIVE_INFINITY
플러스 무한대
Number.NEGATIVE_INFINITY
마이너스 무한대
Number.MAX_VALUE
표현할 수 있는 최댓값
Number.MIN_VALUE
표현할 수 있는 최솟값
Number.NaN
부정값 (Not a Number)
Number.EPSILON
2.2204604925031e-16
ES6
Number.MIN_SAFE_INTEGER
-9007199254740990
ES6
Number.MAX_SAFE_INTEGER
9007199254740990
ES6
NaN은 0을 0으로 나눈 결과값, Infinity를 Infinity로 나눈 값, 음수의 제곱근 등 숫자로 표현할 수 없는 부정값을 말합니다.
4. 문자열
자스의 문자열은 16비트 길이의 유니코드 문자를 나열한 것
전 세계에서 사용하는 문자를 대부분 표현 가능
문자열 리터럴은 ''나 ""를 문자열 앞뒤에 붙여서 표현
"" : 빈 문자열
HTML요소에 자스를 끼워 넣을 떄 자스 프로그램을 문자열로 작성
HTML과 자스에서 사용하는 따옴표 구분을 권장
줄바꿈문자, 탭문자 등은 그대로 추가 불가하며 escape 시퀀스로 표현 ('I\'m going to')
이스케이프 시퀀스 목록
이스케이프 시퀀스
의미
비고
\0
null 문자
\b
백스페이스 문자
\t
수평 탭 문자
\n
개행 문자
\v
수직 탭 문자
\f
다음 페이지 문자
\r
캐리지 리턴 문자(CR)
\'
작은 따옴표 문자
\"
큰 따옴표 문자
\\
역슬래시 문자
\xXX
두 자릿수 16진수 XX로 지정된 Latin-1 문자
\uXXXX
네 자릿수 16진수 XXXX로 지정된 유니코드 문자
\u{XXXXXX}
16진수 코드 포인트 XXXXXX로 지정된 유니코드 문자. 써로게이트 페어의 다섯 자리수 코드 포인트(5.3절)을 지원합니다.
Es6
써로게이트 페어의 다섯 자릿수 코드 포인트
유니코드는 문자 집합과 문자 인코딩 방식을 정한 표준 문자 코드입니다. 유니코드 문자 집합에는 전 세계에서 사용하는 문자가 거의 포함됩니다. 하지만 UTF-16 유니코드로 표현할 수 있는 범위를 넘어서는 이모티콘이나 자주 사용하지 않는 한자 등이 있고, 이는 써로게이트 페어를 사용해 문자를 표현합니다.
5. 논리값
조건식의 참/거짓을 판별해 표현하기 위해 사용하는 값으로 true(참), false(거짓)가 있음
주로 제어 구문에 사용 (if/else, while, do/while, for문)
6. 특수한 값
값이 없음 : null, undefined
undefined : 정의되지 않은 상태<할당되지 않은 결과>
값을 아직 할당하지 않은 변수의 값
없는 객체의 프로퍼티를 읽으려 시도했을 때의 값
없는 배열의 요소를 읽으려 시도했을 때의 값
아무것도 반환하지 않는 함수가 반환하는 값
함수를 호출했을 때 전달받지 못한 인수의 값
즉 변수 값이 undefined라는 것은 값을 할당하지 않은 결과. 코드로 undefined를 대입한 것이 아닌 자스 엔진이 변수를 undefined로 초기화한 것이며 자스 전역 변수에도 같은 이름의 undefined가 있고 초기값은 undefined라는 원시값. ES5에서는 전역 변수 undefined의 값을 수정할 수 없음.
null : 아무것도 없음을 값으로 표현한 리터럴. 무언가를 검색했을 때 아무것도 없음을 전달하기 위한 값으로 사용.
3. ECMAScript6부터 추가된 데이터타입
1. 심벌
자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값
ES6부터 새롭게 추가된 원시값
심벌의 생성
Symbol()은 호출 시마다 새로운 값을 만든다
sym1과 sym2의 값은 다름
var sym1 = Symbol();
var sym2 = Symbol();
console.log(sym1 == sym2); //false
Symbol()에 인수를 전달하면 생성된 심벌의 설명을 덧붙일 수 있다.
자세한 것 : toString() 메서드로 검색
일반적으로 toString은 그 객체를 설명해주는 문자열 "true"나 "false"를 리턴한다.
var HEART = Symbol("하트");
console.log(HEART.toString()); // Symbol(하트)
예시 : 오셀로 게임을 만들 때 0, -1, 1보다 Symbol을 사용하면 이해가 쉬워진다.
var NONE = 0 ; //칸에 돌이 없는 상태
var BLACK = -1; // 칸에 검은 돌이 놓인 상태
var WHITE = 1; // 칸에 흰 돌이 놓인 상태
var NONE = Symbol("none"); //칸에 돌이 없는 상태
var BLACK = Symbol("black"); // 칸에 검은 돌이 놓인 상태
var WHITE = Symbol("white"); // 칸에 흰 돌이 놓인 상태
ECMAScript 2016도 발표되었으며 거듭제곱연산자, Array.prototype.includes() 가 추가됨
ECMAScript 2017도 사양 지정 작업 진행중
SIMD(Single Instruction /Multiple Data) 로 데이터 수준의 병렬 연산 지원, Async Function으로 비동기처리작성지원, Decorators로 클래스에 기능 더하기, 객체의 잔여 프로퍼티를 새 객체에 할당하는 Rest Properties 등을 도입할까 한다함
2. 자바스크립트의 역사
탄생
1995 넷스케이프 커뮤니케이션스의 Brendan Eich가 개발
Netscape Navigator 2.0에 구현
1996 마이크로소프트사의 인터넷익스플로러 3.0에 탑재되었고 Java 애플릿으로 구현된 웹 브라우저의 보급과 맞물려 보급
초창기 익스플로러와 넷스케이프 네비게이터가 자스에 독자적 기능을 추가해 브라우저 간 호환성이 낮았음
1997 ECMAScript 표준화 진행, 각 브라우저는 본 사양을 따르도록 권고
구형 브라우저 제외 호환성 문제가 많이 잡힘
자스의 오명
오해 : 웹브라우저용 하급 스크립트 언어이며 본격적인 프로그래밍 언어라는 것은 오해
이유 : 본래의 언어 사양을 해설한 문서가 없었고 당시 웹브라우저의 기능과 처리 속도가 느렸기 때문
결과 : 웹페이지를 꾸미기 위해 간단하게 사용
변화 : 자스로 만든 구글 지도 등의 애플리케이션이 등장하면서 인식의 전환이 시작
구글 지도는 비동기 통신 기술 Ajax을 이용해 데스크톱 애플리케이션과 비교해도 손색없는 기능, 조작성을 실현
즉 자바스크립트는 스크립트 언어가 아닌 고성능의 웹 애플리케이션을 만들 수 있는 객체 지향 언어
2008년부터 HTML5 사양이 정해졌고 자스로 웹 애플리케이션을 만들 수 있는 다양한 API 가 등장
웹 브라우저 성능이 향상되며 대중적인 언어로 자리함
현재 / 미래
구글의 자바스크립트 엔진 V8 등은 강력하며 웹 브라우저 자체 기능이 좋아짐
웹 브라우저는 개발자에게 일종의 OS 같은 환경을 제공
웹 브라우저 위에서 동작하는 자스로 본격적인 웹 애플리케이션을 제작 가능
서버 측에도 Node.js가 보급되어 널리 퍼지는 중
곧 ECMAScript6의 기능을 이용한 강력한 모던 웹 애플리케이션이 많이 나올 것으로 기대 (과거 기준의 책이라 많이 나오는 중)
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="html2canvas.js"></script>
</head>
<body>
<button onclick="bodyShot()">bodyShot</button>
<button onclick="partShot()">partShot</button>
<div class="container" id='container'>
<!-- 로컬에서 불러온 파일 -->
<img src="test.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- 웹에서 불러온 파일 -->
<!-- <img src="https://www.w3schools.com/html/img_girl.jpg"> -->
<!-- 이미지 캡쳐문제 base 64로 변환 ? -->
</div>
<!-- 결과화면 -->
<canvas id="canvas" width="900" height="600" style="border:1px solid #d3d3d3;"></canvas>
<script>
if (typeof Promise !== "function") {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
}
function bodyShot() {
//전체 스크린 샷
html2canvas(document.body).then( function (canvas) {
//canvas 결과값을 drawImg 함수를 통해서 png의 결과 값
// 캡쳐
drawImg(canvas.toDataURL('image/png'));
//appendchild 부분을 주석을 풀게 되면 body
//document.body.appendChild(canvas);
//특별부록 파일 저장하기 위한 부분.
saveAs(canvas.toDataURL(), 'file-name.png');
}).catch(function (err) { console.log(err); });
}
function partShot() {
//특정부분 스크린샷
html2canvas(document.getElementById("container")).then(function (canvas) {
//jpg 결과값
drawImg(canvas.toDataURL('image/jpg'));
//이미지 저장
saveAs(canvas.toDataURL(), 'file-name.jpg');
}).catch(function (err) { console.log(err); });
}
function drawImg(imgData) {
//console.log(imgData);
return new Promise(
function reslove() {
//내가 결과 값을 그릴 canvas 부분 설정
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //canvas의 뿌려진 부분 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function () {
ctx.drawImage(imageObj, 10, 10); //canvas img를 그리겠다.
};
imageObj.src = imgData; //그릴 image데이터를 넣어준다.
},
function reject() { });
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri; link.download = filename;
document.body.appendChild(link); link.click();
document.body.removeChild(link); }
else {
window.open(uri);
}
}
</script>
</body>
</html>
중도의 문제
promise는 es5에서 안돌아간다 -> 라이브러리 사용
if (typeof Promise !== "function") {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
}
html2canvas는 브라우저에서 설정 한 콘텐츠 정책 제한을 피할 수 없습니다.현재 페이지의원점밖에있는 이미지를 그리면 이미지가 그려지는 캔버스가손상됩니다.캔버스가 더러워지면 더 이상 읽을 수 없습니다.따라서 html2canvas는 이미지를 적용하기 전에 이미지가 캔버스를 더럽힐 지 여부를 확인하는 메소드를 구현합니다.allowTaint옵션을false로 설정하면 이미지가 그려지지 않습니다.
원본 페이지 외부에있는 이미지를 로드하려는 경우프록시를 사용하여 이미지를 로드할 수 있습니다.
<xsl:template match="/*">
//문서의 가장 바깥쪽 요소만 일치하고 컨텍스트를 해당 요소로 설정
<xsl:template match="*">
//어디서나 모든 요소와 일치하고 컨텍스트노드를 해당 요소로 설정
<xsl:template match="/">
//문서 루트 자체와만 일치하고 컨텍스트로 설정
<A />
// 첫 번째 규칙 (일치하는 /*)이 일치하고 컨텍스트 노드는 A입니다.
// 세 번째 규칙 (일치하는 /)도 일치하지만 컨텍스트 노드 A의 하위 항목이 됩니다.
name 속성- 템플릿에 이름을 지정하는 속성. 이 속성을 사용한 템플릿은 요소로 호출 가능
priority 속성- 적용 가능한 템플릿이 여러 개 정의됐을 때 우선순위를 지정하는 속성. 값이 클수록 우선순위가 높음
mode 속성- XML 에서 동일한 부분에 적용할 템플릿이 여러 개일 때 원하는 템플릿만 호출 소스 트리의 동일한 부분을 여러 번 처리해야 할 경우에도 사용
<xsl:apply-template> 요소
XSLT에서 template 자식요소는 자동으로 처리되지 않아 자식 요소를 처리하려면 요소를 정의해야 함
기본 템플릿인<xsl:apply-templates/>만 정의하는 경우: XML 문서에서 현재 요소의 모든 자식요소에 대해 매치되는 template을 찾아서 적용 노드탐색방법은 DFS(Depth Fisrt Search)을 사용
<xsl:apply-templates select="???"/>처럼 select 속성을 이용하는 경우 : 특정 자식 요소만 선택되거나 자식 요소가 아닌 다른 요소가 선택
<xsl:value-of>요소
역할: 선택된 노드의 값 추출
<xsl:for-each>요소
역할 : 지정된 노드 집합의 선택된 모든 XML 요소를 반복
select 속성 : XML 파일의 출력을 filtering 가능 (필터링 연산자 : =, !=, <, >)
order = { “ascending” | “descending” } // 정렬 순서 기본 설정은 오름차순(ascending)
case-order = { “upper-first” | “lower-first” } /> // 대소문자에 의한 문자열의 정렬 순서. 기본 설정은 upper-first ( A, a, B, b, C, c 의 순 )
<xsl:if>요소
역할 :XML파일 내용에 대해 test라는 조건을 수행
<xsl:if test="price > 10">
<xsl:choose>요소
<xsl:when>및<xsl:otherwise>와 함께 사용되어 여러 조건을 나타내며 if문과 else처럼 사용
클라이언트에서 XSLT
XSLT는 브라우저 안에서 문서를 XHTML로 바꿀수도 있고, 이제까지 XSL style sheet를 XML 파일에 추가하고 브라우저가 변환을 수행하도록 했는데 XML 파일에 XSL 링크를 포함시키는 건 크롬 등 XSLT가 먹히지 않는 브라우저도 있기 때문에 추천하지 않음.
따로 XAMPP라는 걸 이용해야 되며 보안때문에 그렇다고 하는데 아마도 대부분은 서버에서 변환하고 주기 때문
좀 더 좋은 해결책은 JavaScript를 사용하여 변환을 수행하는 것이며 JavaScript를 사용하면 브라우저 별 테스트 수행, 브라우저와 사용자 요구에 따라 다른 스타일 시트 사용이 가능
목표 : XSLT의 목표 중 하나는 데이터를 한 형식에서 다른 형식으로 변환하여 다양한 브라우저와 사용자 요구 사항들을 지원하는 것
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
//XML과 XSL을 로드한다.
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
//XSL을 XML에 적용시킨다.
ex = xml.transformNode(xsl);
//스타일이 적용된 XML을 ID가 example인 최근 문서에 적용한다.
document.getElementById("example").innerHTML = ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
//객체를 생성해서 XSLT를 import한다.
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
서버에서 XSLT
모든 종류의 브라우저에서 XML 데이터를 사용할 수 있도록 server에서 XML 문서를 변환하여 XHTML로 브라우저로 재전송
전의 설명에서는 변환을 위해 JavaScript와 XML Parser를 사용했지만 XML parser가 없는 브라우저에서는 작동하지 않음. 모든 종류의 브라우저에서 XML 데이터를 사용할 수 있도록 하기 위해 서버에서 XML 문서를 XHTML로 변환하고 작업이 끝난 그 파일을 브라우저로 보내면 가능
브라우저에서 했던 작업과 마찬가지로 데이터를 서버에서 어떠한 형식을 다른 형식으로 변환하여 다양한 브라우저와 사용자 요구 사항들을 지원하는 것이 목표
XML 파일에는 XSL 파일에 대한 참조가 없으므로 XML 파일은 다양한 XSL style sheet를 사용하여 변환될 수 있음
XML 데이터를 이용한 JSP 연동
JSTL(자바 표준태그 라이브러리) 중 xml태그를 이용하여 XML을 JSP 와 연동
<%-- JSTL을 사용하기 위한 태그 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
jQuery의 addClass, removeClass, hasClass, toggleClass와 동일하게 적용되는 함수 add, remove, contains, toggle
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성DOMTokenList를 반환하는 읽기 전용 프로퍼티입니다. classList사용은 공백으로 구분된 문자열인element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법입니다.
