[javascripts] 맛보기 - 자소서 글자수 계산기

자소서 글자수 계산기

💥DOM

document
object
model

JS를 사용하여 html을 변경할 수 있다.

textarea 안의 글 가져오기

script tag 안에 작성

document.getElementById('jasosoeol').value == 안의 값을 가져 올 수 있음

console.log(' ')
//콘솔에 출력된

실습코드

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1>자기소개</h1>
    <textarea class="" id="jasoseol" rows="3">저는 인성문제가 없습니다.</textarea>
    <script>
        //console.log("코드라이언");

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

        console.log(content);
    </script>
</body>
</html>

.length 사용해보기 => 글자수를 계산한다.

화면에 얼마나 글자수가 있는지 표시해보자!

span tag 사용하여~~~
(/200)

.innerHTML == html 안에 넣을 수 있다.

다른 문자열들을 그대로 더해주자!

<body>
    <h1>자기소개</h1>
    <textarea class="" id="jasoseol" rows="3">저는 인성문제가 없습니다.</textarea>
    <span id="count">(0/200)</span>
    <script>
        //console.log("코드라이언");

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

        document.getElementById('count').innerHTML = '(' + content.length + '/200)';
    </script>
</body>

함수 => 명령 모음

긴 명령어를 여러번 쓸 필요 없다.

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

}

<script>
        //console.log("코드라이언");

        function counter(){
            var content=document.getElementById('jasoseol').value;

            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        // 함수 실행하기
        counter();
    </script>

글자를 쓸때마다 자동으로 글자수를 세주는 것을 구현해보자

키보드를 누를때 마다 실행해주자

🍅이벤트를 사용하자!

키보드를 누를때 마다 와 같은것을 이벤트라하고

글자수를 세주어라 와 같은 것을 이벤트 핸들링이라고 한다.

textarea tag 안에 onkeydown = 'counter()'

를 넣으면 onkeydown 이라는 이벤트에 맞춰서 함수가 실행된다.

<textarea onkeydown='counter()' class="" id="jasoseol" rows="3">저는 인성문제가 없습니다.</textarea>

제한된 글자수 구현하기

🍎 200자를 넘으면 더이상 안써지도록 하려면? == if 문을 써보자!

.substring(0,5) == 배열의 인덱스 중 (0, 5) 까지만 작성해준다.

실습 코드

 function counter(){
            var content=document.getElementById('jasoseol').value;
            if (content.length > 200 ){
                content = content.substring(0,200);
                // 이전 200 글자만을 보여준다. 
                document.getElementById('jasoseol').value = content;
            }
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }

Author And Source

이 문제에 관하여([javascripts] 맛보기 - 자소서 글자수 계산기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@been_gam/javascripts-맛보기-자소서-글자수-계산기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)