#4.0
Input value
<input value = "" type="text" placeholder="what is your name?" />
1. value
input에 보이는 텍스트값
2. placeholder
value 안에 아무것도 없을 때 input에 보이는 값
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Momentum</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id = "login-form">
<input value = "" type="text" placeholder="what is your name?" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
</html>//#1
//const loginForm = document.getElementById("login-form");
//const loginInput = loginForm.querySelector("input");
//const loginButton = loginForm.querySelector("button");
//#2
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginButton(){
console.dir(loginInput.value);
//value는 태그 안의 'value' attribute를 가리키는 것임
}
loginButton.addEventListener("click", onLoginButton);#4.1 4.2 4.3
Form Submision
const loginForm = document.getElementById("login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(potato){ //이벤트 값을 받는 인자 potato
potato.preventDefault();
console.log(potato);
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);event값
addEventListner("submit", onLoginSubmit);
이 코드는 submit이 실행되었을 시 onLoginSubmit()의 첫번째 인자에event값을 전달한다.
event.preventDefault();
해당 이벤트의 기본 기능을 제거한다. form의 경우 값을 제출하면 페이지가 새로고침 되는데 이 코드를 쓰면 새로고침을 방지할 수 있다.
#4.4
` ` 백틱
greeting.innerText = 'Hello ' + username;
greeting.innerText = `Hello ${username}`; //위와 완전히 동일
상수명
const HIDDEN_CLASSNAME = "hidden"; // 상수명은 대문자로 선언#4.5 #4.6
local storage
localStorage.setItem('username', username);localStorage.getItem('username');localStorage.removeItem('username');localStorage.clear();#4.7 5.1
Interval
특정 함수를 주기마다 실행함
setInterval(sayHello, 5000); //sayHello함수를 5000ms 마다 실행
Timeout
setTimeout(sayHallo, 7000); //sayHallo 함수를 7초 뒤에 한번만 실행#5.1
Date()
new Date(); //date 출력const date = new Date();
date.getDay; //요일 출력
date.getFullYears //연도 출력
date.getHours; //시간 출력
date.getMinutes; //분 출력
date.getSeconds; //초 출력#5.2
padStart()
문자열의 길이에 따라 앞에 문자 추가
"1".padStart(2, "0"); // 문자열의 길이가 '2' 이하라면 앞에 "0" 추가
"hello".padStart(20, "x") // 문자열의 길이가 '20'이하라면 앞에 "x"추가String()
숫자를 문자열로 변환
console.log(String(1)); // "1"#6.0
Math.random()
Math.random(); // 0에서 1사이의 숫자
Math.random()*10; // 1에서 10사이의 숫자
Math.ceil, Math.floor, Math.round
Math.round(1.8) //반올림 - 2
Math.ceil(1.8) //천장에 닿게 - 2
Math.floor(1.8) //바닥에 닿게 - 1'Web > JS' 카테고리의 다른 글
| 객체를 선언할 때 new Object()를 생략해왔다? (0) | 2022.01.19 |
|---|---|
| window는 사실 생략되어 있다? / document는 window의 자식 (0) | 2022.01.19 |
| js- 이론#4 (0) | 2021.06.20 |
| js - 이론 #2 (0) | 2021.06.09 |
| js - 이론 #1 (0) | 2021.06.07 |