/* 문제)과목 점수를 입력을 받아 학점을 출력하는 프로그램 과목점수는 0~100점 이며, 범위가 초과되면 "0~100점 사이 값을 입력하세요." 라고 화면에 출력. (화면에 출력 document.write 사용) 과목점수가 정상 입력되었을 경우. 90~100 : A, 80~89 : B, 70~79 : C, 60~69 : D, 나머지 : F 로 학점(grade)를 구하고 A인 경우 "잘했습니다." B인경우 "잘했습니다." C인 경우 "조금만 노력하면 잘 할수 있습니다." D인 경우 "좀 더 노력하세요" F인 경우 "많이 노력하기 바랍니다." 입력예)과목점수를 입력하세요. 85 출려계)잘했습니다. 당신의 학점은 B입니다. (단, B는 <b>태그 이용) 단, 출력은 document.write로 사용. */
/* 문제)커피를 주문하는 과정 중 어떤 커피를 주문 할 지 입력을 받은 후 출력하는 프로그램 입력예)무슨 커피 드릴까요? 아이스아메리카노 출력예)아이스아메리카노 1500월 입니다. 단, 아이스아메리카노(icecoffee) : 1500 카페라떼 : 4500 바닐라라떼 : 5500 나머지는 '000은(는) 없습니다.' 출력시 금액이 있는 경우가 정상적인 경우로 판다. */
* 1212_2 문제 2 (요일별 영업) *
/* 문제)요일을 입력받아 정상영업인지 휴무일인지 알려주는 스크립트 구현. 입력은 prompt()함수 사용. 월화수목금은 정상영업, 토일은 휴무라고 출력 입력예)요일을 입력하세요. 화 출력예)화요일은 정상영업 단, 출력을 switch문에서 처리. ...요일은 정상영업 / ...요일은 휴무 / ...은 요일이 아닙니다. */
** 1212_2 문제 3 (성적) **
/* 문제)성적 A~F 값을 입력 받아 출력. 입력예)성적을 입력하세요. a 출력예)아주 잘했습니다. 단, 성적입력은 A,B,C,F에 대해서만 처리하며 성적은 무조건 대문자로 처리하게 함. (대문자 변환 함수 : 변수명.toUpperCase()) 입력변수 grade 한개만 사용하여 처리. A : 아주 잘했습니다., B : 좋은 점수군요., C : 조금 더 노력하세요. , F : 다음 학기 수강하세요. 나머지 : 알 수 없는 학점입니다. 메세지 출력은 alert으로 처리. */
* 소스 1212_2 *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제어문(switch)</title>
</head>
<body>
<script>
var day;
var week = new Date().getDay(); //0(일요일)~6(토요일)
/*
switch(week){
case 0:
day = "일요일";
break;
case 1:
day = "월요일"; break;
case 2:
day = "화요일";
break;
case 3:
day = "수요일";
break;
case 4:
day = "목요일";
break;
case 5:
day = "금요일";
break;
case 6:
day = "토요일";
break;
default:
day = "없는 요일";
}
document.write("<h1>오늘은 <b>" + day + "</b>입니다.<h1");
*/
/* 1
문제)커피를 주문하는 과정 중 어떤 커피를 주문 할 지 입력을 받은 후 출력하는 프로그램
입력예)무슨 커피 드릴까요?
아이스아메리카노
출력예)아이스아메리카노 1500월 입니다.
단, 아이스아메리카노(icecoffee) : 1500
카페라떼 : 4500
바닐라라떼 : 5500
나머지는 '000은(는) 없습니다.'
출력시 금액이 있는 경우가 정상적인 경우로 판다.
var type = prompt("무슨 커피 드릴까요?");
var price="";
//var price="" 초기값을 세팅하지 않으면 if(price != undefined) 또는 0으로 세팅 후 (price != 0)으로 가능
switch(type){
case ("아이스아메리카노"):
case ("icecoffee"):
price = 1500;
break;
case "카페라떼":
price = 4500;
break;
case "바닐라라떼":
price = 5500;
break;
default:
document.write(type + "은(는) 없습니다.");
}
if(price != ""){document.write(type + " " + price + "원 입니다.");}
*/
/* 2
문제)요일을 입력받아 정상영업인지 휴무일인지 알려주는 스크립트 구현.
입력은 prompt()함수 사용.
월화수목금은 정상영업, 토일은 휴무라고 출력
입력예)요일을 입력하세요.
화
출력예)화요일은 정상영업
단, 출력을 switch문에서 처리.
...요일은 정상영업 / ...요일은 휴무 / ...은 요일이 아닙니다.
var day = prompt("요일을 입력하세요.");
switch(day){
case '월':
case '화':
case '수':
case '목':
case '금':
document.write(day + "요일은 정상영업");
break;
case '토':
case '일':day
document.write(day + "요일은 휴무");
break;
default:
document.write(day + "은 요일이 아닙니다.");
}
*/
/* 3
문제)성적 A~F 값을 입력 받아 출력.
입력예)성적을 입력하세요.
a
출력예)아주 잘했습니다.
단, 성적입력은 A,B,C,F에 대해서만 처리하며 성적은 무조건 대문자로 처리하게 함.
(대문자 변환 함수 : 변수명.toUpperCase())
입력변수 grade 한개만 사용하여 처리.
A : 아주 잘했습니다., B : 좋은 점수군요., C : 조금 더 노력하세요. , F : 다음 학기 수강하세요.
나머지 : 알 수 없는 학점입니다.
메세지 출력은 alert으로 처리.
*/
var grade = prompt("성적을 입력하세요.");
grade = grade.toUpperCase(); //var grade = prompt("성적을 입력하세요.").toUpperCase();
switch(grade){
case 'A':
alert("아주 잘했습니다.");
break;
case 'B':
alert("좋은 점수군요.");
break;
case 'C':
alert("조금 더 노력하세요.");
break;
case 'F':
alert("다음 학기 수강하세요");
break;
default:
alert("알 수 없는 학점입니다.");
}
</script>
</body>
</html>
** 1212_3 문제 (숫자 맞추기 게임)**
* <head>에 함수 정의 해보기 *
<body> <h1>숫자 맞추기 게임</h1> 이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. 숫자는 1부터 100사이에 있습니다.<br /> 숫자 : <input type="text" id="user" size="5" /> <input type="button" value="확인" onclick="guess()" /><br /> 추측 횟수 : <input type="text" id="guesses" size="5"> 힌트 : <input type="text" id="result" size="16" /> </body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숫자 맞추기 게임</title>
<script>
/*
입력값이 낮을 경우는 '낮습니다.', 높을 경우는 '높습니다.', 맞은 경우는 '성공입니다.'
*/
var computerNumber = 53;
var nGuessess = 0;
var cnt = 0;
//myNumber = document.getElementById("user").value;
//-> 헤드가 먼저 실행되기 때문에 document.getElementById("user").value 아직 없다. 따라서 바디 안의 무언가 가지고오려면 함수 안에서 하는 것이 좋다.
function guess(){
if(cnt==1){nGuessess=0; cnt=0;}
var result = "";
myNumber = document.getElementById("user").value;
nGuessess++; //어떤 경우든 시도는 한 것이기에 확인버튼 누를 시 증가하도록 후 맨 아래에 값 대입
if(myNumber < computerNumber){
result = myNumber + "보다 높습니다..";
alert("틀렸습니다.");
document.getElementById("user").value = "";
document.getElementById("user").focus();
}
else if(myNumber > computerNumber){
result = myNumber + "보다 낮습니다..";
document.getElementById("user").focus();
alert("틀렸습니다.");
document.getElementById("user").value = "";
document.getElementById("user").focus();
}
else if(myNumber == computerNumber){
result = "성공입니다!";
cnt=1;
}
else{
document.getElementById("result").value = '숫자를 입력하세요';
alert("숫자를 입력하세요.");
document.getElementById("user").value = "";
document.getElementById("user").focus();
}
document.getElementById("guesses").value = nGuessess;
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<h1>숫자 맞추기 게임</h1>
이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. 숫자는 1부터 100사이에 있습니다.<br />
숫자 : <input type="text" id="user" size="5" />
<input type="button" value="확인" onclick="guess()" /><br />
추측 횟수 :
<input type="text" id="guesses" size="5">
힌트 : <input type="text" id="result" size="16" />
</body>
</html>
* 반복문 : 같은 명령을 일정횟수만큼 반복하여 수행하도록 제어하는 실행문
while 문
do / while 문
for문
for / in 문
for / of 문
cf) 하나의 태그에 열고닫고 <br /> <input />
** 문제 1212_5 (구구단표 작성해보기) **
** 문제 1212_6 (prompt / innerHTML 두가지로 구구단 출력해보자) **
/* 문제) 구구단을 작은 수와 큰 수 순서로 입력받아 구구단 출력하는 프로그램 입력예)시작단을 입력하세요.2 끝단을 입력하세요.3 출력예)2단 2 * 1 =2 ... 2 * 9 = 18
3단 3 * 1 = 3 ... 3 * 9 = 27 단, 입력받은 값은 숫자로 변환함. 1. prompt 사용하여 구구단출력 2. html imput=text에서 입력받아 버튼 클릭시 구구단 출력 시작단 : num1 , 끝단 : num2 버튼 클릭시 호출함수는 gugu() <p id="tab"></p> : 이부분에 구구단 출력 */
* 방법1
* 방법 2
→방법2 <head>
<script> 속 함수
* 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반복제어문</title>
<script>
/*
문제) 구구단을 작은 수와 큰 수 순서로 입력받아 구구단 출력하는 프로그램
입력예)시작단을 입력하세요.2
끝단을 입력하세요.3
출력예)2단
2 * 1 =2
...
2 * 9 = 18
3단
3 * 1 = 3
...
3 * 9 = 27
단, 입력받은 값은 숫자로 변환함.
1. prompt 사용하여 구구단출력
2. html imput=text에서 입력받아 버튼 클릭시 구구단 출력
시작단 : num1 , 끝단 : num2 버튼 클릭시 호출함수는 gugu()
<p id="tab"></p> : 이부분에 구구단 출력
*/
function gugu(){
var i,j;
var result = ""; //누적하려면 초기값 세팅해줘야한다.
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
for(i = n1; i<=n2 ; i++){
result += "<br />" + i + "단<br />";
for(j=1 ; j<10 ; j++){
result += i + ' * ' + j + " = " + i*j + "<br />"
}
}
/*
//위의 포문과 같은 방법
for(i=n1 ; i<=n2 ; i++){
document.getElementById("tab").innerHTML += "<br ?>" + i + "단<br />";
for(j=1 ; j<10 ;j++){
document.getElementById("tab").innerHTML += i + ' * ' + j + " = " + i*j + "<br />";
}
}
*/
// document.getElementById("tab").innerHTML = result;
}
</script>
</head>
<body>
<!-- 방법1. -->
<!-- <script>
num1 = parseInt(prompt("시작단을 입력하세요."));
num2 = parseInt(prompt("끝단을 입력하세요."));
var i,j;
for(i = num1; i<=num2 ; i++){
document.write("<br />" + i + "단<br />");
for(j=1 ; j<10 ; j++){
document.write(i + ' * ' + j + " = " + (i*j) + "<br />");
}
}
</script> -->
<!-- 방법2 -->
시작단을 입력하세요. <input type="text" name="num1" id="num1" size="3" >
끝단을 입력하세요. <input type="text" name="num2" id="num2" size="3">
<input type="button" name="chk" onclick="gugu()" value="확인" /><br />
<p id="tab">여기에 innerHTML을 이용해 구구단출력을 해요(덮어쓰기)</p>
</body>
</html>
** 문제 1212_7 (3의 배수를 제외한 숫자 출력_continue / continue사용 x) **
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>\
<script>
function over(obj){
obj.src = "./img/computer2.jpeg" ;
}
function out(obj){
obj.src = "./img/computer1.jpeg";
}
</script>
</head>
<body>
<!--연산자-->
<h1>연산자</h1>
<script>
var x = 3, y = 5;
var a = "abc", b = "bcd";
document.write((x > y) + "<br />"); //false
document.write((a <= b) + "<br />"); //true(알파벳 a보다 b가 큼. 변수 맨 앞자리부터 체크)
document.write((x < a) + "<br />"); //false(숫자와 문자열 비교 불가)
x = 3, y = '3', z = 3;
document.write((x == y) + "<br />"); //true(값이 같으므로)
document.write((x === y) + "<br />"); //false(값은 같으나 타입이 다르므로)
document.write((x === z) + "<br />"); //true(값과 타입이 같으므로)
</script>
<br /><br />
<h1>delete 연산자</h1>
<script>
var arr = [1,2,3];
document.write("삭제 전 : " + arr + "<br />");
delete arr[2];
document.write("삭제 후 : " + arr + "<br />");
document.write("arr[2] : " + arr[2] + "<br />");
document.write("arr.length : " + arr.length + "<br />");
</script>
<br />
<h2><a href="javascript:void(0)">링크는 동작하지 않습니다.</a></h2>
<h2><a href="javascript:void(document.body.style.backgroundColor='yellow')">링크는 동작하지 않지만 HTML문서 배경은 변경됨.</a></h2>
<br /><br />
<!--이벤트 리스너 속성-->
<h3>이미지 위에 마우스를 올려 보세요.</h3>
<img src="./img/computer1.jpeg" alt="컴퓨터1" width="300" height="200" onmouseover="this.src='./img/computer2.jpeg'" onmouseout="this.src='./img/computer1.jpeg'" />
<br /><br />
<!--(head의)자바스크립트 함수 호출-->
<h3>이미지 위에 마우스를 올려 보세요.2</h3>
<img src="./img/computer1.jpeg" alt="컴퓨터2" width="300" height="200" onmouseover="over(this)" onmouseout="out(this)" />
</body>
</html>
→ 마우스 올리면 computer2로 이미지 바뀜
** 제어문 **
- 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문, 제어문에는 조건문과 반복문.
- 조건문 : if 문 / if else 문 / else if 문/ else문 / switch 문
문법 ) if(표현식){ 표현식의 결과가 참일 때 시행하고자 하는 실행문; }
if(표현식){ 표현식의 결과가 참일 때 시행하고자 하는 실행문; }
else{ 표현식의 결과가 참일 때 시행하고자 하는 실행문; }
if(표현식1){ 표현식1의 결과가 참일 때 시행하고자 하는 실행문; }
else if(표현식2){ 표현식2의 결과가 참일 때 시행하고자 하는 실행문; }
else{ 표현식의 결과가 참일 때 시행하고자 하는 실행문; }
** 1211 (예제/문제/문제/문제) **
/ /trim() : 공백제거
** 1211_2 (문제/문제) **
* 위 문제의 cal 함수를 .js 파일로 빼서 사용해보기
-> 원래있던 cal 함수 주석처리 후
<scriptsrc="./js/sample2.js"></script> 입력하면 같은 결과 나옴다.
* 소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트-제어문</title>
<script>
function cal(){
}
</script>
</head>
<body>
<script>
/* 1
문제) prompt()함수를 이용하여 점수를 입력받아 if~else를 사용하여 A~F까지 학점을 출력하는 스크립트 코드작성.
입력예) 점수를 입력하세요.
90
출력예) 90점은 A입니다.
단, 90~100 : A, 80~89 : B, 70~79 : C, 60~69 : D, 나머지 F
document.write()는 한번만 실행.
var score = prompt("점수를 입력하세요.");
if(score < 60){
result = "F";
}
else if(score < 70){
result = "D";
}
else if(score < 80){
result = "C";
}
else if(score < 90){
result = "B";
}
else{
result = "A";
}
document.write(score + "점은 " + result + "입니다.");
*/
/* 2
문제)짝홀수 맞추기 게임
숫자를 입력받고 계산하기 버튼 클릭 후 해당하는 함수에서 처리하는 순서
1. 입력값을 number1변수에 대입
document.폼네임.해당이름.value (예 : var tmp = document.fff.num1.value;)
2. 숫자가 입력되지 않았을 때 처리 (2번까지만 실행하고 해당 함수는 처리 끝.)
alert으로 "값을 입력하세요."
실행 후 커서를 해당 위치로 가게 함.(document.폼네임.해당이름.focus())
3. 숫자가 입력되었는지 확인
숫자입력 확인은 isNaN(입력변수) true면 숫자가 아님.
숫자가 아니면 alert으로 "숫자만 입력 가능합니다. 다시 입력하세요."
실행 후 커서를 해당 위치로 가게 하고 처리 끝
4. 여기 실행 조건은 값이 입력되었고, 입력값이 숫자인 경우 실행.
입력 값을 숫자로 변경한 후 짝/홀수 체크해서 alert으로 "짝수입니다."또는 "홀수입니다."라고 출력.
단, 서버 프로그램은 1211.html 로 하고, 서버 전송 방식은 get으로 함.
*/
function cal(){
var number1 = document.form1.num1.value; //name으로 조회
var number1 = document.getElementById("num1").value;
if(number1==""){ //if(document.form1.num1.value=="")
alert("값을 입력하세요");
document.form1.num1.focus();
return;
}
if(isNaN(number1)){
alert("숫자만 입력 가능합니다. 다시 입력하세요." );
document.form1.num1.value = "";
document.form1.num1.focus();
return;
}
number1 = parseInt(number1);
if(number1%2 == 0){
alert("짝수입니다.");
}
else{
alert("홀수입니다.");
}
if(confirm("서버로 보내시겠습니까?")){
//확인버튼 선택시 처리
document.form1.submit();
}
}
</script>
<h1>짝홀수 맞추기 게임</h1>
값을 입력하세요.
<form action="1211.html" name="form1" method="get">
숫자 : <input type="text" id="num1" name="num1" size="5" />
<input type="button" name="result" onclick="cal()" value="계산하기" />
</form>
</body>
</html>
** 1211_3 (로그인 성공/실패) **
* 실행은 1211_3실행
** 1211_4 (자바스크립트_학점매기기게임) **
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>자바스크립트-학점매기기 게임</title>
<script>
/*
문제)채점 버튼 클릭 시 체크 사항
1. 점수를 입력했는지 체크, 안되어 있을 경우 "점수를 입력하세요." 띄워주고 커서를 점수란으로 보내기
