基本JavaScriptの基本
JavaScript の記述方法
unknown
JavaScript はWebページを動作するためのスクリプトです。
記述には、以下の2つの方法があります。
JavaScriptを使用しているページでは、meta要素のJavaScript使用の宣言を、head要素内に記述しておきましょう。
<head> <!--JavaScript使用の宣言--> <meta http-equiv='Content-Style-Type' content='text/javascript'> </head>
JavaScriptをWebページに埋め込む方法
<script language="JavaScript"> ~ </script>
ページ内にJavaScriptを記述するには、script要素を使用して、head要素またはbody要素内に記述します。
HTMLの場合、JavaScript未対応のブラウザでscript要素の中身がそのままページに表示されてしまうのを防ぐためにscript要素内のJavaScriptコードを
<!--
~-->
で囲みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <!-- JavaScript使用の宣言 --> <meta http-equiv='Content-Style-Type' content='text/javascript'> <script type="text/javascript"> <!-- /* ★HEAD要素内に記述可 */ /* 処理を記述 */ //--> </script> </head> <body> <script type="text/javascript"> <!-- /* ★BODY要素内に記述可 */ /* 処理を記述 */ //--> </script> </body> </html>
XHTMLの場合は、//<![CDATA[
~//]]>
で囲みます。
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- JavaScript使用の宣言 --> <meta http-equiv='Content-Style-Type' content='text/javascript'> <script type="text/javascript"> //<![CDATA[ /* ★HEAD要素内に記述可 */ /* 処理を記述 */ //]]> </script> </head> <body> <script type="text/javascript"> //<![CDATA[ /* ★HEAD要素内に記述可 */ /* 処理を記述 */ //]]> </script> </body> </html>
外部JSファイルをWebページに読み込む方法
外部JavaScriptファイルとは、スクリプト部分のみ(script要素不要)をページとは別のファイルに記述し、拡張子jsとして保存したファイルのことです。 何度も使用する関数などをまとめて外部JavaScript化しておくと、修正作業の効率化、ソースのダイエットにもなります。
読み込む外部JavaScriptファイルヘの絶対パス(URL)または相対パスをscript要素のsrc属性に指定します。 この読み込みのscript要素は、head要素またはbody要素内に記述できます。
<html> <head> <!-- JavaScript使用の宣言 --> <meta http-equiv='Content-Style-Type' content='text/javascript'> <!-- ★HEAD要素内に記述可 --> <script type="text/javascript" src="http://www.sample.com/js/sample.js"></script><!-- 絶対パス(URL)で指定 --> <script type="text/javascript" src="./js/sample.js"></script><!-- 相対パスで指定 --> </head> <body> <!-- ★BODY要素内に記述可 --> <script type="text/javascript" src="http://www.sample.com/js/sample.js"></script> <script type="text/javascript" src="./js/sample.js"></script> </body> </html>
JavaScriptが無効の場合に代替テキストを表示
<noscript>
unknown
JavaScriptを無効にしている場合に表示させる代替テキストをnoscript要素で挟みます。 JavaScriptが有効になっている場合、このタグで囲まれている部分は表示されません。
noscript要素はhead要素内には記述できません(body要素内のみ記述可)。
<body>
<script type="text/javascript">
document.write('Hello!');
</script>
<noscript>このページはJavaScriptを有効にしてご覧下さい</noscript>
</body>
文法
unknown
JavaScriptは、大文字小文字を区別します。 変数名を付ける時や文字列の比較をする時は、大文字小文字が区別されることに注意しましょう。
JavaScriptで文字列を使用する場合は、シングルクウォート('
)またはダブルクォート("
)で文字列を囲みます。
これらで囲まれた文字列は、数値であっても文字列(String)扱いとなります。
/* 変数の値 */ var s1='a'; var s2='A'; if(s1 == s2) document.write('等しい'); else document.write('等しくない'); // '等しくない' と出力される /* 変数名 */ var a='apple'; var A='banana'; document.write(a); // apple document.write(A); // banana
複数の命令文をつなげて記述する場合は、各命令文の終わりにセミコロンを付ける必要がありますが、1つの命令文だけの場合、セミコロンを付けなくてもかまいません。
i=1
j=1
i=1; j=1; //命令文をつなげて記述する場合にはセミコロンが必要
命令文の途中で改行してもかまいませんが、単語の途中で改行するとスクリプトエラーが発生します。
○良い例 document.write('Hello!', 'World'); ×悪い例 document.write(' Hello','Wor ld');
変数名の命名規則
unknown
JavaScriptでは変数に、数値、文字列、真偽値(TRUE/FALSE)、オブジェクトを格納できます。 変数名は好きに付けられますが、予約語や数値から始まる変数名は使用できません。
○良い例 va, _va ×悪い例 5va, true, false, var, for
JavaScriptの予約語
unknown
以下は、JavaScriptであらかじめ予約されている予約語です。 予約語を、関数名や変数名に指定することはできません。
- abstract
- boolean
- break
- byte
- case
- catch
- char
- class
- const
- continue
- debugger
- default
- delete
- do
- double
- else
- enum
- export
- extends
- false
- final
- finally
- float
- for
- function
- goto
- if
- implement
- import
- in
- instancecof
- int
- interface
- long
- native
- new
- null
- package
- private
- protected
- public
- return
- shor
- static
- super
- switch
- synchronized
- this
- throw
- throws
- transient
- true
- try
- typeof
- var
- void
- voatile
- whie
- with
オブジェクト/プロパティ/メソッド/イベントについて
unknown
オブジェクト
ウィンドウ、ドキュメント、フォーム、文字列などをWebページを制御する様々なモノをオブジェクトといいます。 各オブジェクトには以下の「プロパティ」、「メソッド」があり、それらを組合せてオブジェクトの状態を変更したり、 オブジェクトに命令を与えます。
プロパティ
プロパティとは、オブジェクトの属性のことです。 例えばwindowオブジェクトには、ウィンドウ名を表すnameプロパティがあります。 window.nameとしてウィンドウ名を参照したり、window.name='xxx';としてウィンドウ名を設定できます。
メソッド
メソッドとは、オブジェクトに与える命令のことです。 オブジェクトごとに様々なメソッドがあります。 例えばwindowオブジェクトには、ウィンドウを開くopenメソッドや、ウィンドウを閉じるcloseメソッドがあり、 window.open()、window.close()とすることでオブジェクトに命令を与えます。
イベント
イベントは、何らかの動作のことです。 例えば、マウスボタンをクリックした、Webページが読み込まれたなどの動作が起こった時に発生します。 詳細は、イベント・イベントハンドラ一覧で解説しています。 また、eventオブジェクトを使って、発生したイベントの情報を取得することもできます。