第1回 JavaScriptゼミ

Transcript 第1回 JavaScriptゼミ

第1回 JavaScriptゼミ
・
・
・
・
scriptエレメント
記述における諸注意
古いブラウザへの対応方法
外部ファイルとしての運用
発表日：06/10/06
発表者：鈴木朋央
scriptエレメントとは
Webブラウザにどの部分がJavaScriptのコードである
かを示してやる必要がある
<script> タグと </script> タグの間にスクリプトを記述
→ このタグ間を scriptエレメントと呼ぶ
scriptエレメントの指定(1/2)
scriptエレメントは、記述するコードや使用する
webブラウザによって、型を指定する必要がある
<script>タグ内の・・・
・ 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>”);
document.write(“<hr>”);
</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>”);
document.write(“<hr>”);
//-->
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>”);
document.write(“<hr>”);
スクリプトを外部ファイルにする(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に
エラーがあっても何も表示されない場合がある
JavaScriptのスクリプトをデバッグするにあたっ
て、どこがどう間違ってるのかわからずに困るこ
とがあるため、改善しておきましょう。
firefox、Internet Explorerともにツールメニュー
からのオプションでエラーの表示を設定できます
練習問題

以下の画像が表示されるようなスクリプトを作成しなさい。そ
の際、スクリプトファイルを外部ファイルとし、HTMLドキュメ
ント内で読み込むようにしなさい。

第1回 JavaScriptゼミ

Transcript 第1回 JavaScriptゼミ

Directory