728x90 반응형 Coding With Jina/JavaScript58 [자바스크립트] ToDoList 만들기 기본 Ver. - 로직 input에 text를 입력하고 엔터를 치면 할일목록 리스트가 생성되고 ❌를 누르면 삭제되는 시스템 저장된 리스트는 새로고침해도 남아있음 ToDoList 만들기 응용 Ver. 에 더 자세한 설명을 해서 중복되는 설명은 거의 생략함 이해가 안되는 경우 응용편 참고하세요↓↓↓↓ coding-with-jina.tistory.com/130 [자바스크립트] ToDoList 만들기 응용 Ver. - 로직 input 빈칸에 할일을 적으면 Pending에 리스트로 저장되었다가 ⭕를 누르면 Finished로 넘어가고 ❌를 누르면 삭제됨 그리고 Finished 리스트에서 🔁를 누르면 다시 Pending으로 넘어가는 시스템 1) HTML - coding-with-jina.tistory.com 1) HTML - 화면구성 2).. 2021. 1. 29. [자바스크립트] ToDoList 만들기 응용 Ver. - 로직 input 빈칸에 할일을 적으면 Pending에 리스트로 저장되었다가 ⭕를 누르면 Finished로 넘어가고 ❌를 누르면 삭제됨 그리고 Finished 리스트에서 🔁를 누르면 다시 Pending으로 넘어가는 시스템 1) HTML - 화면구성 Pending Finished 2) CSS는 일단 생략 3) JavaScript - HTML과 연결 const form = document.querySelector(".input-form"); const formInput = form.querySelector("input"); const pendingList = document.querySelector(".pending-ul"); const finishedList = document.querySelector(".fin.. 2021. 1. 29. [자바스크립트] Event.target Event.target - 자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 사용 - 예를 들면 form 태그 디폴트값에 의해 form태그 안에 있는 input에서 엔터를 누르면 자동으로 값이 어딘가로 보내져버리는 데 우리는 이 값을 다른 곳에 저장해 사용해야하기 때문에 디폴트 값인 이벤트를 멈추게 하는 메서드 - 이벤트가 일어난 곳을 알고 싶으면 event.target을 사용하면 됨. target은 클릭이 일어난 element 자체를 반환하게 되고, 우리는 이 안에 적혀있는 텍스트를 가져옴으로써 현재 어떤 버튼에서 사용자가 클릭을 눌렀는지 파악할 수 있는 것 사용예시) coding-with-jina.tistory.com/123 2021. 1. 29. [자바스크립트] Array(배열) 객체의 메서드 forEach forEach - for문과 마찬가지로 반복적인 기능을 수행할 때 사용 - 배열 각각의 요소에 대해 반복적으로 실행 - forEach는 기본적으로 함수를 실행하는데 array에 담겨있는 것들 각각에 한번씩 함수를 실행시켜줌 - 다른 것처럼 만들어놓은 함수를 호출하는게 아니라 안에다 바로 만들어서 사용 예제) 홀수배열 만들어보기 const arr = [0,1,2,3,4,5,6,7,8,9,10]; const oddArray = []; arr.forEach(function(element){ if(element%2==1) { oddArray.push(element); } }); console.log(oddArray); // [ 1, 3, 5, 7, 9 ] [출처] yuddomack.tistory.com/entr.. 2021. 1. 27. [자바스크립트] JSON.stringify( )과 JSON.parse( ) 1) JSON - JavaScript Object Notation의 약자 - 주로 웹서버와의 데이터를 교환할 때 사용됨 2) JSON.stringify( ) 메소드 - JSON.stringify(value) - 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환 - JSON 객체를 String 객체로 변환 - value에는 변환할 자바스크립트 객체를 전달 3) JSON.parse( ) 메소드 - JSON.parse(text) - 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환 - string 객체를 JSON 객체로 변환 - text에는 변환할 문자열을 전달 - JSON.parse()에서 data 변환시, string객체를 변환하는게 아니면 에러메세지가 발생(unexpected token.. 2021. 1. 27. [자바스크립트] input에 쓴 text 출력하기 - 로직 (todolist 전단계) input에 이름을 쓰고 엔터를 치면 input 입력칸은 사라지고 이름만 출력되는 시스템 이름은 로컬스토리지에도 저장되므로 새로고침해도 이름이 저장되어있음 이름을 지우고 싶으면 F12에 Application에 LocalStorage에 들어가서 key값 오른쪽 마우스 클릭 1) HTML - 화면구성 2) CSS - 이름이 있는 경우에는 이름을 쓰는 빈칸 input이 사라지도록 설정 .form, .greeting { /* form과 h4를 숨겨놓은 상태 */ display: none; } /* .showing을 클래스에 추가하면 숨겨놓은 것들이 보임 */ .showing { display: block; } 3) JavaScript - HTML과 연결 const form = document.querySelec.. 2021. 1. 27. 이전 1 2 3 4 5 6 7 ··· 10 다음 728x90 반응형
