2. 자소서 글자수 계산기 만들기 by JavaScript

심재원·2023년 11월 26일

1. DOM(Document Object Model)

: 웹 화면을 구성하는 html코드에 쉽게 접근할 수 있도록 만든 모델

자바스크립트로 돔을 다루는 법을 알아보도록 하겠다.

Input

<body class="container">
    <h1>자기소개</h1>
    <textarea class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
    <script>
        var content = document.getElementById('jasoseol').value;
  console.log(content);
    </script>
</body>

Output

2. .length 활용

.length : 문자열의 길이

문자열 길이 출력

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

형 변환 (현 글자 수/총 글자 수 가 span 태그 안으로 삽입)

'(' + 15 + '/200)' : 자동으로 형 변환

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

함수

함수 => 명령어의 모음, 함수 쓰면 긴 명령어 여러번 쓸 필요없음

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

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

함수로 묶어주기

이벤트

(글자를 쓸 때마다 자동으로 글자수 세려면 어떻게 해야할까?)
키보드를 누를 때 마다 글자 수를 세어라

이벤트란?
마우스 클릭, 키보드 누름, 값 변화, 페이지 로딩 등 어떤 사건을 의미

이벤트 핸들링?
이벤트가 발생하면, ___해라.

ex) 이벤트 : 키보드를 누를 때마다 
이벤트핸들링 : 글자 수를 세주어라

<textarea 이벤트=이벤트핸들링></textarea>

<textarea onkeydown='counter()';
-> 글자를 입력할 때마다 글자수 업데이트!

제한된 글자수 넘어설 때 뒤에 글자 안 써지도록 하는 기능 구현

~하면(조건문 if) 200자 넘으면
200글자 이후는 잘라버리기 더이상 안 써지도록 하려면

.substring()

content.substring(0.5); -> 문자열에 인덱스 중에서 0이상 5미만 인덱스만 잘라서 그 문자만 남기게 됨

200글자는?

.substring(0, 200);

ex) 200 글자 넘으면 자동으로 잘리는 것 구현

if(content.length > 200) {
	content = content.substring(0,200);
    document.getElementByIf('jasoseol').value = content;
}

총정리

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자소서 글자수 계산기</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        h1 {
            margin-top: 30px;
        }
        #count {
            float: right;
        }
    </style>
</head>
<body class='container'>
    <h1>자기소개</h1>
    <textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">저는 인성 문제가 없습니다.</textarea>
    <span id="count">(0/200)</span>
    <script>
        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();
    </script>
</body>
</html>