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

Size: px

Start display at page:

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

きみつぐなぐも
7 years ago
Views:

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

始タグの文字列の先頭に / を付加したものです終了タグを省略できる場合も多いのですがきちんと書くのがよいでしょうまた終了タグが存在しないタグもあります例えば <BR> <IMG>や<HR>がそれです HTML については http://www.tohoho-web.com/www.

2 タグの内側で関数を定義してタグ側で実行することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上例のように, 関数の定義部分などをタグに, 表示を行う部分をタグに分けて記述することをお勧めします書式は以下の通りです [ JavaScript スクリプト ] JavaScript に対応していない Web ブラウザの場合,<SCRIPT>タグが無視され<SCRIPT>とで囲まれた部分が通常のテキストとして表示されてしまいますこれを避けるため, とでスクリプト全体を囲んでおきます <SCRIPT>タグが無視されてもと-->に囲まれた部分は Web ブラウザでは表示されません JavaScript に対応した Web ブラウザの場合,<SCRIPT>タグがまず認識されますので,その次の行以降はが見つかるまで,JavaScript であると見なされて処理が行われますただし, <SCRIPT>タグの次の行がである場合,この行は JavaScript 解釈ルーチンでは解釈されないことになっていますまた, --> の前には // という記号を必ず挿入しておきますこれは JavaScript のコメント文を示す記号ですそうしないと,JavaScript 解釈ルーチンが JavaScript として --> を

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

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

任意の位置に文字 ( 画像 )を表示する <SPAN>タグとスタイルシートを使って文字や画像を任意の位置に表示できます <SPAN>タグはそれ自体では意味をもたずスタイルシートの属性を適用する場合に利用します

4 position: absolute; top: 100px; left: 100px; visibility: visible; ない絶対位置指定 top や left と組み合わせて使用する表示画面上端からの距離を 100 ピクセル(ドット)とする表示画面左端からの距離を 100 ピクセル(ドット)とする表示するしないと指定 visible は表示する hidden は表示し top や left の値を変えてみるとどうなるか試してみましょう 50% などとして表示画面の割合で表示することもできます画面の中央に表示するには <SPAN>タグの要素を以下のようにします ( 画像の場合は左上が基準 ) <SPAN style="position: absolute; top: 50%; left: 50%; visibility: visible;"> <IMG src=" </SPAN> 5.JavaScript で位置を決める HTML 中では位置を決めずはじめは非表示としておいて JavaScript で位置を決め表示を指示します <TITLE>サンプル</TITLE> <SPAN id="emblem" style="position: absolute; visibility: hidden;"> <IMG src=" </SPAN> emblem.style.top = '100px'; emblem.style.left = '100px'; emblem.style.visibility = 'visible'; <SPAN>タグの id 要素で名前を付け JavaScript からはオブジェクトとして参照しています 6.うごかしてみる? JavaScript を使えばアニメーションも可能です

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

5 <TITLE>サンプル</TITLE> 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; <BODY onload="animate(emblem);"> <SPAN id="emblem" style="position: absolute; visibility: hidden;"> <IMG src=" "> </DIV> タグの内側で animate() 関数を定義しています animate() 関数は引数としてオブジェクト elem をとりまず非表示にした後位置を決めて表示するという操作を決められた時間間隔で繰り返します settimeout() 関数は一定時間後に関数を実行するという関数ですのでここでは 10 ミリ秒後に自分自身を呼び出すことになります cleartimeout() 関数は settimeout() 関数を停止させる関数ですここでは 100 回繰り返した後停止するようにしています 7.もっとおもしろい動きにする animate() 関数を変更すれば動きを変えることができますぐるぐる回る

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); }

visibility = 'hidden'; this.elem.style.top = '' + y+ 'px'; this.elem.style.left = '' +x + 'px'; this.

Taro-ホームページB5.jtd

Taro-ホームページB5.jtd 4 タグの基本 (Ⅳ) 画像基本 19 1 画像を入れる 2 画像の大きさを指定する 3

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

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