목차
- DOM
- id값으로 요소 가져오기
- 자소서 글자수 계산기 -글자수 count
- 글자 수 제한을 넘기지 않도록 하기
- 마무리
자소서 글자수 계산기 만들기
텍스트를 입력하면 글자수를 세주고, 제한을 넘기지 못하도록 해주는 웹페이지를 만들어보겠다.
DOM
DOM: Document Object Model
DOM은 Html에 잘 접근할 수 있도록 도와주는 객체 모델이다.
자바스크립트는 DOM을 활용하여 HTML에 접근하여 속성 등을 변경할 수 있다.
id 값으로 요소 가져오기
먼저, 자바스크립트에서는 id로 요소를 가져올 수 있다. 다음은 id가 jasoseol인 요소를 가져오는 코드이다.
document.getElementById('jasoseol');
이를 콘솔 화면에 출력하려면 consol.log() 함수를 이용하면 된다.
consol.log('코드라이언');
id가 jasoseol인 요소의 value 값을 가져오려면 .value 함수를 추가하면 된다.
<!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">저는 인성 문제가 없습니다.</textarea>
<script>
var content = document.getElementById('jasoseol').value;
console.log(content);
</script>
</body>
</html>
자소서 글자수 계산기 - 글자수 count
자소서의 글자수를 계산하기 위해서 먼저 글자 수를 세어야 한다.
.length // 문자열의 길이(공백 포함)
.innerHTML // HTML 코드 바꾸기
위의 두 함수를 이용하여 입력한 문자열의 길이를 출력한다.
<body class="container">
<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
<span id="count">(0/200)</span>
<script>
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
</script>
</body>
글자수를 세는 명령어들을 모아서 함수로 만들어보겠다.
<body class="container">
<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
<span id="count">(0/200)</span>
<script>
function counter() {
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();
</script>
</body>이렇게 하면 두 줄의 코드를 재사용할 때 번거롭게 반복하지 않고도 편리하게 쓸 수 있다.
글자를 쓸 때마다 글자수 업데이트하려면?
키보드를 누를 때마다 글자 수 세기!
이벤트 핸들링 ▶ 키보드를 누를 때마다(이벤트) 글자수를 세주어라(이벤트 핸들링)
키보드를 누를 때마다 에 해당하는 이벤트 이름은 onkeydown이다.
textarea 태그에 onkeydown='실행할 함수()'를 추가해주면 키보드를 누를 때마다 해당 함수가 실행된다.
<textarea onkeydown='counter()' class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
글자 수 제한을 넘기지 않도록 하기
200자를 넘으면 더이상 안써지도록 하려면?
200글자 이후로는 잘라버리면 된다. 그래서 if문을 사용하여 입력한 문자열의 길이가 200보다 크다면 200자까지만 자르도록 코드를 작성하였다.
.substring() 사용: substring() 함수는 시작 위치에서 종료 위치까지 문자열을 자른다.
※ 주의할 점은 종료 위치의 -1까지 문자열을 자른다는 것이다.
.substring(0, 200) ▶ 문자열의 인덱스 0부터 (200-1)까지 자른다.
<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>
마무리
글자 수 제한이 200자인 자소서 글자수 계산기의 최종 코드는 다음과 같다.
<!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)';
}
</script>
</body>
</html>참고) 코드라이언 '일단 만드는 Javascript'