728x90 반응형 Coding With Jina/JavaScript58 [자바스크립트] 로컬 스토리지(LocalStorage) / 세션 스토리지(SessionStorage) ◆ 스토리지(Storage) - 로컬 스토리지 : HTML5에서 추가됨 : window 객체의 하위 객체 : 영구 저장 - 세션 스토리지 : 브라우저 실행 중에만 유효 - 로컬 스토리지와 세션 스토리지는 유효 기간 외에는 사용하는 데 큰 차이가 없음 - 오직 문자형(string) 데이터 타입만 지원 - 예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 본래 숫자가 아닌 문자가 나옴 스토리지 종류 구분 유효기간 localStorage 없음(영구적) sessionStorage 브라우저 탭이 열려 있는 동안만 유효하며 종료 시 삭제됨 ◆ 로컬 스토리지(LocalStorage) key와 value - 로컬 스토리지의 저장은 키와 값의 형태로 이루어짐 - 키는 저장된 값을 식별하고 가져오는 데.. 2021. 1. 16. [자바스크립트] 크리스마스까지 남은 시간 계산하기 HTML 2021년 크리스마스까지 남은 시간은? 00 자바스크립트 const dday= document.querySelector(".dday"); function getTime(){ const now = new Date(); const xMas = new Date("2021-12-25:00:00:00+0900"); console.log(xMas); const timeRemaining = xMas.getTime() - now.getTime(); const day = Math.floor(timeRemaining/(24*60*60*1000)); const hour = Math.floor((timeRemaining/(60*60*1000))%24); const min = Math.floor((timeRemaini.. 2021. 1. 16. [자바스크립트] classList.add/remove/contains / toggle classList.add("추가하고 싶은 클래스명") - 클래스를 추가 생성 classList.remove("제거하고 싶은 클래스명") - 클래스를 제거 classList.contains("확인하고 싶은 클래스명") - true/false로 클래스의 존재여부를 확인해줌/값이 존재하는지 체크 ⓐ CLICKED_CLASS 라는 변수 안에 있는 클래스의 존재 여부를 확인하여 존재하면 true / 없으면 false ⓑ if문 조건은 기본이 true이므로 !hasClass의 뜻은 false이다 ⓒ if문의 조건이 false라면 CLICKED_CLASS를 추가하고 else에서는 제거하라는 뜻. function handleClick() { const hasClass = title.classList.contains(C.. 2021. 1. 14. [자바스크립트] 자바스크립트로 CSS 변경하기 - classList 이용 element.classList.add("추가하고자하는 클래스명"); HTML Hello 자바스크립트 const a = document.querySelector(".a"); function clickThis(){ a.innerHTML = "글자색이 변경되었습니다."; a.classList.add("b"); } a.addEventListener("click", clickThis); CSS body { background-color: rgb(247, 217, 253); } h1 { color: white; } .a { color: rgb(67, 35, 211); cursor: pointer; } .b { color: rgb(255, 136, 0); } 결과 - 처음에는 class명이 a만 존재 - 한번 클릭.. 2021. 1. 14. [자바스크립트] init()함수는 왜 사용할까? init( ) 함수 : 여러 함수의 초기화를 위한 즉시실행 함수 사용이유는 ① 가독성 측면 ② 전역객체보호 사용예시) const title = document.querySelector("#title"); const BASE_COLOR = "rgb(52, 73, 94)"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR) { title.style.color = OTHER_COLOR; } else { title.style.color = BASE_COLOR; } } function init() { title.style.color =.. 2021. 1. 14. [자바스크립트] 이벤트 핸들러(event handler)와 이벤트 리스너(event listener) 차이점과 종류 2021. 1. 14. 이전 1 ··· 3 4 5 6 7 8 9 10 다음 728x90 반응형
