728x90 반응형 개발공부/JavaScript21 [바닐라 js로 크롬 앱만들기] 인강정리 (#7) 목차 todo리스트만들기 todo리스트삭제기능 새로고침해도 todo리스트를 유지하고싶어 : 로컬스토리지 리스트가 덮어씌워지는걸 개선해보자 로컬스토리지 데이터 삭제하기 1. todo리스트 만들기 indext.html 00:00 Log in required: 필수요소로 지정하기 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = document.querySelector("#todo-form input") function paintToDo(newTodo) { const li = document.createElement("li"); co.. 2022. 4. 2. [바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) 목차 시계만들기 (일정간격으로 동작하도록하는 interval) 시계만들기 (자릿수를 채워주는 padStart()) 랜덤텍스트 (1이하의 랜덤한 소수를 만들어주는 Math.random()) 랜덤이미지 (html에서 요소를 새롭게 생성하는 createElement()) 1. interval :매번 일어나야하는 무언가. (ex. 2초마다), html 00:00 clock.js const clock=document.querySelector("h2#clock"); function getClock() { const date = new Date(); //console.log(`${date.getHours()}:${date.getMinutes}:${date.getSeconds`) clock.innerText = `${.. 2022. 3. 26. [바닐라 js로 크롬 앱만들기] 인강정리 (#4) #4강 (실습위주) 목차 id와 class document.getElementByid() input박스 버튼이 눌리는 이벤트추가해보기 div가 아닌 form을 사용해보자. submit은 새로고침되는 특징이있다. 새로고침하지않도록 submit조작하기 링크의 동작을 막는 조작하기 hidden을이용한 숨기기 스토리지 사용하기 1. document.querySelecor("#login-form") 버튼클릭시 이벤트 발생 -> 값을 입력하면 console에 찍히도록 추가 index.html Log in script.js //input과 button을 가져와봅시다. const loginForm = document.getElementById("login-form"); const loginInput = loginFor.. 2022. 3. 21. [바닐라 js로 크롬 앱만들기] 인강정리 (#3) #3 목차 element를 가지고오는 방법들 이벤트 2번을 좀 다른 방법으로 한다면... 컬러와같은 스타일은 css에서 적용하도록 해보자. classList 사용해보기 1. element를 가지고오는 방법들... ha 1 ha 2 ha 3 document.getElementsByClassName("클래스 명") : 여러개의 같은 element이름을 가진 애들을 한꺼번에 불러올때. -> document.getElementsByClassName("hello") // result : [h1.hello, h1.hello, h1.hello] document.querySelector(".hello h1") : class명이 hello인것중 하위의 h1에대해 가져오기 단,여러개인경우 처번째것만 가져온다. ->cons.. 2022. 3. 20. [바닐라 js로 크롬 앱만들기] 인강정리 (#1~#2 까지) 목차 자바스크립트의 특징 변수 null과 undefined array function 실습예제와 정리 자바스크립트의 특징 - 우리는 자바스크립트를 설치하지 않았지만, 그것을 크롬에서 빈번하게 사용했었다! - 브라우저에 자바스크립트가 내장되어있기때문이다. 변수 - const : 변하지않는 상수, 재할당 불가 (값을 추가하는것은 가능하나 업데이트가 불가하다.) - let : 값 변경가능, 재할당 가능함 - var : 중복선언이 가능하고, 함수레벨 스코프를 가진다. (하단 블로그참고) - 결론 ㅣ 대부분 const를 쓰고 -> 종종 let을 쓰고 -> var는 되도록 쓰지말자.(ES6 이후론안씀) null과 undefined - null : 자연적 발생 x, 비어있다는 자체를 표현하기위한 의도가있다. - um.. 2022. 3. 17. [표현정규식] 아이디, 이름, 비밀번호,이메일, 휴대폰번호 유효성검사 //모든 공백 체크 정규식 var empJ = /\s/g; //아이디 정규식 var idJ = /^[a-z0-9]{4,12}$/; // 비밀번호 정규식 var pwJ = /^[A-Za-z0-9]{4,12}$/; // 이름 정규식 var nameJ = /^[가-힣]{2,6}$/; // 이메일 검사 정규식 var mailJ = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; // 휴대폰 번호 정규식 var phoneJ = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/; 위의 코드에서 사용한 정규표현식을 간단하게 언급하고 가면.. → / : 자바스크립트의 정규표현식의 처음.. 2021. 10. 12. 이전 1 2 3 4 다음 728x90 반응형
