전체 글45 [JavaScript] - To Do List 만들기① ToDoList를 만들 때 꼭 되어야 하는 기능 1. 사용자가 값을 입력하고 새로고침을 했을 때 이전에 있던 값들을 불러올 수 있는가 2. 새로고침 후 사용자가 값을 입력할 때 기존에 있던 것에 덧씌워지는 것이 아닌 기존에 있던값+새로운값으로 리스트가 만들어지는가 3. 삭제 버튼을 눌렀을때 화면상 리스트와 localStorage의 데이터가 같이 삭제가 되는가 To Do List 진행방향 -form이 submit 될 때 실행되는 함수를 만듭니다. -사용자가 input에 넣은 값들을 배열로 저장 후 로컬스토리지로 보내고 createElement 메소드를 이용해 ul의 하위 요소인 li와 span, button을 만듭니다.(span은 input에 넣은 값을 받습니다.) -삭제 버튼을 클릭하면 클릭이벤트가 일어.. 2022. 7. 19. [JavaScript] - Uncaught TypeError 자바스크립트를 하다보면 자주 볼 수 있는 오류입니다. 위 에러는 흔히 나타나는 에러로 주로 HTML에서 DOM이 형성되지 않았으나 JS를 이용해 이벤트를 줄경우 또는 크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생합니다. 위 사진을 보면 어느부분에서 잘못되었을까요? const todoListUl = document.querySelector("todolist-ul");에서 querySelector로 불러올때는 id일때 "#(샵)" class일때 ".(마침표)" 를 붙여줘야 되는데 그부분을 빠뜨려서 생긴 오류였습니다. const todoListUl = document.querySelector(".todolist-ul");으로 고쳐주면 간단하게 해결 완료! Uncau.. 2022. 7. 19. [JavaScript] - 로그인 폼 만들기 ② https://taehyeon-smilestudy.tistory.com/25 [JavaScript] - 로그인 폼 만들기 ① 만들고 싶은 폼 조건: 로그인 input에 이름을 입력하고 enter나 로그인 버튼을 눌렸을 때 로그인 폼은 사라지고 인사말이 나오며 인사말은 새로고침 해도 초기화되지 않는다. 시작! How? 1. 로그인 폼 taehyeon-smilestudy.tistory.com 만들고 싶은 폼 조건: 로그인 input에 이름을 입력하고 enter나 로그인 버튼을 눌렸을 때 로그인 폼은 사라지고 인사말이 나오며 인사말은 새로고침 해도 초기화되지 않는다. HOW? 1. 로그인 폼에서 submit 이벤트가 일어나면 로그인폼은 사라지고 사용자가 입력한 value는 로컬 스토리지에 저장하는 함수를 만들.. 2022. 7. 15. [JavaScript] - 로그인 폼 만들기 ① 만들고 싶은 폼 조건: 로그인 input에 이름을 입력하고 enter나 로그인 버튼을 눌렸을 때 로그인 폼은 사라지고 인사말이 나오며 인사말은 새로고침 해도 초기화되지 않는다. 시작! How? 1. 로그인 폼에서 submit 이벤트가 일어나면 로그인폼은 사라지고 사용자가 입력한 value는 로컬 스토리지에 저장하는 함수를 만들어줍니다. 2. 사라져있던 인사말이 나오면서 로컬스토리지에 있는 value값을 이용해 인사말을 span에 넣어줍니다. 3. if문을 이용하여 로컬스토리지에 값이 없으면 로그인폼이 나타나고 값이 있으면 인사말이 나오게 합니다. (로컬스토리지에 있는 값을 불러오기 때문에 새로고침해도 인사말을 초기화 되지 않습니다.) 4. 로그아웃 버튼을 이용해 로컬스토리지에 있는 값을 삭제할 수 있게 .. 2022. 7. 15. [JavaScript] - 디데이 타이머 간단한 디데이 타이머 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 크리스마스 디데이 00:00:00 Colored by Color Scripter cs Html에 JS에서 불러올 수 있는 id나 class를 가진 항목을 만듭니다. 1 2 3 4 5 6 const clock = document.querySelector("#clock"); const SECOND = 1000; //초 const MINUTE = 1000 * 60; //분 const HOUR = 1000 * 60 * 60; //시 const DAY = 1000 * 60 * 60 * 24; //일 cs 시계를 만들어 주기 위해 JS에서 Html 요소를 불러옵니다. 자바스크립트에서 시간은 ms(밀리초)단위를.. 2022. 7. 15. [JavaScript] 랜덤숫자게임 위와 같은 랜덤 숫자게임을 만들기 위해 Html에 h1과 form, input 요소를 생성해줍니다. answer-form은 "hidden"이라는 클래스를 주고 css에 .hidden { 이라는 값을 만들어서 숨겨줍니다 display: none; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Random Number Game Generate a number between 0 and Guess the number: play! Colored by Color Scripter cs JS를 이용해 이제 랜덤숫자게임 기능을 만들어 줄 겁니다. 우선 querySelector를 이용해 Js에서 Html .. 2022. 7. 11. #9. 자바스크립트(JavaScript) - JS에서 Html의 요소를 변경하는 방법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Document 안녕 Colored by Color Scripter cs Html에는 수많은 요소가 있습니다 body, div, h1, form, input.... 이런 수많은 요소들을 Html에서 직접 변경하지 않고 JS에서 제공하는 메소드를 이용하여 바꿀 수 있습니다. Document => 웹페이지 그자체, Html 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작하여야 합니다. 요소변경 ex) "안녕" 이라는 요소에 innerText="안녕"을 다른것으로 바꾸고 싶다면 1 2 3 4 5 6 7 const title = document.getElementById("tit.. 2022. 7. 9. #8. 자바스크립트(JavaScript) - event 만들기! function 함수란? => https://taehyeon-smilestudy.tistory.com/17 #4.자바스크립트(javascript) - 기본 함수(function, return) function = 필요할 때마다 호출하여 해당 작업을 반복해서 수행 가능한 함수입니다. 기본사용법 1 2 3 4 5 6 7 8 9 10 11 //function 함수이름(매개변수){ // 함수가 호.. taehyeon-smilestudy.tistory.com Html의 기본 요소를 불러옵니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document hello! Colored by Color Scripter cs JS에서 querySelector를 이용하여 h2를 검색합니다. 1 const.. 2022. 7. 9. #7. 자바스크립트(JavaScript) - 조건문(switch문), 삼항연산자 특정 조건 만족 시(참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다. switch문 문법 switch (조건값){ case 값1 : 실행문 break; ==> 조건값이 case절에 부합하면 밖으로 빠져나갑니다. case 값2 : 실행문 break; default : ==> 조건값이 case절 모두에 해당하지 않을경우 default절이 실행됩니다. 실행문 break; } 1 2 3 4 5 6 7 8 9 10 11 12 const num = 10 switch (num % 2){ case 0 : console.log("해당 값은 짝수입니다") break; case 1 : console.log("해당 값은 홀수입니다") break; default : console.. 2022. 6. 25. #6.자바스크립트(JavaScript) - 조건문(if문) 조건문이란? 특정 조건 만족 시(참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다. if문 문법 1. if(표현식){ 실행문; => 표현식이 참 일 때 실행문을 실행합니다. } 1 2 3 4 5 6 7 if (x == y){ console.log("x와 y는 같습니다."); } // 연산자 : == 같다 // && and // || or cs 2.if(표현식){ 실행문; } else { 실행문; } 1 2 3 4 5 6 if (x == y){ console.log("x와 y는 같습니다."); } else{ console.log("x와 y는 같지 않습니다."); } Colored by Color Scripter cs 3. if else문 안에 다시 if문으로 .. 2022. 6. 25. 이전 1 2 3 4 5 다음
