JavaScriptの勉強１　〜基礎の基礎 JavaScriptの概要とscriptタグ

業務上JavaScriptが必要になりそうなので今日から少しずつJavaScriptの勉強をしていくことにした。
何もわからないので基礎の基礎から勉強していく。

JavaScriptの特徴

JavaScriptの特徴は、ウェブページに簡単に追加できること。
JavaScriptでできることは、

- フォームの検証
- クッキーの処理
- ページ要素の外観の動的変更
- 要素の表示、非表示の切り替え
- アニメーションなどの効果の追加
- クリックなどのイベントに対する反応
- リロードなしでのデータの更新

など。

JavaScriptは、HTMLやXHTMLなど別の言語の内部に埋め込まれて使われることが多い。
HTMLのscriptタグをドキュメントに入れ、type属性にJavaScriptを以下のように指定し、コードを書く。

<script type="text/javascript">
　コード
</script>

ブラウザのファイルメニュー＞ファイルを開くでコードを書きこんだファイルを読み込めばブラウザに表示される。

scriptタグ

scriptタグとは？

scriptタグとは、ではさまれた部分はHTMLやXHTMLではないとブラウザに宣言している、という意味である。

、のどちらに入れてもよい。両方に入れてもよい。

に入れた方が良い場合

通常はに入れる。

に入れた方が良い場合

ページがロードされていく過程でJavaScriptがウェブページの要素を動的に作成する場合。

※ に入れる場合はCDATAセクションに入れる。
CDATAセクションは、XHTMLの処理系が解釈してはいけないテキストを、誤って解釈しないように収容する入れ物。CDATAセクションを指定しないとエラーが返ってきたりする。
CDATAセクションの開始タグ、終了タグはコメントアウトしておく。
コメントアウトしないと、JavaScriptのエラーになる場合がある。

JavaScriptのコメントの書き方は以下の2種類がある。

// コメント

それに続く一行をコメントアウトする。

/* コメント

　コメント */
複数行（2行以上）をコメントアウトする。

scriptの属性

scriptタグには以下のような種類(属性)がある。

type

type属性で種類を指定する。

- text/ecmascript(text/javascriptと同じ）
- text/jscript
- text/vbscript

など。
これはMIME(Multipurpose Internet Mail Extension)タイプを記述している。
MIMEとは、コンテンツのコード化方法とその形式を指定する方法。
text/javascriptにおいては、textがコード化方法、javascriptがその形式である。
MIMEタイプを指定すると、そのMIMEタイプを処理可能なブラウザはその部分を処理し、実行する。

defer

defer="defer"を指定すると、
deferを指定したスクリプトではドキュメントのコンテンツを生成しないため、ブラウザはスクリプトを飛ばして残りのページコンテンツを処理し、先にページの処理と表示をした後で、スクリプトに戻ってきて処理を行うようにブラウザに指示したことになる。これにより、大きなJavaScriptがコードにある場合、その部分を飛ばして先にページを表示できるので、ページのロードを高速化できる。

charset

そのスクリプトで使われている文字コードを指定する。
ふつうはHTMLと同じ文字コードを用いるので特に設定する必要はない。

ファイルやライブラリの読み込みを行う。
JavaScriptでは、原則としてJavaScriptコード全体を外部のJavaScriptファイルに入れて、srcで参照するようにする。

変数

変数はvarを使って宣言する。

var dt = Date();

dtという変数を宣言し、そこにDate関数を代入したことになる。
varはvariable(変数という意味）の略。

JavaScriptのコードの例

JavaScriptのコードの例を以下に示す。
に入れる場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>

<script type="text/javascript">
  var dt = Date();
  var msg = 'Hello, World! ' + dt;
  alert(msg);
</script>
</head>
<body>
</body>
</html>

に入れる場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
  var dt = Date();
  var msg = 'Hello, World! ' + dt;
  alert(msg);
//]]>
</script>
</body>
</html>