JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
javascript - ブログパーツ/ウィジェット開発者におねがい : 404 Blog Not Found
2010年11月26日18:00 カテゴリTipsLightweight Languages javascript - ブログパーツ/ウィジェット開発者におねがい JavaScript: The Good Parts Douglas Crockford / 水野貴明訳 [原著:JavaScript: The Good Parts] たった二つです。 名前空間を一つだけ用意して、それのみを使うこと 設定はグローバル変数ではなく、引数渡しにすること そうでないと、導入したサイトで変数衝突が起こる公算が大きくなります。 それが実際に発生したのが、右の画像です。表示がぐしゃぐしゃになっています。 問題を起こしたのは、以下のsnippetでした。 <script type="text/javascript" src="http://blogchart.jp/js/blogparts.js"></sc
jQuery and JavaScript Coding: Examples and Best Practices — Smashing Magazine
When used correctly,jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects. When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best prac
JavaScriptベストプラクティス: Unobtrusive DOMプログラミングのススメ | エンタープライズ | マイコミジャーナル
Alex Holt氏がSmashing MagazineにおいてjQuery and JavaScript Coding: Examples and Best PracticesのタイトルのもとJavaScriptプログラミングのベストプラクティスを紹介している。Alex Holt氏は「Unobtrusive DOM Scripting」と呼ばれるプログラミング手法がWebサイトに適用するにあたり優れているとし、Unobtrusive DOM Scriptingの実現にはjQueryが実にいい具合で活用できることを説明している。 同氏はDOMを経由してWebページの各種データにアクセスしてなんらかの動作をさせるプログラミング方法をDOM Scriptingと呼び、DOM Scriptingのなかでも必要な機能を必要な要素に対して適用するものといったニュアンスを強める場合にUnobtrusi
データが1件の時だけ、JavaScriptの必須チェックが誤動作する：CodeZine
上の画面は、ワークフロー機能でよくある承認画面です。チェックボックスで選択したデータは、［承認］ボタンをクリックすることで、状態を「承認待ち」から「承認済み」へ変更できます。入力チェックとして、「選択0件で承認ボタンをクリックしたときはエラー表示」という処理をJavaScriptで実装しています。 ところが、データが1件の時だけ、「選択しているのに『1件も選択されていません』というエラーが出る」というバグが発生しました。バグコード 入力チェックのコードは、次のようになっていました。 function check() { var sentakuChk = document.form1.sentakuChk; for (var i=0; i<sentakuChk.length; i++) { if (sentakuChk[i].checked) { return true; } }
「Webページの表示速度を向上させる最新研究結果」 米Yahoo!がプレゼン資料公開：CodeZine
米Yahoo!は、開発者向けWebサイト「Yahoo! Developer Network」内のブログで、Webページのパフォーマンスを向上させる最新研究結果について解説したプレゼン資料を公開した。 これは先週開催されたPHP Quebec Conferenceのセッションにおいて、同社のStoyan Stefanov氏が使用した資料を公開したもの。Yahoo!が研究を続けている「より速くWebページを表示させるテクニック」として、既存の14種類に加え、新しく20種類のルールが明かされている。 改善対象はサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルとなっており、同社が提供するFirefox拡張機能YSlowなどを利用して検証する。YSlowで「A判定」が出ていないようであればこれらの改善に取り組むよう推奨しており、A判定が出ている場合でも新しい20のルールを
AJAXアプリケーションで標準的なブラウザナビゲーションを再現する：CodeZine
はじめに AJAXは、デスクトップアプリケーションと同じくらい対話性と応答性のよいリッチなWebアプリケーションを開発する手段として、多くの開発者に採用されてきました。AJAXでは、WebのUIを異なるセグメントに分割します。ユーザーはあるセグメントで操作を実行し、その操作が終わらないうちに他のセグメントで作業を開始することができます。 しかし、AJAXには大きな欠点があります。戻る、進む、ブックマークといった標準的なブラウザ機能が無効になるのです。AJAXアプリケーションの開発者は、ユーザーをAJAXの欠点に無理やり順応させるのではなく、アプリケーションを従来のWebインタラクションスタイルに合わせ、次の機能を提供するようにしなければなりません。［戻る］／［進む］ボタンが機能するようにして、エンドユーザーが直観的なやり方で履歴ページ間を移動できるようにする。ユーザーがブックマークを作成で
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
川o・-・）＜2nd life - prototype.js 1.5 からの新機能 Template の使い方
JavaScript での変数を使った文字列の作成は何かとめんどくさいですね。prototype.js では 1.5_pre0 から Template という簡易テンプレートとして使えるクラスが加わりました。相変わらずドキュメントはソースと test 嫁なので簡単な使い方を紹介します。 まずは Template となる文字列を new Template で作ります。Template のリテラルは #{}です*1 。 var t = new Template('#{foo}, #{bar}!');次に作成した Template インスタンスの evaluate 関数を呼び出し、引数として Hash(Object) を渡します。 t.evaluate({ foo: 'hello', bar: 'world' }); // hello, world!もしテンプレートを使い回さず、一度限りの文字列
ブラウザ上で画像やテキストを自由に編集する方法 | P O P * P O P
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとしたTipsをご紹介。Internet Explorer5.5以上限定ですが。 Webサイトをブラウザ上で自由に編集できてしまうテクニックです。やり方は簡単。下記のJavaScriptをアドレスバーに打ち込むだけ。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 こんな（↓）感じです。 ドラッグ＆ドロップで画像を動かせる他、テキストも自由に書きかえることができます。これはコンテンツをブラウザ上で編集できる「contentEditable」というタグを活用したTipsですね。 » contentEditableについて スクリーンショットを取る時にいらない画像を簡単に消したりできるのは便利かも。diggからの情報でした
ウノウラボ Unoh Labs: Web2.0エンジニアのためのJavaScriptリファレンス集
こんにちは、hideです。 近年のAjax技術の台頭により、Web2.0時代のエンジニアにとってJavaScriptは欠かすことのできない技術となってきました。しかし、2000年頃のWeb1.0時代には低機能な言語として認知されていました。このことは、"Rediscover the JavaScript"と題された次の文章に良く表れていると思います。 10 年。世界が JavaScript の真の実力を発見するのに要した時間である。 1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。(S
javascript - set(Timeout|Interval)をメソッド化 : 404 Blog Not Found
2006年12月15日04:00 カテゴリLightweight Languages javascript - set(Timeout|Interval)をメソッド化 どうせなら、foo.bar(arg ...)のsemanticsを変えずに呼びたい。 Kazuho@Cybozu Labs: setTimeout をオブジェクト指向にしてみる たとえば foo.bar(hoge) を 1000ms 後に setTimeout したい場合、 foo.bar.callTimeout(1000, foo, hoge); と書くことができます。 というわけで私家版。 JavaScriptのfunctionはオブジェクト指向どころかオブジェクトそのものですから、以下のようにしてもよいのでは？こうすることで、f(arg ...)があって、g = f.setTimeout(ms)とした場合、g()の引数
JSONP
前回のエントリで触れたJSONP。初出はRemote JSON - JSONPというMochiKitの中の人によるエントリ(多分。一言で言うなら「JSONデータを括弧でくくった上でこっちが指定した文字列を頭につけて返してね？」というもの。文章で説明するとわけわからん。 つまり、 http://example.com/data.json?jsonp=beverly_hills とリクエストしたら、 beverly_hills({ foo: 'This is foo.', bar: 'This is bar.', foobar: 'This is foobar.' }); と返す。また、 http://example.com/data.json?jsonp=beverly_hills%5B90210%5D とリクエストしたら、 beverly_hills[90210]({ foo: 'This
使えない文字
#PCDATA #PCDATA（parsed character data）は解析の対象になるので、「<」, 「>」はそれぞれタグの開始, 終了と解釈されてしまいます。よって、直接記すのではなく文字を参照しなければならなりません。&は文字実体参照の開始記号として使われるので、それ以外の用途なら文字を参照します。HTML 4では1114111までISO 10646の文字コード位置で参照可能ですが、HTML 3.2は255までです。一覧表 ※HTML 4では10進数だけでなく16進数でも良いことになってはいますが、10進数の方が無難です。実体参照では大文字小文字が区別されます。 < → < (<) > → > (>) & → & (&) Å → Å (Å) å → å (å) CDATA CDATA(character data) は、文字データの終りを示す区切り子「</」の他にはマーク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
IBM Developer
Efficient data transfer through zero copy