HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용

<최종 화면> 요소를 이용하여 객체처럼 JS에서 제어하기

HTML <-------> JS

요소 : 객체

속성 : 멤버변수

자바스크립트에서 HTML 요소, 속성을 사용해보자.

우선 임의 값을 입력하고 계산하는 것을 해보자.

계산된 결과를 보여줄 input 요소를 만들자.

JS에서 HTML 속성을 멤버 변수처럼 사용하여 값을 얻어와 보자.

위 사진처럼 값은 string으로 되기 때문에, 문자열 결합이 된다.

<복붙용 코드>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Element Control</title>
 
    <script>
        // onclick에 의해 지정한 함수
        function cal(){
            // 사용자 입력을 받는 input요소를 참조하기
            var in1= document.getElementById('in1');
            var in2= document.getElementById('in2');
 
            // input 요소에 써있는 글씨(숫자)얻어오기
            var a=in1.value;
            var b=in2.value;
 
            // 입력 받은 두 수 덧셈하기
            var c= a+b;
            var c= parseInt(a)+parseInt(b);
 
            // 덧셈 결과를 id가 result인 녀석에게 보여주기
            var result= document.getElementById('result');
            result.value= c;
        }
 
        function changeColor(){
            var e= document.getElementById('aa');
            e.style.color="red";
            e.style.backgroundColor="yellow";
            e.style.border="2px solid blue";
 
            // 요소 찾아올때 사용하느 메소드 중 다른 방법
            var es=document.getElementsByTagName('h2'); 
            // 리턴된 요소는 여러개일 수 있어서 es는 배열변수
            es[0].style.color="red";
            es[0].style.backgroundColor="yellow";
        }
 
        function changeImage(){
            // 요소의 name속성값을 이용해서 찾아오기
            var a= document.getElementsByName('abc');
            // a변수는 여러요소일 수 있어서 배열 변수임
            a[0].src="./lion.png";
        }
 
    </script>
</head>
<body>
 
    <input type="text" id="in1"><br>
    <input type="text" id="in2"><br>
    <input type="button" value="계산" onclick="cal()"><br>
    <input type="text" id="result" size="30"><br>
 
    <hr>
    <!-- HTML요소의 특정 스타일 변경 -->
    <h2 id="aa">This is Heading</h2>
    <button onclick="changeColor()">change background color of h2 element</button>
    
    <hr>
    <!-- 이미지 변경 -->
    <img src="./storm.jpg" width="200px" name="abc">
    <button onclick="changeImage()">change image</button>
 
    <hr>
    <!-- 제어문은 특별한 것이 없음 -->
    <!-- 특이한 점이 있다면.. body안에서 html요소들과 혼재되어 적용한다는 정도.. -->
    <table border="1" style="text-align: center;">
        <tr> <td>aaa</td> </tr>
        
        <script>
            for(var i=0; i<10;i++){
                document.write('<tr> <td>'+i+'</td> </tr>');
            }
        </script>
    </table>
 
    <!-- 자바의 foreach문과 좀 비슷한것.. -->
    <!-- 코틀린의 in과 같은 !! -->
    <button onclick="display()">객체의 멤버값 출력</button>
    <script>
        function display(){
            // JS에서의 객체 생성[멤버변수 3개인 객체]
            var student= {name:"sam", age:20, major:"android"};
 
            // 객체의 멤버값 출력할 때..
            var str="";
            for(var key in student){ //임시변수는 값이 아니라 키(멤버 변수 명)임
                str += student[key] +"\n";
            }
            alert(str);
        }
    </script>
 
 
</body>
</html>
 
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글

HTML+ Java script (기초) dialog (0)	2019.12.11
HTML+Java script (기초) 배열 (0)	2019.12.11
HTML+Java script (기초) 연산자, 기능 메소드 알아보기 (0)	2019.12.11
HTML+Java script (기초) 자료형, 함수 참조, 객체 만들기 (0)	2019.12.11
HTML+Java script (기초) 자바스크립트 문법 사용 (<script> 사용부터..) (0)	2019.12.11