html5のlocalStorageで複数のデータを保存するには? - Web.fla
以前、localStorageのデータを保存する方法について記事を書きましたが、localStorageが保存できるデータは一つではなく複数のデータを保存する事もできます。 で、前回はキーに対してデータを一つだけ保存したのですが、今回は複数のデータを保存する方法として複数のデータをJSONデータとして扱えば可能になります。その方法を今回は紹介してみたいと思います。 前回のlocalStorageに保存する方法などはこちら「html5のwebStorage(localStorage)でデータを保存する」を参照してください。 localStorageを使った実際のコード 下記のプログラムは分かりやすくするために省略している。 //保存する処理 savebtn.addEventListener("click", function() { //入力されたデータを取得 var t = documen
JavaScriptで画面サイズを取得する | かえラボBlog
screen.width 画面幅 ： screen.height 画面高 ： screen.availWidth 有効画面幅 ： screen.availHeight 有効画面高 ： window.innerWidth 表示領域幅 ： （IE非対応） window.innerHeight 表示領域高 ： （IE非対応） window.outerWidth ウィンドウ幅 ： （IE非対応） window.outerHeight ウィンドウ高 ： （IE非対応） $(window).width() 表示領域幅 ： $(window).height() 表示領域高 ： document.documentElement.clientWidth 表示領域幅 ： document.documentElement.clientHeight
ページスクロールで最下部まで行くと次の何件を読み込むAjax処理（オートロード） * R4 * Webサービスレビューサイト
ページスクロールで最下部まで行くと次の何件を読み込むAjax処理（オートロード） 2012年5月28日 Tag：JavaScript Text by 伊藤 ツイート twitterやfacebookのタイムラインにも実装されている、ページスクロールで最下部まで行くと次の何件を読み込む方法の紹介です。jQueryを使います。 <script src="jquery.js"></script> <script> var s = 0; $(window).scroll(function() { var total = $(document).height(); var position = $(window).scrollTop() + $(window).height(); if(position >= total - 100){ s = Number(s+10); $("次の何件を表示させた
jQuery.get()で、PHPへデータを渡し、実行結果を取得
jQuery の jQuery . get( url [, data] [, success( data, textStatus, jqXHR ) ] [, dataType] ) メソッドを使った Ajax リクエストで、サーバへデータを送り、レスポンスデータを読み込み、表示する方法。このページのサンプルは、GETメソッドのHTTPリクエストで、PHPファイルへデータを渡し、PHPファイルの実行結果を取得し、表示する。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-get.php」ファイルの実行結果を読み込み、黄色のボックス要素内に表示する。リクエスト時、「year」「month」「day」のパラメータを送信し、「jquery-sample-get.php」ファイルで取得し、表示する。「toggle」ボタンを、
これからBackbone.jsを始めるならこれ読んどけばOKという記事たち - Qiita
Backbone.jsで書き始めたら「Backboneどう？」と聞かれることがあったので、自分ではあんま語れるほど知らないけど「ここらへんの記事は素晴らしいよ！」というものをまとめておいたヽ(・ω・´)ゝ まずは読んでおくべきもの Backbone.js Advent Calendar 2011 なにはともあれまずはBackbone.js Advent Calendar 2011 ある程度まで書けるようになる情報は総ざらいで書いてあると思う。 中でもBackbone.js入門はありがたい。読んでおけば基本の仕組みを知ることが出来る。 Backbone.jsが依存しているunderscore.jsの情報なんかもあったりしてありがたい。 ちなみに今年(2012)のAdvent Calendarはこちら。今はまだ始まったばかりだから情報少ないけどこれから充実してくるだろうし楽しみ（´ω｀） Ba
ただのクロージャとカリー化の違いがよくわからない - お前の血は何色だ!! 4
補足 なんかブクマ数が増えている・・・・ 当時は区別がつかなかったんだよ。 自分の中で整理がやっとついたんで説明しなおしています。 http://prezi.com/9brwewgcxtr2/javascript/ ただのクロージャとカリー化の違いがよくわからない。 ラムダとクロージャの違い ただのラムダとクロージャの違いはキャプチャするかしないかで判別できると思う。 パラメータをキャプチャしないのがラムダ。 パラメータをキャプチャできるのがクロージャ。 //これはキャプチャしないのでラムダ var myfunc = function(a,b) { return a + b; }//これはcaptureをキャプチャするのでクロージャ var capture = 123; var myfunc = function(a,b) { return a + b + capture; }違いはパラメ
Nodeビギナーズブックがいいという話 - 車輪を再発明 / koba04の日記
http://www.nodebeginner.org/index-jp.html ちょっと前に話題になっていたので紹介するまでもないのですが、実際にやってみてわかりやすかったので紹介したいと思います。 丁寧に説明されているので最近のJSはよくわからんと思っている人でも、順番に理解しながら進められると思います。 いいと思ったところ 流れが丁寧 Hello Worldから一歩ずつゆっくりとコードとそれに対する説明が丁寧に入るので置いていかれることはないと思います。 また、あえて回り道をすることでどうしてこの実装がいいのかという説明がされていたりと構成がとてもわかりやすいです。 WAFについての理解も深まる 単純なウェブアプリケーションを用いた例ではあるものの、特にnode.jsにおいてのウェブアプリケーションの構成についての理解が深まると思います。実際に何か作るときはexpressなどのWA
chromeデベロッパーツールでjavascriptのデバッグをする -node.jsもあるでよ- - tumblr
ソースコードリーディングとかしてると、ただコード読んでてもどうしようもなく、オブジェクトの中身や変数などを見るためにデバッグツールを使いながらでないとやっていけないことが今になって分かりました。自分でもどうしようもなくアホだと思いながら戒めのために覚書。 デバッグツールの機能 僕自身まともに触れる言語はjavascriptとphpくらいなもので、どちらもeclipseのようなIDEを使わず頑なにvimを使って組んできました。phpの場合はxdebugと連携させる方法*1や、javascriptならrhinoなんかを入れてquickrunとかって方法も考えられますが、僕はある程度は知っていながらもひたすら標準のスタックトレースやalert,console.log,console.dirばかりしていたので、まずはIDEなどに搭載されている一般的なデバッグ機能を復習をかねて覚書。 ブレークポイン
Backbone.jsのサンプルアプリのコードを読んでみた。 | Ginpen.com
Backbone使ってみるメモ。まだあんまりよくわかってないんだなー。 よくわからないならコードを読めばいいじゃない、という事で、公式で提供されているTodoアプリのコードを読んでみました。 ソース 公式のサンプル。 Backbone.js Todos todos.js いわゆるTodo管理ツールなんだけど、情報をHTML5のLocalStorageに持つようになっている。つまりブラウザを閉じても内容を記憶している。 JSファイル HTMLから読み込んでいるのは以下。 json2.js jquery-1.7.1.js underscore-1.3.1.js backbone.js backbone-localstorage.js todos.js Backbone.jsはUnderscore.jsとjQueryないしZepto.jsが必須。またLocalStorageを使うためのBackb
Node.jsで日本語が文字化けするときの対処: プログラマを目指すゲーム廃人
Node.jsをWebサーバとして動かそうとしていたときのお話。 Node.jsのsocket.ioというモジュールを使うと、とても簡単にリアルタイムな通信ができるということを知ったので、実際にやってみることにしました。 調べてみると、クライアントにHMTLファイルを送る方法はいくらでもでてきます。socket.ioを使った通信も割りと簡単です。 でも、他のサイトに書いてある通りにやっても、日本語が文字化けしちゃってどうしようもない。 metaタグで文字コード宣言しても文字化けするんで、Node.js側の問題かと思って少し調べてみました。 【原因】 HTMLファイルの文字コード Node.jsはUTF-8しか扱えないようです。 それなのに、HTMLのソースがShift JISで書かれていたんで、日本語が文字化けしていたんですね。納得。 ソースコードにWindowsでコメントを書いても、Ma
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
node.js とは何か - I am bad at math
期せずして久々の更新になってしまった。ブログを書く気がなくなったとかそういうのではなくてただ単に忙しかっただけ。その間、まぁ仕事が予期せぬ方向から炎上してみたり、事故をもらって愛車が全損したり（フロントガラスが全面熱線入りなんていう変なオプションなどを諸々付けていたからお気に入りだったのに）と決して良いことばかりで忙しかったわけではないけどね！ で、今回は node.js のお話。異様な盛り上がりを見せているものの、じゃぁそれっていったい何かというと「JavaScriptを用いたNon-blocking I/O環境」という非常にシンプルなものだ。 その根底には「うまくスケールできること」と「動作が速いこと」という理念が見受けられる。 まず「うまくスケールできること（多量のアクセスを捌けること）」を解決するにあたり、まずはスレッドモデルか、イベントループかという問題があった。そこで auth
naveでNode.jsのバージョン管理＆イベントループ詳説 (2/3)：node.jsでサーバサイドJavaScript開発入門（2） - ＠IT
naveでNode.jsのバージョン管理＆イベントループ詳説：node.jsでサーバサイドJavaScript開発入門（2）（2/3 ページ） ECMAScriptとCommonJSについて補足 前回記事において、「シングルスレッドとノンブロッキングI/Oという特徴をJavaScript自体が持っている」と記載しましたが、間違いです。正しくは、「マルチスレッドとI/O全般をJavaScriptが持っていない」です。 JavaScriptの言語仕様は、ECMAScriptとして策定されています。ECMAScriptには、スレッドやI/Oに関しては記述されていません。しかし、サーバサイドJavaScriptを作成するうえで、I/O機能は必須であるため、各サーバサイドJavaScriptの実装（RingoJSの前身であるHelmaや、Aptana Jaxerなど）が独自に拡張していました。 各自
node.jsの仕組み（ノンブロッキングI/Oとかスレッドとか） - 元リア充エンジニアのメモ
サーバーサイドjavascriptで一世を風靡しているnode.jsですが、PHPで書くサーバーサイドのプログラムと何が違って何がいいのか。 「なんかいい」とかじゃ使えないしってことで調べてたら知らないことがたくさん出てきたんでメモ。 簡単に言うと、node.jsが今までと違うのは 「イベントループモデルで、ノンブロッキングI/Oを使用している」 点らしい。 はてな。 イベントループモデルとスレッドモデル スレッドモデルとイベントループモデルは、ざっくりいうと「スレッドでの処理の仕方」を大まかに2つに分けたもの。 そもそもスレッドというものは「処理の流れ」を意味している。 後の説明もあるので若干分かりにくいたとえだけど、「店頭でゲームソフトを購入する」処理に例える。 分かりやすく処理の流れを店員の視点で １．レジに空箱が持ちこまれる ２．棚まで本体を取りに行き、本体を棚から探す ３．本体を
初心者にも分かる Node.js と WebSocket についての解釈まとめ
解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使
jQueryオブジェクトの裏側をのぞいてみよう！ · DQNEO日記
jQueryオブジェクトとは何か？ 最初に答えを言います。 jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである 下記の式を評価してみればわかります。 var obj = $('div'); alert(obj instanceof jQuery.fn.init); // => true Google Chrome Developper Toolsで変数を見てみると、確かにそのように表示されます。 次に、jQueryのソースコードを見てみましょう。 冒頭にこのように書かれています。 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, (ここでrootjQueryとは$(document
jQueryでdocument.getElementByIdと等価を取る : mwSoft blog
jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。 生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。 参考サイト http://groups.google.com/group/jquery-en/browse_thread/thread/fa48e5649bb64216?pli=1 prototype.jsはJavascriptの中身いじって機能を増やしてる風なので、「$("id")」をするとElementそのものが帰ってくるけど、jQueryの場合は操作する為の皮を被せてる風なので（お行儀はいいよね、こっちの方が）、こうなるらしい。 ちなみにget(0)を使った場合も[0]を使った場合
Ajaxによる非同期サーバー通信(1/4):初心者のためのJavaScriptプログラミング入門 - libro
現在のようにJavaScriptが注目されるようになったきっかけは、なんといっても「Ajax」でしょう。Ajaxは、「Asynchronous JavaScript + XML」の略です。日本語で言えば、「JavaScriptとXMLによる非同期通信」となるでしょう。 「非同期通信」というのは、「サーバーとクライアントの間で同期しないで通信する方式」のことです。その反対は「同期通信」です。例えば、Webブラウザからサーバーにアクセスすると、サーバーから必要な情報を送ってきてそれをブラウザで受け取り表示します。が、このとき、サーバーからデータが送り返されるまで、ブラウザはじっと待っていますね？ ときには、なかなかサーバーから反応が返ってこなくて、ブラウザの表示が真っ白なままイライラと待ち続けることもあります。これが「同期通信」です。 同期通信は、クライアント（ブラウザとか）からサーバーにアク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What a heck is a (function ($){ ... })(jQuery)
A Node in Nodes