기본 양식
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<script>
</script>
</body>
</html>
나이 계산하기
<!DOCTYPE html>
<html>
<head>
<title>나이 계산하기</title>
</head>
<body>
<script>
var currentYear = 2024;
var birthYear;
var age;
birthYear = prompt("태어난 연도를 입력하세요. (YYYY)", "");
age = currentYear - birthYear + 1;
document.write(currentYear + "년 현재<br>");
document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.");
</script>
</body>
</html>
- var 변수; // 변수 선언
- 변수 = prompt("텍스트", ""); // 입력창
- documet.write("텍스트"); // 출력
and 연산자
<!DOCTYPE html>
<html>
<head>
<title>조건문</title>
</head>
<body>
<script>
var numberOne = prompt("50미만의 숫자를 입력하세요.");
var numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne < 50 && numberTwo < 50)
alert("두 개의 숫자 모두 50 미만이군요.");
else
alert("조건에 맞지 않는 숫자가 있습니다.");
</script>
</body>
</html>
- if () else // 조건문
- alert("텍스트"); // 출력창
구구단
<!DOCTYPE html>
<html>
<head>
<title>구구단 - for문</title>
<link rel="stylesheet" href="css/gugudan.css">
</head>
<body>
<h1>구구단</h1>
<script>
var i, j;
for (i = 1; i <= 5; i++) {
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for (j = 1; j <= 9; j++) {
document.write(i +" X " + j + " = " + i*j + "<br>");
}
document.write("</div>");
}
</script>
</body>
</html>
- <link rel="stylesheet" href="폴더명/파일명.css"> // css 형식 지정
- for (변수 지정; 조건문; 변수++) {} // 반복문
if문
<!DOCTYPE html>
<html>
<head>
<title>조건문</title>
</head>
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if (userNumber % 3 === 0)
alert("3의 배수입니다.");
else
alert("3의 배수가 아닙니다.");
</script>
</body>
</html>
for문
<!DOCTYPE html>
<html>
<head>
<title>1에서 5까지 더하기</title>
<style>
body {
font-size:1.5em;
line-height:2;
text-align:center;
}
</style>
</head>
<body>
<script>
var i;
var sum = 0;
for(i = 1; i < 6; i++) {
sum += i;
}
document.write("1부터 5까지 더하면 " + sum);
</script>
</body>
</html>
- font-size:1.5em; // 폰트 크기
- line-height:2; // 행간
- text-align:center; // 가운데 정렬
switch문
<!DOCTYPE html>
<html>
<head>
<title>세션 선택 - switch문</title>
<link rel="stylesheet" href="css/switch.css">
</head>
<body>
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-디바과, 2-보안과, 3-인공과, 4-게임과");
switch (session) {
case "1" : document.write("<p>디바과 세션은 <strong>101호</strong>에서 진행됩니다.</p>")
break;
case "2" : document.write("<p>보안과 세션은 <strong>201호</strong>에서 진행됩니다.</p>")
break;
case "3" : document.write("<p>인공과 세션은 <strong>301호</strong>에서 진행됩니다.</p>")
break;
case "4" : document.write("<p>게임과 세션은 <strong>401호</strong>에서 진행됩니다.</p>")
break;
default: alert("잘못 입력했습니다.");
}
</script>
</body>
</html>
- switch (변수) { // 값 받기
case "1": // 값이 1이라면~
break; // switch문 종료
default: // 기타 값
}
요약
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<link rel="stylesheet" href="folder/file.css">
<style>
body {
font-size:1.5em;
line-height:2;
text-align:center;
}
</style>
</head>
<body>
<script>
var value;
value = prompt("입력창", "");
document.write("출력");
alert("출력창");
// if문
var x = 3;
var y = 3;
if (x<5 && y<5)
{
document.write("참");
}
else
{
document.write("거짓");
}
// for문
for (i=1; i<=5; i++)
{
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for (j=1; j<=5; j++)
{
document.write(i + "X" + j + "=" + i*j + "<br>");
}
document.write("</div>");
}
// switch문
var session = prompt("1, 2, 3");
switch(session)
{
case "1": document.write("1")
break;
case "2": document.write("2")
break;
case "3": document.write("3")
break;
defalut: alert("기타");
}
</script>
</body>
</html>
'----------고2---------- > 응용 프로그래밍' 카테고리의 다른 글
[고2 응용 프로그래밍] SQL developer (11) | 2024.10.02 |
---|---|
[고2 응용 프로그래밍] 1학기 2차 지필평가 (0) | 2024.03.13 |