📌 자바스크립트 공부
혼자 못할 것 같은 두려움에 jquery로만 자꾸 코드를 짜게되고
자바스크립트로는 시작을 잘 못했던 적이 많은데
겁먹지말고 해보자 라는 마음으로 시작해봤는데
역시 헤매더라도 혼자 하고 나서가 모르는것도 확 보이고 자신감도 얻게되는 것 같다
Timer 기능 / user이름 로컬스토리지에 저장하기 / 할 일 목록
📎 Timer (Date(), setInterval())
👉 querySelector : html의 클래스 이름 및 태그를 갖고 오는데 사용
👉 시(hour) 설정
var ap = hour > 12 ? "PM" : "AM"
hour = hour > 12 ? hour - 12 : hour
hour = hour < 10 ? "0" + hour : hour👉 최신자바스크립트
clockTime.textContent = `${hour}:${min}:${sec} ${ap}`👉 setInterval()
setInterval(getTime, 1000)getTime() 괄호 안써준다
📎 localStorage
👉 function handleSubmit( ){ } : input에 이름을 입력하고 enter 치면 생기는 일
👉 classList.add : class명을 추가한다
👉 localStorage (지역저장소)
- 로컬스토리지 저장하기
localStorage.setItem("key(data name)", "value")- 로컬스토리지 가져오기
localStorage.getItem("key(data name)")👉 addEventListener
addEventListener("event", 함수)
addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정
가장 권장되는 이벤트 등록 방식!
📎 To Do List
👉 투두리스트에 들어가는 기능
- 삭제하기
- 로컬스토리이제 저장하기 & 가져오기
- 웹문서에 표시해주기
- 폼의 제출 이벤트 핸들러
👉 parentNode
객체의 부모를 찾아준다
👉 splice() 메서드
splice는 배열 데이터를 원하는 만큼 삭제 또는 교차하거나 새 요소를 추가하여 배열의 내용을 변경한다
→ splice(start, length) : (해당 인덱스부터, 삭제할 개수)
👉 JSON.stringify
JSON.stringify( )는 자바스크립트의 값을 JSON 문자열로 변환한다
- JSON이란?
JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다
👉 JSON.parse(text)
JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로
인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환한다
(배열처럼 생긴 문자열을 진짜 배열로 바꿔준다)
왜 자바스크립트는 약간 두려울까ㅜㅜ
얼른 이 두려움을 극복하고싶다... 문법에 빨리 익숙해지는 법 밖엔 없는 것 같다
그러기 위해서는 똑같이 따라 치는 코딩이 아닌
혼자서 뚝딱뚝딱 해봐야 하는건데 그걸 겁먹어 하고 있으니...
하기 전부터 쫄지말자!!!!!👊👊👊
