オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その1 | Takazudo Clipping*
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
[JS]モーダルウインドウを実装する超軽量のスクリプト -TinyBox
TinyBoxは、モーダルウインドウを生成し、アニメーションで拡大表示できる超軽量（3.5KB）の単独で動作する（jQueryなどは不要）スクリプトです。 TinyBox JavaScript Popup Box - 3.5KB demo 上記キャプチャのデモではリンク箇所をクリックすると、サイズを変更したり、内容を変更したりします。 また、画像の拡大表示やタイマーにも対応しています。
カラーピッカー.js - JavaScript ライブラリー - HTML5.JP
対応ブラウザー Internet Explorer 6 以上 Firefox 2.0以上 Opera 9.0以上 Safari 3.0以上（もしかしたら2.0でも動作するかもしれませんが、未確認です。） Google Chrome 0.3以上 使い方 cpick_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、cpick.jsをロードするようscriptタグを記述しておきます。このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダ はどこに設置しても構いません。html5jpフォルダの設置場所に合わせてcpick.jsをロードするscript要素のsrc属性を書き換えてください。
最近のjsプログラムの組み方 - nazokingのブログ
僕はコードスタイルが一定しないのですが、最近はクロージャ！クロージャ！ 最近は Firefox拡張/Greasemonkey/userChrome.js 系の javascript しか書いてないんだけど、そのあたりで「オブジェクトの継承」とかしたいと思うことがなく、 prototype とかややこしいだけなので全然使わなくなりました。 昔 function myClass(){ this.init.apply(this,arguments); } myClass.prototype.init=function(name){ this.name=name; } myClass.prototype.hoge=function(){ return "hoge" } myClass.prototype.huga=function(){ return this.name+this.hoge()+"
これは必見！JavaScriptの文字列を複数行で定義する方法:phpspot開発日誌
Multi-line JavaScript これは必見！JavaScriptの文字列を複数行で定義する方法。 以下のようなコードは動くようで、うまく動きません。 <script type="text/javascript"> <!-- var a = '1 2 3'; alert(a); //--> </script> これを、行末に ¥ を入れます。 <script type="text/javascript"> <!-- var a = '1¥ 2¥ 3'; alert(a); //--> </script> すると、 と動くようです。 文字列の途中で改行したい場合に、一旦区切って 'aaa'+(改行)+'bbb' みたいにしなくてよくなります。 ということで、私も知らなかったのですが、知っておくとよいかもしれませんね。 firefox,ie,chromeで動作確認。 知ってた方はごめ
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
Ajaxで実現するエフェクト20選「20 More Excellent AJAX Effects You Should Know」
最近ではライブラリも多数リリースされ、様々な所で使われている「Ajax」簡単に高度なエフェクトや動作が導入可能ですが、今日紹介する「20 More Excellent AJAX Effects You Should Know」はAjaxで実現するエフェクトをまとめたエントリーです。 GlassBox 様々なAjaxのサンプルが紹介されていますが、今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■LightWindow YouTubeに動画、画像、PDFファイルと様々なメディアに対応したライトボックスエフェクト。 ■Unobtrusive Table Actions テーブルの各ブロックにエフェクトを付与できるAjax。データを見せるページには便利に使えそうです。 ■iCarousel plugin イメージをスライダー形式で表現できるAjax。 ■Validat
一日で学ぶ jQuery(ラボブログ)
スパイスラボ神部です。 OpenSocial アプリの開発を効率化するために、jOpenSocial か opensocial-jquery のどちらかを使いたいのですが、そのためにはまず jQuery について学ばないと行けないようなので、jQuery についてざっと調べてみました。 -AJAXが好きだ！ - Favorites! Write less, Do more -jQuery: The Write Less, Do More, JavaScript Library まずは公式。 リファレンス -jQuery 1.3.2 日本語リファレンス 参考になりそうなリソース いろんな記事を見ると、とりあえずは jQuery を使うと、構造化された状態でリッチアプリケーションが組めるという部分が強調されている記事が多いような気がします。「jQuery + AJAX で RIA な UI
活発化するJavaScriptデータベース - 高パフォーマンスのJavaScriptDBが人気 | エンタープライズ | マイコミジャーナル
Web Application Development - SitePen WebアプリケーションのクライアントサイドのみならずサーバサイドもJavaScriptで実装しようという試みがあり、サーバサイドJavaScriptの標準化作業が進められているなど、一定の支持を集めている。こうした試みのひとつに、データの永続化を実現するために従来のRDBMSではなく、JSONをやりとりするデータ形式としたWebアプリケーション向けのデータベース開発が進められており、実装自身もJavaScriptで実装されているものがある。そうした取り組みのひとつがPersevereだ。Dojo関連プロジェクトのひとつと位置づけられている。 Webアプリケーションに特化したデータベースは今にはじまったものではないが、そうしたデータベースとしては代表的なもののひとつであるApache CouchDBをJavaScri
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
JavaScriptでできること・できないこと
さまざまなプログラミング言語がありますが、プログラミングそのものに触れてみたいと思うならJavaScriptをお勧めします。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できるのです（編集部） プログラミングを学びたいと思ったら 皆さんは、JavaScriptというと何を思い浮かべるでしょうか。 Webで動的なユーザーインターフェイスを実現するための技術でしょうか。それとも、オブジェクト指向のスクリプティング言語でしょうか。JavaScriptというキーワードを聞いたことがある程度という方もいるでしょう。 JavaScriptは現在多くのWebブラウザに搭載され、さまざまな場面でWebの中核技術を支えているスクリプティング言語です。 本連載は、プログラミングを初めて学ぶ人を対象にしたJavaScriptの入門記事です。特に次のような方のために分かりやすく解説を行っていきます。
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」:phpspot開発日誌
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった！という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか？見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
Litebox/Lightboxの使い方
Posted by: Hirotaka Ogawa @ January 18, 2007 05:35 PM | yujiroさんとこのLiteboxやLightboxの記事で、配布されているJavaScriptファイルやCSSファイルを修正されていますが、それだとオリジナルのLitebox, Lightboxが更新されるたびに同じことをしなくてはならなくなります。 小粋空間: Litebox 1.0 の rel 属性を自動付与する 他 それは面倒だ、美しくないと思ってしまったので、このエントリーではもう少しスマートなやり方を書いておきます。何かの参考になる場合もあるでしょう。 まず、スタイルシートはそもそも上書きして使うものです。下のようなスタイルシートをlightbox.custom.cssとか適当な名前で生成しておき、lightbox.cssより後に読み込まれるようにしておけばオリジナ
Litebox- Same great taste, less calories
Litebox Check out the front page If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon. What is it? Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]フォームにさまざまなスタイルのデザインを適用するスクリプト -Sexy Forms
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌