第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法 ・ 記述における諸注意 ・ 古いブラウザへの対応方法 ・ 外部ファイルとしての運用 発表日：06/10/06 発表者：鈴木 朋央
scriptエレメントとは Webブラウザにどの部分がJavaScriptのコードであるかを示してやる必要がある <script> タグと </script> タグの間にスクリプトを記述 → このタグ間を scriptエレメント と呼ぶ
scriptエレメントの指定(1/2) scriptエレメントは、記述するコードや使用するwebブラウザによって、型を指定する必要がある ・ typeアトリビュート ・ languageアトリビュート のほか、 <metaタグ>などで指定
scriptエレメントの指定(2/2) JavaScriptのコードを記述する場合(HTML4.0以降) <script type=“text/javascript”> ＊この部分にJavaScriptのコードを記述 </script> 古いブラウザ（HTML4.0以前）への対応方法 → languageアトリビュートで指定 <script language=“JavaScript” type=“text/javascript”>
<meta>タグによる指定 デフォルトのスクリプト言語の指定 HTML4.01の仕様では、<meta>タグによるデフォルトのスクリプトを指定すべきであるとされている 指定方法として・・・ <meta http-equiv=“Content-Script-Type content=“text/javascript”>
JavaScriptのスクリプト例 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=“Content-Type” content=“text/html;charset=Shift_JIS”> <meta http-equiv=“Content-Script-Type” content=“text/javascript”> </head> <body bgcolor=“#ffffff”> <script language=“JavaScript” type=“text/javascript”> document.write(“<hr>”); document.write(“<h1>JavaScriptのテスト</h1>”); </script> </body> </html>
実行結果
記述における諸注意(1/2) クォーテーション内のクォーテーション document.write(“<img src=“new.gif”>”); このように2重になってしまう場合は、シングルクォーテーションを適用する → document.write(“<img src=‘new.gif’>”); 大文字と小文字 正常：document.write(“Hello”); エラー：Document.write(“Hello”);
記述における諸注意(2/2) コメント ・「//」以降のその行のすべての文字 ステートメントの終わり セミコロン「；」で判断する。 ・「/*」から「*/」までのすべての文字 ステートメントの終わり セミコロン「；」で判断する。 例： document.write(“<h1>”,”JavaScriptの例です”,“</h1>”);
記述における諸注意(3/3) 記述位置 bodyエレメントだけでなく、headエレメントにも記述可能である。
古いWebブラウザを用いる場合(1/2) <script></script>タグを解釈できない場合がある → 対処法として、スクリプト部分をHTMLのコメ ントタグである「<!--」と「//-->」で囲む 例： <!-- document.write(“center”) document.write(“<hr>”); document.write(“<h1>これはJavaScriptです</h1>”); //--> JavaScript対応のブラウザでは正常に表示され、非対応のブラウザでは無視される
古いWebブラウザを用いる場合(2/2) JavaScriptに対応していない、もしくは無効にしているWebブラウザで表示させたい場合 → <noscript></noscript>タグで囲む 例： <noscript> <h1>このページはJavaScriptを有効にしていないと一部機能が使用できません。</h1> </noscript> ＊JavaScriptの有効/無効の設定に注意しましょう！
スクリプトを外部ファイルにする(1/2) スクリプトの部分を別ファイルとしておくことが可能（スクリプトファイルの拡張子は必ず「.js」とする） 読み込むには・・・ <script>タグのsrcアトリビュートによりスクリプト ファイルのパスを指定 例：ext.jsの中身（ファイルの場所がカレントディレクトリの場合） document.write(“<hr>”); document.write(“<h1>これは外部のJavaScriptです</h1>”);
スクリプトを外部ファイルにする(2/2) <html> <head> <meta http-equiv=“Content-Script-Type” content=“text/javascript”> <title>外部JavaScriptの呼び出し</title> </head> <body bgcolor=“#ffffff”> <script type=“text/javascript” src=“ext.js” > </script> </body> </html>
補足～JavaScriptのエラー表示 Webブラウザの設定によっては、JavaScriptにエラーがあっても何も表示されない場合がある firefox、Internet Explorerともにツールメニューからのオプションでエラーの表示を設定できます
練習問題 以下の画像が表示されるようなスクリプトを作成しなさい。その際、スクリプトファイルを外部ファイルとし、HTMLドキュメント内で読み込むようにしなさい。