JavaScriptとは？
主にWebサイトに動きをつけることができるプログラミング言語です。
PHPやJavaなどのサーバーサイド言語は開発環境を用意する必要があります。
しかし、JavaScriptは ブラウザで動く言語 なので、普段使っているブラウザだけあれば大丈夫です！
＜JavaScriptでできることの例＞
- 保存ボタンを押した時に確認のダイアログを出す
- ボタンを押して画像を切り替える
- 「 ストップウォッチ機能 」「 音声認識の機能 」「 カレンダー 」「 地図 」なんかも作ることができてしまいます！
JavaScriptが扱えると、非常に多くのことができるようになり、開発の幅が広がります。
「JavaScript 1章」 ではまず、JavaScriptのはじめ方から文法までを見ていきましょう！
準備するもの
＜ブラウザ＞
Chrome、Firefox、Safari、IEなど、どれでも大丈夫ですが、
推奨されているのは Chrome なのでこのカリキュラムではChromeでの開発を前提とします。
MacでどうしてもSafariを使いたい…！という方はこちらの設定をしておいてください。
⬇︎
Safariでデベロッパーツールを起動する方法
＜デベロッパーツール＞
HTMLを書く時にも使っていたかと思いますが、
今回は主に、JavaScriptでの出力結果等を確認するために使用します。
＜リファレンス＞
MDNというJavaScript等の開発者向けドキュメントがあります。
内容はちょっと難しめではありますが、正確で信頼できる情報が載っています。
それでは、さっそく実際にJavaScriptを書いていきましょう！
まずはプログラミングではおなじみの「Hello World!!」を表示してみるところからです。
ファイルの作成
JavaScriptフォルダをどこでも好きな場所に作成してください。
わかりやすくデスクトップに配置してもOKです。
続けて、JavaScriptフォルダ の中に1-1フォルダを作成して index.htmlとmain.jsという名前の２つのファイルを準備してください。
- Desktop/JavaScript/1-1/index.html
- Desktop/JavaScript/1-1/main.js
では次に、CSSのファイルをHTMLで読み込む時と同じように
index.html に main.js ファイルを読み込ませましょう。
JavaScriptの読み込み
headタグやbodyタグに直接JavaScripを書くこともできますが、
外部に作成したファイルを<script src=""></script>で読み込むといった方法が一般的です。
今回の場合、index.htmlの記述は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script src="main.js"></script>
</body>
</html><script src=""></script>を読み込む位置は、基本的には bodyタグの最後 に書いてください。
プログラムは上から順番に実行されるので、すべてのHTMLを読み込んだ後にJavaScriptのコードが読み込まれるようにしたいからです。
src属性で読み込みたいファイルのパスを指定します。
今回は 1-1 フォルダという同じ階層にmain.js と index.html あるので、ファイル名だけでパスとして読み込まれます。
これで準備は整ったので main.jsの中に、次のように書いてみましょう。
console.log("Hello World!!");console.log()はメッセージを出力する命令になります。
ダブルクォーテーション "" の中に出力したい内容を書きます。
Developer Tools（検証ツール）で出力結果を確認
さて、それではindex.htmlをブラウザで開いて確認してみましょう。
出力の確認方法は以下のようになります。
1：検証ツールを開く
・Mac… command + option + i
・Windows… F12キー
・もしくは、右クリック → 「検証」
2：検証ツールのconsoleタブを選択する
ここに「 Hello World!! 」と表示されていれば成功です！
うまくいかなかった場合、以下の原因であることが多いですよ。
・ スペルミス
・ JSファイルがうまく読み込めていない
・ どちらかのファイルを保存していない
色々な出力
もちろん、console.log()は数値も表示することができます。
数値の場合は「”」は付けずに console.log(5); のように記述します。
() の中で計算することもできます。
足し算…「+」 引き算…「-」 掛け算…「*」 割り算…「/」
main.jsに記述してみましょう。
console.log(65536);
console.log(10 + 5);
console.log(10 * 5);また、「+」を文字の結合に使うこともできます。
以下では両方とも表示は「Hello World!!」になります。
console.log("Hello World!!");
console.log("Hello " + "World!!");コメント
実行結果に影響を与えないけれども、自分へのメモ書きとしてコメントを残しておきたい時には「//」と 2つ続けると、そこから行末までがコメントになります。
また、1 行だけではなくて複数行にわたって書きたい場合は、「/*」と「*/」の間にコメントを書きます。
// 割り算の余りの値を求めたい場合は「%」を使用します。
console.log(10 % 2);
/*
上記の場合、10割る2で余り0
そのため出力は「0」
下記の場合、出力は「1」になります
*/
console.log(10 % 3);課題
理解度チェック
JavaScript→1-1というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。
問1：コンソールに「10 + 8」と表示させてください。
問2：コンソールに10 + 8の結果を表示させてください。
問3：コンソールに「20割る3の余りは」と表示させ、続けてその計算結果を表示させてください。
※問2、問3については計算結果（18や、2という数字だけ）を直接表示させるのはNGで、計算式で表現してください。
計算式を書くとJavaScriptが自動で計算結果を返してくれます。
下の画像のように表示できたら完成です。
以下、プラスアルファの知識
ダイアログボックスを表示する
ではここで、ちょっとJavaScriptっぽいことをやってみましょう。
コンソールへの出力に続いて、今度は ダイアログボックス へ出力してみましょう。
確認を求められる時などに上に出てくる表示のことですね。
このダイアログボックスは window.alert() と書くだけで表示することができます。
console.log のように、 () の中に文字列を入れると、画像にある「これがダイアログボックスです。」のように文字を入れることができます。
では、ダイアログボックスに「Hello World!!」を表示させてみましょう。
window.alert("Hello World!!");JavaScriptの基本文法
JavaScriptに限らず、プログラムの基本は、「〇〇は✕✕しなさい」と命令することです。
今回使ったconsole.log()やwindow.alert()の場合、
・「〇〇は」がconsole、window
・「✕✕しなさい」がlog()、alert()
・()の中のが”Hello World”が✕✕の指示に必要な情報
になります。
JavaScriptでは、このような命令の中で
・「〇〇は」に当たる部分のことを オブジェクト
・「✕✕しなさい」に当たる部分のことを メソッド
・指示に必要な情報に当たる部分のことを パラメータ
と呼びます。
