超初心者の JavaScript

前田稔の超初心者のプログラム入門(JavaScript)のページへようこそ。

JavaScript のページはネットで沢山ヒットするので、ゲームプログラムを中心に解説します。 (^_^;
ページ全体のソースコードは、右クリックから ソースの表示(V) で表示されます。
Microsoft Edge では「F12キー」を押すとソースコードが表示されます。
JavaScript Index JavaScript
    紹介
  1. JavaScript Guid
    JavaScript の紹介です。
  2. Hello
    "Hello World!!" を表示する最も簡単な JavaScript です。
  3. Welcome JavaScript
    ループを使って Welcome JavaScript を繰り返します。
    文字列を横スクロールします。
  4. 文字のサイズと色
    文字のサイズと色を選択します。
  5. 自由に配置
    TEXTや画像を自由に配置します。

    変数
  6. Javascript の変数
    変数は var で宣言します。
    変数の宣言に、数値と文字列の区別はありません。
  7. String
    JavaScript の String(文字列)です。
  8. Date Time
    日付と時刻を表示します。
  9. Javascript の配列
    配列の定義と初期値の設定です。
  10. 配列のソート
    文字列(数値)をソートして印字します。
  11. Javascript の二次元配列
    二次元配列の定義と初期値の設定です。
  12. Javascript の連想配列
    連想配列を使う。
  13. パラメータ文字列
    form から渡される形式の文字列を連想配列に記録します。

    Image
  14. 3枚の画像を描画
    animation gif の画像を描画してみます。
    3枚の画像を並べて描画します。
  15. 画像を並べる関数
    乱数で個数を決めて石の画像を並べます。
    disp(n) 関数で jewel.gif を n 個並べて表示します。
  16. マウスを重ねると画像が変わる
    onMouseover でマウスの重なりを検出して画像を変えます。
  17. クリックで石を取り除く
    onClick で画像のクリックを検出して、以降の石を取り除きます。

    form input
  18. GET リクエストを取得
    Javascript で GET リクエスト値を取得します。
  19. Send
    Javascript でパラメータを設定してページを呼び出します。
  20. YES_NO を応答
    form から YES または NO を応答します。
  21. 選択ボックスから画像を選ぶ
    form の選択ボックスから画像を選択して表示します。
  22. form param
    form からタイプされたデータを引数にして action から HTML を呼び出します。
  23. Form GCM
    form から "data1" と "data2" をタイプ入力して GCM を計算します。
  24. Form Button
    form にボタンを並べて石の数を選択します。

    Mouse & Key
  25. Mouse Down を検出
    マウスをクリックすると window.alert() で知らせます。
  26. DIV のクリックを検出する
    DIV のクリックを検出して、関数を呼び出します。
    Button を並べてクリックで関数を呼び出します。
  27. Mouse Position
    マウスがクリックされた座標を知らせます。
  28. Mouse Move
    マウスの座標を表示します。
  29. Key Code を調べる
    キーをタイプするとキーコードを16進数で表示します。

    Object & Class
  30. Javascript の Object
    JavaScript の Object です。
  31. Javascript の階層構造
    Object の階層構造です。
  32. Object の関数
    Object の関数(メソッド)です。
  33. Sleep 関数
    setTimeout() を使って sleep() 関数を作成します。
  34. Javascript の Class
    JavaScript の gcmlcm Class です。
  35. jewel Class
    jewel Class です。
  36. Javascript の Class 領域
    Javascript の Class の領域です。

    JavaScript file
  37. File Input
    JavaScript のソースコードをファイル(hello.js)から入力します。
  38. Class File
    GCM, LCM Class を定義した File を使います。

    FILE 入出力
  39. Read Text
    JavaScript で TEXT FILE を入力します。
  40. Drag & Drop
    IMAGE FILE を Drag & Drop します。
  41. Blob
    Blob でデータを定義します。
  42. RequestFileSystem
    RequestFileSystem() 関数の実行を確認します。
  43. TEMPORARY I-O
    TEMPORARY FILE の出力(作成)と入力です。
  44. Write & Read & Delete
    PERSISTENT FILE の「出力/入力/削除」です。
  45. File Copy
    複数ファイルを選択してコピーします。
  46. Directory
    Directory を作成してファイルを格納します。
  47. TEMPORARY List
    Root Directory の TEMPORARY エントリの一覧を表示します。
  48. TEMPORARY Delete
    Root Directory の TEMPORARY File を全て削除します。
  49. File I-O
    ActiveX を使ったファイルの入出力です。

    Window 操作
  50. Text chenge
    id でリソースを取得して、ページ上の Text を書き換えます。
  51. サブウィンドウ
    ボタンで subWin 関数を呼び出し、window.open で HTML を開きます。
  52. 中央に表示
    サブウィンドウを画面中央に表示します。
  53. Dialog
    Modal Dialog を表示します。
  54. Dialog入力
    Dialog からタイプしたデータを持ち帰ります。

    Animation
  55. Javascript で Click Anime
    クリックで "../img/dog0.gif" ~ "../img/dog4.gif" の画像を切り替えます。
  56. 画像の移動
    画像が左右に往復移動します。
  57. キーで移動
    Animation GIF を上下左右の矢印キーで移動します。
  58. Animation
    画像をプレロードして、setTimeout で切り替えながらアニメーションします。
  59. Animation-2
    アニメーションの「開始/停止」ボタンを設定します。
  60. Walk
    矢印キーでキャクターが歩きます。
  61. 弾丸を発射
    JavaScript で弾丸を発射します。
    1. 弾丸を発射
    2. 弾丸を広がりながら発射
    3. 円状に発射

    Cascading Style Sheets
  62. CSS Before
    CSS(Cascading Style Sheets) の説明です。
  63. CSS After
    css_before.html に CSS を適用します。
  64. CSS Anime
    画像を切り分けるパラパラアニメーションです。
  65. Javascript CSS Sprite
    CSS Sprite の説明です。
    1. 画像を切り抜く
      CSS Sprite で画像を切り抜いて表示します。
    2. Javascript CSS File
      CSS File(sample.css) を使います。
    3. Javascript BG MAP
      Map Chip を組み合わせて BG(背景画像)を描画します。
    4. Map を配列で定義
      Map を配列で定義します。
    5. Map Editor を使う
      Map Editor を使うとプログラムは簡単です。
  66. Javascript Mapchip
    Mapchip を並べて美人の画像を描画します。
  67. Javascript CSS Anime
    16枚の Sprite を切り替えながら美人のアニメーションです。

    Audio
  68. Audio(mp3)
    ページの起動で Audio(mp3) を再生します。
  69. Audio Control
    コントローラを表示して、Audio(mp3) を再生します。
  70. クリックで再生
    ボタンのクリックで Audio を再生・停止します。
jQuery
  1. jQuery サンプル
    jQuery は JavaScript を簡単に記述するためのライブラリです。
  2. jQuery CSS
    jQuery(ジェイクエリー)で CSS を利用します。
  3. jQuery DIV Click
    jQuery で <DIV>タグの Click を検出します。
  4. jQuery Mouse Click
    jQuery で Mouse の Click を検出します。
  5. jQuery Change
    jQuery で CSS の設定を切り替え(削除・追加)します。
  6. jQuery Get
    jQuery で HTML のテキストを取得します。
JavaScript ゲーム
    画像を描画
  1. イメージ画像を表示
    ボタンをクリックして、ダイアログボックスからタイプして下さい。

    平方根
  2. 平方根の計算
    左側のボックスに数字をタイプして [=] ボタンをクリックして下さい。

    ハイ&ロー
  3. ハイ&ロー
    カード(1~13)が7より大きいか小さいかを当てるゲームです。

    ジャンケンゲーム
  4. じゃんけんゲーム
    じゃんけんゲームのルールです。
  5. じゃんけん-1
    ゲームの開始ボタンでページが遷移します。
  6. じゃんけん-2
    ラジオボタンでプレイヤーが打つ手を選択します。
  7. じゃんけん-3
    勝負の判定をして得点を計算します。
  8. じゃんけんゲームβ版
    じゃんけんゲームβ版の完成です。

    石取りゲーム
  9. 石取ゲーム
    石取ゲームのルールです。
  10. 石取ゲーム-1
    石を並べてラジオボタンでプレイします。
  11. 石取ゲーム-2
    クリックされた個数を取り除きます。
  12. 石取ゲームβ版
    石取ゲームβ版の完成です。

    三山くずし
  13. 三山ゲームのルール
    三山ゲームのルールです。
  14. 三山ゲーム-1
    クリックで石を取り除きます。
  15. 三山ゲーム-2
    交互にプレイします。
  16. 三山ゲーム-3
    対戦出来ます。
  17. 三山ゲームβ版
    三山ゲームβ版の完成です。

    スロットマシン
  18. スロットマシン
    スロットマシンのゲームです。
JavaScript Keyword 検索

予約語の一覧
abstract    boolean     break       byte        case
catch       char        class       const       continue
default     do          double      else        extends
false       final       finally     float       for
function    goto        if          implements  import
in          instanceof  int         interface   long
native      new         null        package     private
protected   public      return      short       super
switch      synchronized            this        throw
throws      transient   true        try         var
void        static      while       with 

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(PHP)
超初心者のプログラム入門(Perl)