예제로 보는 자바스크립트 기본 문법 pt.2

CODING/Javascript

by 뚜뚜 DDUDDU 2022. 5. 28. 01:47

자바스크립트 문법을 위한 예제(멋사 강의)

<!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>
    //onkeydown="counter();" ==> 이벤트함수: 키칠때마다 함수소환
    <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;
            
            // 200자 넘어가면 나머지 자르고 남김
            // substring: 일부만 자르기
            if (content.length > 200) {
                content = content.substring(0,200)
                document.getElementById('jasoseol').value = content     }
           
// JS로 count태그내 inner(내부)에 직접 값을 넣는다.
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        
        counter();
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'CODING > Javascript' 카테고리의 다른 글

예제로 보는 자바스크립트 기본 문법 pt.4 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.3 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.1 (0)	2022.05.28
vanilla JS #3 (0)	2020.06.09
vanilla JS #2 (0)	2020.06.09