JavaScriptはHTML内に記述し、Webページを動的に制御するためのスクリプト言語で、1995年にNetscape社がNestscape Navigator用に開発しました。それに対抗する形で、Microsoft社もIntenet Explorer用にJavaScriptと同等な仕様のJScriptを開発しました。 その後DynamicHTMLを実現するため、両ブラウザのJavaScriptの仕様に差が生じてきました。そこで、Ecma Internationalによって JavaScriptの中核的な仕様がECMAScript(エクマスクリプト)として標準化されました。
厳密な意味でJavaScriptといえばNetscapeおよびMozillaのものを指すわけですが、ECMAScriptやJScriptに比べJavaScriptという名称が定着していますので、ここではこれら3つの言語に共通する仕様や内容を説明する際にはJavaScriptという名称をこれら3つの言語の総称名として使用します。
著者のJavaScript関連の著書
ホームページを飾るJavaScript入門(1996年、技術評論社)
やさしいホームページの作り方シリーズJavaScript(1997年、ナツメ社)
改定新版 ホームページを飾るJavaScript入門(1998年、技術評論社)
基礎から学べるJavaScript標準コースウエア(2008年、技術評論社)
ゼロからわかるJavaScript超入門 たのしいプログラミング(2010年、技術評論社)
JavaScript+HTML5でブラウザゲームに挑戦の特徴
「全てのゲームはWebでやれ!」――そんなキャッチコピーを掲げるブラウザゲームの新プラットフォーム「Yahoo!ゲーム ゲームプラス」を、ヤフーが2017年7月18日に公開しました。ブラウザゲームはパソコン、スマートフォン、タブレットなどの機種に依存しないで動作します。
本書はJavaScript+HTML5を使ってブラウザゲームを作る基礎を学びます。ゲームは次の10本を用意し、Stepを踏んで、完成させます。完成版のプログラムは多少長くなりますが、Stepごとに追加していくので、スムーズに学習できます。プログラムリストにおいて、Stepごとに追加された部分は赤色になっています。
「文法のまとめ」でJavaScriptの文法のまとめを必要により解説しています。
・もぐらたたき
・移動板パズル
・ラケットゲーム
・シューティング
・戦略を持つじゃんけん
・相性占い
・ハノイの塔
・迷路
・マインスイーパー
・リバーシー
プログラム開発はパソコンで行い、スマートフォン(Android、iPhone)でも動作確認しました。本書の実行結果画面はスマートフォンのものです。
HTML5を使ったJavaScript完全入門の特徴
JavaScriptはHTML内に記述し、Webページを動的に制御するためのスクリプト言語です。JavaScriptからHTMLとCSSをプログラムで制御することによりパソコン、スマートフォン、タブレットで動作する動的なWebアプリを簡単に作ることができます。
本書はHTML5+CSS+JavaScriptを組み合わせたWebアプリを作るためのJavaScriptの入門書です。プログラム経験のない人が簡単にJavaScriptでプログラムを作成できるように、基礎的な技術内容を系統的に解説するもので、以下のような特徴があります。
●ブラウザとテキストエディタさえあれば簡単にプログラムできます
JavaScriptはブラウザに内蔵されているので、特別なソフトが必要でなくインストールなどの作業が必要ないので、初心者には敷居が低いと思います。VisualC++やJavaなどをダウンロードしインストールする場合、初心者は1回でできず苦戦したり、あきらめてしまう場合が多いようです。
●C言語で学ぶより学習効果が得られます
学校の授業などでプログラムの入門としてC言語を学ぶ例が多いでようです。Cの言語仕様にはグラフィックス処理は含まれておらず、各C処理系でのサポートとなりますので、統一性がありません。
JavaScriptを使えば、HTML5から使用できるようになったcanvas要素(タグ)へのグラフィックス処理を簡単に行うことができます。1章でグラフィックスを用いてJavaScriptの基本的な文法を説明します。初心者にとってグラフィックス処理で得られる結果は視覚的に興味がわく題材となります。
JavaScriptの基本言語仕様はC言語をベースにしているので、C言語の文法を学んだのと同等の効果が得られます。
●Webアプリの基礎が学べます
本書は「JavaScript完全入門」と題していますが、JavaScriptの文法だけを学習することが目的ではありません。HTML5+CSS+JavaScriptによるWebアプリを作る上での基礎的な技術内容として「2章 イベント処理とオブジェクト操作」、「3章 UI要素の操作」、「4章 マウス操作」、「5章 一定時間ごとの処理」、「6章 JavaScriptの標準オブジェクト」、「7章 マルチメディア」、「8章 スマートフォン・タブレット専用機能」を解説します。さらにこれらの基礎技術を応用して「9章 ラケットゲーム」、「11章 リバーシーゲーム」で示すような実用的なWebアプリが作れるようにすることを目的にしています。
●データ構造やアルゴリズムについて学べます
JavaScriptの言語仕様や基礎技術を学んだだけでは高度なプログラムを作ることはできません。データ構造やアルゴリズムといったプログラミングの概念を「10章 データ構造とアルゴリズム」で解説します。
●パソコン、スマートフォン、タブレットで動作します
本書のプログラムはパソコン上で作成していますが、スマートフォンやタブレット上でも動作します。スマートフォンやタブレットで動作できればより身近なものに感じられはずです。8章8-1の「「補足」スマートフォンやタブレットで動作確認する方法」を参照してください。
●授業や講習会などで使い易いように例題と練習問題がペアであります
各節ごとにそこで扱うテーマを本文で解説しています。「その解説を読んで」、「それに関連した例題を試し」、「練習問題で考える」という3ステップの基本動作を繰り返すことで学習効果が上がります。応用サンプルではさらに発展的な内容を学習できます。
●AppendixにHTML、CSS、JavaScriptに関する言語仕様をまとめてあります
本書で扱うHTMLとCSSは通常のWebページを作るのに必要な知識ではなく、JavaScriptから制御されるオブジェクトという観点で扱います。従って本書では主にJavaScriptの説明が主でHTMLとCSSはJavaScriptを使ってプログラムする上で必要な最小限の内容に絞って解説しています。HTMLとCSSに関する簡単な解説をAppendix1にまとめました。JavaScriptの詳細な言語仕様の解説をAppendix2にまとめました。
JavaScriptの文法以外にも学ばなければならないことがたくさんあり、高度な内容も含まれていますが解説はできるだけ分り易くしたつもりです。本書を読んだ方が一人でも多く、プログラムって面白いな、色々自分でも作ってみたいなと思っていただけたら幸いです。
1章 グラフィックスを用いたJavaScript入門
2章 イベント処理とオブジェクト操作
3章 UI要素の操作
4章 マウス操作
5章 一定時間ごとの処理
6章 JavaScriptの標準オブジェクト
7章 マルチメディア
8章 スマートフォン・タブレット専用機能
9章 ラケットゲーム
10章 データ構造とアルゴリズム
11章 リバーシーゲーム
練習問題解答
Appendix1 HTML/CSS
Appendix2 JavaScript
JavaScriptによるはじめてのアルゴリズム入門の特徴
1.HTML5+JavaScriptで標準的なグラフィックス処理が可能
Cのグラフィックスは各処理系に依存しますが、HTML5+JavaScriptでは標準のグラフィックスメソッドを使用できます。これにより「はじめてのアルゴリズム入門」シリーズでは主にC、Java、VisualBasicなどでしかプログラムを書けませんでしたがJavaScriptでも可能になりました。
・HTML5のcanvasタグに対しJavaScriptからグラフィックスメソッドを使用して簡単にグラフィックス描画ができるようになりました。プログラムの先頭に、以下を定番で置いておけば、「context」に対し、context.fillText(テキスト,x,y);でテキストがcontext.moveTo(x1,y1);context.lineTo(x2,y2);で直線が描けます。この他にも各種グラフィックスメソッドが用意されています。これにより表示位置を制御したいテキスト表示や8章のグラフィックスが簡単に表現できるようになりました。
・ライブラリ「turtle.js」を作っておくことで、簡単にタートルグラフィックスを行うことができます。
2.簡易的なクラス表現ができます
以下のようなクラスを定義しておけば、a[i].nameやa[i].ageのような表現ができますので、オブジェクト指向的な表現ができ、アルゴリズム学習に適しています。
function girl(name,age) // girlクラス
{
this.name=name; // フィールド
this.age=age;
}
3.ブラウザとテキストエディタさえあれば簡単にプログラムできます
JavaScriptはブラウザに内蔵されているので、特別なソフトが必要でなくインストールなどの作業が必要ないので、初心者には敷居が低いと思います。
4.C言語で学ぶより学習効果が得られます
学校の授業などでプログラムの入門としてC言語を学ぶ例が多いでようです。Cの言語仕様にはグラフィックス処理は含まれておらず、各C処理系でのサポートとなりますので、統一性がありません。
JavaScriptを使えば、HTML5から使用できるようになったcanvas要素(タグ)へのグラフィックス処理を簡単に行うことができます。
JavaScriptの基本言語仕様はC言語をベースにしているので、C言語の文法を学んだのと同等の効果が得られます。
5.パソコン、スマートフォン、タブレットで動作します
本書のプログラムはパソコン上で作成していますが、スマートフォンやタブレット上でも動作します。スマートフォンやタブレットで動作できればより身近なものに感じられはずです。
本書は以下の書籍をJavaScript版にしたもので、JavaScriptのソースコードのみを提供しています。各例題、各練習問題の解説は以下の書籍を参考にしてください。
「C言語によるはじめてのアルゴリズム入門」技術評論社、河西朝雄著、1992年
「改訂第3版C言語によるはじめてのアルゴリズム入門」技術評論社、河西朝雄著、2008年
「Javaによるはじめてのアルゴリズム入門」技術評論社、河西朝雄著、2001年
「Visual Basicによるはじめてのアルゴリズム入門」技術評論社、河西朝雄著、1999年
「N88-BASICによるはじめてのアルゴリズム入門」技術評論社、河西朝雄著、1993年
第1章 ウォーミング・アップ
第2章 数値計算
第3章 ソートとサーチ
第4章 再帰
第5章 データ構造
第6章 木(tree)
第7章 グラフ(graph)
第8章 グラフィックス
第9章 パズル・ゲーム
購入希望の方は以下のメールアドレスに連絡してください。個別に対応いたします。
asao.kasai@gmail.com
本書はプログラム経験のない人が簡単にJavaScriptでプログラムを作成できるように、要点のみを解説した超入門書で、1章と2章で構成します。
1章 グラフィックスを用いたJavaScript入門
HTML5から使用できるようになったcanvas要素(タグ)へのグラフィックス処理を例にしてJavaScriptの基本的な文法を説明します。初心者にとってグラフィックス処理で得られる結果は視覚的に興味がわく題材となります。
プログラムを作る上で基本となることは、プログラムの流れを制御する流れ制御文、データをまとめて管理する配列、一連の処理内容をひとかたまりにまとめて記述しそれを呼び出して使う関数などです。このようなプログラムを作る際の決まりを定めたものを言語仕様といいます。この章では以下のような基本的な言語仕様について説明します。
1-1 グラフィックス処理の概要
1-2 for文
1-3 if else文
1-4 二重ループ
1-5 1次元配列
1-6 2次元配列
1-7 関数
2章 オブジェクトの操作
HTML要素(タグ)をオブジェクトとして取得しJavaScriptから操作する方法や、タグを用いずにコンストラクタから直接オブジェクトを生成しdocumentに追加する方法を説明します。HTML要素のクリック(タッチ)で発生するonClickイベントや選択ボックスの項目の選択で発生するonChangeイベントなどの処理方法を説明します。JavaScriptの標準オブジェクトであるMathオブジェクトやStringオブジェクトの使い方を説明します。
この章ではこれらの内容を以下の各節で説明します。
2-1 オブジェクトの取得
2-2 連想配列とfor in文
2-3 イベント処理
2-4 選択ボックスの処理
2-5 オブジェクトの生成と追加
2-6 Mathオブジェク
2-7 Stringオブジェクト
すでに紙媒体で出版した上記著作に関し頁数の関係から載せられなかった以下の内容を提供します。
10章 各種Visualツールを作ってみよう
実際のWebページで見かける各種Visualツールの作り方を説明します。
inputタグで作るボタンでなく、イメージを使ったVisualボタン、ある領域にマウスが入ったらその領域の色が変わる地図、月単位のカレンダー、ページを切り替えるタブなどです。
本書の1章~7章はプログラミングの初心者が視覚的に興味のある題材を使って効率よくJavaScriptやDynamicHTMLの技術を学べるような構成になっています。このためDynamicHTMLの使い方(ラケットゲーム、ドットアートなど)としては特殊な部類に入ります。この章で説明する内容はWebページに応用できる本来のDynamicHTMLの内容となっています。特にタブの例はスタイルシートの各プロパティを最も豊富に使っています。
10-1 Visualボタン
10-2 地図
10-3 カレンダー
10-4 タブ
章末問題
11章 最終課題(各種ゲーム)
9章のリバーシゲームで実用的なプログラムを作るスキルが付いたと思います。この章ではさらに、自分で考えて実用的に使えるプログラムを作るためのヒントとなるサンプルとして、ブロックくずし、マインスイーパー、迷路の3例題を説明します。
ブロックくずしは6章のラケットゲームを元にそこにブロックを置きます。マインスーパーは、練習問題7-2、リバーシーゲームのマスを開ける手法を応用します。迷路はここまで説明しなかったテクニックがいくつかあります。マインスーパーと迷路では再帰を使用しています。
発展課題は各例題に対し、追加または変更された箇所(赤色)とその周辺部のみを掲載しています。プログラムの全リストは技術評論社の以下のWebページで入手することができます。
11-1 ブロックくずし
11-2 マインスイーパー
11-3 迷路