12/11 수업 (28일차) _

개미의 베짱이 2023. 12. 11. 17:49

2023. 12. 11. 17:49

** 1208_7 (리스너 / 자바스크립트 함수 호출) **

<!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 함수 주석처리 후

* 소스 코드

<!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" />
        &nbsp;
        <input type="button" name="result" onclick="cal()" value="계산하기" />
    </form>
</body>
</html>

** 1211_3 (로그인 성공/실패) **

* 실행은 1211_3실행

** 1211_4 (자바스크립트_학점매기기게임) **

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트-학점매기기 게임</title>

문제)채점 버튼 클릭 시 체크 사항

1. 점수를 입력했는지 체크, 안되어 있을 경우 "점수를 입력하세요." 띄워주고 커서를 점수란으로 보내기

2. 점수가 입력이 되었으면 숫자인지 체크. 아닌경우 "점수는 숫자로만 입력하세요." 띄워주고

기존값은 초기화 한 후 커서를 점수란으로 보내기

3. 점수를 숫자로 타입을 변경하고 90점이상은 A, 80점대는 B, 70점대는 C, 나머지는 F로 학점란에 값을 채운다.

단, 점수는 반드시 0~100의 값만 입력받는다.

확인버튼 클릭 시 체크 사항

1. 학점에 대한 채점이 되었는지 확인. 안되어 있을 경우 "학점에 대한 채점을 먼저 하세요."라고 띄워주고 끝.

2. 채점이 되어있으면 "서버로 보내시겠습니까?" 띄워주고 확인 버튼 선택 시 서버로 요청.

단, 서버프로그램은 1211_2.html, 전송방식은 get으로 함.

function grading(){

var score = document.form1.score.value;

if(score==""){

alert("점수를 입력하세요.");

document.form1.score.focus();

return;

}

if(isNaN(score)){

alert("점수는 숫자로만 입력하세요.");

document.form1.score.value = "";

document.form1.score.focus();

return;

}

else{

score = parseInt(score);

if(score>=90){ document.form1.grade.value = "A"; }

else if(score>=80){ document.form1.grade.value = "B"; }

else if(score>=70){ document.form1.grade.value = "C"; }

else{ document.form1.grade.value = "D"; }

}

function check(){

if(document.form1.grade.value == ""){

alert("학점에 대한 채점을 먼저 하세요.")

return;

}

if(confirm("서버로 보내시겠습니까?")){

document.form1.submit();

}

</script>

</head>

<body>

점수를 입력하세요.

점수 : <input type="text" id="score" name="score" size="5" />

<br />

학점 : <input type="text" id="grade" name="grade" size="5" />

</form>

</html>

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트-학점매기기 게임</title>

문제)채점 버튼 클릭 시 체크 사항

1. 점수를 입력했는지 체크, 안되어 있을 경우 "점수를 입력하세요." 띄워주고 커서를 점수란으로 보내기

2. 점수가 입력이 되었으면 숫자인지 체크. 아닌경우 "점수는 숫자로만 입력하세요." 띄워주고

기존값은 초기화 한 후 커서를 점수란으로 보내기

3. 점수를 숫자로 타입을 변경하고 90점이상은 A, 80점대는 B, 70점대는 C, 나머지는 F로 학점란에 값을 채운다.

단, 점수는 반드시 0~100의 값만 입력받는다.

확인버튼 클릭 시 체크 사항

1. 학점에 대한 채점이 되었는지 확인. 안되어 있을 경우 "학점에 대한 채점을 먼저 하세요."라고 띄워주고 끝.

2. 채점이 되어있으면 "서버로 보내시겠습니까?" 띄워주고 확인 버튼 선택 시 서버로 요청.

단, 서버프로그램은 1211_2.html, 전송방식은 get으로 함.

function grading(){

var score = document.form1.score.value;

//var score = document.getElementById("score").value; //윗줄과 같음

if(score==""){

alert("점수를 입력하세요.");

document.form1.score.focus();

return;

}

if(isNaN(score)){

alert("점수는 숫자로만 입력하세요.");

document.form1.score.value = "";

document.form1.score.focus();

return;

}

else{

score = parseInt(score);

if(score>=90){ grade = "A"; } //document.form1.grade.value = "A";

else if(score>=80){ grade = "B"; } //document.form1.grade.value = "B";

else if(score>=70){ grade = "C"; } //document.form1.grade.value = "C";

else{ grade = "F"; } //document.form1.grade.value = "F";

}

document.form1.grade.value = grade;

}

var grade;

function check(){

if(document.form1.score.value == ""){

alert("점수를 먼저 입력하세요.");

return;

}

if( grade == ""){ //document.form1.grade.value()==""

alert("학점에 대한 채점을 먼저 하세요.")

return;

}

if(confirm("서버로 보내시겠습니까?")){

document.form1.submit();

}

</script>

</head>

<body>

점수를 입력하세요.

점수 : <input type="text" id="score" name="score" size="5" />

<br />

학점 : <input type="text" id="grade" name="grade" size="5" />

<!--

아래에 버튼 클릭시 하나의 함수에서 처리하는 방법

-->

</form>

</html>

* 두개의 함수를 하나의 함수로 처리 *

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트-학점매기기 게임</title>

문제)채점 버튼 클릭 시 체크 사항

1. 점수를 입력했는지 체크, 안되어 있을 경우 "점수를 입력하세요." 띄워주고 커서를 점수란으로 보내기

2. 점수가 입력이 되었으면 숫자인지 체크. 아닌경우 "점수는 숫자로만 입력하세요." 띄워주고

기존값은 초기화 한 후 커서를 점수란으로 보내기

3. 점수를 숫자로 타입을 변경하고 90점이상은 A, 80점대는 B, 70점대는 C, 나머지는 F로 학점란에 값을 채운다.

단, 점수는 반드시 0~100의 값만 입력받는다.

확인버튼 클릭 시 체크 사항

1. 학점에 대한 채점이 되었는지 확인. 안되어 있을 경우 "학점에 대한 채점을 먼저 하세요."라고 띄워주고 끝.

2. 채점이 되어있으면 "서버로 보내시겠습니까?" 띄워주고 확인 버튼 선택 시 서버로 요청.

단, 서버프로그램은 1211_2.html, 전송방식은 get으로 함.

function grading(chk){

var score = document.form1.score.value;

//var score = document.getElementById("score").value; //윗줄과 같음

if(chk == "1"){

if(score==""){

alert("점수를 입력하세요.");

document.form1.score.focus();

return;

}

if(isNaN(score)){

alert("점수는 숫자로만 입력하세요.");

document.form1.score.value = "";

document.form1.score.focus();

return;

}

else{

score = parseInt(score);

if(score>=90){ grade = "A"; } //document.form1.grade.value = "A";

else if(score>=80){ grade = "B"; } //document.form1.grade.value = "B";

else if(score>=70){ grade = "C"; } //document.form1.grade.value = "C";

else{ grade = "F"; } //document.form1.grade.value = "F";

}

document.form1.grade.value = grade;

}

else{

if(document.form1.score.value == ""){

alert("점수를 먼저 입력하세요.");

return;

}

if( grade == ""){ //document.form1.grade.value()==""

alert("학점에 대한 채점을 먼저 하세요.")

return;

}

if(confirm("서버로 보내시겠습니까?")){

document.form1.submit();

}

</script>

</head>

<body>

점수를 입력하세요.

점수 : <input type="text" id="score" name="score" size="5" />

<br />

학점 : <input type="text" id="grade" name="grade" size="5" />

<!-- 두개의 함수 사용

-->

</form>

</html>

'수업끄적끄적_7MONTH > JavaScript' 카테고리의 다른 글

12/14 수업 (31일차) (0)	2023.12.14
12/13 수업 (30일차) _ for in 문 / label 문 / 배열 / 함 (0)	2023.12.13
12/12 수업 (29일차) (0)	2023.12.12
12/08 수업 (27일차) _ 자바스크립트란? / 식별자 / 타입 / 변수 / 연산자 (2)	2023.12.08

sist