jQuery

動かしてみる

初めての jQuery として、Visual Basic や Delphi でよくやる題材を。

テキストボックスとボタンを一つ配置して、ボタンが押されると、テキストボックスの内容を hello world に書き換える。そして hello というメッセージボックス。

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#button1").click(function(){
    $("#text1").val("hello world");
    alert("hello");
  });
});
</script>
</head>
<body>
<input type="text" id="text1"/>
<input type="button" id="button1" value="hello"/>
</body>
</html>

jQueryとWAI-ARIAの関係

http://www.ark-web.jp/accessibility/2297.html

get メソッド

資料の記事を試す。コメントアウトした方としてない方と、どちらでも動いた。

<div>ボタンを押してみてください。
  <button id="test">クリック</button>
  <p>
  <span id="my1">ここが書き換わります</span>
  </p>

</div>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function(){
//  $("#test")
//    .click(function () {
//       $.get( "./msg.txt",
//         function(data){
//          $("#my1").html(data);
//         }
//       );
//    });
//});
jQuery(function($){
  $("#test")
    .click(function () {
       $.get( "./msg.txt",
         function(data){
          $("#my1").html(data);
         }
       );
    });
});
</script>

get の文字化け回避

上記の例は一部の環境で文字化けが起きたので、明示的に UTF-8 を使うようにした。

ついでに、文字属性の指定の実験もやってみた。

下記の例は Windows の IE8 と Firefox 3.6 と Chrome で動作確認済み。

msg.php

<?php
header("Content-Type: text/html; charset=utf-8");
?>
テストです

jq-get.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head>
<body>
<div>ボタンを押してください。
  <button id="test">クリック</button>
  <p>
  <span id="my1">ここが書き換わります</span>
  <span id="my2">ここは書き換わりません</span>
  </p>
</div>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#test").click(function() {
    $.get( "./msg.php",
      function(data) { $("#my1").html(data); }
    );
    $("#my2").css("font-size",30).css("color", "#808080");
  });
});
</script>
</body>
</html>

jsrender

since 2013-06-05

https://github.com/BorisMoore/jsrender

Deferred

since 2013-06-11

複数の非同期イベントがすべて終了したら何かをする、といった処理は以下のように書ける：

http://qiita.com/items/3d1cf51d7ae91305eaaa
どうやら複数の ajax 処理を並べたときの実行順序は不定らしい。

<script type="text/javascript" charset="utf-8" src="./jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./jqmobile/jquery.mobile-1.3.1.min.js"></script>

<a data-role="button" id="test_btn">テスト</a>

<script type="text/javascript" charset="utf-8" src="./test.js"></script>

function debugMessage(s) {
    alert(s)
}

function stringify(d) {
    var s = JSON.stringify(d)
    if (s.length > 100) {
	s = s.substring(0, 97) + "..."
    }
    return s
}

function fetch1() {
    var dfd = $.Deferred()
    var url = "http://localhost"
    var settings = {}
    $.ajax(url, settings).done(function(data) {
	debugMessage("done: " + stringify(data))
	dfd.resolve(data)
    }).fail(function(data) {
	debugMessage("fail: " + stringify(data))
	dfd.reject()
    })
    return dfd.promise()
}

function fetch2() {
    var dfd = $.Deferred()
    var url = "http://localhost/~nishimotz"
    var settings = {}
    $.ajax(url, settings).done(function(data) {
	debugMessage("done: " + stringify(data))
	dfd.resolve(data)
    }).fail(function(data) {
	debugMessage("fail: " + stringify(data))
	dfd.reject()
    })
    return dfd.promise()
}

$("#test_btn").on("click", function (e) {
    debugMessage("hello")
    $.when(fetch1(), fetch2()).done( function(data1, data2) {
	var s = "[1]:" + stringify(data1) + " [2]:" + stringify(data2)
	debugMessage("done-all: " + s)
    }).fail( function() {
	debugMessage("fail")
    })
})

ja.nishimotz.com

目次