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); //마루라는 뜻으로 소수점 아래를 무조건 무시하고 정수만 출력
// 180% 수강완료!
