超初心者の 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 から渡される形式の文字列を連想配列に記録します。
  14. Sleep 関数
    setTimeout() を使って sleep() 関数を作成します。

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

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

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

    Object & Class
  31. Javascript の Object
    JavaScript の Object です。
  32. Javascript の階層構造
    Object の階層構造です。
  33. Object の関数
    Object の関数(メソッド)です。
  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 Animation
    1. Click Chenge
      マウスのクリックで Animation GIF を切り替えます。
    2. パラパラアニメーション
      少女のパラパラアニメーションです。
    3. Javascript で Click Anime
      クリックで "../img/dog0.gif" ~ "../img/dog4.gif" の画像を切り替えます。
    4. 画像の移動
      画像が左右に往復移動します。
    5. キーで移動
      Animation GIF を上下左右の矢印キーで移動します。
    6. setTimeout Animation
      画像をプレロードして、setTimeout で切り替えながらアニメーションします。
    7. Animation Start/Stop
      アニメーションの「開始/停止」ボタンを設定します。
    8. Walk Animation
      矢印キーでキャクターが歩きます。
  56. 弾丸を発射
    JavaScript で弾丸を発射します。
    1. 弾丸を発射
    2. 弾丸を広がりながら発射
    3. 円状に発射

    Cascading Style Sheets
  57. CSS Before
    CSS(Cascading Style Sheets) の説明です。
  58. CSS After
    css_before.html に CSS を適用します。
  59. Javascript CSS Sprite
    CSS Sprite の説明です。
    1. 画像を切り抜く
      CSS Sprite で画像を切り抜いて表示します。
    2. pos の位置から画像を切り抜く
      pos の位置から 100px 切り取って描画します。
    3. 画像を横にスクロールする
      CSS ファイル(jQuery など)を使わずに背景画像を横にスクロールします。
    4. 画像を右端から左に向かって流す
      CSS ファイルを使わずに FFX-2 の画像を右端から左に向かって流します。
    5. Javascript CSS File
      CSS File(sample.css) を使います。
    6. CSS Mapchip
      Mapchip を並べて美人の画像を描画します。
    7. CSS Anime
      16枚の Sprite を切り替えながら美人のアニメーションです。
  60. Game BackGround
    1. Back Image
      一枚の背景画像を画面全体に描画するのは簡単です。
    2. BG MAP
      Map Chip を組み合わせて BG(背景画像)を描画します。
    3. Map を配列で定義
      Map を配列で定義します。
    4. Map Editor を使う
      Map Editor を使うとプログラムは簡単です。
    5. Game Map-1
      Map Editor を使ってゲームの背景に使用する大きな画像を作成します。
    6. Game Map-2
      Game Map-1 で作成したマップ上でキャラクターを動かします。
    7. BG Wall
      マップからはみ出さないようにキャラクターを動かします。
    8. Map Walk
      BG Map に属性を設定してキャラクターを動かします。

    Audio
  61. Audio(mp3)
    ページの起動で Audio(mp3) を再生します。
  62. Audio Control
    コントローラを表示して、Audio(mp3) を再生します。
  63. クリックで再生
    ボタンのクリックで 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 のテキストを取得します。
AngularJS
  1. AngularJS サンプル
    AngularJS とは、グーグルとコミュニティによって開発が進められている JavaScript フレームワークです。
  2. Data Bind
    input のデータタイプ入力と div の表示をバインドします。
  3. Lower/Upper
    文字列を大文字/小文字と変換するフィルターを利用します。
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. スロットマシン
    スロットマシンのゲームです。

    シューティングゲーム
  19. シューティングゲームの基本
    シューティングゲームの基本です。
    1. 爆発のアニメーション
    2. スペースキーで連射
    3. 敵にヒット
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)