JavaScript
dom 강의2
연93
2022. 8. 18. 17:54
<body onkeyup="OnKeyupProc1(event)">
<script>
// 태그의 속성으로 등록하여 호출. (ES5 이전)
const OnKeyupProc1 = function(event)
{
console.log("OnKeyupProc1()");
}
// addEventListener로 등록하여 호출 (ES6)
const OnKeyupProc2 = function(event)
{
console.log("OnKeyupProc2()");
}
document.body.addEventListener('keyup', OnKeyupProc2);
//ES5 시절 방식
document.body.onkeyup = function(event){
console.log("키업 메시지가 생겼네요");
}<style>
h1 {
/* background-color: beige; */
}
</style>
</head>
<body>
<h1>Hello</h1>
<img class="img-box" src="">
<img class="img-box" src="">
<img class="img-box" src="">
<img class="img-box" src="">
<script>
const imgElements = document.querySelectorAll('.img-box');
imgElements.forEach((element)=>{
element.setAttribute('src', 'https://placekitten.com/200/200');
});
document.querySelector('h1').style['background-color'] = 'beige';
</script><body>
email : <input type="text" id="email">
<h1 class="result"></h1>
<script>
const checkEmail = function(addr)
{
const addrLength = addr.length;
const atIndex = addr.indexOf('@');
console.log('atIndex = ' + atIndex);
console.log('addrLength = ' + addrLength);
// 1. @가 존재하지 않는다면 이메일이 아니다.
if (atIndex === -1)
{
return false;
}
// 2. @를 중심으로 <-----id----> @ <----domain---->
// id와 domain이 존재해야한다.
const addrParts = addr.split('@');
if (addrParts.length !== 2)
{
console.log('@가 2개 이상임');
return false;
}
// id의 길이 없음.
if (addrParts[0].length === 0)
{
console.log('아이디가 없음.');
return false;
}
// domain의 길이가 없음.
if (addrParts[1].length === 0)
{
console.log('도메인이 없음.');
return false;
}
const dotIndex = addrParts[1].lastIndexOf('.');
if ((dotIndex === -1) ||
(dotIndex === addrParts[1].length - 1))
{
return false;
}
return true;
}
const emailElem = document.querySelector('#email');
const resultElem = document.querySelector('.result');
emailElem.addEventListener('keyup', function(event){
let result = checkEmail(event.currentTarget.value);
if (result === true)
{
resultElem.textContent = "정상적인 이메일입니다.";
}
else
{
resultElem.textContent = "이메일이 아닙니다.";
}
});
</script>