Category: javascript

jquery と canvas

comments jquery と canvas はコメントを受け付けていません。
By , 2014年4月14日 (月) 18:19:29
var canvas = $('#canvas');
var ctx = canvas.getContext('2d');

これは動かない。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

おとなしくこうするのが無難。

var canvas = document.querySelector('canvas');

大差なし(笑)

new Array と forEach

comments new Array と forEach はコメントを受け付けていません。
By , 2012年9月11日 (火) 21:42:43
var a = new Array(10);
a.forEach(function(b){
    b = "hoge";
});
a.forEach(function(b){
    document.write(b);
});

これは動かない。 new Array() で確保された配列の要素は undefined で、 undefined に “hoge” を代入することはできないのだろう。

var a = new Array();
for(i = 0; 10 > i; i++){
    a[i] = "hoge";
}
a.forEach(function(b){
    document.write(b);
});

こちらは大丈夫。 空の配列を作って要素を足していくのが良いらしい。

$.when().done()

comments $.when().done() はコメントを受け付けていません。
By , 2012年7月13日 (金) 12:20:16

Ajax + JSON + twitter api の最終課題で、 twitter search の複数の結果を一つにまとめるにはどうしたら良いか、という質問があり、 Ajax の結果が返ってくるのは非同期だから、 全部の結果が返って来たというタイミングがいつかというのがわからんとどうにもならん。

TAに調べてもらったら $.when と .done というものがそれであるらしい。

まじめにやるととても複雑 なので、 極力シンプル にしてみた。

$.when(func1, func2,...).done(function(result1, result2,...));

のような書き方をすれば良く、func1 の結果は result1、func2 の結果は result2、という具合に返ってくる。 ただし実際の返り値は result1[0]、result2[0]、のようにして取り出す。

それを concat で連結して sortByDate で時刻順にソートしている。

最後に $.each でその結果を一つずつ表示。

すげえ、jQuery ってすげえ。 しかもこれできるようになったの去年の今頃らしい。 それまでは jsDeffered などというライブラリを使わなきゃいけなかったらしい。

もちょこっと調べてみた。上の result1 とか result2 は配列になっていて、 result[0] がリクエストに対する戻り値(data)。つまり得られるデータの本体。 result[1] はリクエストの状態(textStatus)。リクエストが成功してたら success という文字列が入る。 result[2] は jquery XMLHttpRequestオブジェクト。取得に成功してたら result[2].status に 200という数値(ステイタスコード)が入っている。

XMLHttpRequest というのは非常に紛らわしい名前だ。 なんとなく XML でデータをやりとりしているように思えるが、 もともとは、マイクロソフトが XML parser や非同期通信などをまとめたライブラリを MSXML と呼んでいて、それに含まれていたためにそう言われるだけのようである。 だから、XMLHttpRequest で JSON を直接受け渡ししたりもする。 XML と JSON は違う、明らかに違う。

ややこしい。 html の script要素でクロスドメインなサイトの javascript を読み込むことができるのは当たり前だが、 javascript から javascript を読み込んむ動的ロードとか、 XMLHttpRequest 使ったりとか、 JSONP とか。 $.getJSON できるのはサーバ側でクロスドメインが可能なように設定してあるだけなんだよね、結局は。

Jqueryメモ これもそうかな。

つぶやきくんβ

comments つぶやきくんβ はコメントを受け付けていません。
By , 2012年7月7日 (土) 22:28:55

つぶやきくんβ

google maps api v3 と twitter search api を組み合わせたサンプル。

google のサンプルコードは javascript 的だったから jquery 風に少し書き換えた。 まあ、それだけ。

javascript と form

comments javascript と form はコメントを受け付けていません。
By , 2012年6月5日 (火) 10:18:36

それはそうと、サーバサイドスクリプトを呼ばない form入力の場合、 form要素自体が要らない。 javascript で input 要素の値を拾ってくるだけでよい。 form 要素の中に input 要素を書く必要がない、という理解でよろしいか。

星座の計算

comments 星座の計算 はコメントを受け付けていません。
By , 2012年5月20日 (日) 13:12:01

javascript の演習で誕生日から星座を計算させようと思ったのだけど、 これが案外大変。 春分の日を起点として1年を12等分すれば良いらしいのだが、 春分の日は毎年変わる。 3月19日だったり21日だったりする。 3月20日がだいたい春分の日だとする。

一年を12で割るといっても、一年は 365日だ、いや、ユリウス暦では 365.25日であり、 グレゴリオ暦では365.2425日だが、 オマル・ハイヤームが作ったジャラーリー暦では 365.24219858156日であり、 天文年鑑では 365.24218987日。 これまた変動があって何千年単位では変動する。

あんまりまじめに考えるのもあれなので適当にコーディングしてみた。

<html>
<head>
<style>
input { width: 50px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var calc = function(){
  var today = new Date();
  var year = parseInt($("#year").val());
  var month = parseInt($("#month").val());
  var day = parseInt($("#day").val());
  var birthday = new Date(year, month - 1, day);
  var shunbun = new Date(year, 2, 20);
  var seiza = Math.floor((birthday - shunbun)
    / 24 / 3600 / 1000 / 365.242 * 12) + 2;
  var names = new Array("水瓶","魚","牡羊","牡牛","双子","蟹",
    "獅子","乙女","天秤","蠍","射手","山羊");
  $("#result").html('あなたの星座は' +  names[seiza] + '座です。');
}
</script>
</head>
<body>
<form>
年 : <input type="text" id="year">
月 : <input type="text" id="month">
日 : <input type="text" id="day">
<input type="button" value="submit" onclick="calc()">
</form>
<span id="result"></span>
</body>
</html>

$(“#result”).html(‘あなたの生年月日は’ + xxx + ‘です。’) .append(‘あなたの星座は’ + yyy + ‘座です。’); と書くのが jQuery っぽいおしゃれな書き方だ。しびれるな。

Web もなかなか捨てがたいものがあるよなあ。 3年生くらいに javascript 演習とか持っても良いかもしれん。 Web やりたいやつと CG やりたいやつに両方ゼミに来られると困るのだが。 なんとかならんものかと思うがなるもんならとっくにそうしているわけだが。

思うに、サーバサイドの側は言語とかデータベースとかばらばらだが、 クライアントサイドは javascript ほぼ一本に標準化されつつあると思う。 携帯端末でもPCでもなんでも動く。どのブラウザでも動く。 そりゃ当たり前だわな。javascript は html 標準なのだから。 Google Chrome の javascript コンソールなんてめちゃくちゃ便利だよ。

フォーム入力とかある程度のことは javascript でできてしまう。 むろんデータベースから読み込んだり書き込んだりするにはサーバにアクセスするしかない。 クライアントだけではできないことだ。 しかし、毎度毎度 submit ボタン押してそのたびにサーバサイドのCGI呼び出すのは、 まぬけなやり方だ。 毎回毎回別ウィンドウ開いて javascript はウィンドウをポップアップして、 サーバーサイドスクリプトを呼び出すだけ、というシステム見ると、 まじでいらっとくる。 もまいら twitter や facebook の時代に未だにこんな UI 作っていていいのかと。

入力途中はクライアントサイドでできるだけ処理して一度にまとめてサーバにクエリかける、 というのがおしゃれなやり方である。 データをサーバサイドスクリプトと javascript でやりとりするのは面倒だから、 つい全部サーバサイドでやってしまいたくなるのだが、 JSON で javascript とサーバが通信することも不可能ではなく、 そのやり方が理想だ。 という辺りが非常に重要である。

かつ、外れが少ない。つぶしがききやすい。 サーバーサイドの言語をいくら勉強しても他の言語が出てきたらもう役に立たない。 というよりその環境にしがみついているとどんどん時代に取り残される。

しかし、javascript にはその不安がない。 javascript は常に進化し続ける。 だから、プログラミング言語教育は須く javascript に収束すべきだ、 などと考えたりもする。

JQueryで画像とか。

comments JQueryで画像とか。 はコメントを受け付けていません。
By , 2011年12月20日 (火) 09:41:42

だいたい動くようになってきた。

JQueryスライドショーJQuery-UI画像ビューア

しかし、この二つをひとつにまとめようとするとつらい。 しかも重い。 むずい。 単純なサンプルは書くことができても、複雑な合わせ技は重くて苦手。それが jQuery。

jQuery-UI で最近出来るようになったらしい技だが、

.position({ my: "center", at: "center", of: window }) 

これだけで、要素をブラウザの表示領域の真ん中に合わせられるんだぜ。 どんだけ世の中進歩したんだよ。 ていうか、この程度のことがなぜ今までこんなふうにできなかったのか。 ちなみにサムネイルの大きさを一度に変えるには

$('#thumbnails img').each(function(){
  $(this).width(c);
  $(this).css({margin: m});
});

とか書く。 ちなみに縄文時代には

for(a = 0; a < document.images.length; a++){
  var style = document.images[a].style;
  style.width = c;
  style.margin = m;
}

のように書いていたらしい、最近の考古学的発見によれば。

映像用語でクロスディゾルブというやつは、.animate で opacity をそれぞれ 0から1、1から0に変化させて

active.animate({opacity: 0.0}, 1000);
next.animate({opacity: 1.0}, 1000);

とか書くんだよ。しびれるな。

ていうか、php じゃないんだから、javascript の変数名の頭に $ 付けんのやめようぜ。

jquery-ui dialog

comments jquery-ui dialog はコメントを受け付けていません。
By , 2011年12月5日 (月) 07:48:11

画像をクリックするとダイアログを開く という簡単なサンプルを書こうとしたのだが、 画像をクリックしてダイアログが開くと元の画像が消えてしまう。 img に対して show() とか style.visibility = visible とかやっても無駄。 なんじゃらほいと思って、 もしかすると src とかで渡したオブジェクトを複製してあげなきゃいけないのかと思い、

$('#dialog').html(src))

$('#dialog').html(src.clone(false)))

に変えてみたら、エラーが出る。clone は javascript ではなく jquery のオブジェクトに対するメソッドなので、

$('#dialog').html($(src).clone(false)))

と書かねばならないのであった。そしたらうまくいった。

src を clone しないと dialog の方の子供になっちゃって、dialog を閉じたときにそのままいなくなってしまうのであった。

うーん。jQuery 奥が深すぎ。

jQuery-UI

comments jQuery-UI はコメントを受け付けていません。
By , 2011年4月30日 (土) 10:16:00

思うに、DojoもExtも素晴らしいが、jQuery とはまったく別にライブラリを習得しなくてはならない。 当たり前のことではあるが、jQuery の延長上にあるのは jQuery-UI なのだった。 親和性がまるで違うようだ。 たとえば、ページが読み終わったときに実行される関数は、jQuery だと

$(document).ready(function(){
});

とか

$(function(){
});

と書くのだが、Dojo だと

dojo.ready(function() {
});

Ext だと

Ext.onReady(function(){
});

などと書く。Dojo も Ext も jQuery の影響を受けているのは明らかだ。 似ているが微妙に違う。 Ext などはライブラリを読み込むだけでいきなり Feed Reader が書けてしまう。 実際のWeb開発という意味では、DojoやExtを選択することもあり得るかもしれんが、 jQueryと絡めた授業を行うとすれば、どうしても jQuery-UI を選ぶしかないのではなかろうか。

javascriptを無名関数で囲う理由

comments javascriptを無名関数で囲う理由 はコメントを受け付けていません。
By , 2010年9月4日 (土) 11:30:53

ふーむ。 積極的な理由としては、 スコープを区切る、return で抜けられる、といったところか。 あとは、google-analytics のコードも囲ってあるし、とか。 しかし、学生には何と説明すれば良いのか。

javascript 無名関数と初期実行

comments javascript 無名関数と初期実行 はコメントを受け付けていません。
By , 2010年9月4日 (土) 09:58:17

後期授業で javascript を教えることになったので、 自分なりに理解できてないところをおさらいしてみたりする。 実はこれまで授業で javascript を教えたことがなかった。 java ならあるが。 というか、javascript は java より劣った言語だから使うべきではないなどと長い間考えており、 javascript になにか嫌悪感を抱いていたのだった。 まあそんなことはいまさらどうでも良いか。

で、ページが読み込まれたときに、 javascript のある関数を実行するには body タグに

[html] <body onload="initialize()"> [/html]

などと書きましょう、と、割と古い文献には書いてあり、 [javascript] window.onload = function() { initialize(); } [/javascript] と書くとbodyタグの記述を上書きできるとあるが、 単に

[javascript] (function() { initialize(); })(); [/javascript]

などと書かれていることもある。 これがよくわからない。 なぜ無名関数を実行させるなどということをやるのか。 そのまま [javascript] initialize(); [/javascript]

と書いてはならないのか。 いや、もしかしたらほんとは書いても良いのかもしれない。 作法の問題なのかもしれない。

jQuery だともう少しお上品に

[javascript] $(document).ready(function() { initialize(); }); [/javascript]

と書くことができる。精神衛生に良い。 しかし、

[javascript] $(document).ready(initialize); [/javascript]

と書くこともできそうな気がする。 また、

[javascript] $().ready(function(){ initialize(); }); [/javascript]

[javascript] $(function(){ initialize(); }); [/javascript]

などと書いても同じだと言う。 ひょっとすると

[javascript] $(initialize); [/javascript]

などと書いても動くんじゃないかという邪悪な想念にとらわれてしまう。 やはり javascript はわけわからん。 javascript はこの、無名関数の当たりが、あまり説明もなく、 ソースコードを読むといきなりばんばん使われてたりするところが謎な感じだわな。

Panorama Theme by Themocracy