Javascript 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test023.html</title>
<style type="text/css">
</style>
<script type="text/javascript">
function actionScore()
{
//확인
//alert("함수호출확인");
var str = "";
var arr = new Array(new Array(), new Array(), new Array(), new Array(), new Array(), new Array()); //--> 배열안에 배열 값을 취하는 배열 구성
// ---------- ---------- ----------- ----------- ----------- -----------
// └> 이름,국어,영어,수학,총점,등수 // 다양한 형태의 변수를 담을 수 있음 -> 가능은 함
//-- 학생의 속성이 더 늘어날 수 있는 구조에서 적합
//-- 학생을 6명밖에 못받음
// └>>이름들 국어점수들 영어점수들 수학점수들 총점들 석차들 <-- 즉, 이러한 구조로 구성하여야 가능
var n=0;
do
{
str = prompt("이름 국어 영어 수학(" + (n+1) + ") : "); // "메타몽 100 100 100"
if (str==null || str=="." || str==" " || str=="")
break;
var member = str.split(" "); // var member = ["메타몽","100","100","100"];
arr[0][n] = member[0];
arr[1][n] = member[1];
arr[2][n] = member[2];
arr[3][n] = member[3];
arr[4][n] = Number(member[1])+Number(member[2])+Number(member[3]); // 총점
arr[5][n] = 1;
n++;
} while (true);
// 석차(등수)계산
for (var i = 0; i < arr[0].length; i++)
{
for (var j = 0; j < arr[0].length; j++)
{
if (i==j)
continue; //-- 뒷부분 무시하고 계속
if (Number(arr[4][i]) < Number(arr[4][j])) //-- 총점 비교 //┐
{ //│
// i번째 학생의 등수를(arr[5][i]) 1만큼 증가 //┣ continue 기준으로 뒷부분~
arr[5][i] = (Number(arr[5][i])+1).toString(); // check //│
} // 출력하는 부분이기 때문에 문자열형태로 넣어준 것 //┘
}
}
//--------------- 여기 까지 수행하면 arr 배열 구성 끝
var result ="";
for (var j = 0; j < arr[0].length; j++)
{
for (var k = 0; k < arr.length; k++)
{
// 테스트
//alert(k + " " + j);
result += arr[k][j] + "\t";
}
result += "\n"; //-- 한 학생 정보를 다 입력하고 나면 개행처리!
}
document.getElementById("txtCount").value = arr[0].length;
document.getElementById("memberList").value = "이름 국어 영어 수학 총점 등수\n";
document.getElementById("memberList").value += result;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
『prompt()』를 활용하여 여러 명의 성적 데이터를 입력받고,
등수를 부여하여 리스트를 출력하는 페이지를 구현한다.
html, css, javascript 를 활용한다.
또한, 자바스크립트 배열을 활용한다. (2차원 배열)
null / "." / " " / "" 시 종료
페이지 레이아웃
----------------------------------------------------------
<성적 정보 입력> → prompt() → 이름 국어 영어 수학(1) :
전체 인원 수 : [ 3 ] 명
--------------------------------------------
이름 국어 영어 수학 총점 등수
메타몽 80 70 60 xxx x등
리자몽 50 20 70 xxx x등
잠만보 70 10 30 xxx x등
--------------------------------------------
----------------------------------------------------------
-->
<form>
<div>
<input type="button" class="btn" value="성적 정보 입력" onclick="actionScore()">
</div>
<br>
<div>
전체 인원 수 : <input type="text" class="txt" id="txtCount" readonly="readonly" style="width: 30px;"> 명
</div>
<br>
<div>
<textarea rows="10" cols="50" readonly="readonly" id="memberList"></textarea>
</div>
</form>
</body>
</html>
- Test024
- 동적 테이블
- createElement
- appendChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test024.html</title>
<script type="text/javascript">
function addMember()
{
//확인
//alert("까꿍");
var name = document.getElementById("txtName").value;
var tel = document.getElementById("txtTel").value;
var addr = document.getElementById("txtAddr").value;
//확인
//alert(name + " " + tel + " " + addr);
//document 에 존재하는 table 엘리먼트 접근
var tableNode = document.getElementById("memberTbl");
// 확인
//alert(tableNode); //[object HTMLTableElement]
// <tr> <td>"이름"</td><td>"번호"</td><td>"주소"</td> </tr> ; 를 append 하여 테이블에 추가
// 지금 테이블 구성 : table tr td
// 테이블 구성 : table thead tbody tr td
// tbody 엘리먼트 접근 → 사용하지 않는 경우 생략
// ※ 주의. 브라우저에 따라 다른 결과 // 크로스 브라우징
/*
// 테스트
alert(tableNode.childNodes[0].nodeType);
// 크롬 브라우저 --==>> 3
if (tableNode.childNodes[0].nodeType==1)
{
tbodyNode = tableNode.childNodes[0]; // 인터넷 익스플로어(IE)
}
else
{
tbodyNode = tableNode.chileNodes[1]; // 다른 브라우저들...(CR(크롬), FF(파이어폭스), ...)
} */
// <tr></tr> 엘리먼트 동적 생성
// <td></td> 엘리먼트 동적 생성
var trNode = document.createElement("tr"); //<tr></tr>
/* -- 처음에 작성한 코드 (반복)
var tdNode1 = document.createElement("td"); //<td></td>
var nameNode = document.createTextNode(name); //<td> 노드에 추가할 "이름" 텍스트 노드 생성</td>
var tdNode2 = document.createElement("td"); //<td></td>
var telNode = document.createTextNode(tel); //<td> 노드에 추가할 "xxx-xxxx-xxxx" 텍스트 노드 생성</td>
var tdNode3 = document.createElement("td"); //<td></td>
var addrNode = document.createTextNode(addr); //<td> 노드에 추가할 "주소 주소주소" 텍스트 노드 생성</td>
//-- 생성만 해 둔 상태고 결합 된 것은 아님
// 결합
tdNode1.appendChild(nameNode); // <td>"이름"</td>
tdNode2.appendChild(telNode); // <td>"xxx-xxxx-xxxx"</td>
tdNode3.appendChild(addrNode); // <td>"주소 주소주소"</td>
trNode.appendChild(tdNode1); // <tr><td>"이름"</td></tr>
trNode.appendChild(tdNode2); // <tr><td>"이름"</td><td>"xxx-xxxx-xxxx"</td></tr>
trNode.appendChild(tdNode3); // <tr><td>"이름"</td><td>"xxx-xxxx-xxxx"</td><td>"주소 주소주소"</td></tr>
*/
//-- 함수를 이용한 노드 구성
trNode.appendChild(createTdNode(name));
trNode.appendChild(createTdNode(tel));
trNode.appendChild(createTdNode(addr));
tableNode.appendChild(trNode); // <table>......<tr><td>"이름"</td><td>"xxx-xxxx-xxxx"</td><td>"주소 주소주소"</td></tr></table>
}
function createTdNode(val) // 위 함수에서 노드 생성하는 부분이 반복되기 때문에 별도의 함수로 생성
{
var textNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(textNode); // 여기까지 수행하면 완성된 <td>"내용"</td> 구문
return tdNode;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트를 활용한 테이블 동적 생성</h1>
<hr>
</div>
<div>
<form>
이름 <input type="text" id="txtName" class="txt"><br>
전화번호 <input type="text" id="txtTel" class="txt"><br>
<!-- type 에 tel 도 존재하지만 text와 다르지 않음. 그렇지만 의미를 지정하기 위해 tel 타입이 생겨남-->
주소 <input type="text" id="txtAddr" class="txt"><br>
<br>
<button type="button" onclick="addMember()"> 회원 정보 입력</button>
<br><br><br>
<table border="1" id="memberTbl">
<tr>
<th>이름</th><th>전화번호</th><th>주소</th>
</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>
</form>
</div>
</body>
</html>
- Test025
- 동적 테이블 확인하여 만년달력 만들기
(크로스 브라우징 개념)
- 5-① 기본 테이블 활용하여 달력만들기
- 5-② tbody 활용하기
- 5-③ 새로운 영역에 달력 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test025.html</title>
<style type="text/css">
*{color: #068af7; text-align: center; margin-left:auto; margin-right:auto;}
input {font-family: 나눔고딕코딩; font-weight: bold;}
input:focus {background-color: #068af7; color:white;}
.btn {width: 90px; height:30px; font-weight: bold; font-family: 나눔고딕코딩; background-color: #068af7; color: white; border:#068af7;}
.btn:hover {color:orange;}
td {text-align: right; background-color: white; color:#068af7; height: 30px;}
.txt{text-align: left; font-weight: bold;}
th {width: 40px; background-color: #068af7; color: white; font-weight:bold;}
</style>
<script type="text/javascript">
function actionCalendar()
{
//테스트
//alert("달력");
//사용자가 입력한 연,월 가져오기
var yearStr = document.getElementById("txtYear").value;
var monthStr = document.getElementById("txtMonth").value;
// 문자열 형태로 확인해볼 수 있는 유효성 검사 기능 삽입 가능
var year = parseInt(yearStr);
var month = parseInt(monthStr);
//확인
//alert("입력연도 : "+year+" / 입력월 : "+month);
//숫자 형태로 확인해 볼 수 있는 유효성 검사 기능 삽입 가능~!!!
/*-- 업무 정책에 따라 유효성 검사
if (year<1)
{
alert("입력 년도 이상!");
return;
}
if (month< 1|| month>12)
{
alert("입력 월 이상!");
return
}
*/
if (year < 1 || month < 1 || month > 12)
{
alert("입력한 년 또는 월이 유효하지 않습니다.")
return;
}
// ※ 사용자가 입력한 년도, 월 → 이에 해당하는 1일의 요일 알아내기
var total = 0;
// parseInt()
// Number()
// Math.floor() → 소숫점 이하 부분 절삭 → parseInt()
// Math.ceil() → 소숫점 이하 올림
// Math.round() → 소숫점 이하 반올림
// 1단계 : 1년 1월 1일부터 입력년도 기준 전년도 12월 31일 까지 총 날짜 수 구하기
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일 ~ 2022년 12월 31일 738520
// 2단계 : 해당 년도 1월1일 부터... 해당 년도 해당 월 1일 까지의 총 날짜 수 구해서 1단계에 더하기
// (입력년도) (입력년도 입력월)
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// 확인
//alert(m.length);
//--==>> 12
/*
// 방식 ⓐ
// 사용자가 입력한 월까지 먼저 일 수 증가
for (var i = 0; i < month-1; i++)
total += m[i];
total++; // 해당 월 1일 더해주는 것
// 입력받은 월이 3월을 넘어가는 경우 -- 윤년인지 판단하여 + 1일 해줌 // 3월~ 입력시 2월이 들어가기 때문에
if (month>=3 && (year%4==0 && year%100!=0 || year%400==0))
total++;
*/
// 방식 ⓑ -- 기존
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 + "년" + month + "월 1일 : " + total);
//--==>> 1년1월1일 ~ 2023년5월 1일 : 738641
// 3단계 : 해당 년도 해당 월(입력 년도 입력 월)의 첫 날(1일)의 요일 구하기
var days = total % 7 ;
//확인
//alert(days);
//--==>> 1 (2023년 5월 기준) → 2023년 5월 1일은 월요일
//--==>> 4 (2023년 6월 기준) → 2023년 6월 1일은 목요일
// 4단계 : 해당 년도 해당 월(입력 년도 입력 월)의 마지막 날짜 구하기
// (28일, 29일, 30일, 31일)
var lastDay = m[month-1];
/*
// ⓐ 방식으로 처리했을 경우 다음과 같은 추가 연산 필요 (2월 배열 28일 구성-즉, 윤년 확인 필요)
if (month==2 && (year%4==0 && year%100!=0 || year%400==0))
lastDay = 29;
*/
// 확인
//alert(lastDay);
//--==>> 31 (2023년 5월 기준)
//--==>> 29 (2020년 2월 기준)
// 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=0; // for문 이후에도 사용하기 위해서 변수를 바깥으로 가져옴
//for (var d = 1; d <= lastDay; d++)
for ( d = 1; d <= lastDay; d++)
{
trNode.appendChild(createTdNode(d)); // 어떻게 그려지는지 확인
//-- 이렇게만 그리면 한줄로 구성됨
//일요일을 그리기 시작할 때
// 기존 tr 구성을 마무리 → 다시 새로운 tr 을 구성
// ================================ check =================================
if ((d+days)%7==0) // 일요일을 그리기 전에...
{
tableNode.appendChild(trNode); // trNode를 tableNode 에 추가
trNode = document.createElement("tr"); // 새로운 trNode 생성
}
// ================================ check =================================
}
// alter(d);
//--==>> 32 (31일 까지 출력한 날짜에서 확인한 결과)
//--==>> 31 (30일 까지 출력한 날짜에서 확인한 결과)
// 날짜 구성 이후 마지막 빈 칸 td 채우기
// 최족적으로 처리된 날짜가 일요일 개행이 적용되지 않은 경우에만...
if ((d+days-1)%7 != 0) // 마지막에 d++ 로 적용되기 때문에 '-1' 해야 함
{
for (var i = 0; i < 7; i++, d++) // check 『d++』
{
trNode.appendChild(createTdNode(""));
if ((d+days)%7==0)
{
tableNode.appendChild(trNode);
break;
}
}
}
*/
/*------ 내 풀이
// 빈칸 개수 구하기
var binkan = 7 - parseInt(((d-1)+days)%7);
//alert(binkan);
if (binkan>0 && binkan <7)
{
for (var i = 0; i < binkan; i++)
trNode.appendChild(createTdNode(""));
// 테이블에 tr 채우기
tableNode.appendChild(trNode);
}
*/
// -------------------------------------------------------------------------------------------------- 5-1) 기존 테이블 활용하기
// 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] // DOM 객체를 다룰 때는 보이지 않는 노드들 도 있으니 주의
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 HTMLTableRowElement] -- <tr></tr>
//alert(tbodyNode.childNodes[1]); //--==>> [object Text] -- tr에 들어가있던 <td></td> 나 <th></th> 내용들..
// tbodyNode 의 기존 자식 노트 삭제 과정
//-- 계층 구조를 지울 때, 자손 엘리먼트부터 ~ 부모엘리먼트 쪽으로 제거해야한다.
// 부모 엘리먼트 부터 제거한다면 계층구조가 깨어져 반복적으로 삭제가 불가능하다.
for (var n=tbodyNode.childNodes.length-1 ; n>=0; n--)
{
tbodyNode.removeChild(tbodyNode.childNodes[n]);
}
// 해당 과정을 거치면 --==>> <table></table> (현재 border 속성이 적용되어있어 . 형태로 출력되게 됨)
// 요일 이름 다시 출력하기
var trNode = document.createElement("tr"); // <tr></tr>
var dayName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
for (var i = 0; i < dayName.length; i++)
trNode.appendChild(createTdNode(dayName[i]));
tbodyNode.appendChild(trNode);
// 5-1) 에서 tableNode 생성 구문 이후 부분 가져옴
var trNode = document.createElement("tr"); // <tr></tr>
// 해당 월의 1일이 시작되기 전에 빈 칸 td 채우기
for (var i = 0; i < days; i++)
trNode.appendChild(createTdNode(""));
// 1일 부터 해당 월의 마지막 날까지 td 채우기
var d=0; // for문 이후에도 사용하기 위해서 변수를 바깥으로 가져옴
//for (var d = 1; d <= lastDay; d++)
for ( d = 1; d <= lastDay; d++)
{
trNode.appendChild(createTdNode(d)); // 어떻게 그려지는지 확인 -> 이렇게만 그리면 한줄로 구성됨
//일요일을 그리기 시작할 때
// 기존 tr 구성을 마무리 → 다시 새로운 tr 을 구성
if ((d+days)%7==0) // 일요일을 그리기 전에...
{
tbodyNode.appendChild(trNode); // trNode를 tbodyNode 에 추가
trNode = document.createElement("tr"); // 새로운 trNode 생성
}
}
// 날짜 구성 이후 마지막 빈 칸 td 채우기
// 최족적으로 처리된 날짜가 일요일 개행이 적용되지 않은 경우에만...
if ((d+days-1)%7 != 0) // 마지막에 d++ 로 적용되기 때문에 '-1' 해야 함
{
for (var i = 0; i < 7; i++, d++) // check 『d++』
{
trNode.appendChild(createTdNode(""));
if ((d+days)%7==0)
{
tbodyNode.appendChild(trNode);
break;
}
}
}
*/
// ------------------------------------------------------------------------------- 5-2) tbody 활용하기
// 5-3) 새로운 영역에 달력 그리기
// ---------------------------------------------------------------------------------------------------
// 시작 전에 <body> </body>의 테이블 생성 영역 주석 처리
//check~
var calendarBox = document.getElementById("newCalendarBox"); //-- <div></div> 가져옴
//check~
var tableNode = document.createElement("table"); //-- <table></table> 생성
var trNode = document.createElement("tr"); //-- <tr></tr>
var day = ["일","월","화","수","목","금","토"]; // 일~월 배열
for (var i = 0; i < day.length; i++)
trNode.appendChild(createThNode(day[i])); // <tr><td>요일</td></tr> 넣기
tableNode.appendChild(trNode); // <table></table> 에 위에서 생성 된 <tr></tr> 넣기
trNode = document.createElement("tr"); //-- 공백 채우기
for (var j = 0; j < days; j++)
trNode.appendChild(createTdNode(""));
var k = 0;
for (k = 1; k <= lastDay ; k++)
{
trNode.appendChild(createTdNode(k));
if ((days+k)%7==0)
{
tableNode.appendChild(trNode); //-- 채워진 <tr></tr> 을 <table></table> 에 넣기
trNode = document.createElement("tr"); //-- 새로운 <tr></tr> 을 생성
}
}
//남은 공백 채워서 <tr></tr> 을 <table></table> 에 넣기
for (var l = 0; l < 7; l++, k++)
{
trNode.appendChild(createTdNode(""));
if ((days+k)%7==0)
{
tableNode.appendChild(trNode); //-- 채워진 <tr></tr> 을 <table></table> 에 넣기
trNode = document.createElement("tr"); //-- 새로운 <tr></tr> 을 생성
}
}
//check~
calendarBox.appendChild(tableNode);
// -------------------------------------------------------------------- 5-3) 새로운 영역에 달력 그리기
}
function createTdNode(val) // "홍길동"
{
var textNode = document.createTextNode(val); // └ "홍길동"
var tdNode = document.createElement("td"); // <td></td>
tdNode.appendChild(textNode); // <td></td>
return tdNode; // └ "홍길동"
}
function createThNode(val) // "홍길동"
{
var textNode = document.createTextNode(val); // └ "홍길동"
var thNode = document.createElement("th"); // <td></td>
thNode.appendChild(textNode); // <td></td>
return thNode; // └ "홍길동"
}
</script>
</head>
<body>
<div>
<h1>테이블 동적 생성으로 만년달력 그리기</h1>
<hr>
</div>
<div>
<form>
<input type="text" id="txtYear" class="txt" style="width: 70px;"> 년
<input type="text" id="txtMonth" class="txt" style="width: 70px;"> 월
<br><br>
<button type="button" class="btn" onclick="actionCalendar()" style="width: 200px;">만년달력 그리기</button>
<br><br>
<!-- 5-1, 5-2번 실습 시 사용 -->
<!--
<table border="1" id="calendarTbl" style="margin-left:auto; margin-right:auto;">
<tr>
<th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>
</tr>
</table>
-->
<br><br>
<!-- 5-3 실습 -->
<!-- 테이블 그릴 영역 구성 → div -->
<div id="newCalendarBox"></div>
</form>
</div>
</body>
</html>