ブログにはてブのコメントを表示するというトピックがあって、うちのサイトにもそれを組み込んでみました。ついでに、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>
処理の流れ的には、
うーんJavaScript?とかAjaxとかって処理があっちこっちに飛んで、ガチガチのJavaヤローにはかなりトリッキーにうつります(´д`;)。
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"]};
は等価。
<html> <head> <script type="text/javascript"> <!-- document.write("hoge"); --> </script> </head> <body> </body> </html>
<head> <script type="text/javascript" src="hoge.js" ></script> </head>
読み込んだファイルにはメソッドを書いておきます。んで、呼び出すときはたとえば
<input type="button" name="実行" value="実行" onclick="aFunction();"/>
てなかんじです。aFunctionというメソッドを呼んでるわけですね。
あらかじめ
<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"/>の箇所を探し出し(仕様ではユニークです) "ある文字列"に書き換えます*1。
<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>
この記事は
現在のアクセス:9830