2018. 10. 14. 23:22 javascript

javascript 기초2(자료형 변환, html요소 접근)

사용자 입력값 받기 : prompt()

string을 number로 변환 : parseInt()

number를 string으로 변환 : String()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자료형 변환</title>
        <script>
            var a, b, input1;
            input1 = prompt("Input number.");
            document.write("type of input1 : " + typeof input1 + "<br>");
            a = parseInt(input1);
            document.write("type of parseInt input1 : " + typeof a + "<br>");
            document.write("type of a : " + typeof a + "<br>");
            b = String(a);
            document.write("type of String b : " + typeof b + "<br>");
        </script>
    </head>
    <body>
    </body>
</html>
cs


javascript 에서 html 요소에 접근.

- id 속성 사용

- id가 "a"인 요소의 값을 리턴 : document.getElementById("a").value;

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
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>계산기1</title>
        <script>
            function calc() {
                var a = document.getElementById("a").value;
                var b = document.getElementById("b").value;
                var sum = parseInt(a) + parseInt(b);
                document.getElementById("sum").value = sum;
            }
        </script>
    </head>
    <body>
        <form method="post" action="">
            <label for="a" >숫자1</label>
            <input type="text" id="a" /><br>
            <label for="b" >숫자2</label>
            <input type="text" id="b" /><br>
            <input type="button" value="합계" onclick="calc();" />
            <input type="text" id="sum" />
        </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
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html요소 색상변경</title>
        <script>
            function changeRed() {
                a = document.getElementById("header");
                a.style.color = "red";
                a.style.background = "black";
            }
            function changeBlue() {
                a = document.getElementById("header");
                a.style.color = "blue";
                a.style.background = "yellow";
            }
        </script>
    </head>
    <body>
        <h1 id="header">Header</h1>
        <button type="button" onclick="changeRed();">색상변경</button>        
        <button type="button" onclick="changeBlue();">색상변경2</button>        
    </body>
</html>
cs


저작자표시

'javascript' 카테고리의 다른 글

javascript 조건문(conditional statement)  (0) 2018.10.15
javascript 기초(변수, 자료형, 연산자)  (0) 2018.10.14
javascript 삽입 위치  (0) 2018.10.14
posted by 해에게서소년에게

티스토리툴바