🖥 자소서 글자 수 계산기

이번에는 DOM을 활용해 진행하려고 한다.
DOM(Document Object Model)은 말 그대로 Document, 즉 화면을 구성하는 HTML 코드를 쉽게 접근할 수 있도록 만든 모델이다. JS는 DOM을 활용하여 화면을 구성하는 모든 것들에 접근할 수 있다.

<h1 style="color: white">안녕하세요</h1>
<p class="start">저는 JS를 공부하고 있습니다.</p>

위와 같은 코드를 JS를 통해 내용을 바꿀 수 있다. 내용뿐만 아닌 클래스나 스타일 같은 속성도 바꿀 수 있다.

<h1 style="color: red">안녕히 계세요</h1>
<p class="end">오늘 공부 끝!</p>

document.getElementById()로 특정 아이디를 가진 HTML의 요소를 가지고 올 수 있다. 그리고 역으로 DOM에 값을 넣는 방법도 사용할 수 있다. 우선 사용한 HTML의 내용은 이렇다.

<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">
  저는 인성 문제가 없습니다.
</textarea>
<span id="count">(0/200)</span>

.length를 통해 문자열의 길이를 확인해 보자. jasoseol이라는 아이디를 가진 요소를 JS로 가지고 와 사용하겠다고 작성한 뒤, 콘솔에서 길이를 출력한다. 이때 문자열의 공백까지 포함하여 나타낸다.

var content = document.getElementById('jasoseol').value;
console.log(content.length);

jasoseol이라는 아이디를 가진 요소는 길이가 15인 문자열을 가지고 있다는 것을 확인했다. 그러므로 이 내용을 span 태그로 넣어 현재 입력한 문자열의 길이를 나타낼 수 있도록 해 주어야 한다.

.innerHTML을 통해 원하는 내용을 HTML로 넣어 줄 수 있는데, 그냥 content.length로 넣으면 우리가 원하는 (15/200)의 형태로 나오지 않는다. 그러므로 HTML로 넣어 줄 때 원하는 형태로 쪼갠 후 + 기호로 연결해 넣어 준다.

var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';

그러나 입력할 때마다 내용을 HTML에서 가지고 오고, 글자 수를 계산하고, 계산된 길이를 span 태그에 넣어 주는 번거로운 과정을 반복할 수는 없다.

번거로움을 해소하기 위해 함수를 이용해 보자. 함수는 쉽게 말해 명령어의 모음이다. 명령어를 묶어 둔 함수를 사용하면 긴 명령여를 매번 사용할 필요가 없어진다.

함수는 아래처럼 사용할 수 있다.

function 함수이름() {
	명령어1,
    명령어2
}

우리가 작성해 둔 코드를 함수화시키면 이렇게 된다. 함수를 사용하기 위해 호출도 해 준다.

function counter() {
	var content = document.getElementById('jasoseol').value;
	document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();

함수 형태로 묶기는 했지만 여전히 입력할 때마다 바로 최신화되지는 않는다. 미리 입력해 놓은 문자열만 계산해 주고 새로 입력하는 코드를 자동으로 가지고 와 계산하지는 않는다. 키보드를 누를 때마다 자동으로 글자 수를 세 주는 기능이 필요하다.

키보드 입력을 감지하고 명령어가 동작하도록 만들기 위해서는 이벤트를 사용해야 한다. 이벤트는 마우스 클릭, 키보드 입력, 값 변화, 페이지 로딩 등이 있다. 이벤트를 만들었으니 이벤트가 동작하면 실행할 내용도 작성해야 한다. 이것이 바로 이벤트 핸들링이다. 이벤트 핸들링은 이벤트가 작동하도록 명령하는 것이다. 그렇다면 키보드를 누를 때마다 글자 수를 세어라라고 명령하는 것은 이벤트 핸들링이 된다.

우리는 키보드 입력 이벤트를 사용하기 위해 문자열을 담고 있는 textarea 태그에 이벤트 핸들링을 작성해야 한다. 형태는 이벤트 = 이벤트핸들링으로 작성한다. onkeydown이 이벤트, counter()가 이벤트 핸들링이 되어 키보드를 누를 때마다(onkeydown) 글자 수를 세도록(counter 함수 실행) 구현할 수 있다.

<textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">

이제 글자 수 계산까지는 완료했으니 마지막 하나가 남았다. 200자가 넘으면 입력하지 못하도록 잘라 버려야 한다.

.substring()은 지정한 글자 수 밑으로는 잘라 주기 때문에 해당 메소드를 사용하면 된다. 초과된 글자는 다시 content에 들어가기 때문에 화면에서는 더 이상 작성되지 않는 것처럼 보이게 된다.

function counter() {
	var content = document.getElementById('jasoseol').value;
	if (content.length > 200) {
		content = content.substring(0,200);
		document.getElementById('jasoseol').value = content;
	}
	document.getElementById('count').innerHTML = '(' + content.length + '/200)';
}
counter();