📖 Login Part
1. Form Submission
- input의 유효성 검사를 작동시키기 위해서는 input이 반드시 form 안에 있어야 한다.(div, span x)
- input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 내가 작성한 form이 submit되어서 페이지가 새로고침된다.
<form id="login-form">
<input
required maxlength="15"
type="text"
placeholder="What is your name?"/>
<button>Log In</button>
</form>
2. preventDefault()
function onLoginSubmit(event) {
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);preventDefault(): 어떤 이벤트의 기본 행동이 발생하지 않도록 막는 것
기본행동 : 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작
ex) form을 submit하면 자동 새로고침 된다 (기본동작) -> preventDefault() 를 추가함으로써 새로고침을 막는다.
- 코드설명
1) submit 이벤트가 발생했을 때 JS는 onLoginSubmit 함수를 호출하고
event(관행) 라는 argument에게 해당event에 대한 정보를 준다. -> JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어준다.
2) 그 후 기본동작(새로고침)을 막고 막아진event에 대한 정보를 콘솔에 출력한다
3. 문자열 출력, String 변수, classList 활용
greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`; //`` 백틱사용!- 두 코드는 같은 의미이다. String을 받아서 출력할 때는 가급적 2번째 방식을 사용하자 띄어쓰기 신경 안 써도 된다.
const HIDDEN_CLASSNAME = "hidden"; - 일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용!
- 만약 string을 작성하다가 오타가 나면 자바스크립트를 이를 지적하지 않을 것이다. 하지만 변수명이 오타가 나면, 자바스크립트는 지적을 해준다. (error로) -> 반복되는 string은 대문자 변수로 지정해놓자!
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add("hidden");
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}- classList를 활용하여 form은 hidden 시켜주고 gteeting의 innerText는 나오게 해주었다.
4. Local Storage
- 우리가 브라우저에 뭔가를 저장할 수있게 해준다.
- 나중에 가져다 쓸 수 있음
- key와 value로 이루어져 있는 작은 DB라고 생각하자
local Stroage는 기본적으로 console에 있다.
사용법
localStorage.setItem("username", username);이 외에도 getItem, removeItem 등이 있다.
결과
📖 Clock Part
1. Interval
interval은 ‘매번’ 일어나야 하는 무언가를 말 한다.
function sayHello() {
console.log("hello");
}
setInterval(sayHello, 5000);- setInterval은 두개의 argument -> 호출하려는 function, 시간(ms단위)
- 5000ms -> 5초
- 5초마다 "hello"를 출력한다
clearInterval()로 해제 가능
2. Timeout
Timeout은 기다렸다가 한 번만 실행한다.
setTimeout(sayHello, 5000);
3. padStart(), padEnd()
date.getHours().padStart(2, "0");- max length, string 2개의 argument를 가진다
- 만약 길이가 2가 되지 않는다면 앞에 “0”을 넣는다 (padEnd는 뒤에 넣는다)
- getHours 값이 “1” 일 경우 -> “01”
4. Clock 🕰
<!-- html -->
<h2 id="clock">00:00:00</h2>//javascript
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0"); // String으로 형 변환
const minutes = String(date.getMinutes()).padStart(2, "0"); // String으로 형 변환
const seconds = String(date.getSeconds()).padStart(2, "0"); // String으로 형 변환
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock(); // 처음에 한번 실행하고
setInterval(getClock, 1000); // 1초마다 계속 실행
📖 Quote and Background
1. Math.random()
random()함수는 0~1 사이의 수를 출력해준다
여기다 10을 곱하면 0~10 사이의 수, 11을 곱하면 0~11 사이의 수 이렇게 응용이 가능하다.
2. Quote
const quotes = [
{
quote: "The way to get started is to quit talking and begin doing.",
author: "Walt Disney",
}, .... //10개의 명언 object 배열
];
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; //floor -> 내림
quote.innerText = todaysQuote.quote; // quote, author은 property
author.innerText = todaysQuote.author;- random 함수와 배열의 길이를 곱하여 object를 랜덤 하게 출력
3. Background
const images = ["0.jpeg", "1.jpeg", "2.jpeg"]; //img 폴더에 넣어놓은 이미지 파일들
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage); 3번째 줄 부터 해석
createElement("img"): JS에서 html element를 생성하는 방식이다
bgImage.src = `img/${chosenImage}`;
appendChild(bgimage): 생성한 html element를 html의 body 아랫부분에 넣어준다.
