<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.onload = function (){
// document.write("window.onload: body태그가 로드된 후 body태그 내용을 지우고 새롭게 갱신함")
// };
(function(){
document.write("function(): 해당 코드가 존재하는 위치에서 바로 실행됨. body태그가 로드된 후 body태그 내용 유지");
})();
</script>
</head>
<body>
<h1>즉시실행함수</h1>
<script>
// (function(){
// document.write("function(): 해당 코드가 존재하는 위치에서 바로 실행됨.
// body태그가 로드된 후 body태그 내용 유지");
// })();</script>
</body>
</html>
<form> preventDefault() : default를 막아라
focus();
addEventListener - this 불가
focus preventDefault addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form name="frm" id="frm">
아이디 : <input type="text" name="uid" id="uid" /><br />
비번 : <input type="password" name="upw" id="upw" /><br />
<input type="submit" value="로그인" />
</form>
<script>
document.frm.onsubmit = function(e) {
let id = frm.uid;
let pw = frm.upw;
if (id.value == '' || pw.value == '') {
e.preventDefault(); //preventDefault(): default를 막아랑.
alert("아이디와 비밀번호 입력을 해주세요.");
id.focus();
}
};
//various event
//<form name= ""> HTML 태그에서 유일하게 name으로 가져올 수 있음
document.getElementById("uid").addEventListener("focus", function(e) {
//addEventListener : 해당 이벤트 적용 후 유지됨.
console.log('e:',e);
let sel = e.target; // e.target -> e.key값 이벤트 타겟이 된 태그(this처럼 사용)
sel.style.outline = "none";
sel.style.border = "3px solid #777";
console.log('sel.style: ', sel.style);
});
</script>
</body>
</html>
