실습(종합(1))
- 문제
<!--
마우스를 올려보세요
----------------------------------------(hr)
여기에 마우스를 올리면 배경색이 노란색으로 변합니다.
※ 배경색 변경은 노란색으로 하고, 초기 배경색은 흰색으로 한다.
※ 태그이름.style.background = '색이름';
-->
- 코드
<!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>자바스크립트 실습1</title>
<style>
body {
background-color: aqua;
}
div {
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<div onmouseover="this.style.background='yellow';" onmouseout="this.style.background='white';">
여기에 마우스를 올리면 배경색이 노란색으로 변합니다.
</div>
</body>
</html>
실습(종합(2))
- 문제
<!--
월화수목금토일
---------------------(hr)
000은 출근
사용자에게 요일을 입력받고 월~목은 출근, 다른 날은 휴일을 출력한다.
요일은 "월", "화", ... 형식으로 입력받는다.
-->
- 코드
<!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>자바스크립트 실습2</title>
</head>
<body>
<h3>월화수목금토일</h3>
<hr>
</body>
<script>
let dayOfWeek = prompt("오늘은 무슨 요일이에요?", "월화수목금토일");
let msg = "";
switch (dayOfWeek) {
case '월': case '화': case '수': case '목':
msg += dayOfWeek + "요일은 출근";
break;
case '금': case '토': case '일':
msg += dayOfWeek + "요일은 휴일";
break;
default:
msg += "잘못 입력했습니다.";
break;
}
document.write("<h1>" + msg + "</h1>");
</script>
</html>
실습(종합(3))
- 문제
<!--
분석 결과
--------------------------(hr)
통과!
정확한 암호가 입력될 때까지 계속 prompt()를 사용하여 암호를 입력받는다.
암호는 "호랑이"이다.
-->
- 코드
<!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>자바스크립트 실습3</title>
</head>
<body>
<h3>분석 결과</h3>
<hr>
</body>
<script>
while(true){
let pw = prompt("암호를 입력하세요");
const code = "호랑이";
if(pw == code){
document.write("<h2>통과!</h2>");
break;
}
}
</script>
</html>
실습(종합(4))
1. 문제 1
- 문제
<!--
pr("mo", 3);
결과 : momomo
위의 결과가 나오는 함수를 선언하여 사용한다.
출력기능은 전달받은 콜백함수를 사용한다.
-->
- 코드
<!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>자바스크립트 실습4</title>
</head>
<body>
</body>
<script>
let str = prompt("출력할 문자 입력");
let count = prompt("출력할 횟수 입력");
function pr(str, count, callback) {
if(callback) {
let result = "";
for(let i = 0; i < count; i++) {
result += str;
}
callback(result);
}
}
pr(str, count, function(result) {
document.write(result);
});
</script>
</html>
2. 문제 2
- 문제
<!-- 사용자가 입력한 문자와 횟수를 pr(str, count) 형식으로 출력한다.
버튼을 클릭하면 결과가 나오도록 구현한다. -->
- 코드
<!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>자바스크립트 실습4</title>
</head>
<body>
</body>
<script>
let str = prompt("출력할 문자 입력");
let count = prompt("출력할 횟수 입력");
function pr(str, count, callback) {
if(callback) {
let result = "";
for(let i = 0; i < count; i++) {
result += str;
}
callback(result);
}
}
document.write("<h3>pr(<q>" + str + "</q>, " + count + ")</h3>");
// 문자열을 이벤트리스너 안의 함수에 전달할 때에는 ""로 감싸주어야 한다.
// 이 때 이미 따옴표 2가지를 모두 사용했다면, \"를 사용하여 제어문자로 "를 표현한다.
// 혹시 잘 출력되지 않는다면 개발자모드에서 해당 태그를 직접 확인하면 금방 알아낼 수 있다.
document.write("<input type='button' onclick='pr(\"" + str + "\", " + count + ", " + print +")' value='결과 출력'>");
function print(result){
// callback함수에서 write()를 사용하면 기존에 있던 html요소가 사라진다.
document.write("<h4><span style=color:red;>결과 : " + result + "</span></h4>");
}
</script>
</html>
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Web_JavaScript] 07 (0) | 2022.05.03 |
|---|---|
| [Web_JavaScript] 06 (0) | 2022.05.02 |
| [Web_JavaScript] 04 (0) | 2022.04.30 |
| [Web_JavaScript] 03 (0) | 2022.04.29 |
| [Web_JavaScript] 02 (0) | 2022.04.28 |
