タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(1)

情報メディアとインターネット授業資料(2011.7.4) 1.HTML の基本 HTML ファイルというのは例えば以下のような内容のテキストファイルです。拡張子を.html また は.htm とするのが普通で、Web ブラウザで読み込まれて中身の表示が行われます。 <と>で囲まれたものは、「タグ」といい、Web ブラウザに見え方などを指示するものです。表示は 行われません。タグには開始タグと終了タグがあり、終了タグは開始タグの文字列の先頭に「/」を付 加したものです。終了タグを省略できる場合も多いのですが、きちんと書くのがよいでしょう。また、 終了タグが存在しないタグもあります。例えば、<BR>、<IMG>や<HR>がそれです。HTML について は http://www.tohoho-web.com/www.htm などを参照して自習してください。このリンク先は、オ ンラインで参照できる HTML レファレンスの中では最もわかりやすいものの一つです。 2.スクリプトの書き方 HTML ファイルに JavaScript を記述するには,HTML タグの一つである<SCRIPT>タグを使います。 language 属性は必ず"JavaScript"と指定します。HTML ファイルに書かれた JavaScript のことを「ク ライアントサイド JavaScript」と言います。 <SCRIPT>タグは<HEAD>タグ,<BODY>タグ,どちらの内側にも書くことができますので,<HEAD> <HTML> <HEAD> <TITLE>Simple HTML File</TITLE> </HEAD> <BODY> <P>Hello</P> </BODY> </HTML> <HTML> <HEAD> <TITLE>JavaScript サンプル</TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> <!-- document.write('この文字列は JavaScript を使って出力されています'); // --> </SCRIPT> </BODY> </HTML>

(2)

タグの内側で関数を定義して<BODY>タグ側で実行することもできます。

上例のように,関数の定義部分などを<HEAD>タグに,表示を行う部分を<BODY>タグに分けて記 述することをお勧めします。

書式は以下の通りです。

JavaScript に対応して いない Web ブラウザの 場合, <SCRIPT> タグが 無視され <SCRIPT> と </SCRIPT>で囲まれた部分が通常のテキストとして表示されてしまいます。これを避けるため,「<!--」 と「// -->」でスクリプト全体を囲んでおきます。<SCRIPT>タグが無視されても<!--と-->に囲まれた 部分は Web ブラウザでは表示されません。

JavaScript に対応した Web ブラウザの場合,<SCRIPT>タグがまず認識されますので,その次の行 以降は</SCRIPT>が見つかるまで,JavaScript であると見なされて処理が行われます。ただし, <SCRIPT>タグの次の行が「<!--」である場合,この行は JavaScript 解釈ルーチンでは解釈されないこ とになっています。また,「-->」の前には「//」という記号を必ず挿入しておきます。これは JavaScript のコメント文を示す記号です。そうしないと,JavaScript 解釈ルーチンが JavaScript として「-->」を <HTML> <HEAD> <TITLE>JavaScript サンプル</TITLE> <SCRIPT type="text/javascript"> <!-- function write(str) { document.write(str); } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> <!-- write('Hello World!'); // --> </SCRIPT> </BODY> </HTML> <SCRIPT type="text/javascript"> <!-- [ JavaScript スクリプト ] // --> </SCRIPT>

(3)

解釈しようとしてエラーになってしまいます。 3.使用しているブラウザを確認する Web ブラウザが何であるかを確認する HTML ファイル以下のようになります。 4.任意の位置に文字(画像)を表示する <SPAN>タグとスタイルシートを使って、文字や画像を任意の位置に表示できます。<SPAN>タグは それ自体では意味をもたず、スタイルシートの属性を適用する場合に利用します。 スタイルシートをタグ内で使用する場合は、「style=""」として「""」の中に記述します。 <HTML> <HEAD> <TITLE>Web ブラウザチェック</TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> <!-- browser = navigator.appName document.write('ブラウザは' + browser + 'です。') // --> </SCRIPT> <NOSCRIPT> <P>このブラウザは Web ページスクリプトに対応していません。</P> </NOSCRIPT> </BODY> </HTML> <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <BODY>

<SPAN style="position: absolute; top: 100px; left: 100px; visibility: visible;"> <IMG src="http://www.kagoshima-u.ac.jp/about/emblem.gif">

</SPAN> </BODY> </HTML>

(4)

top や left の値を変えてみるとどうなるか試してみましょう。「50%」などとして、表示画面の割合 で表示することもできます。画面の中央に表示するには、<SPAN>タグの要素を以下のようにします (画像の場合は左上が基準)。 5.JavaScript で位置を決める HTML 中では位置を決めず、はじめは非表示としておいて、JavaScript で位置を決め、表示を指示 します。 <SPAN>タグの「id」要素で名前を付け、JavaScript からはオブジェクトとして参照しています。 6.うごかしてみる? JavaScript を使えばアニメーションも可能です。

position: absolute; 絶対位置指定。top や left と組み合わせて使用する。 top: 100px; 表示画面上端からの距離を 100 ピクセル(ドット)とする。 left: 100px; 表示画面左端からの距離を 100 ピクセル(ドット)とする。

visibility: visible; 表示するしないと指定。「visible」は表示する。「hidden」は表示し ない。

<SPAN style="position: absolute; top: 50%; left: 50%; visibility: visible;"> <IMG src="http://www.kagoshima-u.ac.jp/about/emblem.gif"> </SPAN> <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <BODY>

<SPAN id="emblem" style="position: absolute; visibility: hidden;"> <IMG src="http://www.kagoshima-u.ac.jp/about/emblem.gif"> </SPAN> <SCRIPT type="text/javascript"> <!-- emblem.style.top = '100px'; emblem.style.left = '100px'; emblem.style.visibility = 'visible'; // --> </SCRIPT> </BODY> </HTML>

(5)

<HEAD>タグの内側で animate()関数を定義しています。animate()関数は、引数としてオブジェクト elem をとり、まず非表示にした後、位置を決めて表示する、という操作を決められた時間間隔で繰り 返します。setTimeout()関数は一定時間後に関数を実行する、という関数ですので、ここでは 10 ミリ 秒後に自分自身を呼び出すことになります。clearTimeout()関数は setTimeout()関数を停止させる関 数です。ここでは 100 回繰り返した後、停止するようにしています。 7.もっとおもしろい動きにする animate()関数を変更すれば動きを変えることができます。 ぐるぐる回る <HTML> <HEAD> <TITLE>サンプル</TITLE> <SCRIPT type="text/javascript"> <!-- function animate(elem) { i += 1; this.elem = elem; this.elem.style.visibility = 'hidden'; this.elem.style.top = '' + i + 'px'; this.elem.style.left = '' + i + 'px'; this.elem.style.visibility = 'visible'; timerid = setTimeout('animate(this.elem)',10); if(i > 500) clearTimeout(timerid); } var i = 0; // --> </SCRIPT> </HEAD> <BODY onload="animate(emblem);">

<SPAN id="emblem" style="position: absolute; visibility: hidden;"> <IMG src="http://www.kagoshima-u.ac.jp/about/emblem.gif ">

</DIV> </BODY> </HTML>

(6)

function animate(elem) { i += 1; this.elem = elem; x = Math.round(100*Math.cos(Math.PI/180*i)+100); y = Math.round(100*Math.sin(Math.PI/180*i)+100); this.elem.style.visibility = 'hidden'; this.elem.style.top = '' + y+ 'px'; this.elem.style.left = '' +x + 'px'; this.elem.style.visibility = 'visible'; timerid = setTimeout('animate(this.elem)',1); if(i > 1000) clearTimeout(timerid); }

Updating...

参照

Updating...

関連した話題 :