반응형

# for문

for문은 C, Java, javascript 등등 절차지향, 객체지향, 스크립트 언어 모든 곳에서 자주 쓰인다. 오늘은 html, css, javascript를 이용해서 간단하게 구구단을 화면에 출력해보자.

 

<HTML, javascript>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>구구단 - for문</title>
	<link rel="stylesheet" href="css/gugudan-table.css">  <!-- 아래 css파일이 위치한 경로를 지정-->
<body>
	<h1>구구단</h1>
	<script>
		var i, j;

		for (i = 1; i <= 9; i++) {
			document.write("<table>");
			document.write("<tr><th>" + i + "단</th></tr>");
			for (j = 1; j <= 9; j++) {
				document.write("<tr><td>" + i +" X " + j + " = " + i*j + "</td></tr>");
			}
			document.write("</table>");
		}
	</script>
</body>
</html>

구구단 알고리즘은 이중for문을 사용하여 간단하게 구현할 수 있다. 그리고 나머지는, 입맛에 맞게 꾸미면 된다!

 

<CSS>

div{
    display: inline-block;
    padding: 0 20px 30px 20px;
    margin: 15px;
    border: 1px solid #ccc;
    line-height: 2;
}

div h3 {
    text-align: center;
    font-weight: bold;
}

 

위 코드는, Do it html/css, javascript의 책을 인용했습니다!

반응형
저작자표시

'프로그래밍 > HTML_CSS_Javascript' 카테고리의 다른 글

<Javascript> swtich, if 예제 with (prompt, parseInt)  (0) 2023.04.03
반응형

Javascript뿐만 아니라, if와 switch 제어문은 다른 언어를 공부할 때도 항상 배우는 요소이다. 각 제어문은 기능은 비슷하나, 장단점을 지니고 있다. switch는 case를 나눠서 하기 때문에 '정확하고, case가 적은 경우'에 효율적이다. if문은 '좀 더 큰 범위의 case(?)'에 장점을 지닌다. 

 

운영체제 측면에서 if와 switch를 비교하면, switch문을 사용했을 때 cpu가 명령을 수행하기 위해 메모리에 접근하는 횟수가 현저히 적다. 왜냐하면, if문을 사용했을 때는 if문을 만날 때마다 cpu가 메모리에 접근하지만, switch는 한번만 접근하면 여러 case에 값을 비교할 수 있기 때문이다.

#switch문

 

switch문은 하나 이상의 case와 break, default로 이루어져있다. 코드 예시를 보면 쉽게 이해가 될 것이다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Javascript 배우기</title>
    </head>
    <body>
        <h1>Javascript</h1>
        <script>
            var session = prompt("숫자를 선택하세요");

            switch(session) {
                case "1" : 
                document.write("숫자 1을 입력했습니다.");
                alert("1");
                break;

                case "2" : 
                document.write("숫자 2를 입력했습니다.")
                alert("2");
                break;

                case 3 : 
                document.write("숫자 3을 입력했습니다.")
                alert(3);
                break;

                default : alert("숫자를 잘못 입력하셨습니다.");
            }

        </script>
    </body>
</html>

중요한 것은 switch문의 case에는 항상 break가 있어야 한다는 것..!

# if문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <h1>Javascript 연습하기</h1>
    <script>
        var memNum = prompt("입장하는 관객의 수를 입력하세요.");
        var colNum = prompt("한 줄에 몇 명씩 앉을지 입력하세요.");
        var rowNum;

        if(memNum % colNum === 0){
            rowNum = memNum / colNum;
            document.write("총 " + colNum + "명씩 "+ rowNum + "줄로 앉으면 됩니다.");
        }

        else{
            rowNum = (memNum % colNum) + 1;
            document.write("총 " + colNum + "명씩 "+ rowNum + "줄로 앉으면 됩니다.");
        }
    </script>
</body>
</html>

 

# prompt와 parseInt, parsedouble 등등..

 

프롬프트(prompt)란 사용자에게 창을 띄워서 데이터를 받아올 수 있는 함수이다. 

위 switch문 예제를 실행하면 이렇게 나올텐데, 이것이 바로 prompt이다. alert과 비슷하게 생겼지만, alert은 사용자에게 말 그대로 값을 보여주는 주의와 같은 개념이기에 데이터를 받아오지는 못한다.

prompt는 데이터를 받으면 자동으로 문자열로 변환한다.

 

그렇기 때문에, parseInt()로 감싸주면, 프롬프트창으로 받은 데이터가 정수형으로 저장된다.

마찬가지로, parsedouble(), parsefloat()으로 감싸주면 실수형으로 데이터가 저장된다.

 

위의 switch예제에서 숫자 3을 입력한다면, 어떤 뜻인지 이해가 빠를 것이다.

반응형
저작자표시

'프로그래밍 > HTML_CSS_Javascript' 카테고리의 다른 글

[HTML/CSS?Javascript] 구구단 출력하기  (0) 2023.04.04

+ Recent posts

티스토리툴바