Javascriptを用いたプログラミングの基礎講座

概要

これは「プログラミングとはどういうものなのか？」という視点でプログラミングを体験することを目的とした講義のために作成された資料です。この講義では60分間でJavascriptを用いたプログラミングをハンズオンで学びます。

この資料はもともと、大学の農学部の4回生を対象とした集中講義のために作成したものです。90分の講義時間のうち、30分は周辺事項の紹介に当て、60分でプログラミングを学びます。大学の講義室にあるコンピューターは制限が多く、たった一回のプログラミングの講義のためだけにプログラム実行エンジンをインストールすることは許可されません。一方で、Javascriptは現在までのところ、ほぼすべてのWebブラウザに搭載された唯一のプログラミング言語です。そのためこの講義では、どの講義室でも使用出来るJavascriptを採用しています。

また60分間という短い時間のため、フルスクラッチでプログラムを書くことはしません。プログラミングを体験してもらうことが目的なので、プログラムを部分的に書き換えることで学んでもらいます。

対象とされる人物像

• HTMLが書ける
• いずれのプログラミング言語も学んだことがない
• これからも学ぶことはないだろうと予想される

動作確認環境

• Windows XP
• Internet Explorer 6
• メモ帳

講義室に有るコンピューターの環境に依存しています。HTMLのエンコーディングはShift-JISです。これはメモ帳がShift-JISしか扱えないためです。

内容

1. 文字列の出力

すべてのプログラミング言語において最初に学ぶのが文字列の出力です。出力する文字列を変更してみましょう。半角全角やクォーテーションの不足などをこの時点で間違えておくと良いでしょう。

2. 変数

変数について学びます。変数の概念に関する簡単な説明をした上で、変数名や代入する文字列を変えたりしてみると良いでしょう。

3. 数値演算と文字列結合

数値演算と文字列結合を学びます。数値や演算子について簡単な説明をした上で、これらを変更すると良いでしょう。また、数値をクォーテーションすることで文字列になってしまうということも重要でしょう。Javascriptでは「+」が数値演算にも文字列結合にも使われるが、他のプログラミング言語では違うこともあるといったことも話してみると良いでしょう。

4. 条件分岐

ifによる条件分岐を学びます。変数iの値を変更したり、条件文を変更したりしてみると良いでしょう。比較演算子を === に変更した際の挙動の違いを確認することで、前項の数値と文字列の違いを復習しましょう。

5. 繰り返し

forによる繰り返しを学びます。初期値を変更したり、繰り返し条件を変更するなどしてみると良いでしょう。

6. 入れ子構造

for文やif文などが入れ子構造にできることを学びます。if文を入れ子にした例を示すことができるとなお良いでしょう。

7. 関数

自分で関数を作成して、それを呼び出す方法を学びます。ブラウザのonclick属性で呼び出していることと含めて、プログラミング言語がそれぞれ目的を持って作成されたものであるということを話すと良いでしょう。

8. DOM操作

Javascriptの特有の機能としてDOMについて学びます。とは言え、getElementById以外のことには触れる必要はないでしょう。プログラミング言語が目的を持って作られているという実例の一つとしての紹介です。深入りする時間はありません。

9. 再帰呼び出し

フィボナッチ数の出力を例に、再帰呼び出しについて学びます。入力フォームに記載した閾値を前項で学んだ方法で取得します。この辺りになると書き換えることは難しくなってくるでしょう。

10. Javascriptの機能を使った例

最後に、見た目に楽しい例を示します。受講者に「へ〜」と言ってもらうことが目的です。深く内容を解説する必要はないでしょう。

ライセンス

To the extent possible under law, Kenji Akiyama has waived all copyright and related or neighboring rights to this work.