Javascript& React study

생활코딩 3주차 실습

이빙고 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