<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>name 속성 선택</title>
</head>
<body>
<!-- 메소드 매개변수는 검사하지 않는다. 화면으로부터 받은 데이터는 검사하지 않는다.
왜냐하면 완벽한 데이터만 받기 때문에. 그래서 서버 쪽에서 또 검사할 필요가 없다. -->
<form action="" name="join">
<div>
<input type="text" name="user-id" placeholder="아이디">
</div>
<div>
<input type="password" name="user-password" placeholder="비밀번호">
</div>
<div>
<!-- HTML에서 checked 절대 쓰지 않기! javascript에서 해제하려고 해도 남아있다 -->
<label>
<input type="checkbox" name="language" value="c">C언어
</label>
<label>
<input type="checkbox" name="language" value="java">JAVA
</label>
<label>
<input type="checkbox" name="language" value="python">Python
</label>
</div>
</form>
</body>
<script>
// form태그의 name에 작성한 이름으로 객체가 자동 생성된다.
// document.${form태그의 name값}으로 form객체를 가져온다.
console.log(document.join);
console.log(document.join['user-id'])
</script>
</html>
// form은 forEach 존재한다.
// form 태그 안에 있는 name도 form객체의 property(속성)명이다.
// form 태그 안에 있는 input태그 중 name이 'user-id'인 객체를 가져올 때 아래와 같이 작성한다.
document.join['user-id']
// DOM객체를 통해 getElementsByName()을 사용할 수 있으나,
// form태그의 input 태그를 가져올 때에는 위의 방법이 더 편하다.
console.log(document.getElementsByName('user-id'));
document.getElementsByName('user-id').forEach((input)=>{
console.log(input);
})
// 유효성 검사
// 태생부터 false인 값
// false인 값 : "", undefined, null, 0
if(!document.join['user-id'].value){ //사용자가 입력한 값 = value
console.log("아이디를 작성해주세요!");
}
document.join.submit();
document.getElementsByName("language").forEach((checkbox)=>{
checkbox.checked = true;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택 실습</title>
</head>
<body>
<form action="" name="login">
<input type="text" name="email">
<input type="password" name="password">
<div>
<label>
<input type="checkbox" name="save-id" value="">
아이디 저장
</label>
</div>
</form>
</body>
<script>
// 이메일과 비밀번호 유효성 검사 진행
if(!document.password){
alert("비밀번호를 입력해주세요!")
}
if(!document.email){
alert("이메일을 입력해주세요!")
}
//OR
/*
document.login[email].value
document.login[password].value 이용
*/
// 아이디 저장을 처음부터 체크로 설정
const saveId = document.login['save-id'];
saveId.checked = true;
</script>
</html>
const email = document.login.email;
const password = document.login.password;
const checkId = document.getElementsByName("save-id");
const saveId = document.login['save-id']; //단일 요소 직접 참조
if(!email.value){
console.log("이메일을 입력하세요!")
}
if(!password.value){
console.log("비밀번호를 입력하세요!")
}
saveId.checked = true; //얘는 되는데
checkId.checked = true;//얘는 안되는 이유 :
// document.getElementsByName("save-id")가 요소의 배열(정확히는 NodeList)을 반환
// 단일 요소가 아닌 여러 요소를 포함하는 NodeList 객체를 반환
// checked 속성을 배열에 직접 적용할 수 없다
// checkId가 NodeList, 특정 요소에 접근하려면 인덱스 사용
// checkId[0].checked = true;
'front-end > javascript' 카테고리의 다른 글
| Javascript DOM - CSS선택자로 가져오기 (0) | 2024.04.05 |
|---|---|
| Javascript DOM - id로 가져오기 (0) | 2024.04.04 |
| Javascript DOM - class로 가져오기 (0) | 2024.03.29 |
| Javascript 모듈화 + 비동기 처리 3 (0) | 2024.03.29 |
| Javascript 모듈화+비동기 처리 2 (0) | 2024.03.28 |
