Jieunny์˜ ๋ธ”๋กœ๊ทธ

Unit 10. [JS/DOM] ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ณธ๋ฌธ

CodeStates/learning contents

Unit 10. [JS/DOM] ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ

Jieunny 2022. 12. 27. 14:52

๐Ÿ“ฃ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ

โžฐ ํŠน์ • ๊ฐ’์€ ๋ฐ˜๋“œ์‹œ ์ž…๋ ฅํ•ด์•ผ ํ•œ๋‹ค.
โžฐ ๋น„๋ฐ€๋ฒˆํ˜ธ๋Š” n ์ž๋ฆฌ ์ˆ˜ ์ด์ƒ์ด์–ด์•ผ ํ•˜๊ณ , ์ˆซ์ž๋‚˜ ํŠน์ˆ˜๋ฌธ์ž๋ฅผ ๋ฐ˜๋“œ์‹œ ํฌํ•จํ•ด์•ผ ํ•œ๋‹ค.

์œ„์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ '์œ ํšจ์„ฑ ๊ฒ€์‚ฌ'๋ผ๊ณ  ํ•œ๋‹ค.
let inputUsername = document.querySelector('.username');
// username ํด๋ž˜์Šค ์š”์†Œ๋ฅผ ๋ฐ›์•„์˜จ๋‹ค.

let failureMessage = document.querySelector('.failure-message');
// failure-message ํด๋ž˜์Šค ์š”์†Œ๋ฅผ ๋ฐ›์•„์˜จ๋‹ค. ์–˜๋Š” hide ํด๋ž˜์Šค๊ฐ€ ์žˆ์–ด ์ˆจ๊ฒจ์ ธ์žˆ์Œ.

inputUsername.onkeyup = function(){	// username ํด๋ž˜์Šค ์š”์†Œ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ฅผ ๋ˆŒ๋ €๋‹ค ๋—์„ ๋•Œ
	if(isMoreFour !== true){	//	username์ด 4๊ธ€์ž ์ดํ•˜์ด๋ฉด	
    	failureMessage.classList.remove('hide');
        //	hide ํด๋ž˜์Šค๋ฅผ ์ง€์›Œ์„œ warning ๋ฌธ๊ตฌ๊ฐ€ ๋œจ๊ฒŒ ๋งŒ๋“ ๋‹ค.
    }
}

function isMoreFour(value) {	// value๊ฐ€ 4๊ธ€์ž ์ด์ƒ์ธ์ง€ ํ™•์ธํ•˜๋Š” ํ•จ์ˆ˜
	if(value.length) >= 4{
    	return true;
    }
    else {
    	return false
    }
}