【JavaScript】エディタで書いてブラウザに表示する

2022.02.26

恥ずかしながら、JavaScriptの表示をいつもブラウザの検証ツールでconsoleに記述して表示するばかりで、エディタで書いてブラウザに表示したことがなかったので、その方法をまとめました。

めちゃめちゃ簡単でした。

表示するためのindex.htmlファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script src="src/index.js"></script>
  </body>
</html>

body要素の中にscriptを埋め込んで、srcディレクトリのindex.jsを読み込んでいます。

ですので、このindex.jsファイルにJavaScriptを書くだけです。

それでは、サンプルとして文字数をカウントするこちらの機能を作ります。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <textarea class="textarea"></textarea>
    <p>現在 <span class="string_num">0</span>文字入力中です</p>
    <script src="src/index.js"></script>
  </body>
</html>

let textarea = document.querySelector(".textarea");
console.log(textarea);
let string_num = document.querySelector(".string_num");
textarea.addEventListener("keyup", onKeyUp);
function onKeyUp() {
  const inputText = textarea.value;
  string_num.innerText = inputText.length;
}