超初心者の JavaScript

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

ページ全体のソースコードは、右クリックから ソースの表示(V) で確認することが出来ます。
幾つかのブラウザでは「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. String の反転
    String の置き換えと反転です。
  9. 全角 ⇔ 半角
    全角の英数字を半角に変換します。
    半角の英数字を全角に変換します。
  10. Sleep 関数
    setTimeout() を使って sleep() 関数を作成します。

    配列
  11. Javascript の配列
    配列の定義と初期値の設定です。
  12. Date Time
    日付と時刻を表示します。
  13. 配列のコピー
    配列のコピーには「参照とディープコピー」があります。
  14. 配列の追加と削除
    配列に要素を「追加/削除」します。
  15. 配列のソート
    文字列(数値)をソートして印字します。
  16. Javascript の二次元配列
    二次元配列の定義と初期値の設定です。
  17. 二次元配列のコピー
    Javascript の二次元配列のコピーです。

    連想配列
  18. Javascript の連想配列
    連想配列を使う。
  19. パラメータ文字列
    form から渡される形式の文字列を連想配列に記録します。

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

    form input
  24. GET パラメータを取得
    GET リクエストパラメータ(?n1=1&n2=234&c1=A&c2=XYZ)を取得します。
  25. Send
    Javascript でパラメータを設定してページを呼び出します。
  26. YES_NO を応答
    form から YES または NO を応答します。
  27. 選択ボックスから画像を選ぶ
    form の選択ボックスから画像を選択して表示します。
  28. form param
    form からタイプされたデータを引数にして action から HTML を呼び出します。
  29. Form GCM
    form から "data1" と "data2" をタイプ入力して GCM を計算します。
  30. Form Button
    form にボタンを並べて石の数を選択します。

    Mouse & Key
  31. Mouse Down を検出
    マウスをクリックすると window.alert() で知らせます。
  32. DIV のクリックを検出する
    DIV のクリックを検出して、関数を呼び出します。
    Button を並べてクリックで関数を呼び出します。
  33. Mouse Position
    マウスがクリックされた座標を知らせます。
  34. Mouse Move
    マウスの座標を表示します。
  35. 現在時刻を表示
    Interval Timer を設定して現在時刻を表示します。
    ボタンのクリックで[開始/停止]します。
  36. Key Code を調べる
    キーをタイプするとキーコードを16進数で表示します。

    Object & Class
  37. Javascript の Object
    JavaScript の Object です。
  38. Javascript の階層構造
    Object の階層構造です。
  39. Object の関数
    Object の関数(メソッド)です。
  40. Javascript の Class
    JavaScript の gcmlcm Class です。
  41. jewel Class
    jewel Class です。
  42. Javascript の Class 領域
    Javascript の Class の領域です。

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

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

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

    Animation
  61. 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
      矢印キーでキャクターが歩きます。
  62. 弾丸を発射
    JavaScript で弾丸を発射します。
    1. 弾丸を発射
    2. 弾丸を広がりながら発射
    3. 円状に発射

    Cascading Style Sheets
  63. CSS Before
    CSS(Cascading Style Sheets) の説明です。
  64. CSS After
    css_before.html に CSS を適用します。
  65. 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 を切り替えながら美人のアニメーションです。
  66. 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
  67. Audio(mp3)
    ページの起動で Audio(mp3) を再生します。
  68. Audio Control
    コントローラを表示して、Audio(mp3) を再生します。
  69. クリックで再生
    ボタンのクリックで 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

    AngularJS Guid
  1. AngularJS Guid
    AngularJS とは、グーグルとコミュニティによって開発が進められている JavaScript フレームワークです。
  2. AngularJS Source Code
    AngularJS の様々な書き方(Source Code)です。
  3. Log
    AngularJS で Debug 情報(Log)を収集します。

    AngularJS View
  4. Data Bind
    input のデータタイプ入力と div の表示をバインドします。
  5. Show_Hide
    メッセージの「表示/非表示」を切り替えます。
  6. Background_Color
    メッセージをタイプすると背景色が変わります。
  7. Lower/Upper
    文字列を大文字/小文字と変換するフィルターを利用します。
  8. Filter
    文字列表示にフィルター機能を使います。
  9. Expression
    {{ 式 }} の中に式(expression)を使う例です。

    AngularJS List
  10. Repeat
    <li> の中で ng-repeat を使って繰り返します。
  11. Repeat List
    ng-repeat を用いて、リスト操作を行います。
    簡単な検索機能も説明します。
  12. Search
    文字列サーチのプログラムです。
  13. List Add & Del
    リストに追加とリストからの削除です。
  14. Button Click
    Button Click のプログラムです。
  15. Event
    ボタンクリックで input からタイプした TEXT を表示します。
  16. 現在時刻
    1000 ミリ秒単位に現在時刻を表示します。
  17. HTML Bind
    HTML 文を div の TEXT 表示に Bind します。

    AngularJS Check
  18. Form Check
    Form からタイプされた TEXT 文の長さを調べてメッセージを表示します。
  19. Input Check
    Form からタイプ入力された複数の項目をチェックします。
  20. 汎用関数
    AngularJS の関数(メソッド)を *.js に登録する方法を説明します。

    AngularJS XML Request
  21. XML Http
    非同期通信を受け持つ XMLHttpRequest(XHR) のプログラムです。
  22. XML POST
    非同期通信を受け持つ XMLHttpRequest(XHR) でパラメーターを POST で渡します。
JavaScript ゲーム
    画像を描画
  1. イメージ画像を表示
    ボタンをクリックして、ダイアログボックスからタイプして下さい。

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

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

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

    スロットマシン
  9. スロットマシン
    スロットマシンのゲームです。

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

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

    オセロゲーム
  19. オセロゲームの作成
    1. クリック
      盤をクリックしてオセロの座標に変換します。
    2. 盤と駒を表示
      tt[8][8] で駒を設定して、盤と駒を表示します。
    3. パラメータの設定
      パラメータが無いときは、最初の局面です。
    4. 駒の配置を渡す
      駒の配置を設定して渡します。

    シューティングゲーム
  20. シューティングゲームの基本
    シューティングゲームの基本です。
    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)

*****************************************************************************************

★補足ページ★

*****************************************************************************************

★補足ページ★

  1. 背景のスクロール
    大きな画像を使って、画面全体でスクロールします。
  2. Animation Test
    「開始/停止」ボタンを設定します。(utf-8 でタイプ)
  3. 回転アニメ
    _Anime.css を組み込んで文字(文字の画像)の回転アニメーション。
  4. 矩形で切り出す
    _sample.css で _kaeru_gif から矩形で切り出す。
  5. OnClick
    Click で空のページ(DOMとは)を呼び出す。
  6. this Object
    this Object を調べる。
  7. Class & this
    Class で定義した領域と this の関係です。
  8. 三山ゲーム?[F12]エラー
    [F12]でデバッグすると miyama.play(); にエラーが表示される。
  9. Page Move
    B, F キーでページを移動します。
  10. ハイ&ロー
    IE ではメッセージが正しく表示されません。
  11. action から呼び出す
    action から perl や PHP に代えて HTML を呼び出します。
  12. CSS のソースを表示
    ナビゲーションエラーが発生して実行されない。
  13. Shot Class
    弾丸の発射にクラスを使う。

  1. 初心者のためのJavaScript講座
  2. とほほのJavaScriptリファレンス
  3. JavaScript の例題です
  4. ☆JavaScript Library
  5. JavaScript 便利帳
  6. CGI Program
  7. Perl のページ
  8. 超初心者の Perl 入門
  9. PHP Home Pgae
  10. PHP Page & *.php