09. JavaScriptファイル
前のレッスンでは、HTMLの<script>タグの中にJavaScriptを書きました。このレッスンでは、CSSと同じように、JavaScriptを別ファイルに切り出す方法を学びます。
JavaScriptを別ファイルにする
CSSをcss/battle.cssという別ファイルにしたように、JavaScriptも別ファイルにできます。
jsフォルダを作成し、その中にbattle.jsというファイルを作りましょう。
// battle.js
document.getElementById("message").textContent = `まおうに${(162 - 58) / 2}のダメージ。`;
HTMLでは、<script>タグのsrc属性でファイルを指定します。
<!-- battle.html selection:21-25 highlight:24 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<link rel="stylesheet" href="css/battle.css">
</head>
<body>
<table id="status">
<tr>
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div id="monster">
<img class="dark-knight" src="img/dark-knight.png">
<img class="dark-lord" src="img/dark-lord.png">
<img class="demon-priest" src="img/demon-priest.png">
</div>
<div id="message">
まおうがあらわれた。
</div>
<script src="js/battle.js"></script>
</body>
</html>
/* battle.css hidden */
body {
background-color: rgb(34, 34, 34);
color: white;
font-family: sans-serif;
}
table#status {
border: solid 2px white;
border-collapse: collapse;
margin: 10px auto 0 auto;
width: 640px;
}
table#status tr:first-child {
border-bottom: solid 1px white;
}
table#status td {
text-align: center;
}
#monster {
text-align: center;
margin-top: 40px;
}
#monster .dark-lord {
width: 400px;
}
#monster .dark-knight {
width: 150px;
}
#monster .demon-priest {
width: 150px;
}
#message {
border: solid 2px white;
border-radius: 4px;
padding: 10px;
width: 720px;
margin: 30px auto;
}
CSSと同じように、JavaScriptを別ファイルにすることで、HTMLがすっきりし、コードの管理がしやすくなります。
headにscriptを書く
CSSは<head>の中で読み込みましたが、JavaScriptは</body>の直前に書きました。これは、HTMLの要素がすべて読み込まれてからJavaScriptを実行するためです。
しかし、<script>タグにdefer属性を付けると、<head>の中に書いてもHTMLが読み込まれた後に実行されるようにできます。
<!-- battle.html selection:1-8 highlight:7 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<link rel="stylesheet" href="css/battle.css">
<script src="js/battle.js" defer></script>
</head>
<body>
<table id="status">
<tr>
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div id="monster">
<img class="dark-knight" src="img/dark-knight.png">
<img class="dark-lord" src="img/dark-lord.png">
<img class="demon-priest" src="img/demon-priest.png">
</div>
<div id="message">
まおうがあらわれた。
</div>
</body>
</html>
// battle.js hidden
document.getElementById("message").textContent = `まおうに${(162 - 58) / 2}のダメージ。`;
CSSと同じ場所にまとめて書けるので、deferを使う方法が現在は主流です。
試してみよう
js/battle.jsのメッセージを変えて、表示が変わるか確認してみましょうjs/battle.jsの中でconsole.log()してコンソールに表示されることを確認しましょう
これまでの成果
<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<link rel="stylesheet" href="css/battle.css">
<script src="js/battle.js" defer></script>
</head>
<body>
<table id="status">
<tr>
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div id="monster">
<img class="dark-knight" src="img/dark-knight.png">
<img class="dark-lord" src="img/dark-lord.png">
<img class="demon-priest" src="img/demon-priest.png">
</div>
<div id="message">
まおうがあらわれた。
</div>
</body>
</html>
/* battle.css folded */
body {
background-color: rgb(34, 34, 34);
color: white;
font-family: sans-serif;
}
table#status {
border: solid 2px white;
border-collapse: collapse;
margin: 10px auto 0 auto;
width: 640px;
}
table#status tr:first-child {
border-bottom: solid 1px white;
}
table#status td {
text-align: center;
}
#monster {
text-align: center;
margin-top: 40px;
}
#monster .dark-lord {
width: 400px;
}
#monster .dark-knight {
width: 150px;
}
#monster .demon-priest {
width: 150px;
}
#message {
border: solid 2px white;
border-radius: 4px;
padding: 10px;
width: 720px;
margin: 30px auto;
}
// battle.js
document.getElementById("message").textContent = `まおうに${(162 - 58) / 2}のダメージ。`;