ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 생활코딩 3주차 실습
    Javascript& React study 2018. 3. 23. 00:17
    728x90
    반응형
    SMALL



    생활코딩 3주차 실습은

    HTML과 JavaScript의 만남 2 (이벤트)에 대해 

    공부하였습니다.




    소스코드를 입력하고 <input type="button">을 입력하면

    버튼이 만들어지게 됩니다.



    (버튼이 만들어지는 모습)



    버튼에 이름을 넣고 싶을 경우 value="원하는 이름"을 넣으면 됩니다.




    (버튼에 이름이 만들어진 모습)



    버튼을 누르면 hi라는 경고창이 뜨게 만들고 싶다면 

    onclick="alert('hi')"라는 코드를 넣는다.


    onclick에서는 반드시 js가 와야한다.("alert('hi')")

    사용자가 클릭을 했을때 자바스크립트 코드인 "alert('hi')"를

    웹브라우저가 동작할것입니다 라고 설정함


    이를 사건(이벤트)라고 한다.



    (경고창에 hi가 나오는 모습)




    <input type="text">라고 입력하면 텍스트 창이 뜨게 된다.




    (텍스트 창이 뜬 모습)




    onchange="alert('changed')"를 실행하게 하면 텍스트에 글씨를 쓰고 

    앤터를 누르게 되면 이벤트 창이 뜨게 된다.





    (이벤트 창이 뜬 모습)




    (글씨를 쓰고 몇글자를 지운뒤 다시 앤터를 누르면 실행창이 뜨지 않는다.)




    onkeydown="alert('keydown!')"을 만들게 되면

     텍스트에 입력을 하기만 해도 

    경고창에 keydown!이 나오게 된다.




    (경고창이 뜬 모습)



    onchange/onclick 이것을 이벤트라고 한다.


    이것을 이용하여 사용자와 상호작용을 하는

     웹사이트를 만들 수 있다




    728x90
    반응형
    LIST

    'Javascript& React study' 카테고리의 다른 글

    생활코딩 4강 실습  (0) 2018.03.26
    생활코딩 4강  (0) 2018.03.26
    생활코딩 3주차  (0) 2018.03.22
    생활코딩 2강 실습  (0) 2018.03.22
    생활코딩 2강  (0) 2018.03.22

    댓글

Designed by Tistory.