JavaScriptを書いて動かしてみよう | JavaScript入門

前の記事では、JavaScriptがブラウザ上の操作を実現するために生まれた流れを確認しました。今回は、JavaScriptファイルをHTMLから読み込み、画面が変化するところまでを体験します。

HTML/CSSカテゴリの基礎（intermediate）まで学習し、Chrome DevToolsを開けることを前提に進めます。

今回使用するファイル構成

この回では、次のファイルを使用します。

javascript-practice/
├── index.html
└── js/
    └── script.js

JavaScriptをHTMLから読み込む

index.htmlを作る

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptの練習</title>
  <script src="js/script.js" defer></script>
</head>
<body>
  <h1>JavaScriptの練習</h1>
  <p id="message">変更前のメッセージ</p>
</body>
</html>

srcにはJavaScriptファイルの場所を指定します。deferを付けると、HTMLの解析が終わってからJavaScriptが実行されます。

script.jsを作る

console.log('JavaScriptが動きました');

保存してページを開き、DevToolsの「Console」を確認してください。JavaScriptが動きましたと表示されれば、読み込みは成功です。

HTMLの表示を変更する

script.jsへ次の処理を追加します。

const message = document.querySelector('#message');

message.textContent = 'JavaScriptで変更しました';

querySelector()はCSSセレクターと同じ書き方でHTML要素を取得します。textContentへ文字列を代入すると、取得した要素の文章が変わります。

画面で結果を確認する

ページを再読み込みし、文章が「JavaScriptで変更しました」に変われば成功です。

変わらない場合は、次を確認します。

script.jsを保存しているか
<script>のsrcが実際の配置と一致しているか
id="message"のつづりが一致しているか
Consoleに赤いエラーが表示されていないか

まとめ

JavaScriptは<script>で読み込み、Consoleで実行結果を確認できます。また、DOMを通してHTML要素を取得すれば、表示内容を変更できます。

次の記事では、JavaScriptが扱う値を変数へ保存し、文字列や数値などのデータ型を確認します。