★Webページ作成支援~Simple Style★

JavaScriptの組み込み方法Installation

JavaScript内のスクリプトは、同じような方法で組み込みできます。
組み込み方法が違う場合は、注釈などを参照してください。
ここでは、下記のサンプル「テキストフィールドに文字を点滅表示する」で説明しています。

サンプル-テキストフィールドに文字を点滅表示する

サンプルの表示

ソース

JavaScript
<script type="text/javascript">
//--------------------------------------------------------
// テキストフィールドに文字を点滅表示する
//--------------------------------------------------------
var msg  = new Array("JavaScript設置方法"); //表示するコメント
var msec = 500;        //点滅速度
var box_size = 22;     //表示するボックスの文字数(半角1文字)

document.write("<form name='sampleForm'>");
document.write("<input type=text size='+box_size+' name='area1' readonly></form>");

function blink_comment(){
(document.sampleForm.area1.value) ? 
document.sampleForm.area1.value="" : document.sampleForm.area1.value = msg;
}
setInterval("blink_comment()",msec);
</script>

設置方法

HTML文書内に記述する
HTML文書のscript要素内にスクリプトを書く方法
HTMLの場合
<script type="text/javascript">
<!--
 ここにスクリプトを記述します。
//-->
</script>

XHTMLの場合
<script type="text/javascript">
//<![CDATA[
 ここにスクリプトを記述します。
//]]>
</script>

HTML5の場合
<script>
 ここにスクリプトを記述します。
</script>
HTML5では、JavaScript(「text/javascript」)がデフォルトのスクリプト言語となっているため、こうした指定は必要ありません。(記述しても可)
(当サイトでは、type属性を省略していない場合があります。)


Sample Source 内をコピーしてご自分のページに貼り付ければ利用できます。
<head></head>の中か、ソースを使いたいページの<body>~</body>内に記述します。
※コピー&ペーストをしただけでは動作しない場合は、下記「コピー&ペーストの注意」を参照してください。


調整・変更
msg = new Array("JavaScript設置方法");
// 表示するコメントは変更できます。
msec=500;
// 点滅速度は好みに応じて数字を変更します。
box_size=22;
// 表示するボックスの文字数(半角1文字)全角文字は1文字=2、となります。

外部ファイルに記述して読み込む

外部ファイルとして指定する場合は、
<script type="text/javascript"><!-- と //--></script> または、
<script> と </script>を除いた、スクリプトだけを記述した内容で別にファイルを作ります。
拡張子は、*.js です。
これをscript要素のsrc属性でファイル名(URL)を指定して読み込む方法です。
外部ファイルを使えば、1つのJavaScriptファイルを複数のHTML文書で使用できます。

★…スクリプトファイル名(URL)
<script type="text/javascript" src="★"></script>


例として「Comment.js」というファイル名にします。
文字コードは「UTF-8」で保存します。
保存場所はHTMLファイルと同じフォルダ内とします。
使いたいページの<body>~</body>内に記述します。
HTML
<script type="text/javascript" src="Comment.js"></script>

外部ファイルの文字コード宣言

スクリプトが記述された外部ファイルと読み込む側のHTMLファイルなどが同じ文字コードであればいいのですが、多くのページで共有して利用されるスクリプトファイルなどで既に別の文字コードで記述され作成たファイルを読み込みたい場合があります。
この時は<script>要素のcharset属性に外部ファイルの文字コードを指定します。

★…スクリプトファイル名(URL)
●…外部ファイルの文字コード
<script type="text/javascript" src="★" charset="●"></script>

HTML
<script type="text/javascript" src="Comment.js" charset="UTF-8"></script>


  • 当サイトでは、.htmlファイル/.jsファイル/.cssファイルなど、文字コードを「UTF-8」で統一しています。「UTF-8」は国際化対応にも優れ、HTML5をはじめとした、さまざまな技術で推奨されている文字コードです。
    文字コードについて十分な理解がないうちは、「UTF-8」で統一しておくことをお勧めします。
  • Mac版IE4.5やwin版IE5.01では、外部jsファイルを、Unicode(UTF-8)にしないと文字化けします。
    (CSSの場合は、CSSファイルの先頭に 「@charset "UTF-8";」を書けばよいのですが、JavaScriptの場合はファイル内に記述する方法がありません。
    そこで、<script>タグ内に 「charset="UTF-8"」 を記述します。)
  • Unicodeに対応していないブラウザ(IE4以前、NN4.06以前)も存在しますが、ここでの記述はありません。

スタイルシートの定義

スタイルシート
要素に設定するスタイル情報をHTML文書中に記述します。
head要素内(<head>~</head>)、
styleタグ(<style type="text/css"><!-- --></style>)の間に記述します。
<style type="text/css"><!--
 /* スタイルの指定 */
--></style>


スクリプトの中でクラス名などを取り扱うとき、スタイル定義しておく必要があります。
スクリプトの中と同じクラス名になります。
クラス名は”.”に続き任意の英数字で指定します。

◆HTML5での<style>のtype属性
属性値が「text/css」である場合は、type属性は不要です。
<style>
 /* スタイルの指定 */
</style>
(当サイトでは敢えて省略していない記述が多いです。)


例:input要素に定義します。
HTML
<style>
input {
  font-size: 12px;    /* フォントサイズ */
  font-weight: normal;/* フォント太さ   */
  color: #ff0000;     /* フォントカラー */
}
</style>


外部のスタイルシートファイル
外部のスタイルシートファイルで定義している場合はlinkタグを使って読み込ませます。
head要素内(<head>~</head>)に記述します。

例:スタイルシートファイル”style_text.css”をリンクさせる。
HTML
<link rel="stylesheet" href="style_text.css" type="text/css">

スタイルシートを使用しない場合
スタイルシートを使用しない場合は、要素に直接記述します。

例:フォントサイズ:12ピクセル フォント色:赤;
HTML
document.write("<form name='sampleForm'>");
document.write("<input type=text size='+box_size+' name='area1' readonly  style='font-size:12px; color:red;'></form>");

コピー&ペーストの注意

このサイトでは、JavaScriptソースを殆ど外部入力にしていますので、表示されているサンプルソースはオリジナルのものではありません。
記述ミスなどがあったとき、動作しない場合があります。

表示されているソースをコピー&ペーストする場合は問題ありませんが、HTMLのソース表示からコピー&ペーストする場合は以下の注意が必要です。
入力したとおりに表示する<pre>タグを使用していますが、タグの表記に用いられている記号(<、>、&など)や特殊文字はエスケープ・エンコードしていますので、HTMLの文字実体参照変換する必要があります。

例:ブラウザ上の表示
文章を改行させるには<br>ダグを使います。

HTML記述文字コード
文章を改行させるには&lt;br&gt;ダグを使います。

エスケープ・エンコードされている場合は、文字実体を参照して修正してください。

ソースの改行

処理の区切りは「;」 で表します。
それが命令文の1行となっています。
1行の命令文が長くなる場合は、途中で改行を入れても動作に影響はありません。
ただし、プログラムを構成する単語や文字列の途中で改行を入れることはできません。
文字列などの途中で改行されると正常に動作せずエラーとなります。


例:1つの命令が右端で折り返されている
document.write('<div id="Sample'+i+'" style="position:absolute; margin:0px; padding:10px; visibility: hidden; right:10px; bottom:10px;">');
ソースの中で折り返し部分がありますが、改行ではありません。
改行されている場合は取り除いて1行としてください。
( から ) までが1つの文字列型です。
そのなかの「;」は、styleの区切り記号の「:」や「;」であり、命令文の区切りではありません。


例:1つの命令を2行にした場合
「+」または「,」(カンマ)で区切ります。
document.write( "この文字の色は"
 + document.vlinkColor + "です。" );

//または、
document.write( "この文字の色は",
   document.vlinkColor, "です。" );
ここでは命令文の途中で改行を入れても動作します。

HTMLの文書型宣言Document Type Definition(DTD)

比較的新しいブラウザでは「標準準拠(Standard)モード」と「互換(Quirks)モード」という、異なる表示モードを備えています。

ここでのスクリプトは、特別の記載がない限り、「標準準拠モード」で動作するように作成しています。
文書型宣言(DTD)をしない場合は互換モードとなりますので、HTMLのDTDを下記のように記述し「標準準拠モード」にしてください。

標準モードで動作するDTDの例
HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5
<!DOCTYPE html>
HTML5ではDTDが存在しないため、DTDを表示する必要がなくなりシンプルで書きやすいものになっています。IE6も含めて、主要なブラウザでは文書の先頭に記述することで標準モードとなります。

ラインを表示