記述位置と記述方法
- HTMLソース内に直接記述
- HTMLソース内に関数を直接記述
- HTMLからJavaScriptの外部ファイルを読み込み
HTML内への直接記述
HTMLソースに以下のように記述。
|
1 2 3 4 |
<script> document.write("<p>Javascriptテスト<br>"); document.write("body内直接記述の例</p>"); </script> |
正確には<script type=”text/javascript”>だが、HTML5ではscript要素のtype属性はデフォルトでJavaScriptなので省略可能。
関数の直接記述
head要素内に以下を記述し、
|
1 2 3 4 5 6 7 |
<script> <!-- function test0() { document.write("head要素内でのJavaScript実行例"); } //--> </script> |
body要素で以下のように記述することもできる。
|
1 2 3 4 5 |
<script> <!-- test0(); //--> </script> |
外部ファイルの読み込み
例えば以下の内容のファイルを”test1.js”として準備。
保存する場所は、HTMLファイルと同じディレクトリにある”js”ディレクトリの下とする。
|
1 2 3 |
function test1() { alert("JavaScriptの外部ファイルテスト"); } |
headセクションで以下のようにスクリプトファイルを読み込む。
|
1 |
<script src="./js/test1.js"></script> |
そして、たとえば以下のように関数を呼び出して実行。
|
1 |
<input type="button" value="JavaScript外部ファイル実行" onclick="test1()"> |
覚え書き
VistaとSugarSyncでの問題
Windows Vista上のSugerSyncと同期したフォルダ内でこれを実行したところ、alert内の文字が文字化けしてしまった。HTMLソースがUTF-8で、scriptタグの属性に明示的に”charset=UTF-8″を記述しても解消されない。また、スクリプトソースの<!–などのコメントを除き、出力文字を全て半角としても現象は変わらない（そもそもalertダイアログの冒頭に表示される日本語が文字化けしている可能性もある）。
これに対して、デスクトップ上に新たなフォルダをつくり、関係するHTMLファイルとCSSファイルを移動させて実行したところ、以下のような挙動。本現象が発生したVista＋SugarSyncの不安定性に関しては、今しばらく調査が必要。
- デスクトップ上に”dev”フォルダを作成し、SugarSyncの動機フォルダから必要なファイルとフォルダを移動
- devフォルダ内のhtmlファイルを直接エディタで編集可能
- しばらく編集、保存、ブラウザ表示を繰り返していると、htmlファイルにロックがかかる
- devフォルダの名前を変更しようとしたところ、ロックがかかる
- 表示中のブラウザを閉じるとロックがかからんくなったので、フォルダ名をdev→dvに変更
- その後ロックがかからなくなる
2015-12-21.