'랜덤함수'에 해당하는 글 1건

만년달력(요일구하기)


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


WRITTEN BY
빨강꼬마

,