Javascript

jQueryでselectで選択したものだけ消す

<select name="hoge" id="sel" multiple="multiple"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> っていうSELECTタグから、選択したものだけ消すってのをjQueryでやってみる。 $('#sel option:selected').remove(); と $('#sel').children(':selected').remove(); は同じ

jQueryの$(this)

$(this)の使い方としてよくあるサンプルは、 $(":text").each(function(){ alert($(this).val()); }); こんなやつ。eachでぐるぐる回しているときのそれぞれのターゲットを参照する時に使う。 それが、 <input type="text" name="hoge" value="hoge!" onclick="alert($(this).val());">ここでも使えたよ、というだけです。ある時「あっ」と…

Struts×JSON.simple×jQueryでJSONオブジェクトをajaxでやり取り

今更感ありありですが、これらの組み合わせでやったのは初めてだったのでメモしておきます。 やり取りするのはこんなJSONデータ。 [{"name":"太朗", "age":27}, {"name":"花子", "age":25}]想定としては検索ボタンをクリックすると、上記データがサーバーか…

javascriptの縮小化

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール作者: Steve Souders,スティーブサウダーズ,武舎広幸,福地太郎,武舎るみ出版社/メーカー: オライリージャパン発売日: 2008/04/11メディア: 大型本購入: 32人 クリック: 676回この商品を含むブロ…

YUI 3.x Preview Release 1

http://developer.yahoo.com/yui/3/ YUI!3がまだ正式ではないけどリリースされたので触ってみた。とりあえずサンプルとして2つのことをしてみた。 リストに対して動的にスタイルシートを適用する 「morning」「hello」「evening」がリスト表示されていて、そ…

ハイパフォーマンスWebサイト

G.W.も後半。ちょっとは勉強しておこう。ということで今読んでいる本はこれ。 ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール作者: Steve Souders,スティーブサウダーズ,武舎広幸,福地太郎,武舎るみ出版社/メーカー: オライリージャパン発売…

javascriptにおける正規表現テクニックのまとめ

正規表現による置換において変数を利用する方法 例えば以下のような文字列の最後についている余計な区切り文字「,」を除去する正規表現を考える場合、どのサイトを見ても以下のようにやる方法は載っている。 '1,2,3,4,5,'.replace(/,$/, ''); しかし、区切り…

javascriptの実行順序

知っている人にとっては当たり前すぎることだと思いますが、私自身整理できていなかったのでちょっとまとめる。 次のようなhtmlがあった場合、画面の表示およびjavascriptのアラートの表示のタイミングはどうなるだろうか。 ちなみに$(function(){alert('$関…

function

javascriptやってて何かと記述することの多い「function」という単語。functionをいかに早く打つかというサイトがあったw http://shohoji.net/labs/function/ とりあえず0.499秒をはじきだして、現時点で今週の2位にランクイン♪けど、1位の木村雄一郎さんの…

世界の言語でこんにちは

Google AJAX Language APIを使ってもういっちょ。「hello」をGoogle AJAX Language APIで変換できる言語の数だけやってみた。 本当は「CHINESE : 你好」のように表示したかったんだけど、いかんせん非同期なもんで、show関数を一通り実行してからgoogle.lnag…

Excite翻訳が簡単に作れた

■googleからの贈り物 ここで紹介されているように、googleからGoogle AJAX Language APIなるものがリリースされたようです。 ということで、勉強がてらExcite翻訳似のサイトを作ってみました。 ちなみに本物のExcite翻訳では以下のようになります。どちらの…

文字列で渡ってきた日付情報をフォーマットする(再)

以前のエントリ:文字列で渡ってきた日付情報をフォーマットする 以前書いたjavascriptの正規表現の例ですが、別のやり方がわかったので追記します。 var s = '2008年3月2日 22時36分10秒'; var x = s.replace(/(\d{4})年(\d{1,2})月(\d{1,2})日\s+(\d{1,2})…

IEの変な動き

まぁIEが変な動きをするのは周知の事実ですが、今日も変な動きを見つけました。 この動きはie6でもie7でも再現したのを確認しております。 まず、こんなhtmlがあったとします。 <form name="sampleForm"> <input type="text" name="aaa"> <input type="text" name="bbb"> </form> 次にこれを処理する以下のようなjavascriptがあったとします。 alert(docum…

YUI!Connect編

YUI!でajaxする練習です。 <html> <head> <script src="yahoo-min.js"></script> <script src="event-min.js"></script> <script src="connection-min.js"></script> <script type="text/javascript"> function ajax() { var callback = { success: function(o){ document.getElementById('msg').innerHTML = '<b>' + o.responseTex…</b></head></html>

YUI!DOM編

久々にyuiの勉強。今回はDOM。 Domを扱うにはYAHOO.util.Domを利用します。インスタンス化不要のシングルトンクラスとあります。 yuiのページには以下の章立てで説明がありますので、訳しながら適当にまとめます。 Positioning HTML Elements Getting and Se…

文字列で渡ってきた日付情報をフォーマットする

ま、ただの正規表現による置換です。 var createDate = '2007年8月13日 17時58分38秒'; var replaced = createDate.replace(/(年|月)/g, '/').replace(/(時|分)/g, ':').replace(/(日|秒)/g, ''); ■2008/2/8 追記 カッコつけなくてもいけた。でもなんとなく…

メンバ変数のカプセル化

var User = function(name) { this.name = name; } User.prototype.getName = function() { return this.name; } よくありがちなオブジェクト指向javascriptです。setterを作って無いのは、値の書き換えを禁止したいからなんですが、 var u = new User('taro…

Javascript、クロージャを使ったプライベート関数の隠蔽について

ということで、今回の宿題は、一つのプライベートな関数を複数のパブリックな関数で共有しつつ、そのプライベート関数をクロージャを使って隠蔽するテクニック。 「life is beautiful : Javascript、クロージャを使ったプライベート関数の隠蔽について」を見…

リフレクション

Javaではよくリフレクションを使いますが、javascriptでも同様に出来ました。 Java public class User { private String name; private int age; User(String name, int age) { this.name = name; this.age = age; } public int getAge() { return age; } pu…

javascriptの柔軟さがスキ♪

以下はjavaでよく書くコード。 if (str == null || str == '') ・・・ これを検証するメソッドくらい最初からStringクラスが持っておけーと思うんですけどね。C#なら if (str.IsNullOrEmpty()) ・・・と書けます。最初から組み込まれてるんです。javaの場合…

nullとundefined

実はよくわかっていなかったnullとundefined。 自分でプログラムを組む時はjavaの癖でnullの方をよく使う。けどjavascriptでヌルポが起こる時は決まって「undefined」だと怒られる。この2つの違いを実験。 ・・・と思ったんですが、全く同じ実験が既にされ…

配列のlengthの振る舞い

面倒くせぇぇぇぇえ。 javascriptで配列から任意のindexの要素を削除するのに、deleteを使ってみたけど、これだと配列オブジェクトのlength値が変わらねぇ! var ary = new Array(); ary.push('hoge'); ary.push('fuga'); ary.push('piyo'); function print(…

setTimeout関数やっと分かった!

for文をsetTimeoutに変換する いやー、最初見たときはさっぱり分かりませんでした。 というのもsetTimeoutが何たるかがいまいち理解できてなかったので。。 input要素のvalue値やstyle値を書き換える程度のjavascriptしか書かない私には高度すぎる内容でした…

thisの挙動

javascriptのthisの挙動について勘違いしてた!ということでサンプル。 var f = function sayMyName() { alert(this.myName); } f.myName = 'hoge'; f(); これ普通にhogeって表示されるんだと思ってた。そしたら結果はundefinedでした。理由としては、thisは…

イベントの登録

をちょっと勉強していて。備忘録としてメモ。 IEの場合 attachEvent関数を利用し、第一引数のイベントタイプには「on」をつけないといけない。 firefoxの場合 addEventListener関数を利用。

メソッドのオーバーロード

後輩がちょっとはまっていたので。 javaなら以下のように引数の数が違う同名メソッドが定義できます。オーバーロードってやつです。 public int total(int[] ary); public int total(int[] ary, boolean isInclude); これと同じことがjavascriptでも出来るか…

オブジェクト指向javascriptにおける親関数の呼び出し

親という言い方はおそらく不適切な気がしますが、メイン言語がjavaなのでその辺は大目に見てください。 今回やりたかったのは、javaで書くと以下のようなもの。つまりオーバーライドした側でもともとの定義の処理を呼び出したい! public int someMethod() {…

YUIでカレンダー

自身のプロジェクトでもYUIのカレンダーを利用しています。といっても先輩が設定してくれたので使い方はよく分かっておりませんでした。というわけで勉強勉強。ポップアップ式のカレンダーの作成です。 宣言 カレンダーを使うにはいくつかのjsファイルとcss…

YUI

最近ただの私的日記に成り下がっているので、久々にプログラムネタを。 一般ユーザー向けのサイトはエンタープライズウェブアプリケーションに比べて見た目や操作性といったデザインが優れている傾向にある(と思う)。エンタープライズアプリケーションを作…

iGoogle風のドラッグアンドドロップを実現するjavascript

当初自力で作ろうかと思っていたものの、やはり面倒臭すぎて断念。 色々調べていたら、jQuery Portletsなるページを見つけました。iGoogle風ページを作るためのフレームワークですね。もうこいつ採用しちゃおう♪http://sonspring.com/journal/jquery-portlets