#topicpath ---- //ここにコンテンツを記述します。 #contents **JavaScript関数について [#x599000a] 再入門。 [[スクリプト言語:JavaScriptのイロハ - page2 - builder>http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/2/]] ***普通に宣言する [#f0ceeb56] <script type='text/javascript'> function hoge() { alert('hogehoge'); } hoge(); </script> ***変数ぽく宣言する [#jaa5e389] <script type='text/javascript'> var hoge= function() { alert('hogehoge'); } hoge(); </script> ***代入できる [#p44c7bd2] <html> <head> <script type='text/javascript'> var hoge= function() { alert('hogehoge'); } var init=hoge; </script> </head> <body onload='init()'> </body> </html> ***さらに引数にもできる [#o3c361d9] [[JavaScriptのイロハ:「関数はオブジェクト」って理解できますか? - page3 - builder>http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20364588/3/]] <script type='text/javascript'> function callFunc(fn){ fn(); fn(); } var init = function() { callFunc( function(){ alert('aa'); }); } </script> </head> <body onload='init()'> </body> **TIPS集 [#x7c26c24] ***ブログにはてブのコメントを表示する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;}