JS(javascript)
-
localStorage, JSON, stringfy, parseJS(javascript) 2020. 11. 24. 19:48
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. "localStorage를 사용하면 Document's origin의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.) localStorage에 저장한 자료는 프로토콜 별로 구별 합니다. 특히 HTTP로 방문한 페이지에서 저장한 데이터는 ..
-
setIntervalJS(javascript) 2020. 11. 24. 18:46
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. 1. 어떤 용도? 입력된 함수를 특정 시간을 주기로 반복하기 위해 사용된다. WindowOrWorkerGlobalScope mixin를 통해 사용된다. 해당 mixin은 Window, Worker interface를 통해 구현되었다. 참고로 mixin은 간단히 말해 여러 클래스, 인터페이스를 통해 구현될 수 있으며 구현된 mixin은 자신을 구현한 클래스, 인터페이스로부터 속성과 메소드를 가져와 사용할 수 있다. + 오리지널 자신의 속성, 메소드도 존재할 수 있다. 2. parameter setInterval(func, 1000); 이런식으로 사용한다. func은 반복시킬 함수명이다. 여기서 주의할 것은 뒤에 '(..
-
var, letJS(javascript) 2020. 11. 24. 10:54
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. var, let의 차이가 뭘까? 그리고 왜 var보다 let 사용을 권장할까? let은 block scope를 지원하기 때문이다. 하지만 var는 지원하지 않는다. 그럼 무슨 문제가 발생할까? // 예시 코드 - var for(var i = 0; i < 3; i++) { console.log(i); for(var i = 0; i < 3; i++) { console.log(i); } } // 출력 결과 0 0 1 2 출력 결과가 좀 이상하지 않은가? 적어도 block scope를 지원하는 언어를 다루던 사람 입장에선 이상하게 느껴질 것이다. 대략 짐작했겠지만 해당 코드에서는 안쪽 반복문에서 바깥쪽 반복문의 i에 관여..
-
Date, innerHTMLJS(javascript) 2020. 11. 23. 18:06
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. // 예시 코드 function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerHTML = `${hours}:${minutes}:${seconds}`; } new Date()가 뭘까? 쉽게 생각해 시간을 다루는 Date 객체를 생성하는 코드이다. 그리고 생성된 Date 객체가 date 변수에 저장됐다. document가 웹페이지를 다루는 리모콘이라면 Date는 시간과 관련된 리모콘이다. 그..
-
querySelectorJS(javascript) 2020. 11. 23. 17:19
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. document.querySelector() 이번엔 document의 method 중 하나인 querySelector에 대해 다룰 예정이다. 기초적인 설명은 세 줄 뿐이다. 1. CSS selector(id, class, html tag type)를 인자(parameter)로 받아 HTMLElement를 반환하는 함수이다. 2. 인자로 받은 selector에 해당하는 HTMLElement가 document, 즉 웹페이지 내에 존재하지 않다면 null을 반환한다. 3. 만약 selector에 해당하는 HTMLElement가 여러 개일 경우 HTML에서 제일 위에 위치한 HTMLElement를 가져온다. 다음은 1, ..
-
document interfaceJS(javascript) 2020. 11. 23. 16:12
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. nomadcoders의 '바닐라 JS 클론코딩'을 수강했다. javascript 입문을 위해 수강했는데 모르는 것 투성이였다. 그래서 이번 글에서는 document에 대해 다룰 것이다. document document는 브라우저에서 load된 웹페이지를 다루라고 쥐어준 리모콘이라고 해석할 수 있는거 같다. 사용법만 알면 웹페이지를 구성하는 contents들에 대해 접근, 조작을 할 수 있다. 즉 웹페이지의 URL을 받아올 수도 있고 , 에 대해 진입, 생성, 삭제 등을 할 수 있게 되는 것이다. 리모콘을 조작할 줄 알면 TV채널도 바꿀 수 있고 음량도 조절하는 등 편리하다. 하지만 조작법을 모른다면 어느정도 사용법..