Search

JavaScript の記述方法

unknown

JavaScript はWebページを動作するためのスクリプトです。
記述には、以下の2つの方法があります。

  1. 直接Webページに埋め込む
  2. 外部JSファイルをWebページに読み込む

JavaScriptを使用しているページでは、meta要素のJavaScript使用の宣言を、head要素内に記述しておきましょう。

<head>
<!--JavaScript使用の宣言-->
<meta http-equiv='Content-Style-Type' content='text/javascript'>
</head>

JavaScriptをWebページに埋め込む方法

<script type="text/javascript"> ~ </script> ※推奨
<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ページに読み込む方法

<script type="text/javascript" src="外部JSファイルのURL"></script>

外部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

<noscript>代替テキスト</noscript>

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オブジェクトを使って、発生したイベントの情報を取得することもできます。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop