ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Javascript] 1. 소개(Introduction) - 자바스크립트 강좌
    Web/JavaScript 2015. 6. 13. 14:21

    1. JavaScript Can Change HTML Content


    HTML 메서드인 document.getElementById() 를 이용하여 HTML Content를 바꿔보도록 하겠습니다!

    다음 예제는 HTML 요소(id="demo")를 찾기위한 메소드를 사용하고 "Hello JavaScript"로 요소 내용을 변경하는 예제입니다.

    아래와 같이 HTML을 작성합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <h1>What Can JavaScript Do?</h1>
     
        <p id="demo">JavaScript can change HTML content.</p>
     
        <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
            Click Me!
        </button>
     
        </body>
    </html>
     
    cs




    그러고선 웹에서 실행합니다!






    위와 같이 뜨면 버튼을 클릭하여 결과를 확인합니다.









    이전 문구가 'Hello JavaScript!' 로 바뀌었죠??


    document.getElementById().innerHTML 속성으로 해당 p 태그의 HTML text를 삽입 한 것입니다!!



    2. JavaScript Can Change HTML Attributes


    이번에는 이미지를 클릭시, 바꾸는 예제를 진행하겠습니다!



    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>
        <body>
     
        <h1>JavaScript Can Change Images</h1>
     
        <img id="myImage" onclick="changeImage()" src="bbb.jpg" width="200" height="180">
     
        <p>Click the image to change the image.</p>
     
        <script>
    function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bbb")) {
    image.src = "aaa.jpg";
    else {
    image.src = "bbb.jpg";
    }
    }
    </script>
     
        </body>
    </html>
     
    cs

     

     


    실행하면 아래와 같이 나오는데, 클릭을 통해 확인합니다!











     


    이번 예제는 이미 정의된 img 태그의 속성을 가져와서 
    Script 내에서 제어를 하는 changeImage() 함수를 생성하여 이미지를 변경하는 예제입니다!

    image 변수를 HTML의 아이디가 myImage로 된 태그로 매핑해주고,

    이미지 소스의 값에 따라 if / else 로 변경합니다!







    3. JavaScript Can Change HTML Styles (CSS)

    이번에는 CSS 바꾸는 예제를 진행하겠습니다!


     

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <h1>What Can JavaScript Do?</h1>
     
        <p id="demo">JavaScript can change the style of an HTML element.</p>
     
        <script>
    function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";           
    x.style.color = "red"
    }
    </script>
     
        <button type="button" onclick="myFunction()">Click Me!</button>
     
        </body>
    </html
     
    cs



    버튼 누르기 전의 화면입니다.







    버튼을 누르면 폰트 색과 사이즈가 변경이 됩니다!









    4. JavaScript Can Validate Data

    이번에는 값을 검사하는 예제를 진행하겠습니다!
    값 검사는 패스워드 확인, 이메일 폼 확인 등등 여러 방식으로 많이 쓰이죠~




     

    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
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <h1>JavaScript Can Validate Input</h1>
     
        <p>Please input a number between 1 and 10:</p>
     
        <input id="numb" type="number">
     
        <button type="button" onclick="myFunction()">Submit</button>
     
        <p id="demo"></p>
     
        <script>
    function myFunction() {
    var x, text;
     
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
     
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
    else {
    text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
    }
    </script>
     
        </body>
    </html
     
    cs



     









    Script의 가운데 부분에 isNaN 과 숫자 입력값이 1 부터 10 사이인지 검사하는 if 문이 존재합니다!!

    if /else에서 체크해서 text를 위의 첫 예제 방식으로 뿌려주는 것이지요~


    5. JavaScript Can Hide HTML Elements

    HTML 요소를 숨기는 것 또한 가능합니다.

    1
    document.getElementById("demo").style.display="none";
    cs



    W3schools의 JS 섹션을 참고로 작성했습니다!



    댓글

Designed by Tistory.