인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
HTML 이벤트 컨트롤
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<button onclick="doSave( );">Click</button>
<script>
function doSave( ){
console.log("doSave");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<button type="button" onclick="doSearch( );">조회</button>
<script>
function doSearch( ){
console.log("조회를 시작합니다.");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="text" id="text1" onfocus="doFocus();" onblur="doBlur(this);">
<script>
function doBlur(obj){
if(obj.value == ""){
alert("필수값입니다. 반드시 입력하세요.");
}
console.log(obj.value);
}
function doFocus( ){
console.log("doFocus");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<select id="select1" onchange="doChange( );">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<script>
function doChange( ){
var selectedValue = document.getElementById("select1").value;
console.log(selectedValue);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br>
keydown:
<br>
<input type="text" id="text2" onkeydown="dokeydown(event);">
<button type="button" onclick="doSearch();">조회</button>
<script>
function dokeydown(event){
if(event.keyCode == 13){
doSearch();
}
}
function doSearch( ){
console.log("조회를 시작합니다.");
}
//keyCode를 알기 위해서는 함수의 parameter로 this 대신 event를 사용해야 한다.
//여기서 keyCode가 13인 key는 '엔터키'이다.
//텍스트 박스에 어떤 값을 입력한 후, 조회버튼 대신에 엔터키를 사용하여 조회(검색)를
//시작할 수 있다.
</script>
</body>
</html>
댓글