Category Archives: JavaScript カテゴリ "JavaScript"のRSS  

Node.jsを始める上でチェックしておきたい資料:21+α

2012年2月5日 (カテゴリ: JavaScript:)

全て海外のリソースです。 Tutorials Node.js guide Node tuts Videos Introduction to Node.js with Ryan Dahl Node.js: Asynchronous Purity Leads to Faster Development Parallel Programming with Node.js Server-side JavaScript with Node, Connect & Express Books The Node Beginner Book Mastering Node.js Up and Runnin…


続きを読む

[JavaScript]数値を,N進数の文字列に変換する簡単な方法

2012年2月4日 (カテゴリ: JavaScript:)

NumberのtoString()の引数として、基数を指定するとN進数の文字列に変換できます。 例えばtoString(2)で、2進数の文字列に変換できます。 var x = 5; x.toString(2) // "101"   (10).toString(8); // "12" (255).toString(16); // "ff"var x = 5; x.toString(2) // "101" (10).toStrin…


続きを読む

[JavaScript]rubyの「times」メソッドをJavaScriptで実装する。

2012年2月4日 (カテゴリ: JavaScript:)

プログラム言語のrubでは、数値クラスに対してtimesというメソッドが実装されてます。 この為、以下のプログラムで”0,1,2,3,4,5″の文字を出力することが出来ます。 5.times { |i| puts "#{i}" }5.times { |i| puts "#{i}" } これと同様のことをJavaScriptで行いたい場合は、以下の関数定義を行います。 Number.prototype.times = function( funct ) { if( typeof …


続きを読む

[JavaScript]”010″が10として評価さず、8になってしまう。

2012年2月4日 (カテゴリ: JavaScript:)

JavaScriptで先頭0から始まる数字は8進数とみなされるからです。 例えば以下のコードは、8が表示されます。 <script> var value = parseInt( ‘010’ ); alert( value ); </script><script> var value = parseInt( ‘010’ ); alert( value ); </script> 先頭に0が入ると8進数とみなされる仕様は、JavaScript以外にC言語も同様です。 “0x”が入ると16進数とみな…


続きを読む

[JavaScript]本番環境時、存在しないconsole.log()でエラーを出さない方法

2012年2月4日 (カテゴリ: JavaScript:)

firefox+firebugを使用して、javascript開発を行う際console.log()関数を使用すると、 デバッグログをコンソールに出力できるので便利です。 とても便利なconsole.log()ですが、リリース時に該当処理を削除し忘れると、コンソールの無い環境では当然エラーが出てしまいます。 このような場合は、以下のコードを入れておくと、エラーを回避できます。 if (typeof(’console’) == ‘undefined’) { console = { log: function(){&#1…


続きを読む

JavaScriptとC言語のスコープの違い

2012年2月4日 (カテゴリ: JavaScript:)

C言語では、ブロック内のみ有効なスコープというものが存在します。 例えば、下記のコードで、”a = 20″はブロック内のみで有効なので、”a=10″と表示されます。 int a = 10; { int a = 20; } printf( "a=%d", a ); // a=10が表示される。int a = 10; { int a = 20; } printf( "a=%d", a ); // a=10が表示される。 一方でJavaScriptでは、ブロック単位でのスコープ…


続きを読む

[JavaScript]変数の引数を可変個にする方法

2012年2月4日 (カテゴリ: JavaScript:)

JavaScriptで可変引数に対応するには、arguments[i]を使用します。 プログラム <script> function sum() { var retval = 0; for (var i = 0, len = arguments.length; i < len; ++i) { retval += arguments[i]; } return retval; }     alert( sum(1, 2, 3) ); // 6…


続きを読む

[jQuery]新しいノードを追加するときに、タグの属性も同時に指定する方法

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、$( “<a />” )という表記で新しいDOMノードを作ることが出来ます。 上記の例では、アンカータグを生成します。 この際、第二引数にハッシュを指定することで、属性(attribute)も同時に指定可能です。 例: var newLink = $( "<a />", { href: "http://www.yahoo.co.jp/", title: "yahoo", }); newLink.text( "yahooホー…


続きを読む

[jQuery]指定したノードが存在するときのみ処理を行う

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、$( “#btnShow” )といった形式で、特定のDOMノードを指定可能です。 このとき指定したノードが存在するときのみ処理を行う方法です。 プログラム <input id="btnShow" type="button" value="表示" /> <div id="someDiv"/>message area</div>   <script> $( function() { $&…


続きを読む

[jQuery] jQueryのプロパティ「$.expr」を使用して、独自のセレクタを実装する

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、:first、:lastや:animatedなどのセレクタでDOMのノードを指定することが出来ます。 では、jQueryに標準で用意されていないセレクタが欲しくなった場合はどうすればよいでしょうか? このような場合は、$.expr[‘:’]に対して、関数を定義することでセレクタを追加することが可能です。 下記の例では、幅が100pxを超える要素のみを抽出するセレクタ”over100pixels”を定義しています。 <script> $.extend($.expr[’:’], { ov…


続きを読む

[JavaScript]ハッシュのキー存在チェック関数

2012年2月3日 (カテゴリ: JavaScript:)

JavaScriptで、ハッシュ(連想配列)に指定したキーが存在するかどうかのチェック関数です。 通常の関数として使用する場合と、Arrayクラス自体に関数を追加するパターンを用意したので、お好みの方を使用してください。 プログラム //————————————————————- // ハッシュのキー存在チェック(通常の関数として実装する場合) //————————————————————- function array_key_exi…


続きを読む

[jQuery]iframeを動的に追加して,googlemapを表示させる

2012年2月2日 (カテゴリ: JavaScript:)

htmlの中でjQueryを使用して動的にiframeをappendするサンプルです。 例では、入力された住所を元にgooglemapを表示しています。 ソース: <input type="text" id="txtAddress" value="東京都千代田区丸の内一丁目" size="30" /> <input type="button" id="btnTest" value="iframe追加"/> <div style…


続きを読む

[JavaScript]windowオブジェクトが保持しているプロパティ一覧を列挙する

2012年1月28日 (カテゴリ: JavaScript:)

ブラウザで動作するJavaScriptでは、windowというグローバル変数が有ります。 この変数は文字通りブラウザのウィンドウを意味する変数です。 window変数がどんなプロパティを持っているか気になったので、確認するスクリプトを作ってみました。 <input id="btnInput" type="button" value="表示" /> < pre id="result"></pre >   <script type="text/javascr…


続きを読む

[JavaScript]配列中の大量データを非同期でゆっくり処理する

2012年1月26日 (カテゴリ: JavaScript:)

先日、クロネコヤマトの伝票番号から配送状況を取得するAPIを作りました。 このAPIですが、負荷軽減のため、呼び出し頻度が毎秒1回という制限を設けています。 制限があるのは良いとして、このAPIを使って複数(大量)のデータをJavaScriptで処理したい場合どうやって作ったらよいのだろうか? と思い、色々試行錯誤した事の過程と結果です。 長文になってしまったので、最初に目次を書いておきます。 その1:ループで処理する その2:ループ内でスリープさせる その3:setTimeout()で非同期処理させる その4:非同期処理の関数に汎用性を持たせる ところで、「毎秒1回」という呼び出し制限がない…


続きを読む

[JavaScript]数値入力欄で、全角数字や書式編集された文字を受け入れる。(全角/半角変換)

2012年1月23日 (カテゴリ: JavaScript:)

名古屋市の図書館には、Webサイトがありオンラインで予約が出来るのが便利です。 いつものように利用していたのですが、ふとログインフォームで1つ気になることがありました。 ありがちなログインの入力フォームですが、共通貸出券番号を半角で入力することを要求しています。 (ちなみに、貸出券番号は10桁の数字です) 試しに全角で入力してみると、以下のようにエラーが表示されました。 ちなみに誤った番号を入力した場合は以下のメッセージになるので、この画面は入力値が全角であるかチェックした上でエラーメッセージを出しているるようです。 コンピュータに慣れている人であれば、この間違いはすぐに気づくのですが、初心者…


続きを読む

dankogai作のAWS APIからJSONの仕組みを理解する(2/2)

2012年1月21日 (カテゴリ: JavaScript:)

前回の記事では、サンプルとして提示されているJavaScriptの内容を確認しました。 dankogai作のAWS APIからJSONの仕組みを理解する(1/2) 今回は前回の内容を踏まえてソースの簡略化を行い、その後JSONPの仕組みを理解して行きます。 コードの簡略化 まずは、前回の解析を元にJSONPの理解と直接関係ない処理を削除してコードをシンプルにしていく。 最初は、画面load時の処理と、取得結果列挙の処理変更を行う。load時の処理は不要なので削除し、検索結果は書籍のタイトル表示だけにとどめておく。 この変更で、ソースは以下のように半分(81->40行)まで減らせた。 1 2 3…


続きを読む

dankogai作のAWS APIからJSONの仕組みを理解する(1/2)

2012年1月20日 (カテゴリ: JavaScript:)

はじめに 前回、ヤマト運輸の配送状況を確認勝手APIを作成してxml,yaml,jsonの形式でデータ取得できるようになったのですが、まだJSONPは未対応でした。 [WebAPI]ヤマト運輸の配送状況を確認するAPIを作ってみた で、以下のページをチェックしてみると、dankogaiがAmazonの商品情報取得のAPIを作成&紹介しているのですが、xml/yamlに加えてJSONPも対応しているようです。しかもソースも公開してくれています。 AWS Caching Proxy w/ Authentication Support 今回はdankogaiのサイトを見ながらJSONPの仕…


続きを読む

[JavaScript]textareaを1行づつ処理する

2012年1月19日 (カテゴリ: JavaScript:)

htmlのtextareaタグ内に入力されたコンテンツを1行づつ配列にセットする処理です。 splitByLine = function() { var text = document.getElementById(’srcTextArea’).value.replace(/\r\n|\r/g, "\n"); var lines = text.split( ‘\n’ ); var outArray = new Array();   for ( var i = 0; i…


続きを読む

[jQuery]JavaScriptの配列をtableへ1行追加する

2012年1月19日 (カテゴリ: JavaScript:)

JavaScript上の配列を、指定したtableタグ内へ1行追加する方法です。 よく行う処理なので関数化しました。 例えば以下のようなtableがあって… <input type="button" id="btnTest" value="データを追加" />   <table id="tblResult"border="1px" style="border:1px"> <tr> <th style="…


続きを読む