[필기정리] Day48 - 단계별 달력 만들기 문제 등

Web/javascript

2020. 8. 19. 12:16

단계 1. 2행 3열 짜리 테이블을 html로 만들고 각각에 칸에 1부터 6까지 넣는다.

         (css를 통해 table과 td에 border 속성을 준다.)

단계 1 결과 화면

A. 해답

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기1</title>
<style>
	table, td
	{
		border:1px solid black;
	}
</style>
</head>
<body>
<table>
	<tr>
		<td>1</td><td>2</td><td>3</td>
	</tr>
	<tr>
		<td>4</td><td>5</td><td>6</td>
	</tr>
</table>
</body>
</html>

<!--
테이블은 <table>태그로 시작해서 </table>태그로 끝난다.
줄 하나를 만들고 싶으면 <tr></tr>을 만들고
그 안에 칸을 3개를 만들고 싶으면 <td></td>를 3개 넣으면 된다.
-->

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <style>
        table, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script>
    var table="<table>"

    var num = 1;
    for(var i=0;i<2;i++){
        table+="<tr>";
        for(var j=0;j<3;j++){
            table+="<td>"+ num++ +"</td>";
        }
        table+="</tr>";
    }
    table+="</table>";
    document.getElementById("demo").innerHTML=table;
    </script>
</body>
</html>

 

단계 2. 5행 7열 짜리 테이블을 html로 만들고 각각에 칸에 1에서 부터 31까지 넣는다.

       (css를 통해 table과 td에 border 속성을 준다.)

단계 2 결과 화면

A. 해답

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기2</title>
<style>
	table, td
	{
		border:1px solid black;
	}
</style>
</head>
<body>
<table>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
	<tr>
		<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
	</tr>
	<tr>
		<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
	</tr>
	<tr>
		<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
	</tr>
	<tr>
		<td>29</td><td>30</td><td>31</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>		
</table>
</body>
</html>

<!--
&nbsp;는 공백 하나의 문자를 의미한다.
공백 두 개는 &nbsp;&nbsp;
-->

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <style>
        table, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script>
    var table="<table>"

    var num = 1;
    for(var i=0;i<5;i++){
        table+="<tr>";
        for(var j=0;j<7;j++){
            if(num<=31){
                table+="<td>"+ num++ +"</td>";
            }
            else
                table+="<td>"+"</td>";
        }
        table+="</tr>";
    }
    table+="</table>";
    document.getElementById("demo").innerHTML=table;
    </script>
</body>
</html>

 

단계 3. html에 div 태그를 하나 만들고 id를 'cal'이라고 준다.

          자바스크립트로 div태그에 "안녕하세요."라는 문자열을 출력한다.

A. 해답

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기3</title>
</head>
<body>
    <div id = "calendar"></div>
    <script>
    document.getElementById("calendar").innerHTML = "안녕하세요.";
    </script>
</body>
</html>

<!--innerHTML을 통해서 출력할 수 있다.-->

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
</head>
<body>
    <div id="cal">
    </div>
    <script>
    document.getElementById("cal").innerHTML="안녕하세요.";
    </script>
</body>
</html>

 

단계 4. javascript로 text라는 변수를 하나 만들고, 그 값에 다음 내용의 테이블을 저장한다.

         5행 7열짜리 테이블을 만들고 각각의 칸에 1부터 31까지 1씩 증가시킨 값을 넣는다.

         그리고 html에 div 태그에 'cal' 이라는 id를 만들고 그 id에 테이블을 출력한다.

         (css를 통해 table과 td에 border 속성을 준다.)

A. 해답

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기4</title>
<style>
	table, td
	{
		border:1px solid black;
	}
</style>
</head>
<body>
    <div id = "calendar"></div>
    <script>    
        var text = "";
        text += "<table>";
        text += "<tr>";
        text += "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>"
        text += "</tr>"
        text += "<tr>"
        text += "<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>"
        text += "</tr>"
        text += "<tr>"
        text += "<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>"
        text += "</tr>"
        text += "<tr>"
        text += "<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>"
        text += "</tr>"
        text += "<tr>"
        text += "<td>29</td><td>30</td><td>31</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>"
        text += "</tr>"		
        text += "</table>"
        document.getElementById("calendar").innerHTML = text;
    </script>
</body>
</html>

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <style>
        table, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="cal"></div>
    <script>
    var text="<table>"

    var num = 1;
    for(var i=0;i<5;i++){
        text+="<tr>";
        for(var j=0;j<7;j++){
            if(num<=31){
                text+="<td>"+ num++ +"</td>";
            }
            else
                text+="<td>"+"</td>";
        }
        text+="</tr>";
    }
    text+="</table>";
    document.getElementById("cal").innerHTML=text;
    </script>
</body>
</html>

 

단계5.

유지 보수를 편하게 하기 위해 css와 javascript를 외부파일로 만든다.

단계 5 결과 화면

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기5</title>
<link rel="stylesheet" type="text/css" href="5.css"> // css 삽입 방법
</head>
<body>
    <div id = "calendar"></div>
    <script src="5.js"></script> // JavaScript 삽입 방법
</body>
</html>

- CSS

table, td
{
    border:1px solid black;
}

- JavaScript

var dateText = "";
dateText += "<table>";
dateText += "<tr>";
dateText += "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>"
dateText += "</tr>"
dateText += "<tr>"
dateText += "<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>"
dateText += "</tr>"
dateText += "<tr>"
dateText += "<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>"
dateText += "</tr>"
dateText += "<tr>"
dateText += "<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>"
dateText += "</tr>"
dateText += "<tr>"
dateText += "<td>29</td><td>30</td><td>31</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>"
dateText += "</tr>"		
dateText += "</table>"
document.getElementById("calendar").innerHTML = dateText;

A. 내가 생각한 답

- HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="calendar.css" type="text/css">
    <title>Calendar</title>
</head>
<body>
    <div id="cal"></div>
    <script src="calendar.js"></script>
</body>
</html>

- CSS

table, td{
 border: 1px solid black;
}

- JavaScript

    var text="<table>"
    var getdate();

    var num = 1;
    for(var i=0;i<5;i++){
        text+="<tr>";
        for(var j=0;j<7;j++){
            if(num<=31){
                text+="<td>"+ num++ +"</td>";
            }
            else
                text+="<td>"+"</td>";
        }
        text+="</tr>";
    }
    text+="</table>";
    document.getElementById("cal").innerHTML=text;

 

단계 6. 단계 4에서 그냥 문자열 형태로 되있던 것을 for문을 이용하여 text에 저장해 보자.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기6</title>
<link rel="stylesheet" type="text/css" href="6.css">
</head>
<body>
    <div id = "calendar"></div>
    <script src="6.js"></script>
</body>
</html>

- CSS

table, td
{
    border:1px solid black;
}

- JavaScript

var numOfWeek = 0, day=1, i=0, j=0;
var dateText = "";

dateText += "<table>";
for(i=0;i<5;i++)
{
    dateText += "<tr>";
    for(j=0;j<7;j++)
    {
        dateText += "<td>" + day++ + "</td>"; // day 후치연산자 사용
    }
    dateText += "</tr>"
}
dateText += "</table>"
document.getElementById("calendar").innerHTML = dateText;

 

단계 7. 이번 달이 며칠까지 있는지 구한다.

          그리고 1일부터 그 날짜까지 출력한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기7</title>
<link rel="stylesheet" type="text/css" href="7.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="7.js"></script>
</body>
</html>

- CSS

table, td
{
    border:1px solid black;
}

- JavaScript

// 윤년 구하는 방법
// 첫번째. 년을 4로 나누어 떨어지면 윤년이다.
// 두번째. 첫번째 중에서 100으로 나누어 떨어지는 년은 윤년이 아니다.
// 세번째. 년이 400으로 나누어 떨어지면 윤년이다.

var now = new Date(); // Date 객체를 만든다. 그러면 지금이 몇년도인지, 몇월, 며칠, 무슨 요일인지를 알 수가 있다.
var curYear = now.getFullYear();    // 올해 년도를 구한다. 4자리 숫자를 돌려줌
var curMonth = now.getMonth();      // 현재 달을 구한다. 
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1; 

function getLastDayOfMonth() // 달이 며칠인지 구하는 함수.
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  // 1월부터 12월까지의 날 수를 배열로 만든다.
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; // 결과 : 윤년 
    else if(curYear % 400 == 0)
        mon2 = true; // 결과 : 윤년        
    else 
        mon2 = false; // 결과 : 평년

    lastDayOfMon[1] = (mon2) ? 29 : 28;     // 윤년이면 2월에 29를 저장. 아니면 28을 저장. (삼항연산자)
    return lastDayOfMon[curMonth];          // 현재 달이 며칠인지 리턴
}


text += "<table>";
for(var i=0;i<5;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(date <= lastDay)
            text += "<td>" + date++ + "</td>";      // 마지말 날이 되기까지 1씩 증가시킨다.
        else
            text += "<td>&nbsp;</td>";              // 마지막 날이 넘어가면 빈 칸 만을 출력한다.
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

// Tip : 윤년이란? 2월에 29일을 둔 해를 의미 ↔ 28일까지 있는 해는 평년

 

단계 8. 이번 달의 1일이 무슨 요일인지 구한다.

          그리고 첫번째 열을 일요일 그 다음 열을 월요일 이런 식으로 이어질 때

          1일을 해당 요일 열로 옮기고 그 다음 숫자도 그 뒤를 따르도록 한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기8</title>
<link rel="stylesheet" type="text/css" href="8.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="8.js"></script>
</body>
</html>

- CSS

table, td
{
    border-style:solid;
    border-width: 1;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); // 올해 이번달 1일이 무슨 요일인지 구하기 위한 날짜 객체를 만든다.
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();     // 위에서 만든 날짜 객체를 통해 1일이 무슨 요일인지 구한다. 요일은 0 - 일요일, 1 - 월요일, 2 - 화요일 ...
var cell = 0;

var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7);           // 요일의 줄 수를 구한다.
numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다.

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}


text += "<table>";
for(var i=0;i<numOfWeeks;i++) // 줄
{
    text += "<tr>";
    for(var j=0;j<7;j++) // 칸
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              // 첫 날이 되기까지 빈칸을 출력한다. 
        else if(date <= lastDay)
            text += "<td>" + date++ + "</td>";      // 마지말 날이 되기까지 1씩 증가시킨다.
        else
            text += "<td>&nbsp;</td>";              // 마지막 날이 넘어가면 빈칸만 출력한다.
        cell++; 
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 9. 테이블에 "일월화수목금토일" 을 넣는다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기9</title>
<link rel="stylesheet" type="text/css" href="9.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="9.js"></script>
</body>
</html>

- CSS

table, td
{
    border-style:solid;
    border-width: 1;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; // 요일을 배열화함

var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7);           // 요일의 줄 수를 구한다.
numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다.

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}


text += "<table>";
text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";     // 일 월 화 수 목 금 토 문자열 추가
text += "</tr>"
    
for(var i=0;i<numOfWeeks;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++) 
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
            text += "<td>" + date++ + "</td>";     
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 10. 테이블에 년과 월을 출력한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기10</title>
<link rel="stylesheet" type="text/css" href="10.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="10.js"></script>
</body>
</html>

- CSS

table, td
{
    border-style:solid;
    border-width: 1;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7);           // 요일의 줄 수를 구한다.
numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다.


function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}


text += "<table>";
text += "<th colspan=7>";   // 7칸을 하나로 합친다.
text += curYear + "년 " + (curMonth + 1) + "월";  // 년과 월을 출력한다. 월은 0부터 시작하니까 1을 추가한다.
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<numOfWeeks;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
            text += "<td>" + date++ + "</td>";     
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 11. 현재 날짜에 현재 시간을 출력한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기11</title>
<link rel="stylesheet" type="text/css" href="11.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="11.js"></script>
</body>
</html>

- CSS

table, td
{
    border-style:solid;
    border-width: 1;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7);           // 요일의 줄 수를 구한다.
numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다.


function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}

function getTime()      // 현재 시간을 구한다.
{
    var hour = now.getHours(); // 현재 시간을 구하는 것
    var minute = now.getMinutes(); // 현재 분을 구하는 것
    var ampm;
    
    if (hour >= 12){ // 오전, 오후 구하는 것
      hour -= 12;
      ampm = "오후";
    }
    else ampm = "오전";

    hour = (hour == 0) ? 12 : hour;     // 정오는 12시로 출력.
    if (minute < 10) minute = "0" + minute; // 문자열 + 숫자 = 문자열 - 결과 ex) 01분

    return ampm + hour + ":" + minute;  // 시간을 문자열을 조합하여 문자열 반환
}

text += "<table>";
text += "<th colspan=7>";   
text += curYear + "년 " + (curMonth + 1) + "월";  
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<numOfWeeks;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
        {
            if(date == now.getDate()) // now(오늘의 날짜).getDate() = 오늘 몇일인지 나오는 것
            {
                text += "<td>" + date++ + "<br>"; // 오늘 날짜에 시간을 출력하게 한 것
                text += getTime() + "</td>"
            }            
            else text += "<td>" + date++ + "</td>"; 
        }                
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 12. td의 width 80, height 40을 준다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기12</title>
<link rel="stylesheet" type="text/css" href="12.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="12.js"></script>
</body>
</html>

- CSS

table, td
{
    border-style:solid;
    border-width: 1;
}

td
{
    width:80px;
    height:40px;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}

function getTime()      // 현재 시간을 구한다.
{
    var hour = now.getHours();
    var minute = now.getMinutes();
    var ampm;
    
    if (hour >= 12){
      hour -= 12;
      ampm = "오후";
    }
    else ampm = "오전";

    hour = (hour == 0) ? 12 : hour;     // 정오는 12시로 출력.
    if (minute < 10) minute = "0" + minute;

    return ampm + hour + ":" + minute;  // 시간을 문자열을 조합하여 리턴
}

text += "<table>";
text += "<th colspan=7>";   
text += curYear + "년 " + (curMonth + 1) + "월";  
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<5;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
        {
            if(date == now.getDate()) 
            {
                text += "<td>" + date++ + "<br>";
                text += getTime() + "</td>"
            }            
            else text += "<td>" + date++ + "</td>"; 
        }                
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 13. 테이블을 가운데 정렬한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기13</title>
<link rel="stylesheet" type="text/css" href="13.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="13.js"></script>
</body>
</html>

- CSS

table
{
    margin: 0 auto;
}

table, td
{
    border-style:solid;
    border-width: 1;
}

td
{
    width:80px;
    height:40px;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}

function getTime()      // 현재 시간을 구한다.
{
    var hour = now.getHours();
    var minute = now.getMinutes();
    var ampm;
    
    if (hour >= 12){
      hour -= 12;
      ampm = "오후";
    }
    else ampm = "오전";

    hour = (hour == 0) ? 12 : hour;     // 정오는 12시로 출력.
    if (minute < 10) minute = "0" + minute;

    return ampm + hour + ":" + minute;  // 시간을 문자열을 조합하여 리턴
}

text += "<table>";
text += "<th colspan=7>";   
text += curYear + "년 " + (curMonth + 1) + "월";  
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<5;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
        {
            if(date == now.getDate()) 
            {
                text += "<td>" + date++ + "<br>";
                text += getTime() + "</td>"
            }            
            else text += "<td>" + date++ + "</td>"; 
        }                
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 14. th에 폰트 size를 2배로 하고 배경색은 aqua로 한다.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기14</title>
<link rel="stylesheet" type="text/css" href="14.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="14.js"></script>
</body>
</html>

- CSS

table
{
    margin: 0 auto;
}

table, td
{
    border-style:solid;
    border-width: 1;
}

td
{
    width:80px;
    height:40px;
}

th
{
    background-color: aqua;
    font-size:2em;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}

function getTime()      // 현재 시간을 구한다.
{
    var hour = now.getHours();
    var minute = now.getMinutes();
    var ampm;
    
    if (hour >= 12){
      hour -= 12;
      ampm = "오후";
    }
    else ampm = "오전";

    hour = (hour == 0) ? 12 : hour;     // 정오는 12시로 출력.
    if (minute < 10) minute = "0" + minute;

    return ampm + hour + ":" + minute;  // 시간을 문자열을 조합하여 리턴
}

text += "<table>";
text += "<th colspan=7>";   
text += curYear + "년 " + (curMonth + 1) + "월";  
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<5;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
        {
            if(date == now.getDate()) 
            {
                text += "<td>" + date++ + "<br>";
                text += getTime() + "</td>"
            }            
            else text += "<td>" + date++ + "</td>"; 
        }                
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

단계 15. 요일이 있는 칸의 id를 "dayOfTheWeek"이라고 주고,

           글자를 가운데 정렬 배경색을 pink로 주자.

A. 해답

- HTML

<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기15</title>
<link rel="stylesheet" type="text/css" href="15.css">
</head>
<body>
    <div id = "cal"></div>
    <script src="15.js"></script>
</body>
</html>

- CSS

table
{
    margin: 0 auto;
}

table, td
{
    border-style:solid;
    border-width: 1;
}

td
{
    width:80px;
    height:40px;
}

th
{
    background-color: aqua;
    font-size:2em;
}

.dayOfTheWeek
{
    text-align: center;
    background-color:pink;
}

- JavaScript

var now = new Date(); 
var curYear = now.getFullYear();    
var curMonth = now.getMonth();      
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1);     
var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay();         
var cell = 0;
var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"];

function getLastDayOfMonth() 
{
    var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
    var mon2;

    if ( (curYear % 4 == 0) && (curYear % 100 != 0) )
            mon2 = true; 
    else if(curYear % 400 == 0)
        mon2 = true;        
    else 
        mon2 = false;

    lastDayOfMon[1] = (mon2) ? 29 : 28;     
    return lastDayOfMon[curMonth];          
}

function getTime()      // 현재 시간을 구한다.
{
    var hour = now.getHours();
    var minute = now.getMinutes();
    var ampm;
    
    if (hour >= 12){
      hour -= 12;
      ampm = "오후";
    }
    else ampm = "오전";

    hour = (hour == 0) ? 12 : hour;     // 정오는 12시로 출력.
    if (minute < 10) minute = "0" + minute;

    return ampm + hour + ":" + minute;  // 시간을 문자열을 조합하여 리턴
}

text += "<table>";
text += "<th colspan=7>";   
text += curYear + "년 " + (curMonth + 1) + "월";  
text += "</th>";

text += "<tr>"
for(var i=0;i<7;i++)
    text += "<td class='dayOfTheWeek'>" + dayOfTheWeek[i] + "</td>";
text += "</tr>"
    
for(var i=0;i<5;i++)
{
    text += "<tr>";
    for(var j=0;j<7;j++)
    {
        if(cell<firstDayOfTheWeek)
            text += "<td>&nbsp;</td>";              
        else if(date <= lastDay)
        {
            if(date == now.getDate()) 
            {
                text += "<td>" + date++ + "<br>";
                text += getTime() + "</td>"
            }            
            else text += "<td>" + date++ + "</td>"; 
        }                
        else
            text += "<td>&nbsp;</td>";             
        cell++;
    }
    text += "</tr>"
}
text += "</table>"
document.getElementById("cal").innerHTML = text;

 

# 버튼으로 움직일 수 있는 달력 만들기

 

A. 해답

- HTML

<!DOCTYPE html>
<html>
    <head>
        <title>MENU</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="calendar.css">         
    </head>
    <body onload="showCalendar()">

        <div id="calendar"></div>
        <script src="calendar.js"></script>
<!--
        <input type="button" value="<<" onclick="nextMonth(-1)"> 
        <input type="button" value=">>" onclick="nextMonth(1)">
-->
    </body>
</html>

<!--
일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다.

onload
문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다).

JAVASCRIPT
window.onload = function() {
//실행될 코드
}
문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다.
동일한 문서에 오직 onload는 하나만 존재해야 한다.
중복될 경우, 마지막 선언이 실행된다.
외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.
<body> 요소에 속성(attribute)으로 지정될 수 있다.

JAVASCRIPT
<body onload="실행될 코드">
위와 같이 사용된 경우, window.onload로 지정된 것은 무시된다.
window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.

JAVASCRIPT
document.getElementById("myFrame").onload = function() {
//실행될 코드
}
이벤트를 직접 연결할 수도 있다.

JAVASCRIPT
window.addEventListener('load', function(){
//실행될 코드
});
jQuery load
jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.

JAVASCRIPT
 $(window).load( function() {
//실행될 코드
})
DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트이다.

JAVASCRIPT
window.addEventListener('DOMContentLoaded', function(){
//실행될 코드
})
onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다.

//DOM이 모두 로드 되었을 때
function domReady () {
	//처리할 내용
}
jQuery ready
자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자.

JAVASCRIPT
$(document).ready(function(){
//실행될 코드
});
onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.

-->

- CSS

* {
    box-sizing:border-box;
}
ul {
    list-style-type: none;
}
body {
    font-family: Verdana,sans-serif;
    
}

table{
    width:100%;
    border-collapse: collapse;
}
.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays td {
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days td {
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}

tr td:nth-child(1){
    color:red;
}

a{
    text-decoration: none;
    color:white;
}


/*
	text-transform은 대문자로 또는 소문자로 바꾸는 속성이다.
	capitalize : 단어의 첫번째 글자를 대문자로 바꾼다.
	uppercase : 모든 글자를 대문자로 바꾼다.
	lowercase : 모든 글자를 소문자로 바꾼다.

	css는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 ! import를 붙인다.

	문법 :
	property : value !important;

	예를 달어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다.
	p {
		color: red;
	}
	
	p {
		color: blue;
	}


	하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지한다.

	p {
		color: red !important;
	}

	p {
		color: blue;
	}

	다시 속성 값을 재설정하고 싶으면 !important를 다시 붙인다. 예를 들어 다음은 문단의 글자색을 녹색으로 만든다.

	p {
		color: red ! important;
	}

	p {
		color: blue;
	}

	p {
		color: green !important;
	}
*/

- JavaScript

var calendar = { curYear:0, curMonth:0, curDate:1, theDayOfTheWeek:0, lastDay:0, numOfWeeks:0};
var month = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];

function showCalendar()
{
    var numOfWeek =0, day=1, i=0, j=0;
    var dateText = "";
    var curMonth = 0, curYear = 0;
    getCalendar();
    curMonth = new Date().getMonth();
    curYear = new Date().getFullYear();
    dateText += "<div class = 'month'>";
    dateText += "<ul>";
    dateText += "<li class='prev'><a href='#' onclick='nextMonth(-1)'>&#10094;</a></li>";
    dateText += "<li class='next'><a href='#' onclick='nextMonth(1)'>&#10095;</a></li>";
    dateText += "<li style='text-align:center'>";
    dateText += month[calendar.curMonth] +"<br>";
    dateText += "<span style='font-size:18px'>" + calendar.curYear + "</span>";
    dateText += "</li>";
    dateText += "</ul>";
    dateText += "</div>";
    dateText += "<table>";
    dateText += "<tr class = 'weekdays'>";
    dateText += "<td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>";
    dateText += "</tr>";
    
    for(i=0;i<calendar.numOfWeeks;i++)
    {
        dateText += "<tr class = 'days'>";
        for(j=0;j<7;j++)
        {
            if(i*7+j<calendar.theDayOfTheWeek || day > calendar.lastDay) dateText += "<td>&nbsp;</td>";
            else if(day == calendar.curDate && calendar.curMonth == curMonth && calendar.curYear == curYear) dateText += "<td class = 'active'>" + day++ + "</td>";
            else dateText += "<td>" + day++ + "</td>";
        }
        dateText += "</tr>";
    }
    dateText += "</table>";
    document.getElementById("calendar").innerHTML = dateText;
}
function getCalendar()
{
    var date = null;
    if(calendar.curYear==0) 
    {
        date = new Date();
        calendar.curYear = date.getFullYear();
        calendar.curMonth = date.getMonth();
        calendar.curDate = date.getDate();
    }
    else date = new Date(calendar.curYear, calendar.curMonth, 1);
    
     
    getLastDayOfTheMonth();
    getNumberOfWeeks(date);
}
function getLastDayOfTheMonth()
{
    var lastDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if(calendar.curYear%4 == 0 && calendar.curYear%100 != 0){
        lastDay[1] = 29;
    }    
    else if(calendar.curYear%400==0){
        lastDay[1] = 29;
    }
    calendar.lastDay = lastDay[calendar.curMonth];
}
function getNumberOfWeeks(date)
{
    calendar.theDayOfTheWeek = new Date(calendar.curYear, calendar.curMonth, 1).getDay();
    calendar.numOfWeeks = Math.floor((calendar.theDayOfTheWeek + calendar.lastDay)/7);
    calendar.numOfWeeks = (calendar.theDayOfTheWeek + calendar.lastDay)%7==0? calendar.numOfWeeks : calendar.numOfWeeks+1;
}
function nextMonth(num)
{
    calendar.curMonth += num;
    if(calendar.curMonth == -1)
    {
        calendar.curMonth = 11;
        calendar.curYear--;
    }
    else if(calendar.curMonth == 12)
    {
        calendar.curMonth = 0;
        calendar.curYear++;
    }
    showCalendar();
}

 

728x90
저작자표시

'Web > javascript' 카테고리의 다른 글

[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등  (0) 2020.09.03
[필기정리] Day50-2 - 자바스크립트 예시 및 문제  (0) 2020.09.03
[필기정리] Day50-1 - array sort, 유효성체크  (0) 2020.08.31
[실습문제] JavaScript로 달력 만들기  (0) 2020.08.19
[필기정리] Day47 - JavaScript, function, typeof 등  (0) 2020.08.18

티스토리툴바