jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
サイ本 18章 フォームとフォーム要素 - noire722 の日記
18.1 Formオブジェクト FormオブジェクトはDocumentオブジェクトの forms[] 配列プロパティの要素として利用する フォームの入力要素に対応するオブジェクトは elements[] 配列に格納される // ex. 現在のウィンドウのドキュメントの2番目のフォームの3番目の要素を参照する場合 document.forms[1].elements[2] ほかにも ＜form＞タグ の属性である action, encoding, method, target に対応するプロパティを持つ submit()メソッド、reset()メソッドを持つ これらを呼び出せば、それぞれSubmitボタン, Resetボタンを押したときと同じ効果が得られる onsubmit, onreset イベントハンドラが呼ばれるのはボタンを押したときのみ。 イベントハンドラがfalseを返せば su
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム
はじめに JavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り： Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから１文字つづ入
【Adobe Spry TIPS】ＲＳＳを取得して表示する。
【Adobe Spry TIPS】ＲＳＳを取得して表示する。 Spryでもっとも使い勝手がよいと思うのは、RSSを表示する機能です。 正確にはSpry.Data.XMLDataSetを利用してXMLファイルを取得して表示するのですが、もっとも普及しているXMLであるRSSフィードを取得し表示してみます。 ひとまずは、Sparyの簡単さを味わってもらいたいです。 head要素内などで以下の2つのファイルを読み込みます。 ファイルはそれぞれダウンロードしたSpry本体のincludesディレクトリにあります。 <script type="text/javascript" src="./includes/xpath.js"></script> <script type="text/javascript" src="./includes/SpryData.js"></script> xpath.j
はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS
Inkscapeで描いたpath要素をRaphaëlを使ってアニメーションさせています。 まるで成長していない・・・・・・・・・・ はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた jQuery UI v1.8.1 Raphael 1.4.3 - JavaScript Vector Library jQuery v1.6 (function($) { /** * MorphingImage class */ MorphingImage = function(name, data) { this.name = name this.data = data || [] } MorphingImage.prototype = { addData: function(pathName, pathData) { if(typeof pathData !== "object" || $
javascriptで正規表現ぺろぺろ - tomoemonの日記
正規表現の話はweb上の至る所に書いてあるので、今さら書くまでもないですが復習ついでにちょろっとまとめておきます。プログラマーなら知っていて当然、知らなきゃもぐり認定されます（します）。プログラマー以外のPC事務に携わる人にとっても便利な概念だと思いますが、そこまで使用頻度が高くないと結局忘れてしまうので、無理にはお勧めしません。 例えば 1 nanoha 2 fate 3 hayateを 1 "nanoha" 2 "fate" 3 "hayate"のように置換したい場合、10行程度であればメモ帳＋手作業でもOKですが、10000行ある場合は何らかの方法で自動化せざるをえません。テキストエディタ＋正規表現を使えばお茶の子さいさいですが、この場合だったら正規表現を知らなくてもエクセルを使ったセル間の文字列結合(not VBA)でも実現することができます。適材適所で必要な知識を身につけましょう
GreaseMonkey ではスクリプト間で名前空間の衝突は発生しません | さくらたんどっとびーず
わりと最近 GreaseMonkey スクリプトを作れるようになったのですが、とりあえず JavaScript なので名前空間の衝突とか発生しそうなので、無名関数を直接呼び出す方法で書いてたのです。 // ==/UserScript== (function() { // コード... })(); こんな感じで。 ま、実を言うとちゃんと調べるのが面倒だったので、「greasemonkey 名前空間」あたりでググって出てきたページに衝突するって書いてたので適当に従ってました。 ところが先ほどアップした プログラミングできなくてもレンタルサーバ借りなくても作れる Twitter bot もどきグリモンの作り方 で公開しているユーザースクリプト（GreaseMonkey のスクリプトのこと）を作ってる最中に、@require で外部の JavaScript を読み込もうとした際に問題が発生しました
O'REILLYの"JavaScript"を読む 第10章 モジュールと名前空間 - tkzwtks-old.log
第10章まできました。まだまだ道半ば。 JavaScriptの言語仕様ではモジュールの作成や管理をする機構が用意されていない。なので再利用可能なモジュールを書くということはあるルールに沿ってモジュールを書くということ。 10章は主にそのルールについて書かれている。 最も重要なこと 名前の衝突が起こらないように名前空間を使用する グローバル変数を定義しない モジュールと名前空間の生成 言語仕様で名前空間がサポートされていないので、オブジェクトを使って名前空間を実現する。 以下のコードでのやり方が、JavaScriptモジュールを記述する時に守るべき最初のルールである、「モジュールがグローバルな名前空間にシンボルを追加する場合は最大でも一つにすべきである」ということ。 // 名前空間用の空オブジェクトを生成する // この一つだけのグローバルシンボルに他の全てのシンボルを格納する var Cl
2011-04-18
なんか最近周囲でAndroid開発が熱いようで、ならば乗るしかない、このビッグウェーブに・・・！ということで、DesireHDを0円乞食ゲットしてきました。 さて、Androidの開発といえばJava使用なんですが、せっかくなのでScalaの勉強もかねて、ScalaちゃんでAndroid開発はじめました！ 開発環境に関しては、いろいろ試行錯誤した結果、とりあえず簡単そうなsbtを使ってみることに。 ちなみにWin7上です。 AndroidSDKは既にインストールされてるとして、以下。 まずは、sbtを準備。 Setup - simple-build-tool - A build tool for Scala - Google Project Hosting 次に、create_project(androidプロジェクト作成スクリプト)を用意。 create_projectはUnix系ならそ
日付（Date） - とほほのWWW入門
日付オブジェクト date = new Date(yead, month[, day[, hour[, min[, sec[, msec]]]]]) date = new Date(time) date = new Date(str) date = new Date() 指定した日時を表す日付オブジェクトを生成します。月は 0～11 の範囲で指定してください。msec は JavaScript 1.3 から利用できます。 date = new Date(1999, 11); // => 1999-12-01 00:00:00.000 date = new Date(1999, 11, 31); // => 1999-12-31 00:00:00.000 date = new Date(1999, 11, 31, 23); // => 1999-12-31 23:00:00.000 date
JavaScript継承パターンまとめ - Thousand Years
プロトタイプ function Animal(){}; Animal.prototype = { sleep : function(){}, walk : function(){ alert('noshi, noshi') } }; function Human(){}; Human.prototype = new Animal(); new Human().walk(); // noshi, noshi もっともポピュラだと思われる。 変型プロトタイプ Human.prototype.__proto__ = Animal.prototype; new Human().walk(); // noshi, noshi ほとんどのIEを除くJavaScript処理系で実行可能。裏ワザちっく。 エクステンド /** * extend function * @param {Object} s su
サイ本要約 9章 クラスとコンストラクタとプロトタイプ - noire722 の日記
9.1 コンストラクタ 記述例 function Rectangle(w, h){ this.width = w; this.height = h; // return文は記述しない } var rect1 = new Rectangle(2, 4); var rect2 = new Rectangle(8.5, 11); オブジェクトの生成方法 オブジェクトリテラルで{}と記述する ex.) var point = {x:0, y:0}; コンストラクタ関数を使う ex.) var today = new Date(); コンストラクタ関数とは オブジェクトのプロパティを初期化する関数 new演算子と一緒に使われる オブジェクトの"クラス*1"を定義するにはコンストラクタ関数を定義するだけでよい 通常、戻り値がない*2 thisとは 実行中のコード*3が「自分自身」を表すオブジェクトにア
IT戦記 - JavaScript の this について
WEB+DB PRESS 編集の R たんから、僕の連載記事に読者様から質問が来ていると教えていただいたので、その内容を教えていただきました。 以下、内容を転載 「JavaScriptわくわく開発道」の記事に関して質問です。 今回の内容で特に興味を持ったのはthisキーワードの振る舞いでした。 thisキーワードの説明には、オブジェクト型の変数を別の変数にコピーしてから初期化すると、コピーした変数からメソッドを実行できなくなるという例が紹介されていました。 そこには「（1）の時点でobj0には{}が入っているため、hogeは未定義となってしまう」という説明があるのですが、誌面の都合上省略があるためか、thisキーワードを用いることで問題を回避できるという理由がなかなか理解できないでいます。 自分なりに考えてみたところ、内部的には以下のようなことが起きているのではないかと思いました。 (1)
[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
Javascript/配列操作 - 俺の基地
先頭を削除し先頭を取得する var hoge = [1,2,3,4]; var piyo = hoge.shift(); //[2,3,4]; alert(piyo); //1 破壊的 ▲ ▼ 末尾を削除し末尾を取得する var hoge = [1,2,3,4]; var piyo = hoge.pop(); //[1,2,3] alert(piyo); //4 破壊的 ▲ ▼ 末尾に追加する var hoge = new Array(); hoge.push('aaa'); 破壊的 実はこのメソッド var hoge = []; hoge.push('aaa', 'bbb', 'ccc'); 引数を何個もとって連続で追加することができる。 ▲ ▼ 配列を結合する（破壊的） 「末尾に追加する」pushは引数を複数個とれるので、こいつを応用すると破壊的に配列を結合することができる var h
JavaScript Reference - MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
Javascript .NET
すべての Microsoft 製品 Global Microsoft 365 Teams Copilot Windows Surface Xbox セール 法人向け サポート ソフトウェア Windows アプリ AI OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Cloud Microsoft Security Azure Dynamics 365 一般法人向け Microsoft 365 Microsoft Industry Microsoft Power Platform Windows 365 開発者
サイ本要約 5.8〜5.10.8 ビット演算子など - noire722 の日記
5.8 ビット演算子 JavaScriptの数値のサイズについて Number -WIKIBOOKS- 整数と浮動小数点数 JavaScriptにおいて、32ビット符号なし整数・32ビット符号付き整数・64ビット浮動小数が1つの数値にまとめられています。C言語などとは異なり、整数同士の演算で32ビットで表現できる範囲を超えた場合は、64ビット浮動小数に自動的に切り替わります。 typeof 演算子のような手法で、この3種のうちどれが使われているかを判定する演算子は存在しません。しかしながら、ビット演算子を使うことにより、64ビット浮動小数を32ビット符号なし整数や32ビット符号付き整数に変換できます。具体的には、>>> 演算子により、32ビット符号なし整数になり、その他のビット演算子により、32ビット符号付き整数に変換されます。64ビット浮動小数は53ビット符号付き整数を誤差なく表現できる
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
