Open Challenge
p.303
다음 조건을 따라 prompt()로 정수를 입력받아 개수만큼 *를 출력하는 웹 페이지를 작성하라.
- 별 문자를 출력하는 함수를 만들고 이름을 printStar()로 하라.
- prompt() 입력 창에 사용자가 실수, 문자열 등 양의 정수가 입력되지 않은 경우 모두 "입력 오류입니다."를 출력하라.
※ Hint
prompt()가 리턴한 문자열을 parseInt()를 이용하여 정수로 변환하고 정수로 잘 변환되었는지 isNaN() 함수로 확인하면 된다.
파일명 : openChallenge.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>별 문자 출력하기</title>
<script>
let num = prompt("정수를 입력하세요")
num = parseInt(num)
if(!isNaN(num)){
printStar(num)
}
function printStar(tmp){
for(let i = 1; i <= tmp; i++){
for(let j = 1; j<=i;j++){
document.write("*")
}
document.writeln("<br>");
}
}
</script>
</head>
<body>
</body>
</html>
실습문제
1. HTML페이지와 출력 결과를 보고 물음에서 요구하는 대로 페이지를 수정하라.
파일명 : challenge1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>자바스크립트 코드 위치</title>
<script src=6-1.js>
</script>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<div onmouseover="on(this)"
onmouseout="off(this)">
여기에 마우스를 올리면 배경색이 노란색으로 변합니다.</div>
</body>
</html>파일명 : 6-1.js
function on(obj){
obj.style.background='yellow';
}
function off(obj){
obj.style.background='white';
}
2. document.write()를 이용하여 다음 <script> 태그 안에 자바스크립트 코드를 완성하라.
파일명 : challenge2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>document.write()</title>
</head>
<body>
<script>
document.write("<h3>Welcome Home</h3><hr>")
document.write("저희 홈 페이지 오신 것을 환영합니다.")
</script>
</body>
</html>
3. document.write()를 이용하여 문제 2에 주어진 <script> 태그에 자바스크립트 코드를 완성하여 다음과 같이 출력되게 하라.
(1)
파일명 : challenge3_1.html
2가지 방법으로 해결했다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>document.write()</title>
</head>
<body>
<script>
//Method1
document.write("*<br>")
document.write("**<br>")
document.write("***<br>")
document.write("****<br>")
document.write("*****<br>")
//Method2
for(let i = 1;i<=5;i++){
for(let j =1;j<=i;j++){
document.write("*")
}
document.write("<br>")
}
</script>
</body>
</html>
(2)
파일명 : challenge3_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>document.write()</title>
</head>
<body>
<script>
document.write("<h3>document.write()로 표만들기</h3>")
document.write("<hr>")
document.write("<table border='1'>")
document.write("<tbody>")
document.write("<tr>")
document.write("<th>");
document.write("n");
for(let i = 0;i<10;i++)
{
document.write("<td>");
document.write(i);
document.write("</td>");
}
document.write("</th>");
document.write("</tr>");
document.write("<tr>");
document.write("<th>");
document.write("n<sup>2</sup>");
for (var i = 0 ; i < 10 ; i ++ )
{
document.write("<td>");
document.write(i*i);
document.write("</td>");
}
document.write("</th>");
document.write("</tr>");
document.write("</tbody>");
document.write("</table>")
</script>
</body>
</html>
4. prompt() 함수를 이용하여 월, 화, 수, 목, 금, 토, 일 중 하나를 입력받아 월~목의 경우 '출근'을, 다른 날의 경우 '휴일'을 출력하는 자바스크립트 코드를 작성하여 웹 페이지를 완성하라.
파일명 : challenge4.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>월화수목금토일</h3>
<hr>
<script>
let day =prompt("월화수목금토일 중에서 입력하세요")
switch(day){
case "월":
case "화":
case "수":
case "목":
document.write(day+"는 출근")
break;
case "금":
case "토":
case "일":
document.write(day+"는 휴일")
break;
}
</script>
</body>
</html>
5. 정확한 암호가 입력될 때까지 계속 prompt()를 출력하여 암호를 입력받는 웹 페이지를 작성하라. 암호는 you이다. you가 입력되면 오른쪽과 같이 출력된다.
파일명 : challenge5.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>암호를 입력하라</title>
</head>
<body>
<h3>암호를 입력하라!</h3>
<hr>
<script>
while(true){
let password = prompt("암호를 대라")
if(password == "you"){
document.write("통과!")
break;
}
}
</script>
</body>
</html>
6. 브라우저 화면과 같이 출력되도록 <script> 태그 내에 함수를 작성하라.
(1)
파일명 : challenge6_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>1</title>
</head>
<body>
<script>
function big(a,b){
a = parseInt(a)
b = parseInt(b)
return a>b ? a : b
}
</script>
<script>
let b = big("625","555");
document.write("큰수="+b);
</script>
</body>
</html>(2)
파일명 : challenge6_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>2</title>
</head>
<body>
<script>
function pr(a,b){
for(let i = 0; i < b; i++){
document.write(a)
}
}
</script>
<script>
pr("%",5);
</script>
</body>
</html>
7. prompt() 함수로 사용자로부터 숫자를 입력받고 제일 큰 자리 수와 제일 낮은 자리의 수가 같으면 '성공', 아니면 '다름'을 출력하는 웹 페이지를 작성하라. 문자열 연산으로 풀지 말고 while을 이용하여 제일 큰 자리의 수와 낮은 자리의 수를 구하여 풀도록 하라.
파일명 : challenge7.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>큰 자리수와 낮은자리수 같은지 비교</h3>
<hr>
<script>
let str = prompt("숫자 입력", "0");
if(isFinite(str)) {
let n = parseInt(str);
if(n > 0) { // 양수인 경우에만
let least = n%10; // 1의 자리수
let most = 0;
while(n != 0) {
most = n % 10;
n = Math.floor(n/10);
}
if(most == least)
document.write(str + ": 같음");
else
document.write(str + ": 다름");
}
else
document.write(str + ": 음수나 0은 다루지 않습니다.");
}
else {
document.write(str + ": 숫자가 아닙니다.");
}
</script>
</body>
</html>
8. prompt() 함수를 통해 수식을 입력받아 계산 결과를 출력하는 웹 페이지를 작성하라. 수식 계산은 eval() 함수를 이용하라.
파일명 : challenge8.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>eval()로 수식 계산</h3>
<hr>
<script>
let tmp = prompt("수식 입력")
try{
eval(tmp)
document.write(tmp+ " = " + eval(tmp))
}catch(error){
document.write("수식 제대로 입력했나요?")
}
</script>
</body>
</html>eval() 함수는 문자로 표현 된 JavaScript 코드를 실행하는 함수로 매개변수로는 문자열이 주어진다.
위의 문제에서 수식을 잘못 입력하는 경우에 대한 처리에 대해 다루지 않아 구글링을 해보았다.
eval() 함수는 주어진 코드를 평가하여 얻은 값이 없다면 undefined를 반환하게 되어있다.
때문에 try~catch구문을 이용하여 예외처리를 해주었다.
수식이 잘못 입력된다면 document.write("수식 제대로 입력했나요?")이 실행된다.