DOM (Document Object Model)
자바 스크립트는 돔을 이용하여 화면에서 원하는 모든걸 바꿀수 있음
자소서 글자수 계산기 1
textarea 안에 텍스트를 가져오는것
console.log('코드 라이언') => 브라우저가 아닌 콘솔 화면에 출력
document. 는 DOM의 진입점
특정 id를 가진 태그의 값만 가지고 올수 있음
document,getElementById('jasoseol').value;
or
document.getElementById('jasoseol').innerHTML;<!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>자소서 글자수 계산기 2
공백 포함한 문자열의 길이 => .length
console.log(content.length);
자소서 글자수 계산기 3
작성하고 있는 글자 수 실시간으로 보여주기
문자열과 변수를 '+' 기호로 더해서 문자열로 형변환
<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;
</script>
</body>
</html>자소서 글자수 계산기 4
함수 => 명령 모음
function 함수이름() {
명령어 1
명령어 2
}
<script>
function counter() {
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();
</script>
자소서 글자수 계산기 5
키보드 누를때마다 => 이벤트, 글자수를 세주어라 => 이벤트 핸들링
<textarea 이벤트=이벤트 핸들링></textarea>
<textarea onKeydown = counter()
<textarea onKeydown = "counter();" 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>자소서 글자수 계산기 6
제한된 글자수를 넘으면 더이상 안써지도록 하기 , 200글자 이후는 버리기
글자 슬라이딩, content.substring(0,200) -> 0이상 200 미만 => 200글자
function counter() {
var content = document.getElementById('jasoseol').value;
// if, substring
content=content.substring(0,200);
document.getElementById('jasoseol').value=content;
document.getElementById('count').innerHTML = '(' + content.length + '/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)';
}
counter();
</script>
</body>
</html>
꾸준히 성장하는 개발자