HTML

[HTML] javascript (3) - (로또 / innerText & innerHTML / 배열 / 객체 / 속성(property) + function(함수) / 익명함수)

소댓 2023. 4. 16. 23:06

- [javascript26] 로또

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript26.html</title>
    <style>
        img{width: 150px; height: 150px;}
    </style>
    <script>
        // 1. bigChance() 함수 만들기
        function bigChance(){
            // 2. 간단한 메세지 출력
            console.log("test");
 
            // 3. 6칸 짜리 배열 선언
            var num = new Array(6);
            
            // 4. 랜덤하게 번호 6개 생성
            // 0 < Math.random() < 1
            // 0*45 < Math.random()*45 < 45
            //        42.239XXXXXXXX
            //      < Math.floor(Math.random()*45) <
            //   0 <=                     <= 44
            for(var i=0; i<num.length; i++) {
                 // 5. 배열에 담기
                num[i] = Math.floor(Math.random()*45)+1;
            }
            console.log(num);
            // 6. img 객체 6개 가져오기
            var id1 = document.getElementById("id1");
            var id2 = document.getElementById("id2");
            var id3 = document.getElementById("id3");
            var id4 = document.getElementById("id4");
            var id5 = document.getElementById("id5");
            var id6 = document.getElementById("id6");
            
           // 7. src에 image 경로를 지정
           id1.src ="../images/ball"+num[0]+".PNG";
           id2.src ="../images/ball"+num[1]+".PNG";
           id3.src ="../images/ball"+num[2]+".PNG";
           id4.src ="../images/ball"+num[3]+".PNG";
           id5.src ="../images/ball"+num[4]+".PNG";
           id6.src ="../images/ball"+num[5]+".PNG";
 
        }
    </script>
</head>
<body>
    <!-- img[src='../images/q.jpg']#id$*6 -->
    <img src="../images/q.jpg" alt="" id="id1">
    <img src="../images/q.jpg" alt="" id="id2">
    <img src="../images/q.jpg" alt="" id="id3">
    <img src="../images/q.jpg" alt="" id="id4">
    <img src="../images/q.jpg" alt="" id="id5">
    <img src="../images/q.jpg" alt="" id="id6">
    <input type="button" value="대박" onclick="bigChance();">
</body>
</html>
 cs

 


- [javascript27] 로또 중복 없이

 

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
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript27.html</title>
    <style>
        img{width: 150px; height: 150px;}
    </style>
    <script>
        // 1. bigChance() 함수 만들기
        function bigChance(){
            // 2. 간단한 메세지 출력
            console.log("test");
 
            // 3. 6칸 짜리 배열 선언
            var num = new Array(6);
            
            // 4. 랜덤하게 번호 6개 생성
            // 0 < Math.random() < 1
            // 0*45 < Math.random()*45 < 45
            //        42.239XXXXXXXX
            //      < Math.floor(Math.random()*45) <
            //   0 <=                     <= 44
            for(var i=0; i<num.length; i++) {
                 // 5. 배열에 담기
                num[i] = Math.floor(Math.random()*45)+1;
                console.log("num ["+i+"] : "+num[i]);
                // 배열에서 현재 요소 전까지와 비교
                for(var j=0; j<i; j++) {
                    if(num[j] == num[i]) {
                    // j와 i가 같으면 i가 1 증가하지 못하게 --;
                    i--;
                    // 보자마자 똑같으면 탈출!
                    break;
                    }
                }
            }
            console.log(num);
            // 6. img 객체 6개 가져오기
            var id1 = document.getElementById("id1");
            var id2 = document.getElementById("id2");
            var id3 = document.getElementById("id3");
            var id4 = document.getElementById("id4");
            var id5 = document.getElementById("id5");
            var id6 = document.getElementById("id6");
            
           // 7. src에 image 경로를 지정
           id1.src ="../images/ball"+num[0]+".PNG";
           id2.src ="../images/ball"+num[1]+".PNG";
           id3.src ="../images/ball"+num[2]+".PNG";
           id4.src ="../images/ball"+num[3]+".PNG";
           id5.src ="../images/ball"+num[4]+".PNG";
           id6.src ="../images/ball"+num[5]+".PNG";
 
        }
    </script>
</head>
<body>
    <!-- img[src='../images/q.jpg']#id$*6 -->
    <img src="../images/q.jpg" alt="" id="id1">
    <img src="../images/q.jpg" alt="" id="id2">
    <img src="../images/q.jpg" alt="" id="id3">
    <img src="../images/q.jpg" alt="" id="id4">
    <img src="../images/q.jpg" alt="" id="id5">
    <img src="../images/q.jpg" alt="" id="id6">
    <input type="button" value="대박" onclick="bigChance();">
</body>
</html>
 cs

 


- [javascript28] 로또 중복 없이 + 정렬

 

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript28.html</title>
    <style>
        img{width: 150px; height: 150px;}
    </style>
    <script>
        // 1. bigChance() 함수 만들기
        function bigChance(){
            // 2. 간단한 메세지 출력
            console.log("test");
 
            // 3. 6칸 짜리 배열 선언
            var num = new Array(6);
            
            // 4. 랜덤하게 번호 6개 생성
            // 0 < Math.random() < 1
            // 0*45 < Math.random()*45 < 45
            //        42.239XXXXXXXX
            //      < Math.floor(Math.random()*45) <
            //   0 <=                     <= 44
            for(var i=0; i<num.length; i++) {
                 // 5. 배열에 담기
                num[i] = Math.floor(Math.random()*45)+1;
                // console.log("num ["+i+"] : "+num[i]);
                // 배열에서 현재 요소 전까지와 비교
                for(var j=0; j<i; j++) {
                    if(num[j] == num[i]) {
                    // j와 i가 같으면 i가 1 증가하지 못하게 --;
                    i--;
                    // 보자마자 똑같으면 탈출!
                    break;
                    }
                }
            }
            console.log("정렬전 : "+num);
 
            // 로또 번호 정렬
            // 임시변수 
            var temp = 0;
 
            for(var i=0; i<num.length; i++) {
                for(var j=i+1; j<num.length; j++) {
                    if(num[i] > num[j]){
                        temp = num[i];
                        num[i] = num[j];
                        num[j] = temp;
                    }
                }
            }
 
            console.log("정렬후 : "+num);
 
            // 6. img 객체 6개 가져오기
            var id1 = document.getElementById("id1");
            var id2 = document.getElementById("id2");
            var id3 = document.getElementById("id3");
            var id4 = document.getElementById("id4");
            var id5 = document.getElementById("id5");
            var id6 = document.getElementById("id6");
            
           // 7. src에 image 경로를 지정
           id1.src ="../images/ball"+num[0]+".PNG";
           id2.src ="../images/ball"+num[1]+".PNG";
           id3.src ="../images/ball"+num[2]+".PNG";
           id4.src ="../images/ball"+num[3]+".PNG";
           id5.src ="../images/ball"+num[4]+".PNG";
           id6.src ="../images/ball"+num[5]+".PNG";
 
        }
    </script>
</head>
<body>
    <!-- img[src='../images/q.jpg']#id$*6 -->
    <img src="../images/q.jpg" alt="" id="id1">
    <img src="../images/q.jpg" alt="" id="id2">
    <img src="../images/q.jpg" alt="" id="id3">
    <img src="../images/q.jpg" alt="" id="id4">
    <img src="../images/q.jpg" alt="" id="id5">
    <img src="../images/q.jpg" alt="" id="id6">
    <input type="button" value="대박" onclick="bigChance();">
</body>
</html>
 cs

 

 


- [javascript29] innerText & innerHTML

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript29.html</title>
    <script>
        // 1. 함수 만들기
        function showDiv(){
            // 2. 간단한 메세지 출력
            console.log("test");
            // 3. id: box1인 엘리먼트 객체 가져오기
            var box1 = document.getElementById("box1");
 
            // 4. 출력 dir()
            // console.dir(box1);
 
            // 5. Hello 글자 쓰기
            // box1.innerText = "<h1>Hello Javascript World!!!</h1>"
            // box1.innerText = "Hello Javascript World!!!";
            box1.innerHTML = "<h1>Hello Javascript World!!!</h1>";
            console.dir(box1);
 
 
        }
    </script>
</head>
<body>
    <div id="box1"></div>
    <div>
        <input type="button" value="출력" onclick="showDiv();">
    </div>
</body>
</html>
 cs

 


- [javascript30] 오늘 날짜 메세지 출력 > 1초에 한번 출력되도록 함수 호출

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript30.html</title>
    <script>
        // 1. 함수 만들기
        function showNowTime() {
        // 2. 간단한 메세지 출력
        // console.log("test");
        // 3. 날짜 객체
        var now = new Date();
        // console.log(now);
        // 4. 오늘 날짜를 메세지 형태로
        var today = now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "+now.getDate()+"일 " +
         now.getHours()+"시 "+now.getMinutes()+"분 " + now.getSeconds()+"초";
        console.log(today);
 
        // 5. id box1인 엘리먼트 객체
        var box1 = document.getElementById("box1");
 
        // 6. h2태그로 오늘날짜 출력되도록 쓰기
        box1.innerHTML = "<h2>"+today+"<h2>";
 
        // 1초에 한번씩 함수 호출 되도록
        // window.setTimeout(함수명, 시간);
        window.setTimeout(showNowTime, 1000);
        }
       
    </script>
</head>
<body>
    <div id="box1"></div>
    <input type="button" value="현재시간" onclick="showNowTime();">
</body>
</html>
 cs

 


- [javascript31] 메세지 출력

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript31.html</title>
    <script>
        // 1. 함수 만들기
        function prt(){
        // 2. 메세지 출력
        console.log("test");
 
        // 3. box1 에 간단한 메세지를 h3 태그로 출력
        var box1 = document.getElementById("box1");
        box1.innerHTML = "<h3>"+"4월은 공휴일이 없어요~~"+"</h3>"
        }
       
 
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="btn" onmouseover="prt();">버튼</div>
</body>
</html>
 cs

 


- [javascript32] 배열에 요소 저장하고 화면에 출력

 

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
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript32.html</title>
    <script>
       
        // 3. 전역 변수로 배열 선언 (5칸)
        var m = [];
        var no = 0;
 
        // 1. saveData() 함수 만들기
        function saveData() {
            // 2. 간단한 메세지 출력
            // console.log("test");
 
            // 4. saveData() 함수 안쪽에서 txt1 엘리먼트 객체 가져오기
            var txt1 = document.getElementById("txt1");
 
            // 5. 사용자가 입력한 값을 가져와서 배열에 담기
           
            m.push(txt1.value);// push를 사용해서 배열에 넣기
            txt1.value=''; // 입력하면 텍스트창에 적은 내용 지워지게
            txt1.focus();
 
            // 6. 콘솔에 배열 출력
            console.log(m);
        }
        // 자바스크립트는 데이터를 넣는 대로 더 들어감.. like ArrayList
 
        // 1. printData 함수 만들기
        function printData() {
            // 2. 간단한 메세지 출력
            // console.log("test");
    
            // 4. 출력할 문자열(data라는 이름) 만들기 (h2)
            var data = "";
 
            // 3. 배열에서 요소를 한개씩 꺼내서 
            for(var i=0; i<m.length; i++) {
                
                console.log[m[i]];
                data += "<h2>" + m[i] + "</h2>";
 
                 // 5. id가 txt1인 객체를 가져오기
                 var txt2 = document.getElementById("txt2");
            }
            // console.log(data);
 
            // 6. 4번에서 만든 문자열을 사용해서 
            // 7. innerHTML 배열 요소 출력
            txt2.innerHTML = data;
                
        }
        
    </script>
</head>
<body>
    <input type="text" name="" id="txt1">
    <input type="button" value="저장" onclick="saveData();">
    <input type="button" value="출력" onclick="printData();">
 
    <!-- div#txt2>h1{test} -->
    <div id="txt2">
        <h1>test</h1>
    </div>
</body>
</html>
 cs

 


- [javascript33] 메뉴 배열에 저장, 화면에 리스트로 출력

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript33.html</title>
    <script>
 
    // 4. 전역변수로 배열 선언 : msg
    var msg = [];
 
        // 1. prt() 함수 만들기
        function prt(){
            // 2. 메세지 출력
            // console.log("test");
 
            // 3. id: txt1인 엘리먼트 객체 가져오기
            var text1 = document.getElementById("txt1");
 
            // 5. 배열에 value 값 담기
            msg.push(text1.value);
            text1.value=''; // 입력한 다음에 텍스트창 비워지게
            text1.focus(); // 입력한 다음에 커서 다시 오게
 
            console.log(msg);
            // 6. 반복문을 사용해서 data <== <li> value </li> 형식의 문자열
            var data = "";
            for(var i=0; i<msg.length; i++) {
                data += "<li>" + msg[i] + "</li>";
            }
            console.log(data);
 
            // 7. id="ulEle" 인 엘리먼트의 data를 반영
            var ul = document.getElementById("ulEle");
            ul.innerHTML = data;
        }
 
   
    </script>
</head>
<body>
    <h1>점심메뉴</h1>
 
    <input type="text" name="" id="txt1">
    <input type="button" value="입력" onclick="prt();">
 
    <!-- div>ul#ulEle>li{메뉴} -->
    <div>
        <ul id="ulEle">
            <li>메뉴</li>
        </ul>
    </div>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript34.html</title>
    <script>
        var mArray = [
        "1. 우크라이나 전쟁 종료",
        "2. 치킨가격 5000원",
        "3. 신입사원 취업 100% 달성",
        "4. 제주도에서 석유가 펑펑"
        ]
        var idx = 0;
        function run() {
            // idx++;
            var box1 = document.getElementById("box1");
            box1.innerHTML="<h2>"+mArray[idx++]+"</h2>";
            console.log("함수 실행됨");
            // idx 값이 배열의 길이만큼 되었다면
            if(idx == mArray.length) {
                idx = 0;
            }
            window.setTimeout(run, 1000);
        }
        
 
    </script>
</head>
<!-- // run을 직접 호출하는 대신, 그냥 run이 실행되도록 -->
<body onload="run()"> 
    <div id="box1">
 
    </div>
    <!-- <script>
        // run();
        window.setTimeout(run, 1000); // window.setTimeout(함수명, 시간);
    </script> -->
</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
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
 
    <meta charset="UTF-8">
    <title>Q2.html</title>
    <style>
        #side{
            position: relative;
            left: 1300px;
            bottom: 420px;
        }
 
    </style>
    <script>
        var imgArray = [
        "https://static.coupangcdn.com/wa/cmg_paperboy/image/1680755105350/Untitled-2.jpg",
        "https://static.coupangcdn.com/ea/cmg_paperboy/image/1681104620810/230411_C1_%EC%9D%B4%EB%8B%AC%EC%9D%98-%EC%A3%BC%EB%B0%A9%EC%84%B8%EC%9D%BC_SMD-27199_PC.jpg",
        "https://static.coupangcdn.com/qa/cmg_paperboy/image/1680672290560/pc_crop.jpg",
        "https://image6.coupangcdn.com/image/ccm/banner/d8aa16d9e28232549566dd325ab8e5a4.png",
        "https://static.coupangcdn.com/na/cmg_paperboy/image/1681104661067/230411_C1_%ED%8C%A8%EC%85%98_A_SMD-27203_PC.jpg",
        "https://image10.coupangcdn.com/image/ccm/banner/0a7e95e9c8dbc9377a174a5f5cc19565.jpg"
        ]
        var idx = 0;
        function change1(x){
            console.log(x);
            var img1 = document.getElementById("img1");
            var mainImg = document.getElementById("mainImg");
            mainImg.src = imgArray[x];
            // window.setTimeout(run, 2000);
        }
 
 
        function run() {
            var img1 = document.getElementById("img1");
            var mainImg = document.getElementById("mainImg");
            mainImg.src=imgArray[idx++];
            // console.log("함수 실행됨");
            if(idx == imgArray.length) {
                idx = 0;
            }
            window.setTimeout(run, 2000);
        }
 
    </script>
 
</head>
<body onload="run();">
 
    <div id="main">
        <img src="https://static.coupangcdn.com/wa/cmg_paperboy/image/1680755105350/Untitled-2.jpg" alt="" id="mainImg" width="1600px" height="450px">
    </div>
    <div id="side">
        <img src="https://static.coupangcdn.com/ga/cmg_paperboy/image/1680755108350/Untitled-3.jpg" alt="" id="img1" onmouseover="change1(0);"><br>
        <img src="https://static.coupangcdn.com/ta/cmg_paperboy/image/1681104627325/230411_C1_%EC%9D%B4%EB%8B%AC%EC%9D%98-%EC%A3%BC%EB%B0%A9%EC%84%B8%EC%9D%BC_SMD-27199_BOX.png"
        alt="" id="img2" onmouseover="change1(1);" ><br>
        <img src="https://static.coupangcdn.com/ka/cmg_paperboy/image/1680672293284/item.jpg" alt="" id="img3"  onmouseover="change1(2);"><br>
        <img src="https://image10.coupangcdn.com/image/ccm/banner/eae68ef326386aab78295991b68fe210.png" alt="" id="img4"  onmouseover="change1(3);"><br>
        <img src="https://static.coupangcdn.com/aa/cmg_paperboy/image/1681104669478/230411_C1_%ED%8C%A8%EC%85%98_A_SMD-27203_ITEM.jpg" alt="" id="img5"  onmouseover="change1(4);"><br>
        <img src="https://image8.coupangcdn.com/image/ccm/banner/1bf730ef9837f659267ab0a84fcc6fdd.jpg" alt="" id="img6"  onmouseover="change1(5);"><br>
    </div>
 
</body>
 
</html>
 cs

 

 

 


- [javascript35] <자바스크립트> 객체 : 속성(property) + function(함수)

 

  <자바> 클래스의 구성 요소 : 멤버 변수, 메서드, 생성자
  <자바스크립트> 객체 : 속성(property) + function(함수)

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript35.html</title>
    <script>
        // <자바> 클래스의 구성 요소 : 멤버 변수, 메서드, 생성자
        // <자바스크립트> 객체 : 속성(property) + function(함수)
        var msg = []; // 자스의 배열
 
        // 자바 : Person p = new Person(); => 객체 생성
        var p = {}; // 자스의 객체
        // 객체
        var person = new Object();
        // 속성을 추가
        person.name = "홍길동";
        person.Name = "홍길동1";
        person.age = 20;
        
        console.dir(person);
 
    </script>
</head>
<body>
    
</body>
</html>
 cs

 


- [javascript36] 객체 만들어 isAdult 함수 활용 + 익명함수

 

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript36.html</title>
    <script>
        // JSON(JavaScript Object Notation) => 자바스크립트에서 Object를 표기하는 표기법
        // : 경량의 DATA-교환 형식
        // json.org 참고
 
        // person 이름을 갖는 자바스크립트 객체
        var person = {};
        person.name = "뽀로로";
        person.age = 28;
        person.gender = "남";
 
        // 콘솔에 출력
        console.dir(person);
 
        var person2 = {};
        person2.name = "루피";
        person2.age = 15;
        person2.gender = "여";
 
        console.dir(person2);
 
        function isAdult(obj){ // 해당 오브젝트를 주면 성인인지 아닌지 판단
            var result;
            if(obj.age > 19) {
                result = "성인";
            }else {
                result = "미성년";
            }
            console.log(obj.name + "씨는 " + result + "입니다.")
        }
 
        console.log("---------------------");
        isAdult(person);
        
        console.log("----------------------");
        isAdult(person2);
        
        // dog 객체를 만들고 구름 , 7 , 백수
        var dog = {};
        dog.name = "구름";
        dog.age = 7;
        dog.job = "백수";
        
        // 성인인지 판별
        console.log("----------------------");
        isAdult(dog);
 
 
        // p 객체 펭수 , 10 , 백수
        console.log("----------------------");
        var p1 = {};
        p1.name = "펭수";
        p1.age = 10;
        p1.job = "백수";
 
        console.dir(p1);
 
 
        // JSON
        var p2 = {
            name : "펭수",
            age : 10,
            job : "백수"
        }
        console.dir(p2);
 
        var p3 = {
            name : "둘리",
            age : 1000000003,
            gender : "남",
            // 익명함수 : 함수명, 매개변수 생략 > 재사용 가능성이 없으면 따로 정의하지 않고 익명함수 사용
            isAdult : function () {
                var result;
                if(this.age > 19){
                    result = "성인";
                }else {
                    result = "미성년";
                }
                console.log(this.name + "씨는 " + result + "입니다.")
            }
        }
        p3.isAdult();
 
        console.log("----------------------");
 
        // p4객체 홍길동 20 도적
        // 이름은 홍길동이고 나이는 20살이며 직업은 도적 성인 입니다.
        var p4 = {
            name : "홍길동", 
            age : 20,
            job : "도적",
            info : function () {
                var result;
                if(this.age > 19){
                    result = "성인";
                } else {
                    result = "미성년";
                }
                console.log("이름은 "+this.name + "이고 나이는 "+this.age+"이며 직업은 "+this.job+" "+result+"입니다.")
            }
        }
        p4.info();
 
    </script>
</head>
<body>
    
</body>
</html>
 cs

 

 

 

- [javascript37] 생성자

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript37.html</title>
    <script>
        // 자바의 생성자
        function Person(name, age, gender, job) { // 첫 자를 대문자로 작성..
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.job = job;
            // this.isAdult = 함수명; 
            this.isAdult = function() { // 익명함수
                var result;
                if (this.age > 18){
                    result="성인";
                }else {
                    result = "미성년";
                }
                console.log(this.name + "씨는" + result + "입니다.");
            }
        } // Person end
 
        var sin = new Person("신데렐라", 14, "여", "가사도우미");
        console.dir(sin);
        sin.isAdult();
    </script>
</head>
<body>
    
</body>
</html>
 cs

 

 


- [javascript38] 캔버스 태그 + <window.onload=함수명;>

 

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
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript38.html</title>
    <style>
        canvas{
            background-color: #aaaaaa;
        }
    </style>
    <script>
        // function test() {
        //     var canvas = document.getElementById("myCanvas");
        //     console.dir(canvas); 
        // } // 함수인 경우에는 script의 식이 canvas 태그보다 위에 와도 ㄱㅊ지만,
        //   // 함수가 아닌 일반 식인 경우에는 canvas 태그보다 위에 오면 null이 생김
        // // test(); // 함수 자체를 canvas태그보다 위에서 실행하면 그때도 null 발생
        
        // window.onload=test; // 윈도우창이 모두 로딩되고 나면 해당 함수 실행
        
        // 위의 함수식을 익명함수로!! > 한번 쓰고 말거라면 이름 정의할 필요 없이 익명함수로 사용
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            console.dir(canvas); 
            // 2d 컨텍스트 객체 가져오기
            var ctx = canvas.getContext("2d");
            // ctx : 붓
 
            // 그림그리기 시작
            ctx.beginPath();
            // 시작 지점으로 이동
            ctx.moveTo(50, 50);
            // 선긋기
            ctx.lineTo(150, 50);
            // 선긋기
            ctx.lineTo(50, 150);
 
            // 경로 닫기
            ctx.closePath();
 
            ctx.fillStyle = "yellow"; // 색상 지정
            // 사각형 그리기
            ctx.fillRect(100, 100, 300, 300); // 가로위치, 세로위치, 가로, 세로
 
            ctx.stroke(); // 그림이 실제로 그려지는 단계
 
            ctx.font = "35px 고딕";
            var name = "고길동";
 
            ctx.fillText("이름 : " + name, 100, 50);
        }
   
   </script>
 
 
</head>
<body>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
 
</body>
</html>
 cs

 

 


- [javascript39] 이미지 태그에 src 설정 / 이미지를 캔버스에 그리기

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript39.html</title>
    <style>
        canvas {background-color: #c0fce3;}
    </style>
    <script>
        // 현재 창이 로딩되면 myCanvas 엘리먼트를 콘솔에 출력
        // 익명함수를 사용
        window.onload = function (){
            var canvas = document.getElementById("myCanvas");
            console.log(canvas);
 
            ctx = canvas.getContext("2d");
            console.log(ctx);
            
            // 이미지 객체 > 이미지 태그에 이미지 가져오기(src로)
            var img = document.getElementById("img");
            img.src="../images/before.PNG"; // 이미지의 src 설정해서 불러오기
 
            // 이미지를 캔버스에 그리기
            var ppororo = new Image();
            ppororo.src = "../images/after.PNG";
            ppororo.onload = function(){
                ctx.drawImage(ppororo, 0, 0, 100, 100); 
            }
            console.dir(ppororo); 
        }
 
        
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
    <img src="" alt="" id="img">
</body>
</html>
 cs

 



- [javascript40] 그림 교차

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript40.html</title>
    <style>
        canvas { background-color: antiquewhite;}
    </style>
    <script>
        var bg = new Image();
        bg.src = "../images/bg.jpg";
 
        var rabbit1 = new Image();
        rabbit1.src = "../images/rabbit1.PNG";
 
        var rabbit2 = new Image();
        rabbit2.src = "../images/rabbit2.PNG";
 
        var ctx; // ctx를 전역변수로 선언해서 다른 함수해서도 사용 가능하도록 
        var counter = 0; // setInterval > drawScreen 확인용 변수
        
        window.onload=function(){
            var canvas = document.getElementById("myCanvas"); // 캔버스 객체 읽어오기
            ctx = canvas.getContext("2d"); // 2d 컨텍스트 객체 가져오기
            // 붓 준비완료
 
            // drawScreen(); // 함수 호출
            // window.setTimeout(drawScreen, 1000); // 시간 지연(1회)
            window.setInterval(drawScreen, 350); // 시간 지연 반복
 
        }
 
        function drawScreen() {
            counter ++;
            // console.log(counter);
            
            if(counter%2 == 1){
            ctx.drawImage(bg, 0, 0, 800, 600);
            ctx.drawImage(rabbit1, 100, 100, 100, 100);
          
           }else  {
            ctx.drawImage(bg, 0, 0, 800, 600);
            ctx.drawImage(rabbit2, 100, 100, 100, 100);
        }
        }
        
        
    </script>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
 cs

 

 

 

'HTML' 카테고리의 다른 글

[javascript] 우주선 게임  (0) 2023.04.18
[javascript] 마시마로 잡기 게임  (0) 2023.04.16
[HTML] javascript (2) - 응용  (0) 2023.04.16
[HTML] javascript (1)  (0) 2023.04.16
[HTML] CSS - div ( block & in-line / position - relative, absolute, fixed / button  (0) 2023.04.09

'HTML'의 다른글

  • 현재글[HTML] javascript (3) - (로또 / innerText & innerHTML / 배열 / 객체 / 속성(property) + function(함수) / 익명함수)

관련글

댓글

티스토리툴바