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
という名前の2つのファイルを準備してください。
- 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では、このような命令の中で
・「〇〇は」に当たる部分のことを オブジェクト
・「✕✕しなさい」に当たる部分のことを メソッド
・指示に必要な情報に当たる部分のことを パラメータ
と呼びます。