Site Under MaintenanceWe'll be back soon! Our site is currently undergoing maintenance. Please check back later.
JavaScriptを使って実現した面白サイト集:phpspot開発日誌
Mind-blowing JavaScript Experiments|INSIC DESIGNS JavaScriptを使って実現した面白サイト集。実用的かどうかという点では？ですが、JavaScript を使った面白いサンプルサイトが色々と紹介されていました。 JavaScript の可能性を知るという意味で一度見ておいた方がよいです。JavaScript が遅いブラウザだと固まってしまう恐れがあるので Chrome などで新しい窓で見た方がいいです。 Twitch 複数ウィンドウを駆使したゲームっぽいもので、新しい使い方に驚きます Ball ボールが飛び跳ねるサンプル。Flashかと思いましたが、Chromeで動かすとここまで高速に動くことに驚き Ball Pool 右クリックでボールが新しくあらわれてボールで埋め尽くされます。物理エンジンで制御されてるっぽくて触っていて面白い De
DOMを操作 - JavaScriptist
DOMとは？ bookmark HTMLやXMLを操作するためのAPIをDOMというそうです。要は、HTMLをJavaScriptを使って動的に、自由に書き換えることが出来ます。HTMLを動的に書き換えることは、Web2.0時代のWebサイトとしては必須です。 このページではDOMで行える基本的なことを紹介します。 HTMLを書き換えてみる bookmark 次のようなDIV要素があります。 <div id="content"></div> タグの中には何もHTMLが入っていませんが、次のようにJavaScriptのコードを書くことで動的にHTMLが入ります。 var content = document.getElementById("content"); content.innerHTML = 'foobar'; 上記スクリプトを実行することで、ブラウザ内のHTMLは次のようになります
DOM-HTMLを操作するための仕組み - JavaScriptist
エレメント取得 指定IDのエレメント取得 - document.getElementById() 指定nameのエレメント全取得 - document.getElementsByName() 指定タグのエレメント全取得 - document.getElementsByTagName() elementの前のエレメントを取得 - element.previousSibling elementの次のエレメントを取得 - element.nextSibling エレメント生成・複製・追加 指定タグでのエレメント作成 - document.createElement() エレメントを複製する - element.cloneNode エレメントを追加する-element.appendChild エレメント挿入・削除・置換 エレメントを指定エレメントの子として挿入 - element.insertBe
JavaScriptの配列はのImageDataを使った方が高速 - yukobaのブログ
JavaScriptはJITが載り、高速化したのですが、配列操作が遅いです。連想配列とArrayがごちゃ混ぜになっているのが原因だと思います。 var ctx = canvas.getContext('2d'); var imageData = ctx.createImageData(1024, 1); var ary = imageData.data; この配列は、int32専用で、Arrayとは違って、任意の型が入るわけではありません。その分だけ、ほんのちょっとだけ高速化しています。 挿入ソートで、ベンチマークを取った実行時間の結果。長さ1024の配列を100回挿入ソートしています。単位はms。 ブラウザ canvasのImageData Array 高速化 IE 8 43400 Firefox 3.6 5369 5445 1%高速 Chrome 4 2350 2664 13%高速 S
JavaScriptの関数とメソッド
はじめに JavaScriptはオブジェクト指向言語です。しかし利便性のために、C言語などと同じようにグローバルな関数を定義し、構造化的な手法でプログラミングすることも可能です。 この記事では、JavaScriptにおける関数の基本的な性質を見ていくと共に、関数の正体、および関数の使用方法について解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をしている人を対象としています。 この記事は、
IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> ： ： </body> </html>↓↓↓ var document = { doc
Prototype.js を使った JavaScript OOP 講座 #03
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を
Prototype.js を使った JavaScript OOP 講座 #01
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
Part2 JavaScript流オブジェクト指向プログラミング
JavaScriptは，きちんとしたオブジェクト指向言語であって，オブジェクトを利用した高度な開発が可能です。JavaやC++，.NET系のオブジェクト指向言語がオブジェクトの定義にクラスという概念を用いる「クラス・ベース」の考え方を採用しているのに対し，JavaScriptではひな型となるオブジェクトを元に独自の機能を付加するという「プロトタイプ・ベース」の考え方を採用している点が特徴です。 まず最初に，皆さんの誤解を解いておきましょう。それはJavaScriptは，きちんとしたオブジェクト指向言語だということです。オブジェクト指向言語と言えば，JavaやC++などが有名ですし，C#やVisual Basic 2005といった米Microsoftが開発した.NET系の言語もあります。しかしこれらの言語に比べてJavaScriptは，一段低い「Webブラウザで利用する簡易言語」といったイメ
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
JavaScript はどのように実行されるか - IT戦記
JavaScript はどのように実行されるか Safari*1 の実装を例に JavaScript はどのようにして実行されているかを書く。自分用のメモ。日本語の出来は気にしない 1. ブラウザを起動して以下のようなページを開いたとする <html> <head> <script> var a = 1; var b = 2; alert(a + b); </script> </head> <body> </body> </html> 2. インターネットからデータが到着する そうすると WebCore::FrameLoader::write という関数に生の文字列が渡される。型は char* だ。 http://trac.webkit.org/browser/trunk/WebCore/loader/FrameLoader.cpp#L990 この関数の中では、到着した文字の文字コードを解
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
Ajax うきうき Watch 第7回 メモリリークが少なくなったGoogle Maps APIのバージョン2が登場
Google Maps API Official Blog Google Maps API Version 2 Ajaxの代表的なアプリケーションの1つといえるだけでなく、いま最もWeb上で活用されるAPIを提供するGoogle Mapsですが、そのAPIのバージョン2が2006年4月3日にリリースされています。まさにAjaxの進化は止まらないという感じです。 変更点の一部を見てみましょう。 まず、ダウンロードするJavaScriptプログラムのサイズが小さくなっているといいます。上記文書によれば約半分ということで、これは画期的なことです。このプログラムはかなりのサイズがありましたが、それが減るとすれば、細い回線でパケット代を気にしながら閲覧する場合には大きな価値があるでしょう。 ほかにもさまざまな変更があります。2つのサテライトのズームレベルが追加され、より自由度の高い参照が可能になりま
Part1 JavaScript基礎の基礎
JavaScriptのプログラムは，HTML文書と一緒にブラウザに読み込まれて実行されます。特別なプログラム開発環境や動作環境を用意することなしに，手軽に作成して動かせます。JavaScriptはHTML文書に埋め込むことも，HTML文書とは別のファイルに書くこともできます。まずは，ごく基本的な文法を押さえるところから始めましょう。 JavaScriptは，ブラウザ上で動作するプログラミング言語です。C++やJavaなどの本格的なプログラミング言語よりも手軽に使えるという意味で「スクリプト言語」と呼ばれることもあります。 JavaScriptの良いところは特別なプログラム開発環境や動作環境を用意しなくてもいいことです。JavaScriptのプログラムはブラウザさえあれば動作します。プログラム作成は，Windows付属ソフトの「メモ帳」などのテキスト・エディタがあれば十分です。 プログラムの
[Think IT] 【これならわかる！JavaScript/Ajax】やりなおしのJavaScript 第1回：そろそろ本気で学びませんか？ (1/3)
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
DOMから始めるJavaScriptモダン・スクリプティング---目次：ITpro
近年，Ajaxの台頭をきっかけに，JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。現在では，ページの表示を変化させるだけであれば，ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 第1回 DOMから始めるモダン・スクリプティングの世界へようこそ 第2回 ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～ 第3回 DOMスクリプティングのことはじめ(1) ～要素（タグ）を狙い撃ち～ 第4回 DOMスクリプティングのことはじめ(2) ～これはどんな要素？～ 第5回 DOMを使ってHTMLを自由自在に書き換える 第6回 イベントハンドラから脱却しよう 第7回 スクリプトを完全に分離しよう ～コンテンツ，プレゼンテーション，ビヘイビア～ 第8回 スクリプトのパッケージ化 ～使い回しできるスクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
crockford.com
連載：Ajax時代のJavaScriptプログラミング再入門 ― ＠IT