Javascript

パターンマッチングした部分の抽出

rubyの例から。 str = "hello, world" if str =~ /hello, (.+)/ puts $1 end これで、「world」が出力されます。 これと同じことをjavascriptでどうやるか、ずっと分からなかったんだけど、ひょんな事から知ることが出来ました。 var str = "hello, world"; …

jQueryの歴史

jQueryは1.2から使い始めて、その後新しいリリースに追いつけていない。 ちゃんと勉強しようと思い、まずはリリース状況を把握することにしました。 2011.5.3 jQuery1.62011.3.31 jQuery1.5.2 2011.2.24 jQuery1.5.1 2011.1.31 jQuery1.52010.11.11 jQuery1.…

jQuery mobileの$.mobile関数がもっているプロパティや関数一覧

なんかの役に立つかもしれないので、メモ。 activeBtnClass:string activePage:object activePageClass:string addResolutionBreakpoints:function ajaxFormsEnabled:boolean ajaxLinksEnabled:boolean button:function changePage:function checkboxradio:f…

idのescape

jQuery mobileを使っていると、ページ遷移後のdivにはidが自動的に振られる。 <a href="/sample/next.do?init=true&param=x">次へ</a> こんなURLだと、idはそのまんまで <div data-role="page" id="/sample/next.do?init=true&param=x"> になります。 とある事情から、このdivを取得して操作する必要が出たので、このように書きました。 var page = $('#/sample/next.do?init</div>…

WEBアプリケーション開発で使ったモノ

いい感じのサイトを見つけて使うんだけど、使い捨てになってメモしておくのを忘れてしまう。。 ちゃんとメモしよう! ぐるぐるのジェネレートサイト ぐるぐるの正式名称はスピナーアニメーション(spinner animation)というらしい。 http://www.ajaxload.in…

配列かどうかを見分ける方法

メモメモ。 var ary = []; alert(ary instanceof Array); typeofだとaryはobjectってなのるのに、instanceofを使うとこの場合trueになるんだね。ま、全然違うものなんだろう。

IE7におけるgetElementByIdの不思議な挙動

ここを読んで。 http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/ フォームのinput要素のname属性とid属性は同じ値にしましょう <input type="text" name="a" value="hello, world"> というHTMLがあって、次のようなjavascriptを書いたとする…

オーバーライド

後輩に質問されて作ったのでUPしておきます。Javaならすぐ書けるのにjavascriptだとちょっと焦りますね。一応先輩としての威厳は保てたはず。 String#toUpperCaseは単に全ての文字を大文字に変えるだけですが、引数で指定された文字だけを大文字にするように…

javascriptの学習に適した本

初めてのJavaScript作者: シェリーパワーズ,Shelley Powers,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2007/05メディア: 単行本購入: 5人 クリック: 87回この商品を含むブログ (82件) を見る 後輩に借りて読んだ。非常にコンパクトにま…

matchの戻り値って

以下は3が返って欲しいんだけど1になるんですねぇ。。 "100.0".match(/\d+/).length そもそもmatchの戻り値って何だろうと思って調べると・・ typeof "100.0".match(/\d+/) stringではなくobjectらしい。もっというとこれは配列です。つまりさっきの1ってい…

1とtrue

こんなコードを書いている場合に要注意。valueが1の時は「その他!」ではなく「true!」と表示されてしまいます。 if(value == true) { alert("true!"); } else { alert("その他!"); } これを見てミソ。 alert(1 == true); これ、trueが返ってきた。ワォ!…

NumberFormat

javascriptでは組み込みで数値フォーマットするような関数は無いみたい。 で、調べてみたところ手軽なサンプルはこれ。正規表現は奥深いなぁ。 http://wiki.type33.com/javascript var numberFormat = function(num){ return num.toString().replace(/([\d]+…

focus()

document.getElementById("select").focus() こんなjavascriptを組んだら、 フォーカスをコントロールに移動できません。コントロールは表示されていない状態、またはフォーカスを受け入れない種類です。 こんなメッセージとともにjavascriptエラーとなった…

文字から数字(整数)へ

文字型の数字を数字型へ(正確には整数に)変換するにはparseInt関数を使う。 parseInt("2.2"); parseInt(2.2); 文字型のものだけでなく、数字型のものを渡してもいずれも「2」が返ってきます。うん、便利。 しかしながら、以下のケースでは嬉しくない結果が…

htmlエスケープについて

こういうhtmlがあった時に、 <input type="text" name="txt" id="txt"> <span id="spn"></span> txtの内容をspnに移動するには、 document.getElementById('spn').innerHTML = document.getElementById('txt').value; とすればいける。 ただし、上記では不十分。innerHTMLに代入する場合はhtmlEscape処理が必要となる。とい…

jQueryを使って選択状態にする

以下のようなhtmlがあったときに、 <div> <input type="text" name="txt"><br> <input type="checkbox" name="chk" value="true"><br> <input type="radio" name="rdo" value="false">false <input type="radio" name="rdo" value="true">true<br> <select name="sel"> <option value="false">false</option> <option value="true">true</option></select></div>

HTMLエスケープ関数

いいライブラリがあるのかもしれないけど、今回のプロジェクトでは使えないので、自作。 function htmlEscape(str) { return str.replace(/<|>|&|'|"|\s/g, function(s){ var map = {"<":"&lt;", ">":"&gt;", "&":"&amp;", "'":"&#39;", "\"":"&quot;", " ":…

配列の再・初期化

var ary = []; ary.push('a'); ary.push('b'); ary.push('c'); ary = []; 「a」「b」「c」を追加した後、再度新たな配列をaryに代入する事で再初期化される。 けど新たに生成するのも気が引けるし、前のインスタンスをGC頼みにするってのもなぁ。 ・・・と思…

eval

今日初めてJavaを組んでいる時に、JRubyもしくはJava6のVM上でjavascriptが動くやつが使いたいと思った。理由はタイトルにあるように、Javaでevalが使いたい!と思ったから。eval相当を自分で組むのは嫌だ〜。

for-in文とif-in文のおさらい

これらはオブジェクトに含まれるプロパティを調べる時に役立ちます。for-inはよく使うんだけど、if-inは久々に使うことになったので、思い出すのに時間がかかってしまいました。というわけでいつものように忘れないためにメモ。 var obj = {name : "hatena",…

文字列連結のアルゴリズム

http://blog.livedoor.jp/dankogai/archives/51172176.html こんな方法思いつきもしませんでした! 単にn回繰り返すんではなくて、1ビットずつシフト演算するからlogN回の繰り返しで実現されている、と。すごー。

Ajax通信。でもProxy認証が・・・

XMLHttpRequestを利用したAjax通信では、同一ドメイン以外へのHTTPリクエストの発行が許可されていない。例えば自ドメインがlocalhostなのに、http://www.google.co.jpにアクセスするなんてことは一足飛びにはできないわけです。 というわけで通常はクライア…

jQueryのindex付きeach

jQueryのeachは便利なのでよく使います。 $.each(ary, function(){ alert($(this).val()); }); ただ、indexが欲しい時はこんな風にしてた。 var i=0; $.each(ary, function(){ alert(i + ' : ' + $(this).val()); ++i; }); しかしもっと簡潔に書けた!素敵だ…

jQueryでのワイルドカードSelector

こんなHTMLがあった時に、最初の3つに対してのみ、とあるクリックイベントを設定したいという時がある。 <button id="btn1">ボタン1</button> <button id="btn2">ボタン2</button> <button id="btn3">ボタン3</button> <button id="other">関係ないボタン</button> そんな時、jQueryのselectorを使ってこんな風に設定できたらなぁと思っていた。が、こういうワイルドカードを…

jQuery1.3リリース

http://phpspot.org/blog/archives/2009/01/jquery13.html また触ってみようっと。 追記 2009/1/20 jQuery日本語リファレンスも1.3対応されている!仕事が早い!!脱帽です。 http://semooh.jp/jquery/cont/doc/release_1.3/

もともと設定されているイベントハンドラより先に任意の関数が実行されるようにする

「もともと設定されているイベントハンドラをすり替える」を改良してみようと思います。この時のヤツはもともと設定されていた関数の変わりに自分で定義した関数にすり替えるというものでしたが、今回のはもともと設定されている関数も実行されるんだけど、…

もともと設定されているイベントハンドラをすり替える

次のようなHTMLがあったとする。 <button id="hoge" onclick="hogehoge();">click!</button> このボタンをクリックすれば当然hogehoge関数が実行される。 これを、HTML上のonclickを直接書き換えること無しに、fugafuga関数が呼ばれるようにすり替えたい。 jQueryのメソッドを調べていたらunbind/bindというの…

alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」

http://phpspot.org/blog/archives/2009/01/alertjqueryjque.htmlこれはよさそう。 別にjavascriptのalertとかconfirmでいいやんと以前は思ってたんだけど、多国語対応アプリケーションを作った場合、confirm関数実行時のボタン「OK」「キャンセル」の「キャ…

csWindows31J

HTTPレスポンスヘッダのcontentType JSPの先頭には次のような1行を書くのが通例だ。 <%@ page contentType="text/html; charset=Windows-31J" pageEncoding="Windows-31J" %> このcontentTypeの部分が最終的にはHTTPレスポンスヘッダに展開される。 機種依存…

jQueryのeachメソッドの逆

$('#sel').children(':selected').each(function(){ 処理 }); ってやると、複数のオブジェクトが取得できている場合、取得順にぐるぐる回るわけですがこれを逆向きに回したい。 普通のfor文なら for(var i=ary.length-1; i>=0; i--) { } こんな感じで逆から…

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の場合…