만년달력(요일구하기)
1. 1년 1월 1일부터 전년도 12월 31일까지의 총 날짜수 구함.
var total = (year-1)*365 + ((year-1)/4 - (year-1)/100 + (year-1)/400);
2. 해당년도 1월 1일부터 해당년도 해당월 1일까지의 총 날짜수 구함.
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
for (var a=0; a<month-1; a++) {
total += m[a];
}
//해당월 1일 때문에 +1
total++;
//올해가 윤년이면서 2월 이상인 경우 +1
if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {
total++;
}
3. 해당년도 해당월의 첫 날(1일)의 요일(일, 월, 화, 수, 목, 금, 토) 구함.
var d = ["일", "월", "화", "수", "목", "금", "토"];
var days = total % 7;
var result = document.getElementById("result");
result.innerHTML = d[days] + "요일";
문제) 특정 년, 월, 일 입력시 요일 구하기. 자바스크립트 이용.
실행 예)
년도 [2012 ] 월 [10 ] 일 [8 ] [결과]
결과 : 월요일
//Script29.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:80px;
}
</style>
<script type="text/javascript">
function myFunc() {
//입력한 년, 월, 일 값 읽어오기->문자열
var yObj = document.getElementById("year");
var mObj = document.getElementById("month");
var dObj = document.getElementById("day");
//문자열->숫자
var year = parseInt(yObj.value);
var month = parseInt(mObj.value);
var day = parseInt(dObj.value);
//전년도까지의 총 날짜수 계산
//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.
var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);
//해당년도 전월까지의 총 날짜수 계산
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
for (var a=0; a<month-1; a++) {
total += m[a];
}
//해당년도가 윤년이면서 2월 이상인 경우 +1
if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {
total++;
}
//해당월의 특정일까지의 총 날짜수 계산
total += day;
//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번
var days = total % 7;
//alert(days);
var d = ["일", "월", "화", "수", "목", "금", "토"];
var result = document.getElementById("result");
result.innerHTML = d[days] + "요일";
}
</script>
</head>
<body>
<div>
<h2>만년달력 요일 구하기</h2>
<h3>입력 ---------------</h3>
<form>
년 <input type="text" id="year" class="style01">
월 <input type="text" id="month" class="style01">
일 <input type="text" id="day" class="style01">
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력 ---------------</h3>
<div id="result"></div>
</div>
</body>
</html>
//Script29.html & daysCalc.js 에서 daysCalc.js
function daysCalc(year, month, day) {
//year, month, day는 정수형 데이터만 가능
//전년도까지의 총 날짜수 계산
//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.
var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);
//해당년도 전월까지의 총 날짜수 계산
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
for (var a=0; a<month-1; a++) {
total += m[a];
}
//해당년도가 윤년이면서 2월 이상인 경우 +1
if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {
total++;
}
//해당월의 특정일까지의 총 날짜수 계산
total += day;
//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번
var days = total % 7;
return days;
}
//Script29.html & daysCalc.js 에서 Script29.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:80px;
}
</style>
<script type="text/javascript" src="daysCalc.js"></script>
<script type="text/javascript">
function myFunc() {
//입력한 년, 월, 일 값 읽어오기->문자열
var yObj = document.getElementById("year");
var mObj = document.getElementById("month");
var dObj = document.getElementById("day");
//문자열->숫자
var year = parseInt(yObj.value);
var month = parseInt(mObj.value);
var day = parseInt(dObj.value);
//년, 월, 일 데이터로 요일 계산 함수 호출
var days = daysCalc(year, month, day);
//alert(days);
var d = ["일", "월", "화", "수", "목", "금", "토"];
var result = document.getElementById("result");
result.innerHTML = d[days] + "요일";
}
</script>
</head>
<body>
<div>
<h2>만년달력 요일 구하기</h2>
<h3>입력 ---------------</h3>
<form>
년 <input type="text" id="year" class="style01">
월 <input type="text" id="month" class="style01">
일 <input type="text" id="day" class="style01">
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력 ---------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 만년달력 출력. 자바스크립트 이용.
//Script30.html & daysCalc.js 에서 daysCalc.js (lastDay() 함수 추가됨)
function daysCalc(year, month, day) {
//year, month, day는 정수형 데이터만 가능
//전년도까지의 총 날짜수 계산
//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.
var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);
//해당년도 전월까지의 총 날짜수 계산
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
for (var a=0; a<month-1; a++) {
total += m[a];
}
//해당년도가 윤년이면서 2월 이상인 경우 +1
if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {
total++;
}
//해당월의 특정일까지의 총 날짜수 계산
total += day;
//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번
var days = total % 7;
return days;
}
function lastDay(year, month) {
//year, month는 정수형만 가능
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var day = m[month-1];
if (month==2 && (year%4==0 && year%100!=0 || year%400==0)) {
day = 29;
}
return day;
}
//Script30.html & daysCalc.js 에서 Script30.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:80px;
}
td {
padding:2px;
}
</style>
<script type="text/javascript" src="daysCalc.js"></script>
<script type="text/javascript">
function myFunc() {
//입력한 년, 월, 일 값 읽어오기->문자열
var yObj = document.getElementById("year");
var mObj = document.getElementById("month");
var year = parseInt(yObj.value);
var month = parseInt(mObj.value);
//요일 계산 전용 함수 호출
var week = daysCalc(year, month, 1);
//alert(week);
//마지막 날짜 구하는 함수 호출
var lastday = lastDay(year, month);
var str = "";
str += "<table><tbody>";
str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";
str += "<tr>";
//해당월 1일의 특정 요일에 해당하는 빈 칸 출력
for (var a=1; a<=week; a++) {
str += "<td></td>";
}
//해당월 1일부터 마지막 날까지 출력
for(var a=1; a<=lastday; a++) {
str += "<td style=\"text-align:center\">"+a+"</td>";
//일주일 단위로 행 변경
if (((a+week)%7)==0) {
str += "</tr><tr>";
}
}
str += "</tr></tbody></table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>만년달력 출력</h2>
<h3>입력 ---------------</h3>
<form>
년 <input type="text" id="year" class="style01">
월 <input type="text" id="month" class="style01">
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력 ---------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 만년달력 출력2. 자바스크립트 이용.
//Script31.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:80px;
}
td {
padding:2px;
}
</style>
<script type="text/javascript" src="daysCalc.js"></script>
<script type="text/javascript">
function myFunc() {
//입력한 년, 월, 일 값 읽어오기->문자열
var yObj = document.getElementById("year");
var mObj = document.getElementById("month");
var year = parseInt(yObj.options[yObj.selectedIndex].value);
var month = parseInt(mObj.options[mObj.selectedIndex].value);
//요일 계산 전용 함수 호출
var week = daysCalc(year, month, 1);
//alert(week);
//마지막 날짜 구하는 함수 호출
var lastday = lastDay(year, month);
var str = "";
str += "<table><tbody>";
str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";
str += "<tr>";
//해당월 1일의 특정 요일에 해당하는 빈 칸 출력
for (var a=1; a<=week; a++) {
str += "<td></td>";
}
//해당월 1일부터 마지막 날까지 출력
for(var a=1; a<=lastday; a++) {
str += "<td style=\"text-align:center\">"+a+"</td>";
//일주일 단위로 행 변경
if (((a+week)%7)==0) {
str += "</tr><tr>";
}
}
str += "</tr></tbody></table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>만년달력 출력</h2>
<h3>입력 ---------------</h3>
<form>
년 <select id="year" onchange="myFunc()"><option value="2011">2011년</option><option value="2012">2012년</option><option value="2013">2013년</option></select>
월 <select id="month" onchange="myFunc()"><option value="1">1월</option><option value="2">2월</option><option value="3">3월</option><option value="4">4월</option><option value="5">5월</option><option value="6">6월</option><option value="7">7월</option><option value="8">8월</option><option value="9">9월</option><option value="10">10월</option><option value="11">11월</option><option value="12">12월</option></select>
</form>
<h3>출력 ---------------</h3>
<div id="result"></div>
</div>
</body>
</html>
난수 발생
1. 0 부터 1 사이의 무작위 숫자를 난수라고 함.
2. Math.random() 메소드 이용.
//Script32.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str ="";
for (var a=1; a<=10; a++) {
//1~100 사이의 난수
str += (parseInt(Math.random()*100)+1) + " ";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>난수 발생 테스트</h2>
<form>
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력 ------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 여러개의 난수를 발생시키고, 난수들 중에서 가장 큰 값과 가장 작은 값을 별도 출력.
중복되지 않은 난수만 허용. 난수 허용 범위는 1~100. 배열 이용. 자바스크립트 이용.
실행 예)
난수 갯수(2~20) [5 ] [결과]
난수 결과 : 55 9 12 6 90
가장 큰 값 : 90
가장 작은 값 : 6
//Script33.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01
{
width: 40px;
}
</style>
<script type="text/javascript">
function myFunc() {
var msg = "난수 결과 : ";
var str = "";
var temp = document.getElementById("data");
var number = parseInt(temp.value);
for (var a=0; a<number ; a++) {
str += (parseInt(Math.random()*100)+1) + " ";
}
var arr = new Array();
arr = str.split(" ");
var max = arr[0];
var min = arr[0];
for (var a=1; a<arr.length; a++) {
if (max < parseInt(arr[a])) {
max = arr[a];
}
if (min > parseInt(arr[a])) {
min = arr[a];
}
}
msg += str + "<br>가장 큰 값 : " + max + "<br>가장 작은 값 : " + min;
var result = document.getElementById("result");
result.innerHTML = msg;
}
</script>
</head>
<body>
<div>
<h2>난수 발생 테스트2</h2>
<form>
난수 갯수(2~20) <input type="text" id="data" class="style01"> <input type="button" value="입력" onclick="myFunc()" >
</form>
<h3>출력-----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 가위,바위,보 게임.
1~3 사이의 난수가 발생하면 가위, 바위, 보라고 생각하고 사용자가 내는 가위, 바위, 보와 비교해서 승패 결정.
사용자 선택 [가위] [바위] [ 보 ]
사용자:가위, 컴퓨터:바위
결과 : 컴퓨터 승!
//Script34.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//전역변수
var userCount = 0;
var compCount = 0;
function myFunc(user) {
var comp = parseInt(Math.random()*3) + 1;
var msg = "";
if (user == comp) {
msg = "비겼습니다.";
} else if (user%3 == (comp+1)%3) {
msg = "사용자 승!";
userCount++;
} else {
msg = "컴퓨터 승!";
compCount++;
}
var arr = ["가위", "바위", "보"];
var str = "";
str += "사용자:" + arr[user-1] + ", 컴퓨터:" + arr[comp-1] + "<br>";
str += "결과 : "+ msg +"<br>";
str += "사용자승: " + userCount + "회, 컴퓨터승: " + compCount + "회";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>가위, 바위, 보 게임</h2>
<form>
사용자 선택
<input type="button" value="가위" onclick="myFunc(1)">
<input type="button" value="바위" onclick="myFunc(2)">
<input type="button" value=" 보 " onclick="myFunc(3)">
</form>
<h3>출력 -------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 로또 번호를 원하는 장수 만큼 출력. 자바스크립트 이용.
로또 번호는 1~45 범위의 숫자를 중복되지 않은 상태에서 6개가 되면 1장에 해당.
실행 예)
로또 장수(1~20) [3 ] [결과]
번호1 : 1 12 13 34 35 36
번호2 : 12 20 25 30 39 45
번호3 : 1 4 9 20 30 42
//Script35.html
라디오(<input type="radio" name="식별자"> 태그) 객체 다루기
실행 예)
- 사이즈 선택 -
o 싱글레귤러(1)
o 파인트(3)
o 쿼터(5)
[확인]
//Script36.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//NodeList(DOM) 자료형 반환됨 -> 컬렉션.
var radios = document.getElementsByName("size");
var result = 0;
for (var a=0; a<radios.length; a++) {
if (radios[a].checked) {
result = parseInt(radios[a].value);
}
}
var str = "";
switch (result) {
case 0 : str = "선택한 항목이 없습니다."; break;
case 1 : str = "선택한 사이즈는 싱글레귤러이며, 1개의 품목을 선택할 수 있습니다."; break;
case 3 : str = "선택한 사이즈는 파인트이며, 3개의 품목을 선택할 수 있습니다."; break;
case 5 : str = "선택한 사이즈는 쿼터이며, 5개의 품목을 선택할 수 있습니다."; break;
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>라디오 객체 다루기</h2>
<form>
-사이즈 선택- <br>
<input type="radio" name="size" value="1"> 싱글레귤러(1)<br>
<input type="radio" name="size" value="3"> 파인트(3)<br>
<input type="radio" name="size" value="5"> 쿼터(5)<br>
<input type="button" value="확인" onclick="myFunc()">
</form>
<h3>출력 -----------------</h3>
<div id ="result"></div>
</div>
</body>
</html>
라디오(<input type="radio" name="식별자"> 태그) 객체 다루기2
실행 예)
- 사이즈 선택 -
o 싱글레귤러(1)
o 파인트(3)
o 쿼터(5)
//Script37.html (확인 버튼 없이 라디오 객체에서 직접 클릭 이벤트 처리)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc(obj) {
var result = 0;
result = parseInt(obj.value);
var str = "";
switch(result) {
case 1: str="선택한 사이즈는 싱글레귤러(1)입니다."; break;
case 3: str="선택한 사이즈는 파인트(3)입니다."; break;
case 5: str="선택한 사이즈는 쿼터(5)입니다."; break;
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>라디오 객체 다루기2</h2>
<form>
- 사이즈 선택-<br><br>
<input type="radio" name="size" value="1"
onclick="myFunc(this)"> 싱글레귤러(1)<br>
<input type="radio" name="size" value="3"
onclick="myFunc(this)"> 파인트(3)<br>
<input type="radio" name="size" value="5"
onclick="myFunc(this)"> 쿼터(5)<br><br>
<!-- <input type="button" value="확인"
onclick="myFunc()"> -->
</form>
<h3>출력-----------</h3>
<div id="result"></div>
</div>
</body>
</html>
체크박스(<input type="checkbox"> 태그) 객체 다루기
실행 예)
- 종류 선택 -
[v]고스트월드 [v]엄마는 외계인
[ ]바나나몬스터 [ ]초코라떼크런치
[ ]뉴욕치즈케익 [ ]슈팅스타
[확인]
//Script38.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var names = ["고스트월드", "엄마는 외계인", "바나나몬스터", "초코라떼크런치", "뉴욕치즈케익", "슈팅스타"];
var checkboxes = document.getElementsByName("icecream");
var icecream = new Array();
for (var a=0, b=0; a<checkboxes.length; a++) {
if (checkboxes[a].checked) {
icecream[b] = parseInt(checkboxes[a].value);
b++;
}
}
var str = "";
if (icecream.length == 0) {
str = "선택된 항목이 없습니다.";
} else {
str += "선택한 종류는 <br>";
for (var a=0; a<icecream.length; a++) {
str += (a+1) + ". " + names[icecream[a]-1] + "<br>";
}
str += "입니다.<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>체크박스 객체 다루기</h2>
<form>
- 종류 선택 -<br>
<input type="checkbox" name="icecream" value="1">고스트월드<br>
<input type="checkbox" name="icecream" value="2">엄마는 외계인<br>
<input type="checkbox" name="icecream" value="3">바나나몬스터<br>
<input type="checkbox" name="icecream" value="4">초코라떼크런치<br>
<input type="checkbox" name="icecream" value="5">뉴욕치즈케익<br>
<input type="checkbox" name="icecream" value="6">슈팅스타<br>
<input type="button" value="확인" onclick="myFunc()">
</form>
<h3> 출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 선택 갯수 제한하기. 자바스크립트 이용.
제약조건
1. 사이즈 선택한 갯수를 초과해서 선택할 수 있다.
2. 제한된 갯수를 넘는 경우 '갯수 초과' 메세지 출력
3. 최종적으로 주문 버튼 클릭시는 주문 내역(사이즈, 종류)출력
실행 예)
- 사이즈 선택 -
o 싱글레귤러(1)
o 파인트(3)
o 쿼터(5)
- 종류 선택 -
[v]고스트월드 [v]엄마는 외계인
[ ]바나나몬스터 [ ]초코라떼크런치
[ ]뉴욕치즈케익 [ ]슈팅스타
[확인]
//Script39.html
'Java > JavaScript' 카테고리의 다른 글
| Javascript event Keycode (0) | 2013.01.10 |
|---|---|
| [20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체) (0) | 2012.11.15 |
| [20121108] 3일차 (JavaScript, 반복문(do~while, for, 이중for), split(), 배열, 배열의배열) (0) | 2012.11.08 |
| [20121107] 2일차 (Table, form, JavaScript, 이벤트 핸들러, 사용자데이터입력, 출력, document) (0) | 2012.11.08 |
| [20121106] 1일차 (HTML 기본 태그, div, span, style, CSS, h1, id, class) (0) | 2012.11.08 |
WRITTEN BY
