자바스크립트 (5) 썸네일형 리스트형 jquery없이 html에 html삽입하기 형태 : 아이템을 누르면 article자리에 html을 삽입 순서 : 1. HTML요소 수집 1 : article클래스 요소 2-4 : 선택할 아이템 요소 5-7 : 추가할 html위치 2. 초기화 2 : 초기화시 실행할 페이지 출력 3-5 : 선택될 아이템요소에 이벤트 추가 3. 초기화시 출력할 페이지 출력 4. 아이템 선택시 실행될 이벤트 함수 ToDo목록 만들기 형태 : 순서 : 1. 필요한 HTML요소 불러오기 2. localstorage에 todoList가 있는지 확인 localStorage에서 todoItems를 읽기 if : todoItems가 비었을때, else : 안비었을때, JSON.parse(todoItems) parse해온 요소들 각각(forEach) todo_items배열에 push 각 아이템 그리기 함수 실행 // localStorage는 String만 저장하기 때문에 JSON으로 저장해야한다 todoList를 추가하기위한 이벤트 3. todoList를 추가하기 위한 이벤트를 생성 4. parse해온 각 요소들에 대해 그리기 함수 생성 5. 버튼에 추가한 이벤트 생성 공부 : 객체 생성 : document.createElement('TAG').. 이름저장하기 - localstorage 형태 : 순서 : 1. 필요한 위치의 HTML요소 불러오기 2. localstorage에 User가 있는지 확인 3. 유저가 없는경우 함수 생성 4. 이벤트 함수 생성 4. 유저가 있는경우 함수 생성 5. 버튼이벤트 생성 공부 : 이벤트 추가 : addEventListener('동작', function) - function에 ()안붙임 이벤트 발생시 기본이벤트 무시 : event.preventDefault(); - 자동완성 없음 클래스 추가 : 요소.classList.add('클래스이름'); 클래스 삭제 : 요소.classList.remove('클래스이름'); localStorage 추가 : localStorage.setItem(key, value); localStorage에서 요소 가져오기 : loca.. 시계 출력 순서 : 1. 출력할 위치의 HTML요소 불러오기 2. 시간 함수 생성 3. 시간 함수 호출 4. 1초마다 새로 작동하도록 설정 : 3번의 setInterval함수 공부 : 문서에서 요소를 가져올 때, document.querySelector(); 일정한 간격으로 함수를 실행할때, setInterval(function, time); 결과 : github.com/dnrudzx/web/blob/master/study/Nomad_Coder_vanila_JS/index.html dnrudzx/web Contribute to dnrudzx/web development by creating an account on GitHub. github.com github.com/dnrudzx/web/blob/master/st.. HTML, CSS, Javascript 기본 형태 HTML CSS : HTML - head - link에 추가 Javascript : HTML - body - 맨 밑에 script로 추가 이전 1 다음
