VanillaJS 0420

hyj3363·2022년 4월 20일
0

App.js

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick(){
  const username = loginInput.value;
  if(username === ""){
    alert("please write your name")
  } else if (username.length > 15){
    alert("your name is too long.")
  }
}
loginButton.addEventListener("click",onLoginBtnClick)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Momentum</title>
</head>
<body>
  <div id="login-form">
    <input type="text" placeholder="What is your name?"/>
    <button>Log In</button>
  </div>
  <script src="app.js"></script>
</body>
</html>

js 에서 if else문을 이용하는거 보다는 html기능인 required 와 maxlength를 사용해서 같은 기능을 구현할 수 있다.

따라서 위 코드는 아래 코드와 같다.

app.js

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick(){
  const username = loginInput.value;
  console.log(username)
}
loginButton.addEventListener("click",onLoginBtnClick)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Momentum</title>
</head>
<body>
  <div id="login-form">
    <input required
    maxlength="15"
    type="text" 
    placeholder="What is your name?"/>
    <button>Log In</button>
  </div>
  <script src="app.js"></script>
</body>
</html>

js에서 if 문을 삭제하고 html에서 input에 기능을 추가한 것을 볼 수 있다.
이런 식으로 js에 너무 많은 기능을 추가하기 보다는 html 자체에 있는 기능을 사용해서 코드를 간략하게 짜도록 노력하자!


app.js

  greeting.innerText = "Hello " + username;
  greeting.innerText = `Hello ${username}`;

js를 통해서 html에 string과 변수를 합쳐 출력할 때 두가지 방법을 쓸 수 있다.
첫 번째 코드는 ""와 username이라는 변수를 + 로 합친 것 이고
두 번째 코드는 백틱₩₩ 으로 string을 적고 그 안에 ${}를 이용해 변수를 출력하는 것이다.
무엇을 사용하던지 본인의 취향이므로 나도 코드를 작성하며 뭐가 나에게 맞는지 찾아가야겠다.


랜덤 배경화면 설정하기

background.js

const images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"] 
// 저장한 image 이름으로 배열생성

const chosenImage = images[Math.floor(Math.random() * images.length)];
const image = document.createElement("img"); 
// <img></img> html태그 생성

image.src = `img/${chosenImage}`;
// 태그에 src를 추가 -> <img src="img/img4.jpg">

document.body.appendChild(image);
// html body에 내가 생성한 image를 추가
// appendChild는 맨뒤에, prepend는 맨앞에 추가됨

오늘 배운 것 간략 정리

event.preventDefault()
: form에서 submit을 했을 때 새로고침이 되지 않도록 한다. 이벤트의 기본 기능을 막는 것!

localStorage.setItem("key",value)
: 로그인 한 사람의 아이디를 기억해 놓는 것이다. 새로고침을 해도 다시 로그인하지 않을 수 있게 storage에 key와 value로 저장해놓는다.
localStorage.getItem("key") 로 key값에 대한 value로 불러올 수 있다.

setInterval(function, 1000)
:1000은 1초로 1초마다 첫번째 인자인 함수를 불러 오는 것이다.

setTimeout(function, 1000)
: 위와 비슷한 기능임

padStart(2,"0")
: 시계를 구현할 때 문자열의 길이가 2가 되지 않으면 문자열 앞에 "0"을 추가해줌으로서 1,2,3,4,5초로 나오던 시계가 01,02,03,04,05로 나오게 할 수 있다. 예를 들어

"hello".padStart(10,"x")
// "xxxxxhello"

단, padStart는 String에만 쓸 수 있기 때문에 만약 숫자에 적용시키고 싶다면

String(date.getHours()).padStart(2,"0");

위 코드 처럼 number을 String으로 변환시켜서 사용하면 된다.

Math

Math.round(1.1); //반올림
// 1
Math.ceil(1.1); //천장이라는 뜻으로 소수점이 있으면 무조건 반올림
// 2
Math.floor(1.999); //마루라는 뜻으로 소수점 아래를 무조건 무시하고 정수만 출력
// 1

80% 수강완료!

profile
Front-end Web Developer

0개의 댓글