HTMLとJavaScriptファイル
index.htmlとapp.jsを同じフォルダーに作り、HTMLからJavaScriptを読み込みます。
index.htmlHTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="app.js" defer></script>
</head>
<body>
<h1>JavaScriptの練習</h1>
</body>
</html>app.jsJAVASCRIPT
console.log('こんにちは、JavaScript！');Consoleの実行結果を確認する
ブラウザーでHTMLを開き、開発者ツールのConsoleを表示します。次の結果が表示されれば成功です。
実行結果OUTPUT
こんにちは、JavaScript！何も表示されないときは、ファイル名、読み込みパス、括弧の閉じ忘れを確認します。エラーの行番号も原因を探す手がかりになります。
deferで読み込む
deferを付けると、HTMLの解析を妨げず、解析が終わってからスクリプトを実行できます。後で扱うDOM要素を探すときにも安全です。
スクリプトの読み込みHTML
<script src="app.js" defer></script>学習の進め方
コードを書いたら、Consoleの結果とエラーを必ず確認します。実行結果を予想してからブラウザーで確かめると、値の変化を理解しやすくなります。
練習
console.logを3回使い、自分の名前、好きな色、今日の目標をそれぞれ表示してみましょう。