HTML(使った事無かったもの） 

<a href="#">文字</a>
とすると、文字の下に線が入って気持ち悪い。
➡CSSでtext-decoration:none;とすると消える。


画像クリックで画像を拡大表示する場合。
➡<a href="~~.html"><img src="./images/gazou.jpg" alt="これをクリックすると拡大"></a>
として、htmlファイルを別に用意することで拡大させる事が出来る。

Ajax基礎知識２

ajaxの定義

1,XHTMLとCSSを利用したWeb標準での画面構成にする。

2,DOMを使用してイベントに連携した動的な画面表示を行う。

3,XMLとXSLTを仕様したデータ交換と操作を行う。

4,XMLHttpRequestを使用し、非同期でサーバとのメッセージ交換を行う。

5,JavaScriptによってすべての機能を統合する。

ajax方式での処理手順と機能。

[[1]] webブラウザでのイベントキャッチ
イベントキャッチとはwebブラウザ画面上でのユーザの操作やキーボード操作などを指している。これをきっかけに[[2]]もしくは[[3]]に処理が移る。

[[2]] サーバーとの非同期通信
具体的にはまず、XMLHttpRequestのオブジェクトを生成し、生成したXMLHttpRequestオブジェクトのメソッド(関数)やプロパティ(属性)を使用して、サーバとの通信やサーバとの通信状態の監視、サーバから送信されたデータの受信処理などが行われる。

[[3]] webブラウザ上での動的表示
従来のwebアプリケーションでは、webブラウザからサーバにリクエストが送信されてから表示される画面はリクエストを送った画面と全く別の画面（サーバで新しく作られた画面）。Ajaxの場合、サーバにリクエストを送った画面自身がサーバから送信データを受け取るので、動的なものとなる（既存の画面にデータが追加される）。

シームレス
➡ユーザーが複数のサービスを違和感無く統合して利用できること。

Ajaxを使う利点

ユーザービリティの向上。
レスポンスを早めることができる。

Ajaxの基礎知識！

Ajaxって何？

AjaxとはAsynchronous JavaScript + XMLの略で、ブラウザに搭載されているJavaScriptの機能を利用し、サーバーから送られてくるXMLなどのデータを非同期でやり取りする手法。簡単に言えば、ページ遷移なしに画面の切り替えが出来るというもの。

注意!

なんでもかんでもAjaxで作ってしまうと、ユーザーが意図しない入力などをしたとき、気づくきっかけがなくなる。同期通信と非同期通信の使いわけが大事となってくる。

XMLって何？

XMLとはHTMLと同じマークアップ言語の１つで、HTMLとの違いは、ユーザーが自由にタグを指定できるという点。XMLは単なるデータの集合である。

JSONって何？

Ajaxでは、サーバーからの処理結果としてXMl文書以外に、JSON(JavaScript Object Notation)と呼ばれる特殊な形式データを受け取ることが出来る。JSONとはJavaScriptの文法に従って記述したテキスト形式のデータ。

文頭表示と全文表示の切り替え。

出来上がりはこんな。
f:id:nodajin777:20120518134437p:plain
切り替え前↑　　　　切り替え後↓
f:id:nodajin777:20120518134444p:plain

簡単な説明。

文字数が多いと画面の領域を多く使ってしまうので「文頭のみ」を表示させたい時などに使う。ボタンの切り替えで全文、文頭の双方が表示可能。

普通ならこんな手順で考える？

1.まずは全文が表示されているだけの単純な画面を作ろう。（動かないボタン付き）
2.ロードされたとき、文頭だけ表示されていてほしいなー。（ボタンはまだ機能してない）
3.ボタンで切り替え出来るようにしたいなー。
4.これで一通り動くので、ボタン自体の文字を「本文表示」、「文頭表示」とボタン押すごとに切り替えたいなー。

説明とソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>文頭表示と全文表示の切り替え。</title>
    <style>
//overflow:hiddenを使う事で、表示領域を指定出来る。高さ２００px分だけ表示する事にする。
      div.buntou-hyouji {
        overflow:hidden;
        height:200px;
      }
    </style>
  </head>
  <body>
    <h1>文頭表示と全文表示の切り替え。</h1>
    <div id="honbun" class="buntou-hyouji">
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
      <p>テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。テストする文章。</p>
    </div>
    <a id="guid" href="JavaScript:showZenbun();">全文を表示する</a>
    <script type="text/javascript">
//全文を表示するための処理を書く。
      function showZenbun() { 
//classを空にすることで、overflowの機能がなくなるので全文表示される。
        document.getElementById('honbun').className = "";
//リンクは今まだshowZenbun()なので次ボタンを押しても、overflowの機能をなくすがまた適用されるので、結果、ボタンを押しても、何も起こっていないように見えてしまう。次押した時は、文頭のみにまた戻したいので、次の押されたときの処理用にshowBuntou()関数を入れておく。
        document.getElementById('guid').href = "JavaScript:showBuntou();";
//ボタンの文字を変える。
        document.getElementById('guid').innerHTML = "文頭のみ表示する"
      }

//文頭のみ表示にするための処理。
      function showBuntou() {
//文頭のみ表示にするためにまたcssを適用。
        document.getElementById('honbun').className = "buntou-hyouji";
//またボタンの機能を変えておく。次クリックしたとき全文を表示するため。
        document.getElementById('guid').href = "JavaScript:showZenbun();";
//ボタンの文字をまた変える。
        document.getElementById('guid').innerHTML = "全文を表示する"
      }
    </script>
  </body>
</html>

使う処理を１つも漏れなく書かないといけないので、注意が必要。当然１つでも抜けると動かないわけで・・・。
まだまだ使い始めだから「ああー、そこも考えなきゃいけないのか」ってのが多い。

プルダウンメニューを作る。

出来上がりはこんな感じ。
f:id:nodajin777:20120517165728p:plain
⬇親要素をクリックして開くと...
f:id:nodajin777:20120517165639p:plain

説明とソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>プルダウンメニューを作る</title>
  </head>
  <body>
    <h1>プルダウンメニュー</h1>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー１
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー１
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー１
        </div>
      </div>
    </div>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー２
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー２
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー２
        </div>
      </div>
    </div>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー３
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー３
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー３
        </div>
      </div>
    </div>
    <script type="text/javascript">
//クリックされたメニューの子メニューを表示するための関数。
      function clickMenu(event,menu) {
        var childMenu = null;
//クリックされたメニューに子メニューが存在する場合。
        if (menu.childNodes.length > 1) {
//クリックされたメニューの子メニューを参照する。
          childMenu = menu.childNodes[1];
//子メニューが非表示の場合。
          if (childMenu.style.display == "none") {
//子メニューを表示する。
            childMenu.style.display = "block";
          }
//子メニューが表示済みの場合。
          else {
//子メニューを非表示にする。
            childMenu.style.display = "none";
          }
        }
//イベント伝播を中止する。
        if (navigator.appName.indexOf("Microsoft") > -1) {
          event.cancelBubble = true;
        } else {
          event.stopPropagation();
        }
      }
    </script>
  </body>
</html>

クリックで写真を拡大。

出来上がりはこんな感じ。
f:id:nodajin777:20120517152445p:plain

仕様。
１０枚の画像を並べて表示させる。その画像をクリックすると、拡大領域にクリックされた画像が表示される。クリックされた画像には周りに、色付きのボーダーをつけ、拡大された画像がどれなのか分かりやすくする。

手順。
1.画面を作る。
2.画像がクリックされたときの処理を書く。
➡すでに１回以上クリックされている場合とまだ１回もクリックされていない状態に分けて考える。前回クリックされた画像の周りの枠線を消す処理。クリックされた画像を拡大する処理。クリックされた画像の周りに枠線を表示する処理。今回クリックされた画像を保存する処理（前回クリックされた画像の周りの枠線を消すため。）。を各必要がある。

説明とソース。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>サムネイル拡大表示</title>
    <style type="text/css">
      img.thumbnail {
        width:100px;
      }
    </style>
  </head>
  <body>
    <h1>サムネイルを拡大してみよう！</h1>
    <table>
      <tr>
        <td>
          <img class="thumbnail" src="./images/00.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/01.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/02.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/03.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/04.jpg" onclick="selectPhoto(this);" />
        </td>
      </tr>
      <tr>
        <td>
          <img class="thumbnail" src="./images/05.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/06.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/07.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/08.jpg" onclick="selectPhoto(this);" />
        </td>
        <td>
          <img class="thumbnail" src="./images/09.jpg" onclick="selectPhoto(this);" />
        </td>
      </tr>
      <tr>
        <td colspan="5">
          <img id="myPhoto" src="./images/blank.jpg" />
        </td>
      </tr>
    </table>
    <script type="text/javascript">
//前回クリックされた画像を格納するための変数。最初表示されたばかりなのでクリックされていないのでnullを入れる。
      var zenkaiGazou = null;
//１０個の写真のうちどれかクリックしたときの処理を書く。
      function selectPhoto(konkaiGazou) {
//前回クリックされた画像が空でないとき。すなわち、既に１回以上クリックされた状態の場合。
        if (zenkaiGazou != null) {
//前回の画像のボーダーを消す。
          zenkaiGazou.style.border = "";
        }
//拡大領域に今クリックされた画像を表示。
        document.getElementById('myPhoto').src = konkaiGazou.src;
//今回クリックされた画像にボーダーを付ける。
        konkaiGazou.style.border = "2px solid #FF0000";
//今回クリックされたものの保存。（既に１回以上クリックされているというのを次の処理に残すため。）
        zenkaiGazou = konkaiGazou;
      }
    </script>
  </body>
</html>
オブジェクト、thisキーワード、メソッド、プロパティの理解が必要。画像の元々のサイズが１０枚ばらばらだと拡大するときに画面が乱れる。

よく出てくるthisキーワード。

mouseover="selectPhoto(this);のようにthisが頻繁に出てくるが、いまいちよく分からない。
調べてみると...

「thisキーワードは実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワードです。」

と書いてある。
やっぱりオブジェクトをしっかり理解していないから分からない。

参考サイト：http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20371112/