第7回：11月17日
JavaScript(1)
JavaScriptの基礎
1｜小テスト
前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。
出席は課題の提出をもって確認します。必ずやっておくようにしてください。
- 小テスト
前回の課題の確認
- 前回の課題「好きなもの紹介ページ」は作成してありますか？
これまでにHTMLとCSSについて学習し、シンプルなWebページの作成方法を学びました。
前回の課題は、最終課題で作成するWebサイトに掲載してもらいますので、今のうちにこれまでの内容をよく確認しておきましょう。
また、改めてValidatorサービスを活用し、HTMLやCSSなどの文書が文法的に適切に記述されているかを確認してみましょう。
- 前回の課題を確認する
2｜JavaScriptの基礎
JavaScriptとは
JavaScriptとは、Webブラウザ上で動作するプログラミング言語のひとつであり、Webページの情報を環境やユーザの操作に応じて変化させるなどのように、主に変化や動きのあるWebページを作成する用途に用いられます。
JavaScriptは多くの場合HTML文書と組み合わせて利用されます。HTMLの中にJavaScriptのプログラムが埋め込まれると、WebブラウザがそのHTML文書を読み込む際に解釈して、記述された内容に応じて実行します。Webブラウザが解釈、実行を行うため、C言語などのようにプログラムをコンパイルする必要はありません。
JavaScriptの記述方法
JavaScriptをHTMLに埋め込む方法は、CSSと同様にHTML文書の中に直接書く方法と、別のファイルを作成してHTMLファイルから読み込む方法があります。
外部ファイルにプログラムを記述する方法は少し前提知識が必要となるため、今回もまずはHTMLファイルに直接記述する方法から始めます。以下のようなHTMLファイルを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptテスト</title>
</head>
<body>
<h1>
<script>
document.write("こんにちは世界！");
</script>
</h1>
</body>
</html>このように、HTMLファイルの中にscriptタグを用いてJavaScriptを記述します。
document.write() というのは、その場に文字列を表示するための命令で、ここではh1要素の中に「こんにちは世界！」という文字が表示されることになります。
このようにJavaScriptのプログラムは、scriptタグを用いて記述された場所で解釈され、実際に命令がそこに記述されていた場合にはその場で実行されます。
文法
JavaScriptは、Processingなどと同じように、文をセミコロン(;)で区切ります。
空白や改行は無視されるので、自分自身が読みやすいようにインデントを付けるとよいでしょう。ただし全角空白は空白文字としては使えません。全角、半角のほか、大文字小文字も区別されますので、注意してください。
プログラム中にコメント（プログラムの実行には関係しない説明文など）を書くことができます。これもProcessingと同様、1行コメントの場合は「//」を書くとその行のそれより後ろがコメントとして扱われ、複数行にまたがるコメントを書く場合には「/*」と「*/」を使って囲みます。
変数とデータ型
JavaScriptでは、変数は「let」という語を使って宣言します。
let num = 10;
let str = "こんにちは";JavaScriptでは数値や文字列などのデータ型を指定せずに変数を使うことができます。内部的にはデータ型は区別され、数値と文字列も別のものとして処理されますが、プログラムを書く際にはこれを個別の型として宣言する必要はありません。
変数に値を代入したり、データをプログラム中に記述する場合には、先の例のように、数値の場合には数値をそのまま、文字列の場合には文字列をクオーテーションマークで囲って記述します。シングルクオーテーション('←これ→')、ダブルクオーテーション("←これ→")のどちらも使用できますが、 囲む際は開始と終了の対応には気を付ける必要があります。シングルクオートの文字列の中でダブルクオーテーションマークを、逆にダブルクオートの文字列の中でシングルクオーテーションマークを使うことができます。
let str1 = "I'm your father.";
let str2 = '君はちょっと"アレ"だね。';変数名は（後述する関数名も）、予約語と呼ばれるプログラムで利用されるキーワードと重複しない中で決めることができます。Unicode文字と数字、アンダーバー、$記号が利用できます。大文字と小文字は区別されるので、nameとNameは別の変数名として扱われます。数字は利用可能ですが、数字で始まる変数名は使用できません。str1はOKですが、1strはNGです。
基本的な文
JavaScriptの数値は、Processingなどの数値とほぼ同様の計算ができます。これらの値を代入したり、比較などに用いることができます。
条件分岐や繰り返しなどの制御構文も概ね同じようなものが揃っています。
また、標準的に備わっている関数を利用することができます。
let a = 10;
a = a + 5;
if (a > 15) {
alert("そんなバカな");
}これは変数aを用意し、初期値として10を保持します。次の文でaの値を5足した値で代入し直します(aは15)。次にaの値を15と比較して、大きい場合のみ実行する条件文が書かれています。比較に「より大きい(>)」が使われているためこの条件は満たされません。「以上(>=)」など他の比較演算子を用いることができます。 if文のブロックの中は今回は実行されませんが、JavaScriptに備わっているalertという関数を使っています。alertはメッセージボックスを使って文字列を提示します。
細かな文や演算子の説明は網羅しきれないので、必要に応じ各自で調べてみてください。例えば以下のようなリソースが参考になります。
関数
JavaScriptでは、一連のひとまとまりの処理に名前をつけ、関数として定義して利用することができます。
function sayHello1() {
alert("こんにちは世界！");
}関数は、functionというキーワードを使って宣言し、ブロックの中に処理をまとめます。
Processing同様、関数は引数を取ることができます。例えば以下のように定義をすると、引数をひとつ受け取り、その文字列をメッセージボックスに出力します。
function sayHello2(str) {
alert(str);
}関数は定義をしただけでは実際に実行されません。実行するには、この関数を呼び出す必要があります。
例えば以下のように同じHTML文書のどこかのscriptタグなどの中に書いておくと、その場所で実行されることになります。
sayHello1();引数を受け取る場合には、実行時に引数を渡します。
sayHello2("こんにちは世界！");イベントハンドラ
HTMLの要素の属性に、onclick属性というものがあります。onclick属性ではその要素がクリックされた際の動作を記述することができます。
先の関数の定義と合わせ、以下のサンプルを確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptテスト</title>
<script>
function sayHello(str) {
alert(str);
}
</script>
</head>
<body>
<button onclick="sayHello('こんにちは世界！');">Hello!!</button>
</body>
</html>scriptはbodyだけでなく、headの中にも書くことができます。今回はheadの中のscriptでは関数の定義のみを行っています（この場所では実行されません）。
bodyの中にはbutton要素があります。これはボタンを表示します。
button要素は、onclick属性を持っており、ここにsayHello関数の呼び出しが記述されています。このボタンがクリックされると、この関数が実行されます。
sayHello関数は引数をひとつ受け取るように定義されており、呼び出しの際には文字列を直接引数に渡しています。
このようにひとつのHTML文書の中で、headの中のscript要素と、buttonのonclick属性というように、バラバラな場所にJavaScriptのコードが埋め込まれることになります。これらは離れた場所にありますが、変数や関数を共有しているため、このような呼び出しが可能となっています。
onclick属性の他にも、onchange（フォームの値が変化した時）やonload（ページが読み込まれた時）、onkeypress（キーが押された時）、onmouseover（マウスオーバー）など様々なイベントハンドラが用意されています。（ただしこのように定義や呼び出しに関する様々な命令をHTMLに混ぜてしまうと、せっかくHTMLとCSSで構造と見た目を分離したのに、結局JavaScriptによる動作の記述でHTMLが汚くなるという議論があります。この問題に対処するにはもう少し複雑なJavaScriptのテクニックが必要なため、今回は気にせずわかりやすい方法を学習していきます。）
外部スクリプトファイルへの記述方法
先の例では、関数の定義をheadに記述し、呼び出しと切り離しました。このheadに書いた部分を、外部スクリプトファイルに記述する形式に改めてみましょう。
まず関数定義部分のJavaScriptのコードを別ファイル（「hello.js」と名前をつけましょう）に保存します。
function sayHello(str) {
alert(str);
}元のHTMLファイルは、scriptタグを用いて直接コードを書く代わりに、以下のようにしてjsファイルを読み込むようにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptテスト</title>
<script src="hello.js"></script>
</head>
…このように記述すると、その位置に読み込んだjsファイルが記述されているのと同様に動きます。JavaScriptの練習段階の今はファイルを分けない方がわかりやすいかもしれません。ですがプログラムが複雑になり長くなると、このように直接書くとHTMLファイルがぐちゃぐちゃになってきます。ファイルに分けておけば見通しが良くなりますし、場合によってはひとつのプログラムを複数のページで利用するなどといったことが可能になります。
JavaScriptのエラーの表示
JavaScriptに誤りがあった場合、よくわからないけど動かない、という現象に出会うことがあります。どこかに間違いがあると考えられますので、エラー内容を確認しましょう。
Chromeでは「表示」→「開発/管理」に「JavaScriptコンソール」が、Safariでは「開発」メニューの中に「JavaScriptコンソールを表示」という項目があります。
JavaScriptに誤りがあった場合、コンソールにエラーが表示されます。メッセージは英語ですが、ある程度パターンの決まった内容ですし、どの場所にエラーがあるかも確認できますので、積極的に確認しましょう。
3｜課題
以下のHTMLファイルを用意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let price = 1000;
</script>
<script src="calctax.js"></script>
</head>
<body>
<h1><script>document.write(price);</script></h1>
<button onclick="calcTax(price,8);">テイクアウト</button>
<button onclick="calcTax(price,10);">イートイン</button>
</body>
</html>HTMLファイル内のscriptで変数priceを宣言し、このpriceをh1要素で表示しています。
ファイルには図のように「テイクアウト」と「イートイン」の2つのボタンがあります。
それぞれのボタンは、クリックするとcalcTaxという関数を呼び出しています。calcTaxはふたつの引数を受け取り、1つ目はprice、2つ目に税率(%)を指定しています。例えば「テイクアウト」ボタンを押すと、8%の税率で計算された税込価格がメッセージボックスで下図のように表示されるようにしたいです。
このように動くように、calctax.jsファイルを作成してください。
- 「テイクアウト」「イートイン」のふたつのボタンで、事前に与えられた金額の税込価格を計算するJavaScriptのプログラムを作成してください。
- priceの値を適当に変えても計算が正しいことを確認してください。
- jsファイルに記述したプログラムと、priceを変化させた時の動作のスクリーンショットをレポートにまとめ、Classroomへ提出（11/22(水) 23:59まで）