브라우저는 문서를 처음 로드할 때 load 이벤트 다음에 pageshow 이벤트를 발생 시키며,
문서를 벗어날 때는 pagehide 이벤트를 발생시킨다.
pageshow와 pagehide 이벤트는 window 객체에서 발생하며,
PageTransitionEvent 객체는 두 이벤트와 조합된다.
pageshow와 pagehide는 버블링되지 않고, 취소 가능한 기본 동작도 존재하지 않는다.
(크롬에서 pageshow, pagehide는 디버깅이 안타지던데 이 때문인가..)
해당 이벤트 객체의 persisted 프로퍼티의 값은 페이지가 로드 또는 새로고침이 아니라 복원되었을 경우에 true이다.
페이지가 네트워크 또는 디스크 캐시로부터 로드 또는 새로고침 될 때는 false의 값을 가진다.
persisted 프로퍼티는 pagehide에선 항상 true이고, pageshow에서만 true/false의 값을 가진다.
load
- 문서와 해당 문서의 외부 리소스들이 모두 로드되었을 때
pagehide
- 페이지가 캐시되어 있으며 다른 페이지에 의해 교체되었을 때
pageshow
- 페이지가 처음 로드되면 load이벤트 직후에 pageshow이벤트가 발생한다. 해당 이벤트에는 persisted 값이 false이지만, 페이지가 브라우저의 메모리 캐시로부터 복구되었다면 load이벤트가 발생하지 않으며(캐시된 페이지가 이미 loaded상태이기 때문), persisted 프로퍼티 값이 true로 설정된 이벤트객체와 함께 pageshow 이벤트가 발생한다.
unload
- 브라우저가 페이지로부터 다른 곳으로 벗어날 때. 페이지의 onunload 핸들러를 등록하면, 페이지가 캐시되지 않는다는 사실에 주의하자. 사용자가 새로고침엇ㅂ이 빠르게 현재 페이지로 되돌아오게 하려면, onpagehide를 대신 사용하는 편이 낫다.
-------------------------------------------- 표준 내장객체 및 메소드
Number String Boolean Symbol (new in ES2015) Object ㄴ Function ㄴ Array ㄴ Date ㄴ RegExp null undefined
--------------------------------------------
javascript에서 var와 let/const와의 차이점
일반적으로 자바스크립트에서 var를 이용해서 변수 선언시 블록 범위에 제한이 없지만, ECMAscript2015 부터 let과 const 선언을 사용하면 블록 범위 변수를 만들 수 있음.
-------------------------------------------- 제공하는 for 사용법
for (var i = 0; i < 5; i++) { // Will execute 5 times }
for (let value of array) { // do something with value }
for (let property in object) { // do something with object property }
--------------------------------------------
&& 및 || 연산자는 단락 논리를 사용하므로 두 번째 피연산자를 실행할지 여부는 첫 번째 피연산자에 따라 다릅니다. 이는 속성에 액세스하기 전에 null 개체를 확인하는 데 유용합니다.
var name = o && o.getName();
-------------------------------------------- switch 문은 숫자 또는 문자열을 기반으로 여러 분기에 사용할 수 있습니다.
-------------------------------------------- Object JavaScript 객체는 이름-값 쌍의 단순한 모음으로 생각할 수 있습니다. 따라서 다음과 유사합니다.
Dictionaries in Python. Hashes in Perl and Ruby. Hash tables in C and C++. HashMaps in Java. Associative arrays in PHP.
객체 생성 방법 두가지. var obj = new object(); var obj = {}; // *****별이 다섯개 ~
두 방법은 의미상 동일함. 두 번쨰는 객체 리터럴 구문이라고 하며 더 편리하고. JSON 형식의 핵심이며 항상 선호되어야 함.
접근할때는 .을 이용하여 값에 접근.
--------------------------------------------
Array Array는 특별한 유형의 객체. 객체와 달리 []로 선언.
var a = new Array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3
혹은 var a = ['dog', 'cat', 'hen']; a.length; // 3
var a = ['dog', 'cat', 'hen']; a[100] = 'fox'; a.length; // 101
존재하지 않는 인덱스에 접근시 undefined를 반환. type of a[90]; // undefined
Array 요소에 접근시,
for (var i = 0; i < a.length; i++) { // Do something with a[i] }
아래 표기법은 ECMA2015 부터 가능해짐. for (const currentValue of a) { // Do something with currentValue }
for..in 루프를 사용하면 배열을 반복할 수도 있지만 배열 요소가 아니라 배열 인덱스를 반복한다.
제공하는 메소드
a.pop() // 마지막 요소를 Remove and returns. a.push(item) // 마지막에 요소를 추가. a.shift() // 첫번째 요소를 Remove and returns. a.unshift(item) // 배열의 시작부분에 요소를 추가. a.reverse() // Reverses the arrays. a.sort([cmpfn]) // 선택적 비교를 이용한 정렬 이외에 slice, concat, 등
Java 가 class를 이용해 객체를 생성한다면, JavaScript는 prototype을 이용해 객체를 생성한다.
prototype을 이용하면 runtime에 기존 객체에 메서드를 추가할 수 있음.
-----------------------------------------
prototype을 이용한 문자열 거꾸로 출력.
var s = 'Simon';
s.reversed(); // TypeError on line 1: s.reversed is not a function
String.prototype.reversed = function() {
var r = '';
for (var i = this.length - 1; i >= 0; i--) {
r += this[i];
}
return r;
};
s.reversed(); // nomiS
