while을 이용한, 이미지 삽입, Table

FrontEnd/JavaScript

by H_Develop 2022. 7. 1. 08:26

while 문을 사용해서 fish1.jpg 이미지를 웹 페이지 화면에 반복적으로 삽입하기

<body>
    <div id="fish"></div>
    <script>
        var x = 1;          // 채울 이미지 수 초기화
        var contents = ""   // 이미지 초기화

        while (x <= 4) {
            contents += "<img src='fish1.jpg'>";
            x++;
        }
        document.getElementById("fish").innerHTML=contents;
    </script>
</body>

두가지 사진 번갈아 넣기

<body>
    <div id="result"></div>
    <script>
        var num = 1;        // image count initiative
        var contents = "";  // image data holding
        while (num <= 6) {  // only 6 images input
            if ( num%2 == 1){
                contents += "<img src='image1.png'>";
            }   else {
                contents += "<img src='image2.png'>";
            }
            num++;
        }
        document.getElementById("result").innerHTML=contents;
    </script>
</body>

while 문을 이용한 다량의 이미지 삽입

    <div id="result"></div>
    <script>
        var contents = "";
        var num = 1;
        var file_name;

        while (num <=5) {
            file_name = "image" + num + ".png";
            contents += "<img src='" + file_name + "'>";	// 홑 따옴표 겹 따옴표 조심 !!
            num++;
        }
        document.getElementById("result").innerHTML=contents;
    </script>

TABLE 만들기

<body>
    <div id="result"></div>
    <script>
        var contents = "";  // 이미지 초기화
            contents += "<table border='1'>";
            contents += "<tr><th>번호</th><th>제목</th><th>일자</th></tr>";

        var n = 1;
        while (n<=3) {      // 이미지 개수
            contents += "<tr><td>" + n + "</td><td>안녕하세요.</td><td>12-07</td></tr>";
            n++;
        }

        contents += "</table>";
        document.getElementById("result").innerHTML=contents;
    </script>
</body>

Make_Table

<style>
    table { border-collapse: collapse; }
    th, td { border: solid 1px gray; }
    th { width: 120px; padding: 5px; background-color: #eeeeee}
    td { padding:5px; text-align: center; }
</style>
</head>	
<body>
<div id="result"></div>
<script>
    var city =["서울", "부산",  "인천", "대전", "광주"];
    var low_temp =[10, 11, 12, 10, 13];     // 이 데이터를 파일로 만들어서 삽입할 수 있음.
    var high_temp =[27, 26, 28, 28, 26];
    var contents = ""; 		// 초기화 
    contents+= "<h3>지역별 기온과 일교차</h3>"
    contents+="<table>";
    contents+= "<tr><th>지역</th><th>최저기온</th><th>최고기온</th><th>일교차</th> </tr>";
    var i = 0;
    while (i<=4) {
        diff = high_temp[i] - low_temp[i];  // 별도의 계산으로 값 추출 후, 입력
        contents +="<tr>";
        contents += "<td>"+ city[i] + "</td>";
        contents += "<td>"+ low_temp[i] + "</td>";
        contents += "<td>"+ high_temp[i] + "</td>";
        contents += "<td>"+ diff + "</td>"; // diff 는 i가 없음
        contents +="</tr>";
        i++;
    }
    contents +="</table>";
    document.getElementById("result").innerHTML = contents;
</script>
</body>

'FrontEnd > JavaScript' 카테고리의 다른 글

함수 Function (내장함수, 사용자정의함수, 즉시실행함수, 람다식함수 객체) (0)	2022.07.03
외부 JS파일을 HTML에 불러오기 (0)	2022.07.01
반복문 ( while, do while, for, break, continue ) (0)	2022.07.01
if else 예문 (0)	2022.07.01
제어문 ( 조건문 if, switch, 3항 연산자 ) (0)	2022.06.30