余計な前置き無しでJavaScriptを解説するよ。
初回は、ブラウザのデバックコンソールに文字を出力するコードを作成しよう。
準備
まずは次のコードをメモ帳などにコピペして、文字コードをUTF-8で保存しよう。ファイル名は、xxx.html(xxxは好きな長さの英数字記号)にすること。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<script>
(()=>{
// ここにJavascriptコードを書く
})();
</script>
</head>
<body>
</body>
</html>
文字コードはWindowsのメモ帳なら、名前を付けて保存で選択できる。他のテキストエディターでも同じように選択できるはずだから、確認して欲しい。
今後は保存したファイルをコピーして使いまわそう。
デバックコンソールに文字を出力するコード
次に、「// ここにJavascriptコードを書く」を「console.log( "Hello JavaScript!!" );」に変更して保存しよう。
<script>
(()=>{
console.log( "Hello JavaScript!!" );
})();
</script>
(()=>{ })(); は、ブラウザ上でJavaScriptを記述する際のお約束と今は思っていよう。JavaScriptの学習を進めると意味がわかるから、気にせず進めよう。
console.log()を使うとデバッグコンソールに文字を出力できる。ブラウザだけでなくNode.jsなどでも使用できるから覚えておこう。
ブラウザでhtmlファイルを読み込む
ブラウザを起動して、保存したファイルをドラッグアンドドロップしよう。すると、ブラウザでhtmlファイルが読み込まれる。
拡張子「.html」をブラウザに紐づけられていれば、ファイルのダブルクリックで読み込むことも可能だ。
だか、この時点ではブラウザに真っ白な画面が表示されるだけ。
上記コードの実行結果を確認するためには、デバッグコンソールを開く必要がある。
デバッグコンソールの表示
デバッグコンソールは、次の手順で表示しよう。
① ブラウザ上で「コンテキストメニュー」、別名「ショートカットメニュー」を開く（Windowsならマウスの右ボタンクリック）
②次の項目を選択する
Microsoft Edge : 開発者ツールで調査する
Google Chrome : 検証
Firefox : 調査
③「コンソール」タブまたは「Console」タブを探し、クリックして表示する
実行結果の確認
下図のようにコンソールに「Hello JavaScript!!」と表示されていたら、成功だ。
ブラウザに表示してみる
最後にブラウザに「Hello JavaScript!!」を表示しよう。
それにはHTMLの知識が必要になるけれど、やりたいことができた都度にネットで調べていけば自然と身につくはず。
今回は<body>と</body>の間に、次のようにpタグを記述しよう。
<body>
<p id="ptag">このブラウザはJavaScriptが無効です</p>
</body>
保存してブラウザに読み込ませると「このブラウザはJavaScriptが無効です」と表示される。ここまではHTMLのお仕事。
次にJavaScriptを記述して保存しよう。
<script>
document.addEventListener("DOMContentLoaded",()=>{
document.getElementById("ptag").innerText = "Hello JavaScript!!";
});
</script>
ブラウザで読み込んだHTMLファイルは内部でいろいろ処理されるんだけど、それが終わるまで、ブラウザの内容を操作できない。
document.addEventListener("DOMContentLoaded",()=>{ }); の中に命令を書くと、準備が終わってから処理を開始できる。これも、今のところらお約束と思っていてもいい。
document.getElementById("ptag")の"ptag"は、<p id="ptag">のidと一致する。後に続く .innerText は、<p id="ptag"> </p>の中身を指している。
保存してブラウザに読み込ませるとJavaScriptが、元からある「このブラウザはJavaScriptが無効です」を「Hello JavaScript!!」と書き換えてくれる。
