728x90
반응형
기존 코드를 이용하여 자바스크립트 코드를 작성하시오.
문제 1
아이디와 비밀번호를 입력하지 않았을 때, 입력하라는 창을 띄우시오.
▶ 코드
<script>
function join () {
var id = document.getElementById('uid');
if(id.value == '' || id.value == undefined){
alert("아이디를 입력하시오.");
return;
}
var pwd1 = document.getElementById('pwd1');
if(pwd1.value == '' || pwd1.value == undefined){
alert("비밀번호를 입력하시오.");
return;
}
}
</script>
▶ 출력 결과
문제 2
비밀번호를 4자리 미만으로 출력했을 때 4자리 이상 입력하라는 창을 띄우시오.
▶ 코드
console.log(pwd1.value.length);
if(pwd1.value.length < 4){
alert("비밀번호를 4자리 이상 입력하시오.");
return;
}
▶ 출력 결과
- return 을 작성하여 join 메소드를 빠져나간다.
문제 3
두 개의 비밀번호가 다를 때, 비밀번호가 다르다는 창을 띄우시오.
▶ 코드
var pwd2 = document.getElementById('pwd2');
if (pwd1.value != pwd2.value){
alert("비밀번호가 다릅니다.");
return;
}
▶ 출력 결과
문제 4
가입 경로가 블로그일 때 블로그는 선택할 수 없다는 창을 띄우고, 가입 경로를 검색으로 바꾸시오.
▶ 코드
var path = document.getElementById('path');
if(path.value == "blog") {
alert("블로그는 선택할 수 없습니다.");
path.value = "search";
return;
}▶ 출력 결과
- 가입 경로가 블로그에서 검색으로 바뀌었다.
기존 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>회원 가입_최종</title>
<style>
#container {
width:600px;
margin:10px auto;
}
ul {
list-style: none;
padding-left: 0;
}
li {
margin:10px;
}
.li_label {
width:120px;
line-height: 36px;
float:left;
font-weight:bold;
}
.txt_input {
width:300px;
height:30px;
}
select {
width:100px;
height:30px;
}
#buttons {
width:100%;
margin:30px auto;
text-align: center;
}
.but {
padding: 10px;
font-size: 15px;
}
/* input[required] {
border: 1px solid red;
} */
li label {
font-style: italic;
}
input:checked + label{
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<h1>회원 가입을 환영합니다</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label class="li_label" for="uid">아이디</label>
<input class="txt_input" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label class="li_label" for="umail">이메일</label>
<input class="txt_input" type="email" id="umail" required>
</li>
<li>
<label class="li_label" for="pwd1">비밀번호</label>
<input class="txt_input" type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label class="li_label" for="pw2">비밀번호 확인</label>
<input class="txt_input" type="password" id="pwd2">
</li>
<li>
<label class="li_label" for="path">가입 경로</label>
<select id="path">
<option value="blog">블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="etc">기타</option>
</select>
</li>
<li>
<label class="li_label" for="memo">메모</label>
<textarea cols="40" rows="4" placeholder="남길 말씀이 있다면 여기에"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input class="but" type="submit" value="가입하기">
<input class="but" type="reset" value="취소">
</div>
</form>
</div>
</body>
</html>728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [Vue & AJAX & Spring] UP&DOWN (0) | 2023.08.02 |
|---|---|
| [JavaScript] 현재 시간 팝업 띄우기 (32일차) (0) | 2023.06.29 |
| [JavaScript] 배열 내용을 테이블로 출력 (32일차) (0) | 2023.06.29 |
| [JavaScript] 텍스트 사라지게 만들기 (31일차) (0) | 2023.06.28 |
| [JavaScript] 자바스크립트 sum 함수 만들기 (31일차) (0) | 2023.06.28 |