From 37f0115b9d1623093581807fe5c7a98403408a03 Mon Sep 17 00:00:00 2001 From: Mitsuru Ogawa Date: Sun, 5 Jan 2014 22:29:10 +0900 Subject: [PATCH] add translation of your look at javascript --- .../your_first_look_at_javascript.txt | 107 ++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 Beginners-guide/your_first_look_at_javascript.txt diff --git a/Beginners-guide/your_first_look_at_javascript.txt b/Beginners-guide/your_first_look_at_javascript.txt new file mode 100644 index 0000000..ede3ff7 --- /dev/null +++ b/Beginners-guide/your_first_look_at_javascript.txt @@ -0,0 +1,107 @@ +概要 + +今度は手を動かすときです。この記事ではJavaScriptを使用しコーディングの基本的な概要について説明します。 + + +はじめに + +このWeb標準カリキュラムでは、JavaScriptの基礎を説明します。 +一般的な基礎知識から、どこで、どうやって利用するものなのか、どんな問題を回避すべきかなど、一流のJavaScript開発者になるための旅の助けになってくれると思います。 + + +JavaScriptとは何か、そしてどのように実行されるのか? + +JavaScriptはテキストベースの言語で、実行前に変換する必要がありません。JavaやC++のような他の言語は、実行可能にするためコンパイルする必要があります。しかしJavaScriptはパーサーと呼ばれる、コードインタープリターにより、即座に実行されます。(ほぼすべてのブラウザーはJavaScriptパーサーを搭載しています。) + +ブラウザでJavaScriptを実行する方法は二つあります。HTMLドキュメント内のどこかにscript要素を置くか、JavaScriptの外部ファイル（.jsの拡張子）を置くやり方で、HTMLドキュメント内にsrc属性を持った空のscript要素をつくり、そのファイルを参照します。このセクションではこの二つのやり方の両方を見ていきましょう。 + +JavaScript は ブラウザ内で実行する必要はありません。コンソール環境でJavaScriptを実行するには、Mozilla Rhino を確認してください。サーバー環境でJavaScriptを実行するには node.js でチェックしてください。 + + +HTMLドキュメントにJavaScriptを記述する + +JavaScriptをHTML内に記述するのに最も基本的な例は以下のようになります: + + + +ページ内の任意の場所に置くことができ、それを実行することができますが、いくつかの場所は他より間違いなく優れている。具体的には「JavaScriptのセクションを置くには」を参照してください。 + +将来は様々なタイプのスクリプトを使用できるようになるかもしれません。そこで使用しているスクリプトをMIMEタイプとして追加しておくとよいでしょう。 + + + +注: language="javascript" 属性が指定されたスクリプトの例題をWeb上で見つけることがあるでしょう。この記述は標準でなく、まったく意味がありません。ですから、見つけ次第、削除してしまいましょう。これはVBScriptがまだ一般的だった古い時代の遺物です。VBScriptはIEでしか動作せず、もはや使用されていません。 + +昔はブラウザがHTMLとしてJavaScriptのコードを表示してしまうことを防ぐためにHTMLのコメントでJavaScriptをコメントアウトする必要がありました。非常に古いブラウザにだけ適用する必要があるため、もはや頭を悩ます必要はありません。 +しかし、DOCTYPEでstrictなXHTMLを使うのであれば、HTMLをバリデートするためにはCDATAブロックでJavaScriptを囲む必要があります（何故なのかは気にしないで下さい。この段階ではそれほど重要ではありません）。 + + + +しかし、strictなXHTMLドキュメントにはJavaScriptを組み込むべきでなく、外部ファイルとして記述すべきです。 + + +外部 JavaScript ファイルのリンク + +（同じサーバー上またはどこかのインターネット上で）外部JavaScriptにリンクするためにしなければならないことは script 要素に src 属性を追加することです： + + +ページ内でこの要素を見つけると、ブラウザーはmyscript.jsをロードし、実行します。src属性を持つscript要素の内容はすべて無視されます。以下の例題ではmyscript.jsがロードされ、ファイルに記述されたコードが実行されます。script要素の内容であるalertは実行されません。 + + + +外部JavaScriptファイルにコードを保存しておくことは良いことです + +いくつかのHTMLドキュメントに同じJavaScriptの機能を適用しても、メンテナンスを容易に保つことができます。機能の変更がある場合、行う必要がある作業は1つのファイルを変更することです。 + +JavaScriptはブラウザにキャッシュされます。 +このキャッシングの仕組みは、まずあなたのサイトに来たネットサーファーのコンピューターにJavaScriptのコピーを格納します。 +もう一度そのユーザーが訪れた場合、そのユーザーはサーバーからではなく、コピーされたローカルコンピューターのスクリプトを読み込みます。 +そのため、より早く読み込むことができます。 + +更新が必要になったときに、スクリプトを簡単に探すことができます。長いHTMLドキュメントの中から、修正すべき箇所を延々と調べる必要はありません。 + +エラーを修正するデバッグツールやエラーコンソールとして容易になり、エラーが含まれており、確実に行番号を報告しているファイルを教えてくれます。 + +一つのドキュメントに、必要なだけJavaScriptファイルを追加できます。しかしこの点に関してはいくつか留意する点があります。 + + +JavaScriptとブラウザーのパフォーマンス + +JavaScriptをタスクごと、異なるファイルに分割するのはよいアイデアです。管理が楽になりますし、バグの修正も容易です。例えば以下のようにスクリプトを分割できるでしょう: + + + + + + + + +しかしこのような開発上の利点はパフォーマンスの悪化という形で相殺されてしまいます。この副作用の程度はブラウザーごとに異なりますが、最もシェアが高いブラウザーで発生する最も悪いシナリオでは以下のようになります: + +script要素に達するたび、ブラウザーはドキュメントの描画を一時停止します。 + +それからブラウザーはsrc属性に記述されたJavaScriptファイルを読み込みます。他のサーバーのファイルを使用する場合、ブラウザーはサーバーを検索する必要があります。 + +次のスクリプトにアクセスする前に、スクリプトが実行されます。 + +このことは、含まれている全てのスクリプトが実行されるまで、Webサイトのディスプレイ表示速度が遅くなってしまうことを意味しています。 +これはサイト訪問者をイライラさせてしまいます。 + +ことができます。Web上にはこれを実現するためのスクリプトがいくつか存在します。例えばEd EliotがPHPで書いたものがあります。 + +この状況を回避する方法の一つとして、使用するすべてのJavaScriptファイルを一つのファイルに統合するバックエンドスクリプトを使用することです。この方法ではスクリプトを分割することでメンテナンスを容易にするという利点を活かしたまま、Webページの表示遅延を防ぐことができます。Web上にはこれを実現するためのスクリプトがいくつか存在します。例えばEd EliotがPHPで書いたもの (http://www.ejeliot.com/blog/73) があります。 + +描画の遅延はJavaScriptをドキュメントのどこに配置するかにも影響を受けます。