こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常識と言ってよいと思います。サーバーサイドのウェブ開発用フレームワークでは、ほとんどの場合HTMLのエスケープ用のメソッドが用意されていて、HTMLのエスケープは適切に行えるはずです。しかし、注意しなければいけないのは、HTMLのエスケープはJavaScriptにそのまま当てはめることはできないという点です。当たり前の話ですが、HTMLとJavaScriptではエスケープすべき文字が異なります。また、IEの6、7ではCSSにJavaScriptを埋めこむことができるのでCSSにも注
こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは（未だに）誤解されがちな言語です。まずはJavaScriptの背景から解説していきます。 （広義の）JavaScriptとはEcma Internationalによって策定されているECMA-262という規格（ECMAScript）を実装した処理系で実行される言語を指します。遠回りな表現になっていますが、これはJavaScriptのややこしさの一端を表しています。つまり、JavaScriptそれ自体に仕様があるわけではない、ということです。ECMAScriptと呼ばれる言語の仕様があって、その仕様に準拠した言語を（広義の）Ja
こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか？ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE（6/7/8）、Firefox（3.6）、Chrome（4.1）、Safari（4.0.5）、Opera（10.51）とします。カッコ内はフルサポートするバージョンで、それ
こんにちは、太田です。前回は総集編的な内容でしたが、今回は一転して基礎編に戻ります。JavaScriptにおける継承の方法とその仕組みについて、今回から数回に分けて基礎的な部分からきっちり押さえていきたいと思います。 JavaScriptとオブジェクト指向 JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語と言われています。new演算子を用いることで、関数がコンストラクタとして働き、そのコンストラクタが持つプロトタイプオブジェクトのメソッド（プロパティ）を継承した新しいオブジェクトを作ることができます。 なお、オブジェクト指向という概念については今回は触れません。オブジェクト指向という概念を掴みきれていない、自信がないという方は、JavaScriptのprototypeをしっかりと理解してから改めてその概念を学んでみるとすんなりと理解できるかもしれません。さらに、
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる（この計算をreflowと呼びます）ので
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;
こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが
こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します）。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
