[Javascript] 자소서 글자수 세기

DOM(Document Objeft Model)
: XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스

<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">안녕하세요, 저는 누구누구입니다. 잘부탁드립니다.</textarea>

자기소개

(0/200)

1. content 가져오기

console.log('자기소개서');
var content = document.getElementById('jasoseol').value;
console.log(content);

2. 글자수 세기

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

# 2. 함수 활용하기
<script>
  function counter() {
      var content = document.getElementById('jasoseol').value;
      document.getElementById('count').innerHTML = '(' + content.length + '/200)';
          };
      counter();
</script>

3. 이벤트 핸들링

이벤트 발생 시 함수 실행.
즉, 작성 시 자동으로 글자수 세기.

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

<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>

4. 글자수 제한

<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>