Ajaxフォトアルバムのフェードイン画像フレームを作ろう －＠IT
本連載では、Ajaxを活用したインタラクティブなWebアプリケーションを、ゼロから開発する。3回の連載で、簡単なWebフォトアルバムを完成させる予定だ。完結した機能を持ったAjaxアプリケーションを作り上げるステップを、具体的に解説していきたい。 JavaScriptと非同期データ送受信を組み合わせた、Webアプリケーション開発スタイルである「Ajax」は、このキーワードが発表されたのが今年初めのことだとは思えないほどの発展を遂げており、日々新しい実験や、それを組み込んだサービスが発表されている。 そろそろ実際にAjaxを活用したWebアプリケーションを開発してみようか、と考えている開発者も多いことだろうが、ではAjaxで何をどう作ったらいいんだろう？ という部分で立ち止まってしまってしまっているのではないだろうか。 そこで本連載では、単なるサンプルではなく、完結した機能を持ったAjaxア
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
Zopeジャンキー日記 :JavaScriptのテンプレートエンジン 「Ajax Pages」
Ajax Demo Blog : Demonstration of an Ajaxian Blog http://ajax-pages.sourceforge.net/examples/blog/ ここにアクセスして、以下の操作をやってみてほしい。 1. 右下のAdminをクリック 2. admin / adminでログイン 3. 「New Post」ボタンを押す 4. タイトル、本文を書いて「Publish」を押す 5. 上の「back」をクリックすると、ブログエントリが「載った」！ なんと、これがJavaScriptだけでできているのだ！ つまり目の前のHTMLページが「ブログシステム」になっている（サーバがないので、このデモでは「保存」はされない）。 これはJavaScriptのテンプレートエンジン「Ajax Pages」のサンプルのひとつ。 Ajax Pages http://aj
Collection & Copy - JavaScriptにおける高階プログラミング
翻訳 原文：Higher Order Programming In Javascript著者：Sjoerd Visscherライセンス：クリエイティブ・コモンズ・ライセンス(帰属) 前提知識JavaScriptを使ったオブジェクト指向プログラミングの知識が必要となります。以下のWebreferenceの記事を読み、よく理解しておいてください。OOP in Javascript, part IOOP in Javascript, part IIDouglas Crockford最終更新2004/3/28はじめに高階プログラミングでは、値として関数を使うことができます。つまり引数として関数を別の関数へ渡すことも、関数を別の関数の返り値にすることもできるのです。この形式のプログラミングは、しばしば関数型プログラミングで使用されますが、「通常」のオブジェクト指向のプログラミングでも非常に有用です。
最速インターフェース研究会 :: テンプレートエディタを作ってみた
こんなのを作ってみました。 http://la.ma.la/misc/tmpledit/ HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。 とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。 こういう感じの作るやつ、と言えばわかりやすいかも。 http://d.hatena.ne.jp/kamioka/20050609/1118324980 まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。 CSS適用ルーチンはこれの丸パク
wema - 付箋指向の多目的ツール
プロジェクトページ ダウンロード チュートリアル デモサイト FAQ リンク 新着情報 2005-04-08 バージョン2.0.1を公開しました。ダウンロードページからダウンロードしてください。 2005-04-08 チュートリアルを更新しました。 2005-03-11 faqページを作りました。 2005-03-10 バージョン2.0.0を公開しました。 1.wemaとは wemaは、ウェブページ上に付箋を貼り付けていく変わったソフトウエアです。 付箋の背景色を選んだり、付箋同士に線を引くことも出来ます。 日常の簡単なメモボードや、グループの掲示板、マインドマップのような使い方も 出来たりするなど、自由度の高さがあります。 wemaのベースになっているのはWikiと呼ばれるソフトウエアです。 WikiはWeb上で文章を編集することができ、独自の文法を使って簡単に文書を構造的に 表示するこ
オブジェクト指向JavaScript - 大きな画像をポップアップ
Java等のオブジェクト指向はクラスベースのオブジェクト指向と呼ばれる。一方、JavaScriptはプロトタイプベース、あるいはインスタンスベースオブジェクト指向と呼ばれる。 クラスベースは、まずクラスを定義し、クラスを型とするインスタンスを作成することでプログラミングする。プロトタイプベースによるオブジェクト指向では、クラスの定義は必須ではなく場合によってはクラスという概念自体が存在しない。既存のオブジェクトのクローンとして新しいオブジェクトを作成し、そのオブジェクトに独自の性質を付加してプログラミングする。 JavaScriptのオブジェクトの性質は動的に変更可能。Java等では一度決定したオブジェクトの振る舞いは変更できないが、JavaScriptでは実行中の任意の場所でメソッドの動作を変更したり、新しく追加したり、削除したりすることができる。
yohei-y:weblog: Javascript HTML のデザインパターン
僕もご多分に漏れず Javascript で遊んだり調べたりしています。 いろいろなクールなサイトの生 Javascript を見て勉強しているのですが、 まず面白いなと思ったのがロールオーバーの実現方法です(JavaScript や HTML をわかってる人には当たり前の内容だと思うので、ツマラナイ話だと思いますが)。 WaSP の左上の画像のロールオーバーは <img id="logo" src="/img/logo.gif" height="100" width="103" alt="Web Standards Project logo" /> 生 HTML はこんなかんじで onmouseover/onmouseout 属性を記述せず、 JavaScript で function initRollOvers() { var logo; if (document.getElement
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
いやなブログ: JavaScript とクロージャ
JavaScript とクロージャ JavaScript プログラミングはなかなかおもしろいよ、と知人に言ってみたところ、 全然信用されずに怪訝な顔をされる、という目に遭いました。 クロージャが使えて DOM ツリーにイベントハンドラを簡単に追加できるよ、と続けると多少は興味を持ってもらえるようなので、クロージャを使ったサンプルプログラムを書いてみました。 箱の中でマウスカーソルを適当に動かしてください。 このプログラムでは各セルの色の濃さをクロージャを使って保持しています。makeHandler という関数の depth という変数がそれです。クロージャを使うと、個々のイベントハンドラごとに独立した状態を簡単に持たせされるのがポイントです。 別にクロージャを使わなくてもいいようなプログラムですが (クロージャではなく DOM のエレメントに状態を持たせるとか)、こういう風にも書けるよ、と
とほほのJavaScriptリファレンス
とほほのJavaScriptリファレンス [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <script>～</script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax super blog
～JavaScriptでXMLHttpRequest～
http://blog.bmedianode.com/2005/02/javascript_temp.html
Ajax で画面遷移なしの Amazon 検索 : NDO::Weblog