今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (1) FireCrystalとは | エンタープライズ | マイコミジャーナル
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
[Think IT] 【Webサーバーを極める！】 JSON vs. FREDDY：Web軽量通信 第1回：JSONとFREDDY、変貌するWeb技術(1/3)
Web 2.0が引き起こしたパラダイムシフト 読者の皆さんはWebと親和性の高いデータフォーマットと聞いて、何を思い浮かべるだろうか。もしこの問いを数年前に発したのなら、おそらくほとんどの人がXMLと答えただろう。今年で誕生から10年を迎えたXMLは、データ交換のための最も重要なフォーマットとして、利用機会が高くさまざまな分野で用いられている。しかしながら、今日では、Webと親和性の高いデータフォーマットは「JSON」と答える人も多いのではないだろうか。 Web 2.0というキーワードとともに、ここ数年でWebを取り巻く環境は劇的に変化した。もちろんWeb 2.0という用語自体は単なるバズワードであり、意味のない宣伝用語として使われることも多く、筆者自身あまり好きな言葉ではない。Tim O'Reilly氏のWeb 2.0の定義（http://www.oreillynet.com/pub/a
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
多数のバグを改善：JavaScriptフレームワーク「Prototype 1.6.0」リリース
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Prototypeプロジェクトは11月7日、JavaScriptフレームワーク「Prototype」の新バージョン「Prototype 1.6.0」をリリースした。 Prototypeは、Ajaxアプリケーションの開発を支援するJavaScriptフレームワーク。Prototypeを用いることで、非同期のリクエストやDOMに関わる典型的な操作を簡潔に記述することが可能となる。また、JavaScriptでのオブジェクト指向プログラミングや、関数型プログラミングを支援する機能も用意されている。 今回リリースされた新バージョンでは、JSONへの対応が強化されたほか、クラスを定義する際のAPIが変更され、より直感的かつ柔軟に記述できるようになっ
IE版のFirebug IE Developer Toolbar[to-R]
IE版のFirebug IE Developer Toolbar みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか？ マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。 IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。 ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。 すごく便利ですので、使ったことがない方はFirebugの方からお使いください。 話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと
![IE版のFirebug IE Developer Toolbar[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
FirebugによるWebコードのデバッグ | OSDN Magazine
Webサイトの開発は、世紀の変わり目となった7年前の頃ほど単純な作業ではない。新たなツール、テクノロジ、開発方法論の氾濫により、もはやWebページはかつての単純なHTMLコードの列ではなく、各種のスタイルシート、マークアップ言語、スクリプトが複雑に入り混じったものになっている。だが、こうした複雑なブレンドものをデバッグするのは容易ではない。そこで登場するのが、WebブラウザFirefox用のオープンソースのアドオンFirebugだ。このアドオンを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。 各種Webプロジェクトの作成とデバッグに携わるWeb開発者を支援するアプリケーションは、いくつか存在する。SANIsoftの最高技術責任者で『Professional PHP4 Programming
[ThinkIT] 第4回：Windows Liveで見せるMicrosoftの懐の深さ (1/4)
奇異に思われるかもしれないが、実は「Ajaxの生みの親」は誰かという問い掛けに応えるのは難しい。 なぜかといえば、「Ajaxに使われる主要な技術を整備した者」と「現在Ajaxと呼ばれるサービスを作り出した者」、そして「Ajaxという名前を付けた者」はすべて異なっているからである。 具体的にいえば、最初の者はMicrosoft、2番目の者はGoogle、そして3番目の者はJesse James Garrett氏とみることができる。GoogleをAjaxの生みの親である、という立場を取っているケースが一般的だと思われるが、Googleだけですべてを作り上げたわけではないのも事実である。 一方Microsoftは、Googleを追い上げる形でAjaxに参入した後発の企業、というイメージで受け止められているが、見ての通りGoogleに先んじてAjaxに使われる技術を整備した元祖的な立場である。ここ
Opera 最新ビルドの Developer Console を試す - WebOS Goodies
インストール方法は従来の開発者向けツールと同じです。 Opera 9.0 で開発者向けツールのページを表示し、「Developer Console」のリンクを適当なツールバーにドラッグしてください。ただ、この方法だとアイコンが表示されないので、 Hideto さんが作成されたボタンを利用されるほうがお勧めです。ご好意により Tips に転載させていただきましたので、ご利用ください。便利なボタンを作成してくださった Hideto さんに感謝です。 Developer Console は現在の正式版（Opera 9.1）には実装されていませんので、最新の Weekly Build をインストールする必要があります。 OPERA DESKTOP TERM のページのタイトルの下に最新版インストーラへのリンクがありますので、そこからダウンロードしてインストールしてください。ただし、場合によっては不
MyEclipseを使ったAjaxアプリケーションのピーピング：CodeZine
はじめに Ajaxを活用したリッチなページが多く見られるようになってきました。これらのページでは一体どういった処理をしているのでしょうか。 MyEclipseを使うと、たとえ外部のページであっても、どのようにAjaxアプリケーションが動作しているのかを覗き見ることができます。JavaScriptにブレークポイントを設定して、一行ずつステップ実行したり、どのような非同期通信が行われているのかが確認できます。 本記事では、MyEclipseが提供しているAjax用の機能を使ってAjaxアプリケーションの動作を確認する方法を紹介します。対象読者 本記事は、次のような方を読者対象としております。Ajaxを活用したサイトがどのように実現されているか興味がある方サーバサイドJavaの開発は行っているけれども、そろそろAjaxアプリケーション開発も始めようと考えている方 なお、Eclipseの基本操作
Opera が純正の開発者ツールをリリース - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日公開された Opera の開発者向け情報サイト Dev.Opera にて、 Opera 純正の開発者ツールが公開されました！今回公開されたのは以下の 3 つです。 DOM Console インタラクティブに DOM ツリーを表示し、スタイルや属性などの状態を調査できます。 DOM Snapshot 現在の DOM ツリーのスナップショットを別ページに表示します
JavaプログラマはAjaxに乗るべきか - ＠IT
Ajaxプログラマに必要なスキルとセンス Ajaxアプローチを活用したWebアプリケーション開発には数々の技術的スキルと、センスを要求される。もちろん統合開発ツールや整ったライブラリをうまく活用すれば、すべての知識に習熟している必要はない。しかし下記に挙げる各項目が得意であるかないかで、設計や全体の出来に反映してくるのは明らかであろう。 ●Ajaxに必要なスキルセット JavaScript（ECMA Script／Jscript） DHTML（DynamicHTML） CSS（Cascading Style Sheets） http（http status） XML（eXtensible Markup Language） XSLT（eXtensible Stylesheet Language Transformations） DOM（Document Object Model） JavaE
IT戦記 - FireBug の新しいバージョンが便利すぎる件について
FireFox の拡張機能 FireBug を更新したらすごいことになっていたので共有します。 まずこれを見てください http://Sample.ECMAScript.jp/20060331.html ぱっと見の機能 HTML のソースを見ながら、属性値を直接編集できる。 影響のある CSS を即時に表示 レイアウト情報を即時に表示 インスペクト中の要素に浮上したイベントをキャプチャ インスペクト中の要素の JavaScript オブジェクトを表示 Ajax レスポンスのヘッダも確認できるようになった。 FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843
DOMTab - Navigation tabs with CSS and DOMscripting
What is DOMtab? DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to. New: If the URL of the page links directly to one of the tabs it get automatically highlight
XML for <SCRIPT> Cross Platform XML Parser in JavaScript
XML for <SCRIPT> is a powerful, standards-compliant JavaScript XML parser that is designed to help web application designers implement cross platform applications that take advantage of client-side manipulation of XML data. XML for <SCRIPT> provides a full suite of tools, including: A standards-compliant W3C DOM Level 2 processor An XPath processor A standards-compliant SAX processor A simple (cla
javascript - 任意のHTMLをインクルメンタル検索可能に! : 404 Blog Not Found
2006年02月24日12:29 カテゴリLightweight Languages javascript - 任意のHTMLをインクルメンタル検索可能に! 今度のはちょっと凄いかも。 Keywords: 難点は、今のところFirefox(と多分他のGeckoベースのBrowser)でしか動かないことか(苦笑) 404 Blog Not Found:JavaScript - Incremental Search a la Google Cache Proof of Concept ということで、検索語だけではなく検索対象のテキストも入力可能にしておきました。これをで隠しておき、とすれば、検索可能ページの出来上がり、にはなります。 前回の例ではplain textしか検索の対象に出来ませんでしたが、今回は任意のHTMLを 検索可能にします。誤ってtagを引っ掛けるということはありえません。ソ
HTMLリアルタイム編集（ブックマークレット） @ ZEROBASE BLOG
quickedit by ZEROBASE'+b.innerHTML.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"')+'');var t=x.getElementById('t');t.onchange=t.onkeyup=function(){b.innerHTML=t.value;};}())">[HTML編集] このリンクをブラウザのブックマークバーにドラッグ＆ドロップするなどにより登録してください。 使い方 編集したいページで上記ブックマークレットを実行します。ためしに上記リンクをクリックしてみてください。 テキストエリア内にHTMLが表示されますので、それを編集してください。変更が即座に反映され、もとのウィンドウが書き換わります。 書き換えているのは、ブラウザのメモリ上のHTMLです。サーバには何の影響もありません。 便利
DOM Rangeについて色々 - Personnel
これまで、Rangeインターフェイスはテキストの選択範囲を操作する、それだけの仕様だと思っていました。しかし、DOM CoreやHTMLでは面倒で、コードが煩雑になりがちだった複数の要素に関する操作が、Rangeインターフェイスを利用することで直感的かつ直接的な操作になり、とても扱いやすくなることが分かりました。現在では個人的に、DOMで文書ツリーを扱う時には常に傍らにいてもらいたい介さんのような存在になっています。取りあえず呼んでおけ、みたいな。 以下、とてもありがちな要素に関する操作を、CoreやHTMLのみを用いた方法とRangeを利用した方法で行い、その比較を行います。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/DOM_Range.html#MISUNDERSTANDING D
はてな javascriptのappendChildでつまづいています。ieで<body>の子に<div>を入れる、</body>の直前に</div>を入れるjavascriptを・・
javascriptのappendChildでつまづいています。 ieで<body>の子に<div>を入れる、</body>の直前に</div>を入れるjavascriptを教えてください
ブラウザでミニマムXML (0) - 檜山正幸のキマイラ飼育記 (はてなBlog)
XMLネタで続き物を書こうかと思います。 「プログラミング言語：JavaScript ＋ 実行環境：ブラウザ」という組み合わせは、もっとも普及したプログラミング環境だと言えるでしょう。テキストエディタさえあれば、いますぐ、だれでもプログラミングをはじめられます。さらにブラウザには、いちおうDOM APIも備わっているので、もっとも普及したXMLプログラミング環境とも言えます。 そこで、この“今そこにあるXMLプラットフォーム”上で、今すぐ何かちょっとしたことをやってみよう、ってことです。 プログラミング言語としてのJavaScriptについては、「プログラマのためのJavaScript」というシリーズで解説しています。それと、しばらく間が空いてしまっているけど、「micro*」というシリーズでは、「今そこにあるもので、今すぐ何か」というコンセプトを展開しようとしています（まだ、micro*
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
