#topicpath
----
//ここにコンテンツを記述します。


***ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js [#ra0df7b9]
[[ブログにはてブのコメントを表示する>http://blog.masuidrive.jp/index.php/2008/04/17/released-hatena-bookmark-anywhere/]]というトピックがあって、うちのサイトにもそれを組み込んでみました。ついでに、JavaScriptやAjaxなどの勉強のためそのJavaScriptのコードを読んでみました。うーん、JavaScriptってややこしいですね。


とりあえず自分の理解のために、いろいろな処理をそぎ落としてコードを書いてみました。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />	
 <script type= "text/javascript">
 <!-- JSONを取得する関数の定義 -->
   function getJSON() {
     try {
       if((typeof document.getElementById("result"))!="undefined") {
         var url="http://b.hatena.ne.jp/entry/json/?url="
         url +="http%3a%2f%2fwww.masatom.in%2fpukiwiki%2f"+"&callback=writeDocument";
         var script = document.createElement("script");
         script.setAttribute("type","text/javascript");
         script.setAttribute("src",url);
         document.body.appendChild(script);
       }
     } catch(e) {
     }
 }
 
 <!-- CallBackするメソッドの定義 -->
 function writeDocument(json) {
   id = document.getElementById("result");
   id.innerHTML = json.url+" : "+json.count+" : "+ json.bookmarks;
 }
 
 <!-- イベントを登録 -->
 try {
   if(window.addEventListener) {
     window.addEventListener("load", getJSON, false);
   } else {
     window.attachEvent("onload", getJSON);
   }
 } catch(e) {
 }
 </script>
 <link rel="stylesheet" type="text/css" href="css/common.css" /> 
 <title></title>
 </head>
 <body>
 <div id="result"></div>
 </body>
 </html>


処理の流れ的には、
-イベント登録の箇所で、画面を表示したときにgetJSONメソッドが呼び出されるように設定している
-getJSONメソッド内で、はてなのブックマーク取得I/Fにアクセスし、http://www.masatom.in/pukiwiki/ のブックマーク情報を取得
-ちなみにココはDOM使ってbodyの子要素としてJavaScriptのコードを挿入してますね
-はてなはコールバックのインタフェースをもってるみたいで、はてなから writeDocument({"count":"4",〜}); みたいなメソッドとJSONオブジェクト返ってきます
-これに従って、コールバックメソッドfunction writeDocument(json) が呼び出されます
- <div id="result"></div> の箇所にjsonオブジェクトのデータが表示されます。

うーんJavaScriptとかAjaxとかって処理があっちこっちに飛んで、ガチガチのJavaヤローにはかなりトリッキーにうつります(´д`;)。


-[[Javascriptのイベントハンドラ設定方法 : ユージック>http://www.u-ziq.com/blog/2007/05/domscript.html]]




***配列。 [#rac14e17]
  var array=new Array(3);
  array[0]="name1";
  array[1]="name2";
  array[2]="name3";
  var model={name:input, names:array};
と
  var model={"name":input,"names":["name1","name2","name3"]};
は等価。


***スクリプトを書く [#gf3a6dba]
 <html>
  <head>
  <script type="text/javascript">
  <!--
    document.write("hoge");
  -->
  </script>
  </head>
 <body>
 </body>
 </html>

***スクリプトを書いた外部ファイルを読み込む [#x8400d3c]
 <head>
   <script type="text/javascript" src="hoge.js" ></script>
 </head>
読み込んだファイルにはメソッドを書いておきます。んで、呼び出すときはたとえば
 <input type="button" name="実行" value="実行" onclick="aFunction();"/>
てなかんじです。aFunctionというメソッドを呼んでるわけですね。

***一部分を動的に書き換える [#a6640ff5]
あらかじめ
 <script type="text/javascript">
 <!--
 function trackbackSubmit() {
   var msg = "ある文字列";
   document.getElementById("body").innerHTML = msg;
 }
 //-->
 </script>
てなメソッドを定義しておきます。次にボタンを作ります。
 <input type="button" name="Ping!" value="Ping!" onclick="trackbackSubmit();"/>
このボタンを押すと、htmlファイル内の<div id="body"/>の箇所を探し出し(仕様ではユニークです) "ある文字列"に書き換えます((CSSのidってこんなところに出てくるんですね))。


***別ウィンドウを表示するスクリプト [#fe1f2068]
 <html>
 <head>
 <script language="javascript">
 <!--
  function win(url){
   wo = window.open(url, '', 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=400,height=500')
  }
 // -->
 </script>
 </head>
 <body>
 <a href="javascript:win('http://www.yahoo.co.jp')">別窓起動</a>
 </body>
 </html>

----
この記事は
#vote(おもしろかった[8],そうでもない[5])

#comment
#topicpath


SIZE(10){現在のアクセス:&counter;}
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS