어제 오늘 내일

지난 번에는 Javascript로 localStorage를 다루는 방법을 알아보았습니다. [Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) [Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) 이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localS.. hianna.tistory.com [Javascript] localStorage 만료 시간 설정하기 [Javascript] localStorage 만료 시간 설정하기 lo..

localStorage는 세션이 변경되어도 데이터 정보가 그대로 유지됩니다. 이번에는 localStorage 데이터에 만료 시간을 설정하고, 일정 시간이 지나면, 데이터를 이용할 수 없도록 하는 방법을 알아보도록 하겠습니다. Step1. 데이터 저장 시 만료일자 설정하기 // 만료 시간과 함께 데이터를 저장 function setItemWithExpireTime(keyName, keyValue, tts) { // localStorage에 저장할 객체 const obj = { value : keyValue, expire : Date.now() + tts } // 객체를 JSON 문자열로 변환 const objString = JSON.stringify(obj); // setItem window.localSt..

이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localStorage의 아이템 갯수 구하기 localStorage의 key 이름 찾기 전체 key, value 가져오기 localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. 그럼 이제부터 localStorage를 사용하는 방법을 알아보겠습니다. setItem() - key, value..

이번에는 Javascript를 사용하여 사용자가 버튼 클릭시 특정 노드를 복사하고, 그 노드를 복사하는 방법을 정리하였습니다. cloneNode() Javascript에서 노드를 복사할 때는 cloneNode() 라는 함수를 사용합니다. node.cloneNode(); node.cloneNode(deep); 파라미터 deep : optional. true/false 값을 넣어준다. 해당 노드의 자식 노드까지 복사하려면 true 해당 노드만 복사하려면 false 리턴값 cloneNode 복사한 새로운 노드를 리턴한다. 노드 복사하기 - cloneNode() 만나서 반가워요 .red-border { border : 1px solid red; height : 1em; } function copyDiv() { ..

Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 다음의 함수를 사용합니다. setInterval() clearInterval() setInterval() setInterval() 함수는, 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수입니다. 이 함수는 다음의 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위), 1초=1000밀리세컨드 function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열합니다. ex) param1, param2, param3.... 이 함수는 다음 값을 리턴합니다. intervalID..

Javascript에서 정의한 Object를 그대로 출력하면 아래와 같이 [object Object] 값이 출력됩니다. const obj = { x : 'x', y : 'y', z : { z1: 'z1' } }; document.write(obj); JSON.stringify() 함수 사용하기 만약, 객체(Object)의 값을 출력하고 싶으면, JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환해 주어야 합니다. JSON.stringify() 함수에 대한 자세한 설명은 지난 포스팅을 참조하세요. [Javascript] 객체를 JSON으로 변환하기 [Javascript] 객체를 JSON으로 변환하기 Javascript에서 사용하는 객체(Object)를 네트워크를 통해 전송하려면 어..

지난번에는 div에 onclick 이벤트를 거는 방법, 그리고, div에 마우스 오버되었을 때 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보았습니다. [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. hianna.tistory.com [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기 [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나..

는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. HTML, Javascript 사용하기 html과 Javascript를 이용하여 div에 onclick 이벤트를 추가하는 방법입니다. .my-div { width : 150px; height : 150px; background-color : blue; } function hello() { alert('안녕하세요'); } [JS] div 클릭시 실행될 hello() 함수를 정의하였습니다. div가 클릭되면, '안녕하세요' 메세지를 출력하는 alert 창을 띄웁니다. [HTML] onclic..

Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textContent 차이점 이번에는 DOM의 CSS Style을 변경하고, 읽어오는 방법을 정리해 보도록 하겠습니다. 1. style 속성값 변경 (1) style 속성 사용하기 - css 속성 하나씩 추가하기 (2) style.cssText 사용하기 - css 속성 한번에 여러개 추가하기 (3) style, style.cssText 사용시 주의할 점 2. style 속성값 읽어오기 (1) styl..

Javascript에서 주석을 다는 방법은 2가지가 있습니다. 한줄 주석 달기 여러줄 주석 달기 한줄 주석 달기 ( // ) // id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. document.getElementById('greeting').innerText += '안녕하세요~'; 간단하게 한줄짜리 주석을 달때 사용합니다. 여러줄 주석 달기 ( /* 주석내용 */ ) /* id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. */ document.getElementById('greeting').innerText += '안녕하세요~'; 여러줄의 주석을 한번에 추가해야 할때 사용합니다. '/*'(주석 시작)와 '*/'(주석 종료) 표시가 항상 대꾸가 ..