🖥 アルファベット文字数計算機

今回はDOMで行いたいと思います.
DOM(Document Object Model)は、ドキュメント(すなわち、画面を構成するHTMLコード)にアクセスしやすいモデルです.JSは、DOMを使用して画面を整理するすべてのコンテンツにアクセスできます.

<h1 style="color: white">안녕하세요</h1>
<p class="start">저는 JS를 공부하고 있습니다.</p>

以上のコードはJSで内容を変更できます.また、コンテンツだけでなく、クラスやスタイルなどのプロパティを変更することもできます.

<h1 style="color: red">안녕히 계세요</h1>
<p class="end">오늘 공부 끝!</p>

document.getElementById()は、特定のIDを有するHTML要素をもたらすことができる.また、DOMに値を追加する方法も使用できます.まず使うHTMLの内容は以下の通りです.

<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">
  저는 인성 문제가 없습니다.
</textarea>
<span id="count">(0/200)</span>

.lengthで文字列の長さを確認しましょう.ID jasoseolの要素をJSにインポートし、コンソールに長さを出力します.文字列のスペースも含めて表示されます.

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

jasosososolという要素は、長さ15の文字列を持っていることを確認します.したがって、この内容をspanタグとして入れて、現在の入力文字列の長さを表示します.
希望するコンテンツは.innerHTMLでHTMLに入れることができますが、content.lengthに直接入れると、希望する(15/200)形では現れません.そこで、HTMLを入れるときは、それを所望の形に切って+記号でつなぎます.

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

しかし,コンテンツを入力するたびにHTMLからコンテンツを取得し,文字数を計算し,計算長さをspanタグに入れる煩雑な手順を繰り返すことはできない.
関数を利用してトラブルを解消します.関数は簡単に言えば命令の集合である.コマンドを含む関数を使用すると、毎回長いコマンド残量を使用する必要はありません.
関数は次のように使用できます.

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

私たちが書いたコードを関数化するとこうなります.関数を使用するために、呼び出しも行いました.

function counter() {
	var content = document.getElementById('jasoseol').value;
	document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();

関数形式でグループ化されていますが、入力するたびにすぐに更新されるわけではありません.予め入力された文字列のみを計算し、新しく入力されたコードを自動的にインポートおよび計算しません.キーボードを押すたびに文字数を自動的に計算する機能が必要です.
キーボード入力を検出してコマンドを有効にするには、イベントを使用する必要があります.アクティビティには、マウスクリック、キーボード入力、値の変化、ページロードなどがあります.アクティビティが作成されている以上、アクティビティが発生した場合は、実行するコンテンツを作成する必要があります.これがイベントハンドルです.イベントハンドルは、コマンドイベントで動作します.そうであれば、キーボードを押すたびにコマンド数文字の操作がイベントハンドルになります.
キーボードを使用してイベントを入力するには、文字列を含むtextareaラベルにイベントハンドルを作成する必要があります.形式は이벤트 = 이벤트핸들링と書かれています.onkeydownこのイベントは、counter()がイベントハンドルとなり、キーボード(onkeydown)を押すたびに文字数(counter関数を実行)を実現することができる.

<textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">

これで字数計算が完了し、最後の1つが残っています.200文字を超えるとカットされ、入力できません..substring()は、指定された文字数で切り取られるので、対応する方法を用いることができる.超えた文字は再び内容に入るので、画面にはもう書かないように見えます.

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();