티스토리 뷰

수업문제

[문제] 1월 4일 (js- 국영수 생성자 & jQurey 이벤트)

WhaleTREE 2022. 1. 4. 18:20

학습정리-01-04.txt
0.00MB

1. jS - 국영수를 입력하는 3개의 input 박스를 생성후 , 
-국영수를 입력하는 3개의 input 박스를 생성
-총점 과 리셋 버튼을 생성
-총점 버튼을 누루면 총점과 평균이 나타남
  

내가 한 거...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
 
    <script>         
      function Grade(kor, eng, math){
            this.kor = kor;
            this.eng = eng;
            this.math = math;
 
            this.sum = function(){
                return (Number(kor) + Number(eng) + Number(math));
            };
 
            this.avg = function(){
                return this.sum() / 3.0;
            };
        }
 
        $(document).ready( () => {
 
            $("#avg").click( () => {
                let kor = $("#kor").val();
                let math = $("#math").val();
                let eng = $("#eng").val();
 
                let test = new Grade(kor, eng, math);
 
                let sum = "<p> 총점 : " + test.sum() + "</p>";
                let avg = "<p> 평균 : " + test.avg() + "</p>";
                $("form").after(sum);
                $("form").after(avg);
 
            });
 
            $("input[type='reset']").click( () => {
                $("p").remove(); 
            });
 
        });
         
     </script>
 </head>
 <body>
 
    <form>
        국어 <input type="text" name="kor" id="kor"><br>
        수학 <input type="text" name="math" id="math"><br>
        영어 <input type="text" name="eng" id="eng"><br>
        <input type="button" value="평균" id="avg">
        <input type="reset" value="초기화">        
    </form>
 
 </body>
 
</html>
 cs

 

선생님이 올려 주신 것

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
   function Grade (kor, eng, mat){
 
           this.kor = Number(kor);
           this.eng = Number(eng);
           this.mat = Number(mat);
 
           this.tot = function(){
               return this.kor + this.eng + this.mat;
           };
 
           this.avg = function(){
               return (this.kor + this.eng + this.mat)/3.0;
           };
 
       };
 
 
       $(document).ready(function(){
 
           $("#tot").click(function(){
               console.log("kor----- : " + $("#kor").val());
               
               //var grade = new Grade($("#kor").val(), $("#eng").val(),$("#mat").val() );
 
               //console.log("tot ===== : " + grade.tot());
               //console.log("avg ===== : " + grade.avg());
 
           });
 
           $("#avg").click(function(){
 
               
               var grade = new Grade($("#kor").val(), $("#eng").val(),$("#mat").val() );
 
               console.log("tot ===== : " + grade.tot());
               console.log("avg ===== : " + grade.avg());
               
               var divObj = $('<div>  평균은 '+ grade.avg() +  ' </div>' + '<div>  총점은 '+ grade.tot() +  ' </div>');
              
               $("#wrap").empty();
               $("#wrap").append(divObj);
               
           });
 
           $("#rst").click(function(){                              
               $("#wrap").empty();
               
               //$("#resultDiv").remove();
               $("#kor" ).val('');
               $("#eng").val('');
               $("#mat").val('');
           });
 
 
       });
 cs

내일 위의 것 타이머 돌리도록 하겠습니다.

'수업문제' 카테고리의 다른 글

[문제] 1월 11일 (DB 설계 - 모델링)  (0) 2022.01.11
[문제] 1월 5일 (js, jquery 가위바위보 게임)  (0) 2022.01.05
[문제] 1월 3일(js-가위 바위 보, 스프링 시큐리티, security-context.xml, 인증과 권한)  (0) 2022.01.03
[문제] 12월 23일 (spring mvc_board 게시판, 페이징 sql문, JS class)  (0) 2021.12.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함