웹페이지
JAVASCRIPT STEP 14 - 응용 예제
IT의 큰손
2023. 4. 21. 17:35
728x90
★ 문제 1
- 아래와 같은 문서를 생성하시오.
- 버튼을 클릭해서 텍스트 박스의 길이를 변경하시오.
- Long > size(50)
- Short > size(20)
■ 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-weight: bold;
color : gray;
}
#name1, #name2, #name3 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>데이터 입력</h1>
<form name="form1">
이름 : <input type="text" id="name1"><br>
나이 : <input type="text" id="name2"><br>
별명 : <input type="text" id="name3"><br>
<input type="button" id="btn1" value="Long">
<input type="button" id="btn2" value="Short">
</form>
<script>
window.document.form1.btn1.onclick = m1;
window.document.form1.btn2.onclick = m2;
function m1() {
window.document.form1.name1.size = 50;
window.document.form1.name2.size = 50;
window.document.form1.name3.size = 50;
}
function m2() {
window.document.form1.name1.size = 20;
window.document.form1.name2.size = 20;
window.document.form1.name3.size = 20;
}
</script>
</body>
</html>■ 실행결과
★ 문제 2
- 아래와 같은 문서를 생성하시오.
- 아이디 유효성 검사를 하시오.
- 길이 > 4~12자 이내
- onkeyup
■ 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-weight: bold;
color : gray;
text-align: center;
}
#name1, #name2, p {
margin-left: 41%;
margin-bottom : 1px;
}
#name2 {
border : 0px;
color : red;
}
</style>
</head>
<body>
<h1> 회원 가입</h1>
<form name="form1">
<p>아이디 :</p>
<input type="text" id="name1"><br>
<input type="text" id="name2" value="">
</form>
<script>
var txt1 = window.document.form1.name1;
var txt2 = window.document.form1.name2;
txt1.onkeyup = m1;
function m1() {
var txt1var = window.document.form1.name1.value.length;
if(txt1var < 4){
txt2.value='아이디가 너무 짧습니다.';
}else if(txt1var >12) {
txt2.value='아이디가 너무 깁니다.';
}else {
txt2.value='올바른 아이디입니다.';
}
}
</script>
</body>
</html>
■ 실행 결과
★ 문제 3
- 아래와 같은 문서를 생성하시오.
- 마우스를 올리면 고양이 크기를 키우시오.
- 고양이를 클릭하면 크기를 원래대로 줄이시오.
- 숫자(1~5)를 누르면 고양이 크기를 키우시오.
- esc 키를 누르면 크기를 원래대로 줄이시오.
■ 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-weight: bold;
color : gray;
font-size : 50px;
}
</style>
</head>
<body>
<h1>고양이</h1>
<form name="form1">
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
<img src="images/catty04.png" id="cat4">
<img src="images/catty05.png" id="cat5">
</form>
<script>
window.onload = function() {
document.images["cat1"].onmouseover = function() {
document.images["cat1"].width += 5;
};
document.images["cat2"].onmouseover = function() {
document.images["cat2"].width += 5;
};
document.images["cat3"].onmouseover = function() {
document.images["cat3"].width += 5;
};
document.images["cat4"].onmouseover = function() {
document.images["cat4"].width += 5;
};
document.images["cat5"].onmouseover = function() {
document.images["cat5"].width += 5;
};
document.images["cat1"].onclick = function() {
document.images["cat1"].width = 128;
};
document.images["cat2"].onclick = function() {
document.images["cat2"].width = 128;
};
document.images["cat3"].onclick = function() {
document.images["cat3"].width = 128;
};
document.images["cat4"].onclick = function() {
document.images["cat4"].width = 128;
};
document.images["cat5"].onclick = function() {
document.images["cat5"].width = 128;
};
document.onkeydown =
function(evt) {
if(evt.keyCode==49){
document.images["cat1"].width += 5;
}else if(evt.keyCode==50){
document.images["cat2"].width += 5;
}else if(evt.keyCode==51){
document.images["cat3"].width += 5;
}else if(evt.keyCode==52){
document.images["cat4"].width += 5;
}else if(evt.keyCode==53){
document.images["cat5"].width += 5;
}else if(evt.keyCode==27){
document.images["cat1"].width = 128;
document.images["cat2"].width = 128;
document.images["cat3"].width = 128;
document.images["cat4"].width = 128;
document.images["cat5"].width = 128;
}
}
}
</script>
</body>
</html>
■ 실행결과
728x90