input 태그는 버튼이다. 이 버튼에 글씨를 사용하고 싶다면 value 속성을 사용하면 되는 것이다.
<input type="button" value="hi">사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다.
자바스크립트에서 약 10개에서 20개 정도 되는 이벤트 들을 정의해 놓고 있다.
대표적인 onlick, onchange, onkeydown 등등 속성 들을 이벤트라고 부른다.
이런 코드가 있다고 생각해보자.
웹 브라우저는 onclick 속성을 만나면 alert('hi') 를 기억하고 있다가
“사용자가 이 버튼을 클릭하면 그 때 실행 해야지” 하고 기다리는 것이다.
그리고 실제로 사용자가 ‘hi’ 버튼을 누르면 자바스크립트로 동작하는 것이다.
<input type="button" value="hi" onclick="alert('hi')">참고로 alert() 은 팝업 창, 경고창 이다.
이런 코드가 있다고 가정 해보자.
<input type="text" onchange="alert('changed')">
이런 input 창이 있는데 인풋창에서 변화가 있을 시 실행되게 하는 것이다.
실행 방법은 안에 내용을 작성 하고, 마우스를 다른곳으로 클릭하면 실행되는 것이다.
이런 코드가 있다고 생각해보자.
인풋창에 키보드로 부터 값을 받으면 바로 팝업창이 출력 되는 것이다.
<input type="text" onkeydown="alert('key down!')">
인풋 박스안에 바로 값을 넣자 마자 팝업창이 실행 되는 것이다.
출력하기.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>대충 어떤 느낌인지 이제 알 것이다.
Reference
생활코딩 자바스크립트 : https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf