728x90
반응형

문제 1

구구단을 출력하되, 프롬포트에 입력받은 단만 백그라운드 컬러를 칠하는 코드를 작성하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
            font-size: 12px;
            text-align: center;
        }
        caption {
            font-size: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    var colo = prompt("색칠할 단을 입력해주세요");
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    for(var i=2;i<10;i++){
        document.write("<tr>");
        for(var j=1;j<=9;j++){
            if(i == colo){
                document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
            } else{
                document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

▶ 출력 결과

 

 

 

 

 

문제 2

해당 화면을 출력하는 코드를 작성하시오.

 

 

▶ 코드

<script>
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    var count=9;
    for(var i=1;i<10;i++){
        document.write("<tr>");
        for(var j=1;j<=9;j++){
            if(j == count){
                document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
                count--;
            } else{
                document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

 

 

 

 

문제 3

해당 화면을 출력하는 코드를 작성하시오.

 

 

 

▶ 코드

<script>
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    var count1 = 1;
    var count2 = 9;
    for (var i = 1; i < 10; i++) {
        document.write("<tr>");
        for (var j = 1; j <= 9; j++) {
            if (j == count1) {
                if(count1 == count2)
                    document.write("<td style = 'background-color: yellowgreen;''>" + i + "*" + j + "=" + (i * j) + "</td>");
                else
                    document.write("<td style = 'background-color: #ccc;''>" + i + "*" + j + "=" + (i * j) + "</td>");
            } else if (j == count2) {
                document.write("<td style = 'background-color: tomato;''>" + i + "*" + j + "=" + (i * j) + "</td>");
                
            } else {
                document.write("<td>" + i + "*" + j + "=" + (i * j) + "</td>");
            }
        }
        count1++;
        count2--;
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

 

※ 단 수가 바뀌어도 모양의 변화가 없다.

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] 텍스트 사라지게 만들기 (31일차)  (0) 2023.06.28
[JavaScript] 자바스크립트 sum 함수 만들기 (31일차)  (0) 2023.06.28
[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
728x90
반응형

문제

  1.  prompt를 이용해서 이름(홍길동)과 태어난 년, 월을 입력 받아서 현재 년도와 월을 구해서 나이를 구하시오.
  2. "홍길동님은 태어난지 00년 00개월 지나셨습니다." 출력
  3. document.write 로 출력하시오. (파란색, 폰트크기 20px)

 

 

 

 

코드

<script>
    var birth = prompt("이름 태어난 년도 태어난 월 입력","홍길동 1990 1").split(" ");

    var time = new Date();
    var year = time.getFullYear()-birth[1];
    var month = (time.getMonth()+1) - birth[2];
    if(month < 0){
        month+=12;
        year--;
    }

    document.write("현재 : "+time.getFullYear()+"년 "+(time.getMonth()+1)+"월<br>");
    document.write(birth[0]+"님은 태어난지 "+year+"년 "+ month+"개월 지나셨습니다.");
</script>
  • 현재의 월보다 더 나중에 태어난 경우, month는 음수의 값이 나온다.
  • 12개월이 기준이기 때문에 month에 12을 더해주고, year 값을 하나 빼주면 태어난 년과 월을 구할 수 있다.

 

 

 

 

출력 결과

▶ 현재의 월보다 앞의 월에 태어난 경우

 

 

 

▶ 현재의 월보다 뒤에 월에 태어난 경우

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] 자바스크립트 sum 함수 만들기 (31일차)  (0) 2023.06.28
[JavaScript] 테이블 백그라운드 색상 변경 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
728x90
반응형

문제

숫자와 배수를 입력받아 배수의 개수를 출력하시오.

 

 

▶ 코드

<script>
    var num1 = prompt("숫자를 입력하세요");
    var num2 = prompt("배수를 입력하세요");
    checkNumber(num1, num2);
    function checkNumber(num1, num2){
        var count=0;
        for(var i=1;i<=num1;i++){
            if(i%num2==0){
                count++;
            }
        }
        document.write(num1+"에서 "+num2+"의 배수는 "+count+"개 입니다.");
    }
</script>
    checkNumber(num1, num2);
    function checkNumber(num1, num2){
        var num3 = num1/num2;
        document.write(num1+"에서 "+num2+"의 배수는 "+parseInt(num3)+"개 입니다.");;
    }
  • 숫자를 배수로 나누고, 몫만 이용하는 방법으로도 가능하다.

 

 

 

▶ 출력 결과

 

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] 테이블 백그라운드 색상 변경 (31일차)  (0) 2023.06.28
[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26

+ Recent posts

티스토리툴바