본문 바로가기

Web/Javascript

 (10)
[JAVASCRIPT] for~in vs for~of for~in 두 표현 들은 iterate 객체에 사용 할 수 있다. 일반 객체도 순회가 가능하다. const list = [1,2,3]; const obj = { name: "동준", age: 27}; for (let v in list){ console.log(v); // 0, 1, 2 console.log(list[v]) // 1, 2, 3 } for (let v in obj) { console.log(v); // age, name console.log(obj[v]) // "동준", 27 } for~of arrays, strings, maps, sets 과 같은 iterate 객체에 사용할 수 있다. 일반적인 object 형태는 사용 불가 const list = [1,2,3]; const obj = {..
[JAVASCRIPT] this this 일반적인 객체지향언어(C#, JAVA) 에서 this 는 특별한 처리가 없는한 항상 Class 본인을 가르킨다. 그러나 Javascript 에서 this 는 상당히 독특한 모습을 보여준다. this 가 가르키는 객체는 동적으로 변한다. 즉 호출 시점에 따라 this 는 변한다. 기본적으로 자바스크립트에서 this 는 window, global 을 가르킨다. ( strict mode 에선 undefined 할당 ) 객체에서 this 일반 함수 호출방식의 this 는 전부 window ( 전역 객체 ) 를 가르킨다. 즉 어떤 함수라도 일반 함수로 호출되면 this 는 전역 객체 메소드 형태 ( 객체가 호출하는 ) 라면 this 가 호출한 객체에 바인드 된다. const obj = { name: "j..
[JAVASCRIPT] try-catch 에러 전파 Error 발생 자바스크립트 런타임 도중 에러가 발생할 경우 실행이 중지된다. 따라서 에러를 받아주기 위해 try - catch 로 예외처리를 한다. 스택의 아래방향으로 계속해서 에러를 전파한다. 단 문법적인 에러는 try catch 로 처리할수 없다. new Error("에러"); // 에러를 발생시킨것이 아닌 에러객체를 생성했기 때문에 런타임이 중지되지 않는다. throw new Error("에러"); // 이 밑에 코드들은 실행이 중지된다. (Node 기준) 일반적인 try-catch 예외처리 function A (){ try { B(); }catch(e){ console.log("A 가 잡음") } } function B () { try{ throw new Error("에러임"); }catch(e..
[JAVASCRIPT] isNaN 검사 isNaN NaN 타입 확인시 사용하는 메소드 typeof 로는 number 로 리턴됨 isNaN(NaN) // true isNaN(parseFloat("geoff")) // true typeof NaN // 'number' Reference How do you check that a number is NaN in JavaScript? I’ve only been trying it in Firefox’s JavaScript console, but neither of the following statements return true: parseFloat('geoff') == NaN; parseFloat('geoff') == Number.NaN; stackoverflow.com There might be in..
[JAVASCRIPT] DOM - 노드 조작 텍스트 조작 API 설명 nodeValue 노드의 텍스트 값을 변경한다. 텍스트 노드를 선택해야만 텍스트를 변경할 수 있다. textContent 요소노드의 텍스트 노드를 변경한다. HTML 마크업을 파싱하지 않는다. innerText textContent 와 마찬가지로 텍스트 노드를 변경한다. textContent 보다 느리고 CSS 에 영향을 받는다. 사용하지 않는 것이 좋다. nodeValue Hello textContent Hello World 내부에 요소 노드가 존재하여도 text 형태 노드만 반환한다. 내부에 텍스트를 삽입하면 모든 자식 노드가 제거되고 할당된 텍스트가 추가된다. HTML 마크업 형태를 파싱하지 않는다. DOM 조작 새로운 돔 노드가 추가, 생성, 삭제시 리플로우와 리페인트가 ..
[JAVASCRIPT] DOM - 노드 탐색 노드 탐색 API 설명 parentNode 부모 노드를 반환한다. 텍스트 노드가 부모인 경우는 없다. parentElement 부모 요소 노드를 반환한다. childNodes 자식 노드를 NodeList 에 담아 반환한다. 텍스트 노드 포함 children 자식 노드를 HTMLCollection 에 담아 반환한다. 텍스트 노드 미포함 firstChild 첫 번째 노드를 반환한다. 텍스트 노드가 반환될 수 있다. lastChild 마지막 노드를 반환한다. 텍스트 노드가 반환될 수 있다. firstElementChild 첫 번째 자식 요소 노드를 반환한다. 텍스트 노드 미포함 lastElementChild 마지막 자식 요소 노드를 반환한다. 텍스트 노드 미포함 previousSibling 자신의 이전 형제 ..
[JAVASCRIPT] DOM - 노드 취득 (HTMLCollection) 노드 취득 프론트엔드 개발자의 관점에서 HTML 태그 는 단순 태그를 넘어서 자바스크립트 객체의 관점으로 보아야 한다. DOM 에 접근할 수 있는 DOM API의 종류 API 설명 getElementById 태그의 id 속성을 이용하여 노드를 선택한다. getElementsByClassName 태그의 class 속성을 이용하여 노드를 선택한다. HTMLCollection 유사 배열객체 를 리턴 getElementsByTagName 태그의 이름을 이용하여 노드를 선택한다. HTMLCollection 유사 배열객체 를 리턴 querySelector CSS 선택자를 사용하여 노드를 선택한다. querySelectorAll CSS 선택자를 사용하여 여러 노드를 선택한다. NodeList 유사 배열객체를 리턴 g..
[JAVASCRIPT] Full Screen 웹 전체 화면 JS 를 사용하여 웹페이지를 전체화면으로 만든다. WEB에서 자체적으로 제공한다. document.documentElement.requestFullscreen(); Reference Fullscreen API - Web APIs | MDN The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's e dev..
[JAVASCRIPT] STRING STRING 자바스크립트의 원시타입인 string 이 가지는 메소드를 기술한다. 메소드는 string wrapper 객체가 가지고 있다. length String 래퍼 객체는 length 프로퍼티를 갖는다. String 래퍼 객체는 유사 배열 객체이다. "Hello".length; // -> 5 String.prototype.indexof 인수로 전달받은 문자열을 검색하여 첫번째 인덱스를 반환. 값이 없는 경우 -1 반환 const str = "Hello World"; str.indexOf("l"); // 2 str.indexOf("or"); // 7 str.indexOf("x"); // -1 // str 인덱스 3부터 "l" 을 검색하여 첫 번째 인덱스를 반환. str.indexOf("l", 3); /..
[JAVASCRIPT] ARRAY ARRAY, 배열 배열 객체의 프로토타입 (Array.prototype) 은 여러 메소드를 제공한다. 배열 메소드에는 원본 배열을 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하는 메소드가 존재한다. 자주 쓰이는 메소드의 경우 ★ 표시 Array.from 유사 배열 객체나 반복 가능한 객체 (iterate) 를 얉은 복사를 통해 새로운 배열 객체를 리턴한다. console.log(Array.from('foo')); // Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // Array [2, 4, 6] const arr = Array.from({length: 5}); console.log(arr); // [..

티스토리툴바