4-02.HTML 이벤트 컨트롤
2023. 3. 30. 13:57ㆍJavascript/자바스크립트 제대로 배워볼래?
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
focus:
blur:
<br>
<input type="text" id="text1" onfocus="doFocus();" onblur="doBlur(this);">
<br> select:
<br>
<select id="select1" onchange="doChange();">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<br>
keydown:
<br>
<input type="text" id="text2" onkeydown="doKeyDown(event);">
<button type="button" onclick="doSearch();">조회</button>
<br>
<button onclick="doSave();">Click</button>
<script>
function doFocus(){
console.log("doFocus");
}
function doBlur(obj){
if(obj.value==""){
alert("필수 값입니다. 반드시 입력하세요.");
}
console.log(obj.value);
}
function doSearch(){
console.log("조회를 시작합니다.");
}
function doChange(){
var selectedValue = document.getElementById("select1").value;
console.log(selectedValue);
}
function doKeyDown(){
if(event.keyCode == 13) {
doSearch();
}
console.log(event);
}
function doSave(){
console.log("doSave");
}
</script>
</body>
</html>'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글
| 4-04.데이터테이블 만들기 (0) | 2023.03.30 |
|---|---|
| 4-03.HTML 스타일 컨트롤 (0) | 2023.03.30 |
| 4-01.HTML Element 컨트롤 (0) | 2023.03.30 |
| 3-17.정규식(RegExp) (0) | 2023.03.30 |
| 3-16.Strict Mode (0) | 2023.03.30 |