JSPT

Javascriptはwebページを動作させるスクリプトとして扱う場合、HTML文書（ドキュメント）に組み込んで使用します。HTMLに組み込ませる方法はCSS同様、HTML文書に直接埋め込む場合と外部ファイルから読み込む場合の2種類あります。まずは、HTML文書に直接埋め込む場合のサンプルを示します。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Javascriptのサンプルソース</title>
<script type="text/javascript" language="Javascript">
<!--
//ここにスクリプトを記述。この行はコメントです。
document.write('Hallo! Javascript');
-->
</script>
</head>
<body>
<script type="text/javascript" language="Javascript">
/*
ここにスクリプトを記述。
この行はコメントです。
複数行にわたってコメントを書くことができます。
*/
document.write('<h1>Javascriptのテスト</h1>');
document.write('<p>bodyにもJavascriptは記述できます。</p>');
document.write('<img src="image/photo.jpg">');
<noscript>
<p>Javascriptを有効にしてください。</p>
</noscript>
</script>
</body>
</html>

上から説明していきます。

metaタグを記述する

まず4行目。HTML文書にJavascriptを記述する際は、metaタグを利用して、Javascriptを使用していることを明示しなければなりません。場合によってはこれをちゃんと記述していないとJavascriptが正常に動作しない場合もあるので注意です。

script typeを記述する

HTML文書にJavascriptを記述する際は、script type内に記述します。HTML 4.01ではlanguage=”Javascript”は非推奨なのですが、これを書かないとかなり古いブラウザではJavascriptを読み込めません。どこまでのブラウザを保障するかが問題となります。

Jacascriptを認識できないブラウザの対処

7行目(閉じタグは10行目）ではJavascriptを認識できないブラウザのための対処がなされています。Javascriptを認識できないブラウザは、スクリプトをテキスト（文字）として表示してしまうので、HTMLのコメントタグを使用して、テキストとして表示されないようにしています。

ただし、XHTMLではHTMLのコメントタグが利用できません。専用にコメントタグが用意されているのでそちらを使います。


//<![CDATA[
ここにスクリプトを記述。
//]]>

しかし、現在ブラウザは完全にXHTMLに対応しておらず、CDATAセクションを認識するかどうかもブラウザによってはまちまちの現状です。そのため、できるだけHTML文書に直接スクリプトを書かないほうが無難と言えば無難です。

大文字と小文字を区別する

Javascriptでは大文字と小文字を区別します。そのため10行目の例で言えば、Document.write(’Hallo! Javascript’);と最初のDを大文字で書いてしまえば動作しなくなってしまいます。

ステートメントの最後にセミコロン

ステートメント（1つの命令の最小単位）の最後にセミコロンをつけます。CSSもそうですね。CSSと同様に1行のみであればセミコロンは省略できますが、ステートメントの最後にセミコロンをつける習慣をつけておいたほうがよいので、1行でもセミコロンはつけましょう。

クォーテーションの入れ子

例えば22行目のように、クォーテーションを入れ子にしたいときがあるでしょう。その場合は、外部にシングルクォーテーションで囲んだら内部はダブルクォーテーションで囲みます。その逆も有効です。ただし、シングルクォーテーションをシングルクォーテーションで囲んだら（あるいはダブルクォーテーションをダブルクォーテーションで囲んだら）エラーになるので注意です。

では、さらに入れ子をしたいときはどうすればよいのか？その場合は、バックスラッシュ(\)を使用してクォーテーションをエスケープします。このあたりは、とほほのＷＷＷ入門のサイトを参考にされたし。

JavaScriptの ” と ‘ について

Javascript非対応のブラウザにメッセージを表示する

Javascript非対応のブラウザにメッセージを表示するには23行目（閉じタグは25行目）のようにnoscriptタグを使用します。この中には普通にHTMLタグも使用できます。

Javascriptスクリプトを外部ファイルから読み込む

HTMLとは別にJavascriptを管理したいときや、1つのスクリプトを複数のHTMLファイルで使用する場合は、Javascriptスクリプト用の外部ファイルを作成し、HTML文書に読み込ませます。その場合は、head内部に以下のように記述して外部ファイルを読み込ませます。

注意しなければならないのは、外部ファイルの拡張子を.jsにすることです。そうしなければJavascriptとして認識されません。

Comments: 0
Trackbacks: 0

[1日目]私のJavascriptに対するイメージ

2008-04-05 (土)
トレーニング
term

Javascriptと言えば、以下のことを思い浮かべます。

スクリプト言語
インタプリタ方式
クライアントサイドスクリプト
オブジェクト指向

用語が並ぶと？？？と頭がパニックになりますが、これらは学んでいくうちにだんだんと理解できるようになる（予定な）ので、ざっくりとだけ。

スクリプト言語

スクリプト言語（-げんご、scripting language）とは、アプリケーションソフトウェアやソフトウェアツールの動作内容を、台本（Script）のように記述するための、簡易的なプログラミング言語の総称である。

スクリプト言語 - Wikipediaより引用

プログラミング言語の中でも簡易的なものをさすようです。が、別にJavascriptが簡単だと思っちゃうと後で痛い目に遭う。台本（Script）のように記述するっていうのがよくわからない。きっとプログラミングしていくうちにわかるようになるはず＞＜

インタプリタ方式

インタプリタ（interpreter）とは、プログラミング言語で書かれたソースコードを逐次解釈しながら実行するソフトウェアである。プログラムの実行に主としてインタプリタが用いられるプログラミング言語をインタプリタ言語と呼ぶ。

インタプリタ - Wikipediaより引用

普段人が書いているコードは人にわかりやすく書いているだけであって、コンピュータはそのままでは解読できない。よって一度コンピュータが解釈（翻訳）する手間がいる。

Javaとかだったらコードをコンパイルしてコンピュータが解釈できる形にしたもの（classファイルとか）サーバにアップするのだけど、Javascriptは逐次コンピュータが解釈しながら実行しているという感じなのかな？

そのため、コンパイルよりもインタプリタのほうが解釈する手間分時間がかかるようですが、どのくらい違いがあるのかは実行内容などにもよるようです。

クライアントサイドスクリプト

クライアントサイド（client side）とは、コンピュータネットワーキングにおいて、クライアントサーバ関係におけるクライアントによって実行される操作・処理のことを指す。

クライアントサイド - Wikipediaより引用

クライアントとはこの場合ブラウザを指します。ブラウザによってコードが実行されるので、閲覧しているブラウザの種類によって実行結果が違ったりうまく実行できなかったりします。要は、Javascriptはブラウザ依存があるってことですね。

オブジェクト指向

オブジェクト指向（オブジェクトしこう）とは、オブジェクト同士の相互作用としてシステムの振る舞いをとらえる考え方である。

オブジェクト指向 - Wikipediaより引用

正直、オブジェクト指向とは何か？を理解できるのは結構難しいかもしれません。私も少しJavaをしたことがあるのですが、人のコードをいじくりまわしていてようやく「こういうことがオブジェクト指向なのね！」と感じる瞬間があったくらいですし。

オブジェクト指向って、プログラミングの設計方法みたいなものなのですよね。大掛かりなシステム設計などしたときに、Javaだったらカプセル化とか継承などの概念がすごく重要になってくるようなのですが、Javascriptでのオブジェクト指向に関しては全くよくわかりませんので、これから勉強していきたいと思います。

Javascriptにおけるオブジェクト指向を理解するために、このあたりのサイトを読んでみたい。