vanilaJS

[JS]2021-1115 자바스크립트 .createElement() & .appendChild - HTML 요소 추가하기

document.creatElement() document 객체의 메소드로, HTML 요소를 생성할 수 있다. const bgImage = document.createElement("img"); //img태그 생성 부모노드.appendChild() 특정 요소에 자식 요소를 추가할 수 있다. document.body.appendChild(bgImage); //body 내부에 bgImage를 추가 배열 내의 랜덤 이미지 화면에 출력하기 const images = [ "0.jpg", "1.jpg", "2.png" ]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElemen..

[JS]2021-1114 자바스크립트 Math - Random number 랜덤 숫자 생성 /반올림, 올림, 버림

nomadcoders VanilaJS #6.0~2 강의를 정리한 내용입니다. Math.random() 랜덤한 숫자를 만들 수 있는 함수. 0이상 1 미만의 난수(부동소수점)을 랜덤하게 만든다. See the Pen Untitled by hyejj19 (@hyejj19) on CodePen. Math.floor() 소수점 이하를 버림하는 메소드. 참고 : .ceil() 올림 / .round() 반올림. 소수점 이하를 버림으로써, 정수를 만들 수 있다. 난수의 범위를 생각해 Math.random * n을 하면, 원하는 범위의 정수 난수값을 얻을 수 있다. See the Pen random2 by hyejj19 (@hyejj19) on CodePen. 이를 배열에 적용해, 새로고침 시 배열 내의 랜덤한 내용이..

[JS]2021-1114 padStart() - 문자열 시작 채우기(문자열을 채워 원하는 길이로 만들기)/ String() - 숫자를 문자열로 바꾸기

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. padStart() "1".padStart(4,"0"); // "0001"을 출력 String에서만 사용 가능한 함수로, 특정 문자열을 원하는 길이만큼, 원하는 문자열로 채울 수 있다. 사용 방법은 padStart(원하는 길이, 채우고자 하는 문자열) 자매품으로 padEnd()도 있다. String(number) number를 string으로 변환할 수 있다. string(556); //"556" 을 출력 Date 객체의 현재시간들은 number이기 때문에 padStart() 적용을 위해서 string 으로 변환해야한다. 그리고 .padStart를 적용해 자릿수가 2 미만일 경우 앞에 "0"을 붙여 출력하도록 한다. const ..

[JS]2021-1114 Date - 자바스크립트로 현재 시간 불러오기/ setInterval(),setTimeout() - 타이머 함수

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. new Date() new Date()를 호출하면, Date 객체를 불러온다. 이 함수를 인수 없이 호출하면 현재 날짜, 시간이 저장된 Date 객체를 반환한다. function getTime() { const date = new Date(); //new Date()는 Date 객체를 불러옴, 이 함수를 인수 없이 호출하면 현재 날짜 및 시간이 저장된 date 객체가 반환된다. clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; //Date 객체의 여러 메소드를 활용해, 현재 시간 값을 얻어올 수 있음. 이를 innerText로 화면에 ..

[JS]2021-1107 localStorage - If 문으로 정보 저장 여부 확인

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. if 문으로 localStorage 정보 저장 여부 확인하기 브라우저에 정보 저장 여부로 표시되는 화면의 내용이 달라지게끔 만들고자 한다. 로그인 정보가 있다면, 로그인 화면 없이 바로 인삿말이 뜨도록, if 문을 활용해 만들 수 있다. const savedUsername = localStorage.getItem(USERNAME_KEY); //로컬 스토리지에 담긴 username을 변수로 선언한다. if(savedUsername === null) { //만약 로컬 스토리지에 담긴 username이 null값, 즉 없다면 loginForm.classList.remove(HIDDEN_CLASSNAME); //form의 hidden상..

[JS]2021-1107 localStorage - CSS,HTML 조작

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. JavaScript로 CSS 조작하기 - classList 활용 Log in 사용자가 이름을 입력하고 버튼을 클릭해 submit을 하는 동시에, 로그인 폼이 사라지고 인사말이 뜨도록 해야 한다. form과 h1 모두 hidden이라는 클래스를 주고, 아래와 같이 css를 작성해 주었다. .hidden { display: none; } classList를 사용해 html의 class를 추가, 삭제, 변경할 수 있다. 반복해서 사용되는 string의 경우, 철자 오류 방지를 위해 변수로 선언해주는 것이 바람직하다. const HIDDEN_CLASSNAME ="hidden"; function onLoginSubmit(event) { ..

[JS]2021-1107 localStorage로 사용자 정보 저장

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. localStorage 브라우저 상에 데이터를 저장할 수 있는 웹 스토리지 api로, key와 이에 대응하는 value를 가진다. localStorage는 key에 대응하는 value값 찾기 혹은 삭제하기 등 여러 method가 있는데, 예를 들어 localStorage.getItem("key"); 이런 식으로 사용하면, "key"라는 key값에 대응하는 value를 return 해주며, key와 value는 항상 string이다. 만약 해당하는 데이터가 없다면 null 값을 반환받는다. 참고로 Web Storage에는 localStorage와 sessionStorage 두 가지가 있다. localStorage는 웹페이지의 세션..

[JS]2021-1104 form태그, event.preventDefault()

nomadcoders VanilaJS #4.1~2. form 태그를 쓰는 이유 html태그로, 사용자로 부터 정보를 받아올 수 있는 다양한 기능을 제공한다. 로그인, 회원가입 등 사용자가 입력한 정보를 서버로 전달할 필요가 있을 때 사용! (로그인 기능 만들 때 왜 div 안에 넣지 말고 form에 input을 써야하는지 잘 몰랐었는데, 오늘 알게됨.) Log in 위와 같이 input 태그를 통해 간단한 유효성 검사를 할 수 있다. input 태그를 사용하지 않고, 이를 자바스크립트로 작성하면 아래와 같다. function onLoginSubmit() { const username = loginInput.value; if (username === "") { alert("Please write your ..