2.10 복습
form
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<input type="submit" value="Log In" /> <!--button과 같은 역할. Enter를 눌러도 동작// 전송할 때마다 새로고침을 함(form과 input으로)-->
</form>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<input type="submit" value="Log In" /> <!--button과 같은 역할. Enter를 눌러도 동작// 전송할 때마다 새로고침을 함(form과 input으로)-->
</form>
보통 input에 기능을 넣어줄 때 사용.
form 안에 input을 만들어 주면 엔터로도 submit이 가능하다.
input
input이 server에 전송을 할 것이 있다면, 무조건 require을 넣어준다.
그렇지 않으면 아무것도 입력 안 하고 유저가 서버에 전송을 할 수 있기 때문이다.
require을 넣어준다면 브라우저에서 그것을 막아준다.
<input type="text" placeholder="Write a To Do and Press Enter" required/>
document
head, body, title은 document.body 이런식으로 바로 불러올 수 있지만 그 외는 querySelector나 getElementsByClassName 등으로 불러야 한다.
const h11 = document.querySelector(".hello h1")
html에 있는 h1 tag에서 hello라는 class 가진 h1 tag를 h11이라는 변수에 넣어 javascript에서 접근할 수 있게 한다.
js에서 html class 변경 가능
function handleTitleClick(){
const activeee = "active"
if(h11.className === activeee) {
h11.className = "";
} else {
h11.className = activeee
}
Event
h11.addEventListener("click", handleTitleClick) === h1.onclick = handleTitleClick;
"click" -> EVENT 이름. onclick을 eventlistener를 이용하면 저렇게 쓴다.
hadleTitleClick -> 내가 만든 함수.
클릭을 하면 함수를 실행한다.
특정 Tag를 불러와서 console.dir()로 보면 on이 붙어있는 것은 전부 Event 함수
preventDefault()
html에서 form tag 안에 input을 넣어 설정해줘야 함
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<input type="submit" value="Log In" /> <!--button과 같은 역할. Enter를 눌러도 동작// 전송할 때마다 새로고침을 함(form과 input으로)-->
</form>
const loginForm = document.querySelector("#login-form")
function onLoginSubmit(event){
// const username = loginInput.value;
event.preventDefault(); // 어떤 event의 기본 행동이든지 발생되지 않도록 막는 것.
console.log(loginInput.value)
}
loginForm.addEventListener("submit", onLoginSubmit) // click이 아니고 submit을 쓴다.
loginForm으로 html 파일에서 id가 login-form인 것을 불러온 후 eventlistener로 "submit"(form tag 안에서 input으로 submit을 만들면 굳이 click 및 button tag를 안만들어도 버튼이 만들어지고 submit이 된다.)을 설정한 후 onLoginSubmit 함수를 실행하면 누를 때마다 화면이 새로고침이 된다.
그래서 그것을 막기 위해 사용하는것이 preventDefault()이다.
handleClickLink()에 매개변수를 줘서 (여기서는 event) event에서 event 함수가 실행될 때 주는 정보를 받은 후 event.preventDefault()로 html에서 form tag 안에 input type=submit이 실행될 때 기본적으로 실행되는 것을 막는다.
즉, preventDefault()는 기본적으로 자바스크립트 및 html에서 제공하는 작동을 막는다
classList
const h11 = document.querySelector(".hello h1")
function handleTitleClick(){
const activeee = "active"
if(h11.classList.contains(activeee)) { //h11의 class로 activeee가 있는지 확인한다
h11.classList.remove(activeee); //h11의 class에 activeee가 있다면 activeee를 제거한다.
} else {
h11.classList.add(activeee); //h11의 class에 activeee가 없다면 추가한다.
}
}
중요 포인트는 기존에 어떤 class가 h11에 있든 건들지 않고 그 뒤에 추가 및 제거
위 코드와 같은 역할을 하는 것이 있다.
function handleTitleClick(){
h11.classList.toggle("active")
}
class는 띄어쓰기로 여러개의 class를 넣을 수 있다.
<title class="홍왕열1 홍왕열2">Momentum</title>
Author And Source
이 문제에 관하여(2.10 복습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongwr/2.10-복습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)