まとめ（1）変数

JavaScript

  • HTMLを拡張（HTMLのみでは不可能なことを可能にする）
  • 呼び方は「JavaScript」ですが、記述ルールは「ECMAScript 第 5 版」
ユーザーが必要としていること
  • インターネットを使うとき、壁に向かって話しかけているわけではないので応答が欲しい。それに答えられるのが「JavaScript」です
  • 実際のページの中では「構造」「スタイル」「アクション」が実装されていることが、いまのページには求められています
  • ユーザーがタスクの実行をページに依頼したとき、JavaScriptはそれを実行します
  • インタラクティブ = HTML + CSS + JavaScript

HTML5でのJavaScript

  • <script>タグが、JavaScriptが書かれていることを知らせる
  • HTML4.01では<script>タグにはtype属性が必須でした
  • HTML5ではtype属性の初期値は「type="text/javascript"」とされており、 スクリプト言語のタイプが「type="text/javascript"」となる場合には、type属性を省略します


単純なスクリプトのみの練習の場合は、HTMLドキュメント内に
<script>・・・</script>
だけでもブラウザ（または、コンソール）に表示することが可能です。

ブラウザでの実行

  1. ウェブブラウザを起動し、URLを入力する（または、検索する）
  2. URLに対応するページを探しに行く（または、検索結果をクリックされたページに移動する）
  3. サーバーは「HTML, CSS, JavaScript」で構成されたページを返す
  4. ブラウザはCSSルールに従ってHTMLを表示する
  5. <script>タグの中にあるJavaScriptを実行する
インタープリター（interpreter）
  • ウェブブラウザは、JavaScriptインタープリターと呼ばれるソフトウェアを内蔵しています
  • ページの中に記述されたJavaScriptコードを実行するのが、インタープリターの仕事です
  • インタープリターは、「;」で終わる命令を「読み込み→実行」し、次の行の「読み込み→実行」します
  • 「順次」命令を実行していきます

初心者のJavaScript

変数
  • 値を入れておく箱のようなもの
  • 利便性のため「変数宣言」なしでも動きますが、どれが変数の名前なのかがわかりにくくなってしまうので必ず記述します


値を代入していない変数

  • 宣言しただけで値を代入していない変数の値は、空であることを示す「undefined」（未定義値）という特別な値になっています
<script>
var num;
console.log(num);
</script>

※その後「初期値」として、なんらかの値を代入して使用します。


リテラル

  • 式に埋め込まれた値そのもののこと
  • 代入される変数の右側にある値
  • リテラルは「型」によって分類され「数値リテラル」「文字列リテラル」と呼ばれる
オブジェクト（Object）とメソッド（Method）
  • オブジェクト指向：対象をオブジェクト、つまり「もの」のように捉えてプログラミングを行う手法
  • メソッド：オブジェクトに用意されている命令のこと
  • ドットシンタックス（ドットでつなぐ文法）で記述する
  • 引数（ひきすう）argument（オーギュメント） は、カンマ区切りで複数記述可能



オブジェクト名 . メソッド名 ( 引数 );

イベント
  • ほとんどのJavaScriptは、ページの中で何かが起きたときに実行されます
  • そのきっかっけが実行開始できるしくみを「イベント」と呼びます

お友だちを紹介します

  • 「iRock」です


かまってほしい。

iRockと会話をする
  1. iRockのHTMLページを作成する
  2. iRockのページが読み込まれたときにユーザーに挨拶をするようにJavaScriptのアラートを追加する
  3. ユーザーの名前を尋ねて、名前でかたりかける挨拶を表示し、最後にiRockを微笑ませる
  4. ユーザーがiRockをクリックしたときのイベントハンドラを追加して、前に書いたコードを実行する
  5. 成功したらみんなで喜ぼう！


★iRockを喜ばしてみんなで喜ぼう！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iRockと話す！</title>
</head>
<body>
<p><img src="img/irock.png" alt="iRock"></p>
</body>
</html>
読み込まれたときに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iRockと話す！</title>
</head>
<body>
<p><img src="img/irock.png" alt="iRock"></p>
<script>
window.onload(alert('こんにちは、iRockです。'));
</script>
</body>
</html>


でも、何か変！


スクリプトが画像よりも後に記述してあっても、画像よりも先に警告ダイアログボックスが表示されてしまいます。
警告ウィンドウは、他よりも先んじて警告を表示する役割になっています。


画像を先に表示してから警告ダイアログボックスを表示させるには、どうすれば良いでしょう。


そんな時に便利に利用できるのが「関数」です。
関数はページのソースをすべて読み込んだ後で実行するようになっています。
警告ダイアログボックスを表示する命令を関数化することにより、画像が表示されたあとに実行することができます。

関数
  • 処理をまとめて名前を付けておいて、あとから自由に呼び出せるようにしておく
  • すべてのメソッドは、windowオブジェクトで実行されるので、オブジェクト名の記述を省略します
<script>
function hello() {
  alert('こんにちは、iRockです。');
}
</script>


ページが読み込まれた時点で関数を呼び出すようにしたいため、body要素にイベントを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iRockと話す！</title>
<script>
function hello() {
  alert('こんにちは、iRockです。');
}
</script>
</head>
<body onLoad="hello()">
<p><img src="img/irock.png" alt="iRock"></p>
</body>
</html>
画像をクリックしたときに（clickイベント）
  • イベントハンドラ「onClick()」を設定する
  • マウスの形状は、押すことが可能であることを明示するために「指のアイコン」に変更します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iRockと話す！</title>
<style>
p img {
  cursor: pointer;
}
</style>
<script>
function hello() {
  alert('こんにちは、iRockです。');
}
function askName() {
  var uname =  prompt('あなたのお名前は？', '');
  if (uname) {
    alert('はじめまして！' + uname);
  }
}
</script>
</head>
<body onLoad="hello()">
<p><img src="img/irock.png" alt="iRock" onClick="askName()"></p>
</body>
</html>
DOMによる画像置換
  • イベントの実行中に画像置換を行うには、DOM（Document Object Model）を記述します
  • DOMは、xmlやhtmlの各要素たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです
  • DOMを操作することによって、要素の値をダイレクトに操作できます


ドキュメント内にあるID名を取得

  • document.getElementById()を設定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iRockと話す！</title>
<style>
p img {
  cursor: pointer;
}
</style>
<script>
function hello() {
  alert('こんにちは、iRockです。');
}
function askName() {
  var uname =  prompt('あなたのお名前は？', '');
  if (uname) {
    alert('はじめまして！' + uname);
    document.getElementById('irockImg').src = 'img/irock_happy.png';
  }
}
</script>
</head>
<body onLoad="hello()">
<p><img id="irockImg" src="img/irock.png" alt="iRock" onClick="askName()"></p>
</body>
</html>


JavaScriptクロスワードパズル


【ヨコのカギ】
2. iRockに挨拶させる機能を提供するコードの固まりの名前（関数名：TOUCHROCKの場合）
4. マウスのクリックに対応するように、HTML要素の〜属性にJavaScriptコードを設定します
7. これがないとHTMLとCSSを使ってなんとかするしかありません
8. ユーザーにテキストを表示するときは関数〜を呼び出します


【タテのカギ】
1. あるタスクを実行する再利用可能なJavaScriptコード断片のこと
3. 何かが発生したときブラウザがあなたに知らせようとすること
5. 「今シーズンのかわいいオンラインペット」といえば？
6. ウェブページの読み込みが完了したことを知らせるイベント