❏ JS. length 함수) 글자 수 세기 프로그램 만들기!
안녕하세요!
요즘은 자바스크립트 내의 내장 객체에 대해서 공부 중입니다.
string 객체에 대해서 공부하던 중... length 함수를 보고 생각이 나서 이렇게 시작하게 되었습니다.
그렇기에 오늘은 바닐라 자바스크립트를 사용하여 글자 수를 세는 프로그램을 만들어보겠습니다.
☝ vanilla JavaScript 바닐라 자바스크립트란?
플러그인이나 라이브러리를 사용하지 않은 순수 자바스크립트를 말합니다.
그럼 시작해볼까요?
먼저 HTML과 CSS를 설정해둡니다.
저는 오늘은 자바스크립트를 중점적으로 다루고 싶었기 때문에 HTML과 CSS는 가장 기본적으로 설정해두었습니다.
✏ HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자수를 세어드립니다!</title>
<script type="text/javascript" src="./221030pra.js"></script>
<link rel="stylesheet" href="./main.css"/>
</head>
<body>
<div class="m">
<div class="main">⌨ 글자 수 세기</div>
<br>
<div class="numver">
<textarea class="i" maxlength="2000" autofocus placeholder="여기에 입력하세요." rows="10"></textarea>
</div>
<br>
<button class="btn" href="#">확인</button>
</div>
</body>
</html>
textarea에 커서가 깜박거리는 효과를 넣고 싶어서 autofocus를 넣어보았습니다.
✏ CSS
.m{
margin-top: 40px;
margin-left: 50px;
}
.main{
font-size: 50px;
}
.i{
width: 700px;
height: 150px;
resize: none;
}
.btn{
width: 100px;
margin-left: 600px;
}그리고 또한 textarea는 설정해두지 않으면 크기를 자유롭게 늘리고 줄일 수 있기 때문에 고정을 해야 합니다.
그렇기에 resize: none; 속성을 주고 고정시켰습니다.
그럼 오늘의 중점인 자바스크립트
length함수를 사용하여 코드를 짜보았습니다.
✏ JS
document.addEventListener("DOMContentLoaded",function(){
const btn = document.querySelector("button.btn");
btn.addEventListener("click",function(){
let txt = document.querySelector("textarea.i").value;
alert(`당신은 ${txt.length} 자를 입력하셨습니다.`);
})
})
처음에는 오류가 나길래 이유를 알아보니 head부분에 js가 있다 보니 html을 다 읽지도 않고서는
자바스크립트를 먼저 실행하려고 하니 오류가 발생하는 걸 볼 수 있었습니다.
저는 자바스크립트를 body에 두고 싶지는 않았기 때문에 head영역에 내버려두고 HTML 문서를 완전히 불러오고 자바스크립트 파일을 분석할 수 있도록 "DOMContentLoaded"를 넣었습니다.
👇 "DOMContentLoaded"의 자세한 설명은 요기를 참고해보세요! 👇
https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event
DOMContentLoaded - Web API | MDN
DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
developer.mozilla.org
그럼 잘 되는지 확인해보아야겠지요???
공백과 특수문자까지 1로 인식하여 총 17글자로 잘 출력되는 것을 볼 수 있었습니다!
( ^∇^)✎
혹시 몰라 깃헙에도 올려두어야겠네요...!
다음번엔 다른 내장 객체와 함수를 사용하여 다른 프로그램도 만들어보아야겠습니다!
오늘도 읽어주셔서 감사합니다!
(^∇^)