JavaScript를 Backend에서 사용하기 전에 필요한 문법을 예제와 함께 빠르게 정리하고 있다. 일단 예제는 아래와 같은 HTML 코드가 있고, 이를 사용하여 element를 가져오는 querySelector를 연습한다.
// #1. 로그인 버튼(btnLogin)을 눌렀을 때 console 출력
document.querySelector("#btnLogin").onclick=function () {
console.log(document.querySelector("#domain").value);
console.log(document.querySelector("#userId").value);
console.log(document.querySelector("#password").value);
};
// #2. 가입하기 버튼 (btnRegister)을 눌렀을 때 console 출력
document.querySelector("#btnRegister").onclick=function () {
console.log(document.querySelector("#userName").value);
console.log(document.querySelector("#userEmail").value);
};
console.log("=======radio check=======");
// #3. Radio check
// #3-1. 여러 개의 radio 중에 현재 선택된 radio를 가져오고 싶을 때
console.log(document.querySelector("input[name='gender']:checked").value);
// #3-2. 특정 radio button (female)이 선택되었는지 확인
if (document.querySelector("#female").checked) {
console.log("female is checked!");
}
querySelectorAll
사용 console.log("=======check box=======");
// #4. checkbox
// #4-1. 선택된 hobby모두 출력
document
.querySelectorAll("input[name='hobby']:checked")
.forEach((el) => console.log(el.value));
// #4-2. 특정 check box (movie)가 선택되었을 때
if (document.querySelector("#movie").checked) {
console.log ("movie is selected!");
}
<select name="major" id="major" multiple>
console.log("=======select=======");
// #5. select
// #5-1. 선택된 항목 모두 출력
document.querySelectorAll ("#major option:checked")
.forEach((el)=> console.log(el.value));
// #5-2. 특정 항목이 선택되었는지 확인
if (document.querySelector("KL").checked) {
console.log("KL is selected!");
}
checked
를 사용했더니 오류가 났다 -> dir
을 통해 확인을 해봄 -> selected:true
를 확인selected
를 사용하여 특정 항목이 선택되었는지 확인 if (document.querySelector("#KL").selected) {
console.log("KL is selected!");
}
e.keyCode==13
은 enter key를 의미onkeydown
이 발생하였을 때 function은 arrow function으로 만들어 봄e.preventDefault()
사용 document.querySelector("#searchWord").onkeydown = (e) => {
console.log("=======key event=======");
console.log(e.keyCode);
if (e.keyCode == 13) {
console.log(e.target.value);
e.preventDefault();
}
};