Binary World

자바스크립트가 할 수 있는 일들 본문

개발자의 길/Javascript

자바스크립트가 할 수 있는 일들

모쿠 2017. 4. 4. 13:37

<HTML에서 자바 스크립트 기능들>


1. HTML 요소(element)의 컨텐트를 변경

2. HTML 요소(element)의 속성(attribute)를 변경

3. HTML 요소(element)의 스타일(CSS)를 변경

4. 입력 양식의 데이터를 체크


** 자바와 자바스크립트의 차이점

- JavaScript에서 if문을 사용할 때 true/false

- 0, null, undefined ==> false로 처리

- 그 외 나머지(값이 있으면) ==> true로 처리



<02_intro.html>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
</head>
<body>
 
    <h1 id="title">자바스크립트가 할 수 있는 일들</h1>
    <button onclick="changeCSS()">클릭하세요!</button>
    <p id="output" onclick="changeText()">Hello, JavaScript!</p>
 
    <figure>
        <img alt="전구" src="images/bulb_off.gif" id="img-bulb"
            onclick="changeImage()" />
        <figcaption>전구를 클릭하세요!</figcaption>
    </figure>
    
    <input id="input-age" type="number" placeholder="나이 입력" />
    <button onclick="checkAge()"> 체크</button>
 
    <script type="text/javascript">
        function changeText() {
            
            var out = document.getElementById('output');
            if (out.innerHTML.match('Hello, JavaScript!')) {// 문자열비교해서 맞으면 true
                out.innerHTML = '안녕, 자바스크립트!';
            } else {
                out.innerHTML = 'Hello, JavaScript!';
            }
        } // end changeText()
 
        function changeImage() {
            var img = document.getElementById('img-bulb');
            /*if (img.alt == "전구") {
                img.src = 'images/bulb_on.gif';
                img.alt = "전구켜짐";
            } else {
                img.src = 'images/bulb_off.gif';
                img.alt = "전구";
            } */
            
            if( img.src.match('images/bulb_off.gif')){
                img.src = 'images/bulb_on.gif';
            } else {
                img.src = 'images/bulb_off.gif';
            }
        } // end changeImage()
        
        function changeCSS() {
            var title = document.getElementById('title');
            title.style.backgroundColor = 'cyan';
            title.style.fontSize = '300%';
            title.style.color = 'red';
            
        } // end chageCSS()
        
        function checkAge() {
            var inputAge = document.getElementById('input-age');
            var age = inputAge.value;
            if(age < 0) {
                alert('잘못입력했슴돠. 다시해주쇼')
            } else {
                alert('야~야야, 내나이가 어때서~~')
            }
        }
        
    </script>
 
</body>
</html>
 
 
cs



<출력화면>


기능 실행하기 전.


기능 실행 후.


저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 Switch문  (1) 2017.04.04
자바스크립트 if문, 비교연산자, 삼항연산자  (0) 2017.04.04
자바스크립트 변수 선언과 사용  (0) 2017.04.04
자바스크립트 출력방법  (0) 2017.04.04
자바 스크립트 소개  (0) 2017.04.04
'개발자의 길/Javascript' Related Articles more
Comments