html/JavaScriptのTIPS集のバックアップ(No.23)

Top / html / JavaScriptのTIPS集

JavaScript関数について
TIPS集

JavaScript?関数について †

再入門。

スクリプト言語: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>

↑

TIPS集 †

↑

ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js †

ブログにはてブのコメントを表示するというトピックがあって、うちのサイトにもそれを組み込んでみました。ついでに、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のイベントハンドラ設定方法 : ユージック

↑

配列。 †

 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>

この記事は