(70)[Web]5일차: ((Javascript))F

1. 2023.12.1(금)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest022.html_사용자 입력창(prompt())

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test022.html</title>
<link rel="stylesheet" href="css/style.css">

<style type="text/css">
	textarea {/* font-family: 나눔고딕코딩; */font-weight: bold; margin: 2px;}
	#txtCount {width: 40px; text-align:right;}
</style>
</head>
<body class="section">

<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>

<!-- 
	여러 명의 이름과 전화번호를 입력받고
	그 내용을 전체 출력하는 페이지를 구현한다.
	HTML, CSS, Javascript 를 활용한다.
	
	※ prompt() 활용
	
	페이지 레이아웃
	------------------------------------------------
	< 회원 정보 입력 >
	
	전체 회원 수: [  ] 명
	-----------------------
		이름	전화번호
	-----------------------
			:
			:
	
	------------------------------------------------
 -->

<div class="layout">
	<form>
		<div class="btn_box input_box">
			<input type="button" value="회원 정보 입력" class="btn" onclick="addMember()">
		</div>
		
		<div class="result_box">
			<span>전체 회원수: </span>
			<input type="text" id="txtCount" class="txt" readonly="readonly">명
		</div>
	
		<div>
			<textarea rows="10" cols="30" id="txtResult" readonly="readonly"></textarea>	
		</div>	
	</form>
</div>

<script type="text/javascript">
function addMember()
{
	// 확인
	//alert("함수 호출 확인~!!!");
	
	//var temp = prompt("안내: ");
	
	var str = "";
	var arr = new Array();
	var n = 0;
	
	do
	{
		// ※ <prompt()>: 대화창을 통해 데이터 입력 안내
		//				-> 입력 데이터를 받아와 변수에 담아내기
		str = prompt("이름 전화번호("+ (n+1)+")");
		
		//확인
		//alert(str);
		
		if(str==null || str =='.' || str==" " || str=="")
			break;
		
		arr[n] = str;
		
		// 확인
		alert(arr[n]);
		
		n++;		
		
	} while (true);
	
	document.getElementById("txtCount").value = arr.length;
	/* **
	배열을 가지고 있는 구조가 자바와 다르기 때문에 자바라면 불가능한 구조
	자바- 배열을 연결되어 가지고 있음
	자바스크립트- 배열이 연결되어있음
	** */
	
	document.getElementById("txtResult").value = "	이름	전화번호\n";
	/* **
	txtResult를 클리어 할 필요 없음.
	ㄴ 이유: 누적합을 출력하는 구조가 아니기 때문에
	** */
	
	for(var n=0; n<arr.length; n++)
	{
		document.getElementById("txtResult").value += arr[n] + "\n";
	}
	
	
}
</script>

</body>
</html>

ㄴㄴTest023_1.html_여러명데이터 등수부여 출력(함께 푼 풀이)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test023.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">
<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>
<!-- 
	<prompt()>를 활용하여 여러 명의 성적 데이터를 입력 받고,
	등수를 부여하여, 리스트를 출력하는 페이지를 구성한다.
	HTML, CSS, Javascript 활용한다.
	
	페이지 레이아웃
	-----------------------------------------------------------
	
	< 성적 정보 입력 > ------------- prompt() --------------- 이름 국어 영어 수학(1):
	
	전체 인원 수: [    ] 명
	--------------------------------------------- ---- textarea
	이름	국어	영어	수학	총점	등수
	김다슬	80 		70 		60 		xxx 	1등
	오수경	70  	60 		50 		xxx 	2등
	김경태	60  	50 		40 		xxx 	3등
	박범구	50  	40 		30 		xxx 	4등
	---------------------------------------------
	
	-----------------------------------------------------------
 -->
<div class="layout">
	<form>
		<div class="btn_box input_box">
			<input type="button" value="성적 정보 입력" onclick="scoreInsert()">
		</div>
		
		<div class="result_box">
			<span class="tit">전체 인원 수: </span>
			<input type="text" id="txtCount" style="width: 40px">명
		</div>
		
		<div>
			<textarea rows="10" cols="50" id="txtResult" readonly="readonly"></textarea>	
		</div>			
	</form>
</div>

<script type="text/javascript">
function scoreInsert()
{
	var str = "";
	var arr = new Array();
	var temp;
	var n = 0;

	// -- 입력값 받아오기 및 총점계산
	do
	{
		str = prompt("이름 국어 영어 수학("+(n+1)+"):");
		
		if(str=="" || str==" " || str==null || str==".")
			break;
		
		arr[n] = str.split(" ");
		
		arr[n][4] = parseInt(arr[n][1]) + parseInt(arr[n][2]) + parseInt(arr[n][3]);
					
		n++;
		
	} while (true);
	
	// -- [test] 등수 정상 출력을 위한 샘플 데이터
	//arr = new Array(new Array("오수경", 70, 60, 50, 180),new Array("김경태", 60, 50, 40, 150),new Array("박범구", 50, 40, 30, 120),new Array("김다슬", 80, 70, 60, 210));
	
	// -- 점수 내림차순정렬
	if(arr.length>0){
		document.getElementById("txtCount").value = arr.length;
		
		for(var j=1; j<arr.length; j++)
		{
			for(var k=0; k<arr.length-j; k++)
			{
				// -- [test] 바뀌는 여부 확인
				//console.log("1="+arr[k][4]);
				//console.log("2="+arr[k+1][4]);
				//console.log(parseInt(arr[k][4]) < parseInt(arr[k+1][4]));
				if(parseInt(arr[k][4]) < parseInt(arr[k+1][4]))
				{
					temp 	= arr[k];
					arr[k] 	= arr[k+1];
					arr[k+1]= temp;
				}
				//console.log("-------------");
			}
		}		
		
		//-- 헤더 출력
		document.getElementById("txtResult").value = "이름\t국어\t영어\t수학\t총점\t등수\n";
			
		//-- 데이터 출력
		for(var k=0; k<arr.length; k++)
		{
			for(var m=0; m<arr[k].length; m++)
			{
				document.getElementById("txtResult").value += arr[k][m] + "\t";
			}
			document.getElementById("txtResult").value += (k+1) + "등" + "\n";
		}
	}
	
}
</script>
</body>
</html>

ㄴㄴTest023.html_여러명데이터 등수부여 출력(내 풀이)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test023.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">
<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>
<!-- 
	<prompt()>를 활용하여 여러 명의 성적 데이터를 입력 받고,
	등수를 부여하여, 리스트를 출력하는 페이지를 구성한다.
	HTML, CSS, Javascript 활용한다.
	
	페이지 레이아웃
	-----------------------------------------------------------
	
	< 성적 정보 입력 > ------------- prompt() --------------- 이름 국어 영어 수학(1):
	
	전체 인원 수: [    ] 명
	--------------------------------------------- ---- textarea
	이름	국어	영어	수학	총점	등수
	김다슬	80 		70 		60 		xxx 	1등
	오수경	70  	60 		50 		xxx 	2등
	김경태	60  	50 		40 		xxx 	3등
	박범구	50  	40 		30 		xxx 	4등
	---------------------------------------------
	
	-----------------------------------------------------------
 -->
<div class="layout">
	<form>
		<div class="btn_box input_box">
			<input type="button" value="성적 정보 입력" onclick="scoreInsert()">
		</div>
		
		<div class="result_box">
			<span class="tit">전체 인원 수: </span>
			<input type="text" id="txtCount" style="width: 40px">명
		</div>
		
		<div>
			<textarea rows="10" cols="50" id="txtResult" readonly="readonly"></textarea>	
		</div>			
	</form>
</div>

<script type="text/javascript">
function scoreInsert()
{
	var str = "";
	var arr = new Array();
	var temp;
	var n = 0;

	// -- 입력값 받아오기 및 총점계산
	do
	{
		str = prompt("이름 국어 영어 수학("+(n+1)+"):");
		
		if(str=="" || str==" " || str==null || str==".")
			break;
		
		arr[n] = str.split(" ");
		
		arr[n][4] = parseInt(arr[n][1]) + parseInt(arr[n][2]) + parseInt(arr[n][3]);
					
		n++;
		
	} while (true);
	
	// -- [test] 등수 정상 출력을 위한 샘플 데이터
	//arr = new Array(new Array("오수경", 70, 60, 50, 180),new Array("김경태", 60, 50, 40, 150),new Array("박범구", 50, 40, 30, 120),new Array("김다슬", 80, 70, 60, 210));
	
	// -- 점수 내림차순정렬
	if(arr.length>0){
		document.getElementById("txtCount").value = arr.length;
		
		for(var j=1; j<arr.length; j++)
		{
			for(var k=0; k<arr.length-j; k++)
			{
				// -- [test] 바뀌는 여부 확인
				//console.log("1="+arr[k][4]);
				//console.log("2="+arr[k+1][4]);
				//console.log(parseInt(arr[k][4]) < parseInt(arr[k+1][4]));
				if(parseInt(arr[k][4]) < parseInt(arr[k+1][4]))
				{
					temp 	= arr[k];
					arr[k] 	= arr[k+1];
					arr[k+1]= temp;
				}
				//console.log("-------------");
			}
		}		
		
		//-- 헤더 출력
		document.getElementById("txtResult").value = "이름\t국어\t영어\t수학\t총점\t등수\n";
			
		//-- 데이터 출력
		for(var k=0; k<arr.length; k++)
		{
			for(var m=0; m<arr[k].length; m++)
			{
				document.getElementById("txtResult").value += arr[k][m] + "\t";
			}
			document.getElementById("txtResult").value += (k+1) + "등" + "\n";
		}
	}
	
}
</script>
</body>
</html>

ㄴㄴ Test024.html_자바스크립트를 활용한 테이블 동적 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test024.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">
<div>
	<h1>자바스크립트를 활용한 테이블 동적 생성</h1>
	<hr>
</div>

<div class="layout">
	<form>
		<ul class="input_box">
			<li>
				<span stlye="tit">이름</span> <input type="text" id="txtName" class="txt">
			</li>			
			<li>
				<span stlye="tit">전화번호</span> <input type="text" id="txtTel" class="txt">
			</li>			
			<li>
				<span stlye="tit">주소</span> <input type="text" id="txtAddr" class="txt">
			</li>			
		</ul>
		
		<div class="btn_box">
			<button type="button" onclick="addMember()">회원 정보 입력</button>
		</div>
		
		<div class="tbl_ty01">
			<table border="1" id="memberTbl">
				<tr><td>이름</td><td>전화번호</td><td>주소</td></tr>
				<tr><td>임하성</td><td>010-1111-1111</td><td>제주 서귀포</td></tr>
				<tr><td>김민지</td><td>010-2222-2222</td><td>전남 여수</td></tr>
				<tr><td>정현욱</td><td>010-3333-3333</td><td>경남 산청</td></tr>
				<tr><td>박나영</td><td>010-4444-4444</td><td>서울 마포구</td></tr>
			</table>
		</div>
	</form>
</div>

<script type="text/javascript">
function addMember()
{
	// 확인
	
	var name = document.getElementById("txtName").value;	// "길현욱"
	var tel = document.getElementById("txtTel").value;		// "010-5555-5555"
	var addr = document.getElementById("txtAddr").value;	// "경기도 분당"
	
	// 확인
	//alert(name + " " + tel + " " + addr);
	
	// table 엘리먼트 접근(#memberTbl);
	var tableNode = document.getElementById("memberTbl");
	
	// 확인
	//alert(tableNode);
	
	// table tr td th
	// table thead tbody tr td th
	
	// tbody 엘리먼트 접근 -> 사용하지 않는 경우 생략
	// ※ 주의. 브라우저에 따라 다른 결과
	
	// 테스트
	//alert(tableNode.childNodes[0].nodeType);
	//--==>> 출력결과: 3
	
	//alert(tableNode.childNodes[0]);
	//--==>> 출력결과: [object Text]
	
	//alert(tableNode.childNodes[1]);
	//--==>> 출력결과: [object HTMLTableSectionElement]
	
	/* **
	- childNodes: 자식노드
	- 보통 복수의 엘리먼트는 배열(ex.childNodes)
	** */
	
	// **tbody를 쓰게 될 경우 참조하기**
	/* 
	if(tableNoe.childnodes[0].nodeType==1)
	{
		tbodyNode = tableNode.childNodes[0];	// IE
	}
	else
	{
		tbodyNode = tableNode.childNodes[1];	// CR, FF (IE를 제외한 거의 모든 브라우저)
	}
	 */
	 
	// <tr></tr> 엘리먼트 동적 생성
	// <td></td> 엘리먼트 동적 생성
	
	var trNode = document.createElement("tr");		//<tr></tr> 
	// **여는태그 닫는태그 따로 만드는 것이 아니라, ↖구문 작성시 알아서 생성됨**
	/* 
	var tdNode1 = document.createElement("td");		// <td></td>
	var nameNode = document.createTextNode(name);	// <td> 노드에 추가할 "길현욱" 텍스트 노드 ㅐㅇ성
	// **텍스트를 기반으로 작성된 가지**
	
	var tdNode2 = document.createElement("td");		// <td></td>
	var telNode = document.createTextNode(tel);		// <td> 노드에 추가할 "010-5555-5555"
	
	var tdNode = document.createElement("td");		// <td></td>
	var addrNode = documtne.createTextNode(addr);	// <td> 노드에 추가할 "경기도 분당"
	
	tdNode1.appendChild(nameNode);					// <td>"길현욱"</td>
	tdNode2.appendChild(telNode);					// <td>"010-5555-5555"</td>
	tdNode3.appendChild(addrNode);					// <td>"경기도 분당"</td>
	*/
	
	trNode.appendChild(createTdNode(name));			// <tr><td>"길현욱"</td></tr>
	trNode.appendChild(createTdNode(tel));			// <tr><td>"길현욱"</td><td>"010-5555-5555"</td></tr>
	trNode.appendChild(createTdNode(addr));			// <tr><td>"길현욱"</td><td>"010-5555-5555"</td><td>"경기도 분당"</td></tr>

	tableNode.appendChild(trNode);
}


function createTdNode(val)
{
	var textNode = document.createTextNode(val);
	var tdNode = document.createElement("td");
	tdNode.appendChild(textNode);
	
	return tdNode;
}


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

ㄴㄴ Test025_01.html(문제만)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test025.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">

<div>
	<h1>테이블 동적 생성으로 만년달력 그리기</h1>
	<hr>
</div>

<div class="layout">
	<form>
		<div class="input_box">
			<input type="text" id="txtYear" class="txt" style="width: 80px">년
			<input type="text" id="txtYear" class="txt" style="width: 40px">월
		</div>

		<div class="btn_box">
			<input type="button" class="btn" value="만년달력 그리기">
		</div>		
	
		<div>
			<table border="1" id="calendarTbl">
				<tr>
					<th>일</th>
					<th>월</th>
					<th>화</th>
					<th>수</th>
					<th>목</th>
					<th>금</th>
					<th>토</th>
				</tr>
			</table>		
		</div>	
	</form>
</div>

<script type="text/javascript">
	// 사용자가 입력한 년, 월 가져오기
	
	// ※ 사용자가 입력한 년도, 월 -> 여기에 해당하는 1일의 요일 알아내기~!!
	
	// Math.floor();		-> 소수부 절삭	-> parseInt()
	// Math.ceil();			-> 소수부 올림
	// Math.round();		-> 소수부 반올림
	
	// 1단계. 1년 1월 1일 부터.. 입력 년도 기준 전년도 12월 31일 까지의 총 날짜 수 구하기
	// 2단계. 해당 년도의 1월 1일부터.. 해당 년도 해당 월 1일 까지의 총 날짜 수 구해서 1단계에 더하기
	// 3단계. 해당 년도의 해당 월의 첫 날(1일)의 요일 구하기
	// 4단계. 해당 년도 해당 월의 마지막 날짜 구하기
	//		(28일 or 29일 or 30일 or 31일)
	// 5단계. 해당 년도 해당 월 기준 달력 구성(출력, 그리기)
	//		- 해당 월의 1일이 시작되기 전에 빈 칸 td 채우기
	

</script>

</body>
</html>

ㄴㄴ Test025.html(내가 푼 풀이)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test025.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">

<div>
	<h1>테이블 동적 생성으로 만년달력 그리기</h1>
	<hr>
</div>

<div class="layout">
	<form>
		<div class="input_box">
			<input type="text" id="txtYear" class="txt" style="width: 80px">년
			<input type="text" id="txtMonth" class="txt" style="width: 40px">월
		</div>

		<div class="btn_box">
			<input type="button" class="btn" value="만년달력 그리기" onclick="actionCalendar()">
		</div>		
	
		<div>
			<table border="1" id="calendarTbl">
				<tr>
					<th>일</th>
					<th>월</th>
					<th>화</th>
					<th>수</th>
					<th>목</th>
					<th>금</th>
					<th>토</th>
				</tr>
			</table>		
		</div>	
	</form>
</div>
<script type="text/javascript">
/* 1. 달의 마지막 날짜
2. 윤년계산(4의 배수이고 100의 배수가 아니거나, 400의 배수) -> 29
3. 입력받은 연도의 이전 년도 날수까지의 계산
4. 입력받은 받은 연도(해당 연도)의 전 월까지 계산
5. 요일= 날수%7 */
	
function actionCalendar()
{
	/* var txtYear = document.getElementById("txtYear").value;	
	var txtMonth = document.getElementById("txtMonth").value; */
	
	// 1년 1월 1일은 월요일!
	
	var txtYear = "2023";
	var txtMonth = "12";
	var allDay=0;
	var monthDay=0;
	var week=0;
	var weekText;
	//console.log("1: "+ txtYear);
	//console.log("2: "+ txtMonth);
	
	//1. 달의 마지막 날짜
	var lastDay = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	//						1  2  3  4  5  6  7  8  9  10 11 12
	
	//2. 윤년계산(4의 배수이고 100의 배수가 아니거나, 400의 배수) -> 29
	if((Number(txtYear)%4==0) && (Number(txtYear)%100!=0) || (Number(txtYear)%400==0))
		lastDay[1] = 29
	//console.log("2월: "+lastDay[1]);
	
	//3. 입력받은 연도의 이전 년도 날수까지의 계산
	allDay = (Number(txtYear)-1)*365 + Math.floor((Number(txtYear)-1)/4) - Math.floor((Number(txtYear)-1)/100) + Math.floor((Number(txtYear)-1)/400);
	allDay += 1;
	//console.log("모든 날: "+allDay);
	
	//4. 입력받은 받은 연도(해당 연도)의 전 월까지 계산
	for (var i = 0; i < (Number(txtMonth)-1); i++)
	{
		monthDay += Number(lastDay[i]);
	}
	//console.log("전월까지의 날: "+ monthDay);
	
	//5. 요일= 날수%7
	week = Math.floor((allDay + monthDay)%7);
	//console.log(week);
	
	switch(week)
	{
		case 0: 
			weekText = "일";break;
		case 1: 
			weekText = "월";break;
		case 2: 
			weekText = "화";break;
		case 3: 
			weekText = "수";break;
		case 4: 
			weekText = "목";break;
		case 5: 
			weekText = "금";break;
		case 6: 
			weekText = "토";break;	
	}
	//console.log("해당월의 1일 요일: "+ weekText);
	
	//6. 그리기
	var tblNode = document.getElementById("calendarTbl");
	
	var trNode = document.createElement("tr");
	
	for (var i = 1; i <= week; i++)
	{
		trNode.appendChild(createTdNode(" "));
		//console.log(trNode);
		if(i%7==0)
		{
			tblNode.appendChild(trNode);
			trNode = document.createElement("tr");
		}
		
	}
	tblNode.appendChild(trNode);
	
	for (var i = 1; i <= lastDay[Number(txtMonth)-1]; i++)
	{
		trNode.appendChild(createTdNode(i));
		//alert(trNode[0]);
		console.log(trNode);
		if((i+week)%7==0)
		{
			tblNode.appendChild(trNode);
			trNode = document.createElement("tr");
		}
		
	}
	tblNode.appendChild(trNode);	
}
	
function createTdNode(val)
{
	var dayText = document.createTextNode(val);
	var tdNode = document.createElement("td");
	tdNode.appendChild(dayText);
	
	return tdNode;	
}

	
</script>


</body>
</html>

ㄴㄴ Test025_01.html(함께 푼 풀이)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test025_1.html</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body class="section">

<div>
	<h1>테이블 동적 생성으로 만년달력 그리기</h1>
	<hr>
</div>

<div class="layout">
	<form>
		<div class="input_box">
			<input type="text" id="txtYear" class="txt" style="width: 80px">년
			<input type="text" id="txtMonth" class="txt" style="width: 40px">월
		</div>

		<div class="btn_box">
			<input type="button" class="btn" value="만년달력 그리기" onclick="actionCalendar()">
		</div>		
	
		<!-- 5-1 & 5-2 인 경우... -->
		
		<div>
			<table border="1" id="calendarTbl">
				<tr>
					<th>일</th>
					<th>월</th>
					<th>화</th>
					<th>수</th>
					<th>목</th>
					<th>금</th>
					<th>토</th>
				</tr>
			</table>		
		</div>
			
		
		<!-- 5-3 인 경우... -->
		<!-- <div>
			<div id="newCalendarBox"></div>
		</div> -->
	</form>
</div>

<script type="text/javascript">
function actionCalendar()
{

	// 사용자가 입력한 년, 월 가져오기
	var yearStr = document.getElementById("txtYear").value;
	var monthStr = document.getElementById("txtMonth").value;
	
	// 문자열 형태로 확인해 볼수 있는 유효성 검사 코드 삽입 가능~!!!
	var year = parseInt(yearStr);
	var month = parseInt(monthStr);
	
	// **년도, 월 따로 필터링**
	/*
	if (year < 1)
	{
		alert("입력 년도 이상~!!!");
		return;
	}
	
	if (month < 1 || month > 12)
	{
		alert("입력 월 이상");
		return
	}
	 */
	 
	// **년도, 월 같이 필터링**
	if (year < 1 || month < 1 || month > 12)
	{
		alert("입력한 년 또는 월이 유효하지 않습니다~!!!");
		return;
	}
	
	// ※ 사용자가 입력한 년도, 월 -> 여기에 해당하는 1일의 요일 알아내기~!!
	
	// Math.floor();		-> 소수부 절삭	-> parseInt()
	// Math.ceil();			-> 소수부 올림
	// Math.round();		-> 소수부 반올림
	
	// 1단계. 1년 1월 1일 부터.. 입력 년도 기준 전년도 12월 31일 까지의 총 날짜 수 구하기
	//**자바에서는 정수 / 정수 가 정수만 나오지만, 자바스크립트에서는 소수점까지 모두 출력됨**
	var total = 0;
	total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);
	
	// 의미 확인
	//alert("1년1월1일 ~ "+ (year-1) + "년 12월 31일: "+ total + "일");
	//--==>> 1년1월1일 ~ 2023년 12월 31일: 738885일
	
	// 2단계. 해당 년도의 1월 1일부터.. 해당 년도 해당 월 1일 까지의 총 날짜 수 구해서 1단계에 더하기
	//		1단계 더하기
	var m = [31,28,31,30,31,30,31,30,31,31,30,31];
	
	// 확인
	//alert(m.length);
	//--==>> 12
	
	// (a)
	/* 
	for (var i=0; i<month-1; i++)
		total += m[i];
	total++;
	
	if (month >= 3 && (year%4==0 && year%100!=0 || year%400==0))
		total++;
	 */
	 
	// (b)
	if(year%4==0 && year%100!=0 || year%400==0)
		m[1]=29;
	
	for(var i=0; i<month-1; i++)
		total += m[i];
	total++;
	
	// 의미 확인
	//alert("1년1월1일 ~ "+ (year-1) + "년 12월 31일: "+ total + "일");
	//--==>> 1년1월1일 ~ 2023년 12월 31일: 738946일
	
	// 3단계. 해당 년도의 해당 월의 첫 날(1일)의 요일 구하기
	var days = total%7;
	// 확인
	//alert(days);
	//--==>> 5 (2024년 3월 기준) -> 2024년 3월 1일은 금요일
	//--==>> 2 (2023년 8월 기준) -> 2023년 8월 1일은 화요일
	
	// 4단계. 해당 년도 해당 월의 마지막 날짜 구하기
	//		(28일 or 29일 or 30일 or 31일)
	var lastDay = m[month-1];

	// 위에서 (a)방식으로 처리했을 경우는 추가 연산 필요
	/* 
	if(month==2 && (year%4==0 && year%100!=0 || year%400==0))	//**2월인 동시에 윤년이라면**
	{
		lastDay=29;
	}
	 */
	 
	// 확인
	//alert(lastDay);
	//--==>> 29 (2024년 2월 기준)
	//		28 (2023년 2월 기준)
	//		31 (2024년 3월 기준)
	 
	// 5단계. 해당 년도 해당 월 기준 달력 구성(출력, 그리기)
	
	// 5-1. 기존 테이블 활용하기
	//------------------------------------------------------------------------------------
	
	/*
	var tableNode = document.getElementById("calendarTbl");
	// <table id=calendarTbl>...</table>
	
	var trNode = document.createElement("tr");
	// <tr>..</tr>
	
	//	- 해당월의 1일이 시작되기 전에 빈칸 td 채우기
	for(var i=0; i<days; i++)
	{
		trNode.appendChild(createTdNode(""));
	}
	//	- 1일 부터.. 해당 월의 마지막 날짜까지 빈칸 td 채우기
	var d = 1;
	for(var d=1; d<=lastDay; d++)
	{
		trNode.appendChild(createTdNode(d));		// 어떤 형태인지 확인
		
		// 일요일을 그리기 시작할 때...
		// 기존 tr 구성을 마무리하고
		// 다시 새로운 tr을 구성
		
		// check~!!! ---------------------------------
		if((d+days)%7==0) 							// 일요일을 그리기 전에...
		{
			//tableNode.appendChild(trNode);			// trNode 를 tableNode 에 추가
			tbodyNode.appendChild(trNode);
			trNode = document.createElement("tr");	// 새로운 trNode 구성
		}
		// ---------------------------------- check~!!!
	}
	
	// 확인
	//-- 31일 까지 출력한 날짜에서 확인한 결과
	//alert(d);
	//--==>> 32 **(2023년 3월 -> 31이 마지막 날, d 출력은 32)**
	
	//	- 날짜 구성 이후 마지막 빈칸 td 채우기
	//		(최종적으로 처리된 날짜가 일요일 개행이 적용되지 않은 경우만...)
	// **중요**
	if( ((d-1)+days)%7!=0 )
	{
		for(var i=0; i<7; i++,d++)	//**d 도 1씩 증가시켜야함**
		{
			trNode.appendChild(createTdNode(""));
			
			if((d+days)%7==0)
			{
				//tableNode.appendChild(trNode);
				tbodyNode.appendChild(trNode);
				break;			
			}				
		}
	}
	
	//tableNode.appendChild(trNode);
	*/
	//--------------------------------------------------------------- 기존 테이블 활용하기

	
	
	// 5-2. tbody 활용하기
	//------------------------------------------------------------------------------------
	
	var tableNode = document.getElementById("calendarTbl");
	var tbodyNode = null;
	
	// 확인
	//alert(tableNode);							//--==>> [object HTMLTableElement]
	//alert(tableNode.childNodes[0]);			//--==>> [object Text]
	//alert(tableNode.childNodes[0].nodeType) 	//--==>> 3
	//alert(tableNode.childNodes[1]);			//--==>> [object HTMLTableSectionElement]
	
	if(tableNode.childNodes[0].nodeType==1)
		tbodyNode = tableNode.childNodes[0];
	else
		tbodyNode = tableNode.childNodes[1];	// 크롬
	
	// 확인
	//alert(tbodyNode.childNodes.length);			//--==>> 2
	//alert(tbodyNode.childNodes[0]);				//--==>> [object HTMLTableElement]
	//alert(tbodyNode.childNodes[1]);				//--==>> [object Text]
	
	// tbodyNode 의 기존 자식 노드 삭제 과정
	for (var n=tbodyNode.childNodes.length-1; n>=0; n--)	// 1 0
	{
		tbodyNode.removeChild(tbodyNode.childNodes[n]);
	}
	
	// <table></table>
	
	var trNode = document.createElement("tr");		//<tr></tr>
	
	// 요일 이름 다시 출력하기
	var dayNames = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
	for(var i=0; i<dayNames.length; i++)
	{
		trNode.appendChild(createTdNode(dayNames[i]));
	}
	tbodyNode.appendChild(trNode);
	
	//*******************위의 내용과 같은 부분*******************
	var trNode = document.createElement("tr");
	// <tr>..</tr>
	
	//	- 해당월의 1일이 시작되기 전에 빈칸 td 채우기
	for(var i=0; i<days; i++)
	{
		trNode.appendChild(createTdNode(""));
	}
	//	- 1일 부터.. 해당 월의 마지막 날짜까지 빈칸 td 채우기
	var d = 1;
	for(var d=1; d<=lastDay; d++)
	{
		trNode.appendChild(createTdNode(d));		// 어떤 형태인지 확인
		
		// 일요일을 그리기 시작할 때...
		// 기존 tr 구성을 마무리하고
		// 다시 새로운 tr을 구성
		
		// check~!!! ---------------------------------
		if((d+days)%7==0) 							// 일요일을 그리기 전에...
		{
			//tableNode.appendChild(trNode);			// trNode 를 tableNode 에 추가
			tbodyNode.appendChild(trNode);
			trNode = document.createElement("tr");	// 새로운 trNode 구성
		}
		// ---------------------------------- check~!!!
	}
	
	// 확인
	//-- 31일 까지 출력한 날짜에서 확인한 결과
	//alert(d);
	//--==>> 32 **(2023년 3월 -> 31이 마지막 날, d 출력은 32)**
	
	//	- 날짜 구성 이후 마지막 빈칸 td 채우기
	//		(최종적으로 처리된 날짜가 일요일 개행이 적용되지 않은 경우만...)
	// **중요**
	if( ((d-1)+days)%7!=0 )
	{
		for(var i=0; i<7; i++,d++)	//**d 도 1씩 증가시켜야함**
		{
			trNode.appendChild(createTdNode(""));
			
			if((d+days)%7==0)
			{
				//tableNode.appendChild(trNode);
				tbodyNode.appendChild(trNode);
				break;			
			}				
		}
	}
	
	//tableNode.appendChild(trNode);
	
	//--------------------------------------------------------------------- tbody 활용하기
	
	
	// 5-3. 새로운 달력 그리기
	//------------------------------------------------------------------------------------
	/* 
	var calendarBox = document.getElementById("newCalendarBox");
	
	var tableNode = document.createElement("table");		//<table></table>
	
	var trNode = document.createElement("tr");				//<tr></tr>
	
	var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fir", "Sat"];
	for(var i=0; i<dayNames.length; i++)
		trNode.appendChild(createTdNode(dayNames[i]));
	tableNode.appendChild(trNode);
	
	// S: *******************위의 내용과 같은 부분*******************
	var trNode = document.createElement("tr");
	// <tr>..</tr>
	
	//	- 해당월의 1일이 시작되기 전에 빈칸 td 채우기
	for(var i=0; i<days; i++)
	{
		trNode.appendChild(createTdNode(""));
	}
	//	- 1일 부터.. 해당 월의 마지막 날짜까지 빈칸 td 채우기
	var d = 1;
	for(var d=1; d<=lastDay; d++)
	{
		trNode.appendChild(createTdNode(d));		// 어떤 형태인지 확인
		
		// 일요일을 그리기 시작할 때...
		// 기존 tr 구성을 마무리하고
		// 다시 새로운 tr을 구성
		
		// check~!!! ---------------------------------
		if((d+days)%7==0) 							// 일요일을 그리기 전에...
		{
			//tableNode.appendChild(trNode);			// trNode 를 tableNode 에 추가
			tbodyNode.appendChild(trNode);
			trNode = document.createElement("tr");	// 새로운 trNode 구성
		}
		// ---------------------------------- check~!!!
	}
	
	// 확인
	//-- 31일 까지 출력한 날짜에서 확인한 결과
	//alert(d);
	//--==>> 32 **(2023년 3월 -> 31이 마지막 날, d 출력은 32)**
	
	//	- 날짜 구성 이후 마지막 빈칸 td 채우기
	//		(최종적으로 처리된 날짜가 일요일 개행이 적용되지 않은 경우만...)
	// **중요**
	if( ((d-1)+days)%7!=0 )
	{
		for(var i=0; i<7; i++,d++)	//**d 도 1씩 증가시켜야함**
		{
			trNode.appendChild(createTdNode(""));
			
			if((d+days)%7==0)
			{
				//tableNode.appendChild(trNode);
				tbodyNode.appendChild(trNode);
				break;			
			}				
		}
	}
	
	//tableNode.appendChild(trNode);
	
	// E: *******************위의 내용과 같은 부분*******************
	
	// check~!!!
	// ****
	calendarBox.appendChild(tableNode);
	 */
	//----------------------------------------------------------------- 새로운 달력 그리기
	
	//		- 해당 월의 1일이 시작되기 전에 빈 칸 td 채우기
	
	
}

function createTdNode(val) 							// "홍길동"
{
	var textNode = document.createTextNode(val);	// ㄴ "홍길동"
	var tdNode = document.createElement("td");		// <td></td>
	tdNode.appendChild(textNode);					// <td></td>
													//		ㄴ "홍길동"
	return tdNode;									// <td>홍길동</td>
}
</script>

</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(71)[Web]7일차: ((Javascript))F_WebApp03>Test031~036 (2)	2023.12.05
(70)[Web]6일차: ((Javascript))F_WebApp03>Test026~030 (1)	2023.12.04
(69)[Web]4일차: ((Javascript)) F_WebApp03>Test015~021 (1)	2023.12.01
(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014 (0)	2023.11.29
(68)[Web]3일차: ((CSS)) F_WebApp02>Test005~020 (4)	2023.11.29

🍀보통 기록합니다💭

(70)[Web]5일차: ((Javascript))F_WebApp03>Test022~025

1. 2023.12.1(금)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest022.html_사용자 입력창(prompt())

ㄴㄴTest023_1.html_여러명데이터 등수부여 출력(함께 푼 풀이)

ㄴㄴTest023.html_여러명데이터 등수부여 출력(내 풀이)

ㄴㄴ Test024.html_자바스크립트를 활용한 테이블 동적 생성

ㄴㄴ Test025_01.html(문제만)

ㄴㄴ Test025.html(내가 푼 풀이)

ㄴㄴ Test025_01.html(함께 푼 풀이)

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(70)[Web]5일차: ((Javascript))F_WebApp03>Test022~025

1. 2023.12.1(금)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest022.html_사용자 입력창(prompt())

ㄴㄴTest023_1.html_여러명데이터 등수부여 출력(함께 푼 풀이)

ㄴㄴTest023.html_여러명데이터 등수부여 출력(내 풀이)

ㄴㄴ Test024.html_자바스크립트를 활용한 테이블 동적 생성

ㄴㄴ Test025_01.html(문제만)

ㄴㄴ Test025.html(내가 푼 풀이)

ㄴㄴ Test025_01.html(함께 푼 풀이)

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바