JavaScript (16) 썸네일형 리스트형 [JavaScript] localStorage 에 Array 형태로 저장, JSON.stringify() /JSON.parse() JSON.stringify(Array); localStorage에는 배열이 배열의 형태로 저장되지를 않는다. const toDos = []; 배열을 담으려고 하면? localStorage.setItem("todos", toDos); 이를 JSON.stringify() 로 애시당초 배열 전체를 string으로 변환해주고 localStorage에 넣어주면? localStorage.setItem("todos", JSON.stringify(toDos)); 잘출력이 된다. 이를 이제 다시 Array로 변환하는 방법은 JSON.parse() string을 실제로 무언가를 할 수 있는 Array로 변환하는데 성공했다! https://nomadcoders.co/javascript-for-beginners/lecture.. [JavaScript] const로 선언한 배열 push pop 이 가능한 이유는? 자바스크립트에서 const로 선언한 변수는 다시 값을 재할당 할 수 없다. 하지만 배열이라면 push, pop 같이 안의 내용물의 변화는 발생하던데 어떻게 된 것일까? 좋은 답변이 있어 가져와 봤다. 원시 자료형 vs 참조 자료형 참조 자료형은 그 자료의 주소를 들고 있는 것이다. const a = [1,2,3,4]; 하면 a는 [1,2,3,4]가 들어있는 배열의 시작지점 주소를 들고 있는 거예여. 이 상태에서 배열에 5가 추가 되던 6이 추가되던 a가 시작지점의 주소를 쥐고 있는 건 변하지 않는 상태에서 배열의 내용물만 달라지는 거예여. 다만 이때 a에 들어있는 주소를 바꾸려고 한다? 이것은 오류가 납니다. 말씀하신대로 const로 즉 상수로 선언했기 때문이죠. https://nomadcoders.co.. [JavaScript] Object, Array 등 무엇이든 String으로 변환시켜주는JSON.stringify(Object) JSON.stringify(Object) [JavaScript] 버튼(button)이 클릭된 위치 알아내기 버튼이 클릭 되는 이벤트가 발생시, 이에 대한 target 정보를 이벤트 리스너는 가지고 있다. 즉, 이벤트리스너는 어떤 버튼이 click 되었는지 target을 가진다. target 은 클릭된 Element를 가르킨다. eventListener 함수의 event 인자를 활용한다. todo list 를 만들기 위해 form 안의 input 에 입력을 하면 내용을 담을 span 과 삭제를 위한 button 을 만들어 HTML 에 삽입한다. 그리고 button은 이벤트리스너와 연결되어 해당 클릭시 해당 li를 삭제해 주어야만 한다. 하지만 여러개의 todo(HTML 상 li 태그) 가 생성되면 버튼들간 동일한 이벤트리스너를 호출해 줌으로 어떻게 해당되는 버튼이 있는 li를 찾아서 삭제시켜줄 수 있는지의 문제.. [JavaScript] JS 에서 HTML을 생성해서 HTML 에 추가해주기 -document.createElement() 이전까지 시계를 만들거나 한 것도 다 HTML에서 등의 태그들을 id 값과 class를 줌과 동시에 선언하여 JS에서 그 Element를 document.querySelector() 로 CSS 문법(id 는 '#',class 는 '.')으로 가져온 다음 Element. innerText 등으로 값을 수정하고 업데이트 하였다. https://mswait.tistory.com/74 [JavaScript] 간단한 시계만들기 : setInterval(), setTimeout(), Date() setInterval(인자1, 인자2) 인자1 은 실행시키려는 함수 인자2 는 시간 간격(단위 : ms) 1000ms = 1초 setTimeout(인자1, 인자2) 동일하게 실행시키고 싶은 함수를 인자1에 넣어준다. 대신에.. [JavaScript] div 태그 안의 여러개의 span 선택하기 span:first-child span:latt-child 불필요한 띄어쓰기를 주의하자. [JavaScript] 난수 생성 : Math. random() round(), ceil(), floor() Arrary 에서 랜덤하게 요소들을 선택하려면 어떻게 해야할까. Math.random() 은 0~1 사이의 소수를 반환한다. 여기에 배열의 길이 만큼. arrary.length 를 곱해주면 예를 들어 안에 요소가 10개든 배열이라 10을 곱해주었다 치면 있다고 한다면 인덱스 0부터 0.xxxx~ 9.xxxxx 까지 나온다. 0~9 까지의 정수는 요소가 10개인 배열의 인덱스를 나타냄으로 뒤의 소수점 밑으로를 제거할 수 있으면 원하는 바를 이룬 것일거다. Math.floor, Math.round, Math.ceil 이 있지만 이중 내림(floor)를 사용한다. 올림은 9.xxxx 가 10 이 될 터이고 이는 10개의 원소의 배열에 대한 인덱스 범위 0~9 를 초과한 것이기에 사용할 수가 없다. 따라서 fl.. [JavaScript] 간단한 시계만들기 : setInterval(), setTimeout(), Date() setInterval(인자1, 인자2) 인자1 은 실행시키려는 함수 인자2 는 시간 간격(단위 : ms) 1000ms = 1초 setTimeout(인자1, 인자2) 동일하게 실행시키고 싶은 함수를 인자1에 넣어준다. 대신에 이 함수가 실행되는건 인자2 ms 만큼의 시간이 흐른뒤에다. 매초마다 새로운 Date Object 를 만들어준다. 최근의 시 분 초 를 가지고 있는 Date Object를 말이다. const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSecond.. 이전 1 2 다음
