공부일지
231005 (HTML)
CD가참둥그렇다
2023. 10. 5. 12:29
테스트 16. switch문 사용
- 자바의 switch문과 같은 형식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<h3>switch 문으로 커피 주문</h3>
<hr>
<script>
let price =0;
let coffee = prompt("무슨 커피 드릴까요?", "");
switch(coffee) {
case "espresso" :
case "에스프레소" : price = 2000;
break;
case "카푸치노" : price = 3000;
break;
case "카페라떼" : price = 3500;
break;
default :
document.write(coffee + "는 없습니다.")
}
document.write(coffee + "는 "+price+"원 입니다.<br>");
</script>
</body>
</html>
테스트 17. for문 사용
- 자바의 for문과 같은 형식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for 문</title>
</head>
<body>
<h3>for 문으로 10px~35px 크기 출력</h3>
<hr>
<script>
for (let size=10; size<=35;size+=5) {
document.write("<span ")
document.write("style='font-size:"+size+"px'>")
document.write(size+"px")
document.write("</span>")
}
</script>
</body>
</html>
테스트 18. while문 사용
- 자바의 while문과 같은 형식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while 문</title>
</head>
<body>
<h3>while 문으로 0에서 n까지 합</h3>
<hr>
<script>
let n = prompt("0보다 큰 정수를 입력하세요",0);
n = parseInt(n);
let i=0, sum=0;
while (i<=n) {
sum+=i;
i++;
}
document.write("0에서 "+n+"까지 합은 "+sum)
</script>
</body>
</html>
테스트 19. do-while문 사용
- 자바의 do-while문과 같은 형식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>do-while 문</title>
</head>
<body>
<h3>do-while 문으로 0에서 n까지 합</h3>
<hr>
<script>
let n = prompt("0보다 큰 정수를 입력하세요",0);
n = parseInt(n);
let i=0, sum=0;
do {
sum+=i;
i++
}while (i<=n)
document.write("0에서 "+n+"까지 합은 "+sum)
</script>
</body>
</html>
테스트 20. break 문
- 자바와 같은 방식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break 문</title>
</head>
<body>
<h3>1에서 얼마까지 더해야 3000을 넘는가?</h3>
<hr>
<script>
let i=0, sum=0;
while (true) {
sum+=i;
if (sum>=3000) {
break;
}
i++;
}
document.write(i+"까지 더하면 3000을 넘음 : "+sum);
</script>
</body>
</html>
테스트 21. continue 문
- 자바와 같은 방식으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>continue 문</title>
</head>
<body>
<h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
<hr>
<script>
let sum=0;
for (let i=1; i<=10; i++) {
if (i%3!=1) {
continue;
}
document.write(i+" ");
sum+=i;
}
document.write("합은 "+sum);
</script>
</body>
</html>
테스트 22. adder() 함수 작성 및 호출
- 자바의 메소드와 같은 방식으로 작동한다.
- 자바와 달리 리턴 형식을 지정할 필요가 없다.(자바스크립트의 변수는 형식을 지정하지 않기 때문)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
function adder(a,b){
let sum;
sum = a+b;
return sum;
}
</script>
</head>
<body>
<h3>함수 adder()</h3>
<hr>
<script>
let n = adder(24567, 98374);
document.write("24567 + 98374는 "+n+"<br>");
</script>
</body>
</html>
과제 22. adder() 함수 응용
- 버튼을 이용하여 함수의 작동 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
function adder(){
let a=parseInt(document.f.a.value);
let b=parseInt(document.f.b.value);
if (isNaN(a)||isNaN(b)){
document.getElementById("print").innerHTML="입력 오류" ;
return;
}
let sum;
sum = a+b;
document.getElementById("print").innerHTML="합 : "+sum;
return;
}
</script>
</head>
<body>
<h3>함수 adder()</h3>
<hr>
<form name="f">
<input id="a" type="text" value=""><input id="b" type="text" value="">
<input type="button" value="덧셈" onclick="adder()">
</form>
<div id="print" style=" color: blue">결과 출력</div>
</body>
</html>
