再入門。
スクリプト言語:JavaScriptのイロハ - page2 - builder
<script type='text/javascript'> function hoge() { alert('hogehoge'); } hoge(); </script>
<script type='text/javascript'> var hoge= function() { alert('hogehoge'); } hoge(); </script>
<html> <head> <script type='text/javascript'> var hoge= function() { alert('hogehoge'); } var init=hoge; </script> </head> <body onload='init()'> </body> </html>
JavaScriptのイロハ:「関数はオブジェクト」って理解できますか? - page3 - builder
<script type='text/javascript'> function callFunc(fn){ fn(); fn(); } var init = function() { callFunc( function(){ alert('aa'); }); } </script> </head> <body onload='init()'> </body>
function init(){ var obj= new Object(); obj.v1="a"; //フィールドの定義 obj.f1= function(){ //関数の定義 alert('bbb'); }; var obj2= new Object(); obj2.str="STR1"; obj.nested=obj2; //obj変数のフィールドにobjectを定義 obj.f1(); //関数呼び出し alert(obj.v1); //フィールドへのアクセス alert(obj['v1']); //フィールドへこのようにアクセスもできる。ハッシュのように。 alert(obj['nested'].str); //ネストしたデータも同様 obj['f2'] = function(){ // 関数の定義のときも、ハッシュのようにアクセスしていい alert('f2f2f2'); }; obj.f2(); obj['f2'](); //呼び出し }
var obj= new Object(); obj.v1="a"; //フィールドの定義 obj.f1= function(){ //関数の定義 alert('bbb'); }; var obj2= new Object(); obj2.str="STR1"; obj.nested=obj2; //obj変数のフィールドにobjectを定義
これと同値な書き方として下記のような表現がある(オブジェクトリテラルという)。
var obj = { v1: "a", f1: function(){ alert('bbb'); }, nested: { str:"STR1" } };
こう定義することで、さっきと同じようにアクセスできる
obj.f1(); alert(obj.v1); alert(obj['v1']); alert(obj['nested'].str);
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20365320/
for(var property in obj){ alert(property); alert(obj[property]); }
結果:
v1 a f1 function (){ alert('bbb'); } nested [object Object]
みたいなのが表示される
たとえばサーバからオブジェクトリテラル形式の文字列を受け取ったとして、
var obj = eval("(" + もじれつ + ")");
ってやるとobjに代入できて
alert(obj.v1);
ってできる。JSON形式でやり取りすることですね。
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20366430/
var a=["a","b"]; //配列の定義その1 a['var1']='ccc'; //配列の定義その2 for (var prop in a){ alert(prop); // 0,1,var1 ←こういう順番の配列を定義したと見ていい alert(a[prop]); // a,b,ccc }
配列はハッシュテーブルみたいだし、先に見たとおりオブジェクトもフィールドに順次アクセスできるし、 なんだかオブジェクトのハッシュテーブルぽい。
ちなみにFor文は
var a = ["a", "b", "c"]; for (var i = 0, n = a.length; i < n; i++) { alert(a[i]); }
だけでなく
// indexには「0, 1, 2」という値が入る for (var index in a) { alert(a[index]); }
って書くことも出来て、オブジェクトへのプロパティアクセスとなんだか等価な感じになっている。。
ブログにはてブのコメントを表示するというトピックがあって、うちのサイトにもそれを組み込んでみました。ついでに、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