백학도령
블로그 이미지

홈

작성

설정
다크
----------고2----------/응용 프로그래밍 (JS)

[고2 응용 프로그래밍] (JS)

백학도령
|2024. 3. 20. 14:13

기본 양식

<!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>
저작자표시

티스토리툴바