JavaScript 객체(objects) 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 9 Part 2
자바스크립트 프로그래밍 실습 달력 출력하는 프로그램 작성하기 알람, 스톱워치 프로그램 작성하기 Number Strike 게임 작성하기
달력 만들기 calendar.html을 이용하여 달력 프로그램을 작성해보자. 요구사항 (함수) printCalendar() 매월 1일의 시작 위치 매달 마지막 날(윤달 포함) nextMonthCal() 다음달 달력 prevMonthCal() 이전달 달력
calendar.html <!doctype html> <html> <head> <style> body {width:250px; margin:0 auto;} table {width: 250px; border-collapse:collapse} td,th {text-align:center} </style> <script> var today=new Date(); var currentYear=today.getFullYear(); var currentMonth=today.getMonth()+1; function currentCalendar() { printCalendar(); } function printCalendar() { var yoil=["일","월","화","수","목","금","토"]; var str="<table border=0>"; str += "<td><button><</button></td>"; str += "<td>"+currentYear +"년 "+ currentMonth +"월</td>"; str += "<td><button>></button></td>"; str += "</table>"; str += "<table border=1>"; str += "<tr>"; for(i=0; i<7; i++) str += "<th>"+yoil[i]+"</td>"; str += "</tr>"; var date=1; for(i=0; i<5; i++) { for(j=0; j<7; j++) { str += "<td>" + date++ +"</td>"; str += "</td>"; document.getElementById("myCal").innerHTML=str; </script> <body onload="currentCalendar()"> <p id=myCal></p> </body> </html>
printCalendar() 요구 사항 1일은 무슨 요일? 매월 마지막 날 수 배열 선언 윤달 계산 (윤달이면 2월은 29일) var cal = new Date(year,month-1,1); var start=cal.getDay(); var lastDate = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if( (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ) lastDate[1] = 29;
printCalendar() 요구 사항 - 계속 1일의 위치와 매달 말일까지 표에 출력하도록 조정
nextMonth()와 prevMonth() currentYear와 currentMonth를 다음 달로 계산한 후 달력 출력 다음달로 지정하는 Date 객체 nextMonth 생성 currentYear를 nextMonth.getFullYear() 이용하여 구한다. currnetMonth를 nextMonth.getMonth() 이용하여 구한다. 함수 printCalendar() 호출 prevMonthCal()도 마찬가지로 지정한다.
과제 #6-1 – calendar.html calandar.html에 스타일을 변경 1일부터 말일까지는 까만색 일요일은 빨간색 토요일은 파란색 이전달, 다음달의 잔여 날은 옅은 회색
알람 만들기 timer.html을 이용하여 알람시간을 지정하고, 지정된 시간에 알람이 울리는 프로그램 요구사항 <body> 시간, 분 입력 getTime() HTML 문서 로드시 현재 시간/분을 입력창에 setTimer() 입력된 시간으로 알람 지정 함수 checkTime() 호출 checkTime() 현재 시간과 지정된 시간과 차이를 계속(setTimeout) check 지정된 시간이 되면 알람
timer.html <!doctype html> <html> <head> <script> function datesUntilNewYear() { var now = new Date(); var newYear = new Date(now.getFullYear() + 1,0,1); var diff = newYear - now; // 내년 1월 1일과 지금 이 순간의 차이(밀리초) var milliseconds = Math.floor(diff % 1000); diff = diff / 1000; var seconds = Math.floor(diff % 60); diff = diff / 60; var minutes = Math.floor(diff % 60); var hours = Math.floor(diff % 24); diff = diff / 24; var days = Math.floor(diff); var outStr = '내년도 신정까지 ' + days + '일, ' + hours + '시간, ' + minutes; outStr += '분, ' + seconds + '초' + ' 남았습니다.'; document.getElementById('remaining').innerHTML = outStr; // 1초가 지나면 다시 함수를 호출한다. setTimeout("datesUntilNewYear()", 1000); } // 타이머를 시작한다. </script> </head> <body onload=datesUntilNewYear();> <div id='remaining'></div> </body>
<body> <body onload=getTime()> 시각: <input type=number id=sethour min=0 max=23> 분:<input type=number id=setmin min=0 max=59> <button onclick=setTimer()>set Timer</button> <div id=alarm>id=alarm: 알람시간 출력하는 곳</div> <div id='remaining'>id=remaining: 남은 시간 표시하는 곳</div> </body>
getTime() 현재 시간을 Date() 객체로부터 읽어 <input> 문의 값에 현재의 시간과 분을 입력하는 함수
setTimer() <input> 문으로부터 입력받은 시간과 분을 알람시간으로 지정하는 함수 날짜는 오늘 날짜(연도, 월, 일) 초와 밀리초는 0으로 설정 var alarmTime = new Date()를 생성하여 지정된 알람시간 설정. id=alarm부분에 지정된 알람시간을 출력 지정된 알람시간까지 남은 시간을 계산하는 함수 호출 checkTime()
checkTime() 설정된 알람 시간 alarmTime과 현재 시간과의 차이를 구하여 남은 시간을 계산하여 출력한다. setTimeout(function() {datesUntilAlarm(alarmTime)}, 1000);를 이용하여 남은 시간 계속 출력 설정된 알람시간이 되면 alert(“Time is UP”) 메시지를 출력하고 프로그램 종료
실습 문제 stopwatch 만들기 휴대폰 시계에 있는 스톱워치를 참고하여 버튼을 유동적이게 수정하여 작성
과제 #6-2 – StrikeGame.html 다음 페이지의 guess.html을 참고하여 오른쪽 그림과 같은 프로그램 만들기
guess.html <!doctype html> <head> <script> var trueNumber=""; function getNumber() { trueNumber=""; var r, s; while(trueNumber.length!=4) { r=Math.floor(Math.random()*9)+1; /* 1부터 9까지의 자연수 랜덤하게 생성 */ s=String(r); /* 숫자형 변수 r를 문자형 변수로 변환 */ if(trueNumber.indexOf(s)<0) trueNumber += s; /* 이미 trueNumber에 s가 있는지 확인 없으면 trueNumber.indexOf(s)의 값은 -1 이때 s를 trueNumber에 추가 */ } document.getElementById("number").innerHTML="생성된 4자리수는 "+trueNumber; function check() { var guessNumber=document.getElementById("guess").value; var S=0, B=0; for(var i=0; i<4; i++) { if(trueNumber.indexOf(guessNumber.charAt(i))>=0) { if(trueNumber.indexOf(guessNumber.charAt(i))==i) S+=1; else B+=1; var str="당신의 추측은 "+guessNumber+": "; str+="S="+S+" B="+B; document.getElementById("result").innerHTML=str; </script> </head> <body> <button onclick=getNumber()>숫자 생성</button> <p id=number>생성된 4자리수는</p> <input type=text id=guess> <button onclick=check()>TRY</button> <p id=result></p> </body>