-
생활코딩 3주차 실습Javascript& React study 2018. 3. 23. 00:17728x90반응형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