<!DOCTYPE html>
<html>
<body>
<label>User name <input type="text"></label>
<em class="message"></em>
<script>
// 이름 최소 길이
const MIN_USER_NAME_LENGTH = 5;
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
$input.onblur = () => {
$msg.textContent = $input.value.length < MIN_USER_NAME_LENGTH ? `이름은 ${MIN_USER_NAME_LENGTH}자 이상 입력해 주세요`:'';
};
// const checkUserNameLength = min => {
// $msg.textContent = $input.value.length > min ? `이름은 ${min}자 이상 입력해 주세요`:'';
// };
// $input.onblur = () = {
// checkUserNameLength(MIN_USER_NAME_LENGTH);
// };
</script>
</body>
</html>잘 되긴 하는데
코드 축약을 위해 따로 함수(checkUserNameLength)를 만든거같다
// 1
const aa = min => {
$input.textContent = $input.value.length < min ? 1 : 0;
};
$input.onblur = () => {
aa(MIN_USER_NAME_LENGTH);
};
console.log($input.onblur);
// () => {
// aa(MIN_USER_NAME_LENGTH);
// };
// 2
const aa = min => () => {
$input.textContent = $input.value.length < min ? 1 : 0;
};
$input.onblur = aa(MIN_USER_NAME_LENGTH);
// 2
const aa = min => e => {
$input.textContent = $input.value.length < min ? 1 : 0;
};
$input.onblur = aa(MIN_USER_NAME_LENGTH);
console.log($input.onblur);
// (e) => {
// $msg.textContent = $input.value.length < min ? `${min}` : '';
// };
// 1 = 21 어떠한 동작을 할 명분이 없어요
아직 요리안된 있는 그대로의 날것을 console해주세요
2 괄호로 명령함으로써 저걸 요리할 명분이 있어요
aa를 ()로 요리해서 console해주세요
요리하고 나서 나온 ()의 첫번째 인수는 무조건 이벤트 객체 (e)
