니코 강의를 보니까 주로 점표기법을 통해 객체 참조를 한걸 바로 사용하는게 아니라,
새로운 변수를 선언하고 그 변수에다가 객체 참조를 할당해서 사용하네! 아하 이렇게 하는거구나
예를 들어
const username = loginInput.value;이런 식으로.
html form 태그 내부의 input의 기능 중
required, maxlength, type, placeholder 등이 있다. 이건 브라우저 자체의 기능. oh yeah
form 안에서 enter 을 누르고, input 이 더 존재하지 않는다면 자동으로 submit 된다는 규칙이 있다. 코코아톡 클론 강의도 들어야해?ㅜㅜ
form 형태에다가 addEventListener 을 추가하면, submit 행위도 모니터링할 수 있구나? 버튼 형태면 click이 있던데
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>momentum</title>
</head>
<body>
<form id="login-form">
<input type="text" placeholder="what is your name" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
</html>//app.js
// const loginForm = document.querySelector("#login-form");
// const loginInput = loginForm.querySelector("input");
// const loginButton = loginForm.querySelector("button");
const loginForm = document.querySelector("login-form")
const loginInput = document.querySelector("#login-form input");
// const loginButton = document.querySelector("#login-form button");
// function onLoginBtnClick(){
// const value = loginInput.value;
// if(value===""){
// alert("please fuckin write anything");
// } else if(value.length>10){
// alert("너무 길어 에바야");
// }
// }
function onLoginSubmit(){
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit)
// loginButton.addEventListener("click",onLoginBtnClick);
argument = 인자
parameter = 변수
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(tomato){
tomato.preventDefault();
// const username = loginInput.value;
// console.log(username);
console.log(tomato);
}
loginForm.addEventListener("submit", onLoginSubmit);
뜬금없는 onLoginSubmit 함수의 tomato 인자. 이친구는 말이야, 이 함수가 하나의 인자를 받고 그걸 Js에 넘겨주도록한다.
원래 onLoginSubmit 함수를 호출하면, 빈상태로 하는게 아니라 Js가 우리에게 유효한 첫번째 인자를 제공한다. 자동으로.
preventDefault(); 는 기본 동작을 막는다.
오호.
이제 4.3강, Events part Two
form 관련 내용을 엎고 링크 관련 내용을 하려나보다. 꼭 그런건 아니네.
console.dir();은 log 와 다르게 부가정보까지 다보여준다. 알지?
addEventListener 로, click을 듣고, 내가 만든 함수를 실행시킨다면, Js에서는 그 함수에 자동으로 가상의 argument를 넣고, 그 argument는, listen 한 event에 따라, 자동으로 다양한 기본정보들을 포함해서 뱉게 된다. click, submit 모두 다르다.
이유는 모르겠지만, 니콜라스가 무척이나 강조하는 내용 중 하나는, addEventListener 메소드를 사용할 때, 두번째 매개변수 자리에 넣을, 우리가 직접만든 함수에는, ()를 쓰면 안된다는 것이다. 브라우저가 알아서 실행시켜줄테니, play버튼과 같은 ()를 절대 포함시키지 말라는 것이다.
제 4.4강 Getting username
loginForm.classList.add("hidden");
greeting.innerText = "Hello" + username;
greeting.classList.remove("hidden");
// .classList.add("xxx");
// .classList.remove("xxx");
// .innerText = "xxx";이 세개의 기능이 class 명을 추가하거나 제거하고, 태그 내의 텍스트 내용을 정하는 그런 메소드 들이구나!
저 위에 "hidden" 도, 여러번 사용하기 시작하는 거 같으니,
const HIDDEN_CLASSNAME = "hidden"; 이렇게 변수명에 할당을 해주는게 좋다고 한다.
왜냐!! vscode같은 IDE에서 string literal*은 오타검사를 안해주거든!!!
*리터럴 = literal = 문자그대로의, 라는 뜻으로, 프로그래밍에서, 변수나 상수에 저장되는 값 자체를 가리킵니다.(객체 리터럴, 문자열 리터럴)
이렇게 모두 대문자로 쓰는 것은, 컨벤션인데, 주로 중요하지 않은, string만 포함된 변수를 대문자로 표기하는 컨벤션이 있대.
참고로 string이랑 변수를 같이 쓰는 방법은 `문자는 이렇게 ${변수명} 쓰는거야` 이거다. ``는 백틱인데, option 누르고 ₩ 누르면된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
.hidden {
display: none;
}
</style>
<title>momentum</title>
</head>
<body>
<form id="login-form">
<input type="text" />
<button>submit</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
console.log(username);
greeting.innerText = "Hello " + username;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
</script>
</body>
</html>4.5 Saving Username / 4.6 Loading Username
value 저장하기.
localStorage 이건, F12 눌러서 개발자도구 보고, application 에 보면 보인다.
localStorage API를 보면, 다양하고 멋진 method들을 확인할 수 있다고한다.
localStoage.setItem("키","밸류"); -> 설정하기 나이스
localStorage.getItem("xxx"); -> 가져오기 나이스?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
.hidden {
display: none;
}
</style>
<title>momentum</title>
</head>
<body>
<form id="login-form" class="hidden">
<input type="text" />
<button>submit</button>
</form>
<h1 id="greeting" class="hidden"></h1>
</body>
<script>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY,username);
paintGreeting(username);
}
function paintGreeting(username){
greeting.innerText = `hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null ){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
} else{
paintGreeting(savedUsername);
}
</script>
</html>여기까지 했다.
'data lab' 카테고리의 다른 글
| promise, async, await 공부하기 (0) | 2024.07.22 |
|---|---|
| 형님의 Js 화살표함수와 구조분해할당, 얕은복사 깊은복사 개인과외 - 3 (0) | 2024.07.16 |
| 형님의 js 필수 전수업review 과외 2 (0) | 2024.07.15 |
| 형님의 Js 필수 기본개념, 내장 배열 method 개인과외 - 1 (0) | 2024.07.13 |
| 백준 2525번 python 파이썬 (1) | 2024.07.10 |