上級編：既存の JavaScript に処理を追加する

チュートリアル４では、PostJSの登録を学習していきます。
PostJSは、JavaScriptの実行タイミングを自由に指定できる機能です。
ここではそのうちのいくつかについて学習します。

PostJS とは

PostJSとは、ジーンコードの機能の一つですでに実装されているJavaScriptに処理を追加することができる画期的な機能です。PostJSについての詳しい説明は、下記のマニュアルをご参照ください。

PostJSマニュアル

新規 PostJS の登録

  1. ブラウザ変換ステージへ移動し、新規スクリプトボタンをクリックしてくださいキャプチャ
  2. 編集ボタンをクリックしてくださいキャプチャ
  3. 以下のコードをテキストエディタに記述してくださいキャプチャ
  4. 編集終了ボタンをクリックしキャプチャ、すべて保存ボタンをクリックしてくださいキャプチャ
  5. End conversion viewのリロードボタンをクリックしてくださいキャプチャ
    6. 各地の天気予報の今日の日付の部分に黄色の背景がつきます。

実行タイミング

実行タイミングの種類

実行タイミングを変更ボタンをクリックしてくださいキャプチャ
６つのタイミングがあります。
このうちイベント処理後,Ajax通信完了後,他のPostJS処理後の3つを紹介します。

イベント処理後

  1. 新たにPostJSを登録します。新規スクリプトボタンをクリックしてくださいキャプチャ
  2. 編集ボタンをクリックし、以下のコードを記述してくださいキャプチャ
  3. 実行タイミングを変更ボタンから、イベント処理後を選択してくださいキャプチャ
    イベント一覧が現れます。
  4. 一覧の中から、input.submit_buttonを選択してくださいキャプチャ
  5. セレクタの欄にinput.submit_button、イベントの欄にclickと書かれていることを確認してくださいキャプチャ
  6. 確定をクリックしキャプチャ、すべてを保存をクリックしてくださいキャプチャ
  7. End conversion viewでリロードボタンをクリックしてくださいキャプチャ
  8. 送信ボタンをクリックし、エラー文言が出現するのを確認してくださいキャプチャ
    エラー文言は送信ボタンの下に現れます。

Ajax通信完了後

  1. 新たにPostJSを登録します。新規スクリプトボタンをクリックしてくださいキャプチャ
  2. 編集ボタンをクリックし、以下のコードを記述してくださいキャプチャ
  3. 実行タイミングを変更ボタンから、Ajax通信完了後を選択してくださいキャプチャ
    Ajax通信一覧が現れます。
  4. 一覧の中から、GET ./json.phpを選択してください
  5. リクエストURLの欄に./json.phpと書かれていることを確認してください
  6. 確定をクリックしキャプチャ、すべてを保存をクリックしてください
  7. End conversion viewでリロードボタンをクリックしてくださいキャプチャ
  8. 各地の天気予報の画像がテキストに置き換わっているのを確認してくださいキャプチャ

他のPostJS処理後

  1. STEP1で登録したPostJSを使用します
  2. 実行タイミングを変更ボタンから、他のPostJS処理後を選択してくださいキャプチャ
  3. スクリプト欄のセレクトボックスをクリックし、Step２-３で登録したPostJSを選択してください
    (Ajax通信完了後のスクリプトです。)
  4. 確定をクリックしキャプチャ、すべてを保存をクリックしてくださいキャプチャ
  5. End conversion viewでリロードボタンをクリックしてくださいキャプチャ
    各地の天気予報の今日の天気(晴れ,曇り,雨の文言)の背景が変わります。

PostJSのON,OFF

  1. Step２－３で登録したPostJSのOFFスイッチをクリックしてくださいキャプチャ
  2. すべて保存ボタンをクリックしてくださいキャプチャ
  3. End conversion viewのリロードボタンをクリックしてくださいキャプチャ
  4. 各地の天気予報の画像がテキストに置き換わっておらず、今日の天気の背景も変わりません
  5. スイッチをONに戻してくださいキャプチャ
  6. すべて保存ボタンをクリックしてくださいキャプチャ

チュートリアルを終了する
TOPへ

© 2015- Symmetric Co.,Ltd. All Rights Reserved.