FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科31日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科31日目

職業訓練WEBクリエーター科31日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

1コマ目

JavaScriptの勉強

今日から使用する教科書は、ゼロからはじめるJavaScriptを使用する。

CD-ROMの内容をインストールする。

ゼロからはじめるJavaScript P3

一章 JavaScriptとは?

JavaScriptとは

ゼロからはじめるJavaScript P9~12

WEBページに動きを付ける。

自動的な動き&ユーザー操作に反応させる。

どのような動きができるかとゆうと・・・

  • ポップアップウィンドウを表示させる。
    ※新しいページを出すことができる。その際にウィンドウの設定もすることができる。
  • 画像に動きを出す
    ロールオーバーや画像にアニメーション的な動きを表示させたり、時間ごとに画像が切り替わる等の設定。
  • 文字列に動きを出す。
    文字を横にスクロールさせたり、文字に動きをつけることができる。
  • 日時を表示・計算する。
    ページの今日の日付を表示させたり、それを利用して日時を計算したりする。
  • フォーム上の計算やチェックを行う
    フォームを設置したり、入力した数値により計算して表示させたりすることができる。
  • カラー
    画面を操作したら。色を変更させることができる。
  • ゲームを作る
    WEB上でゲームを作ることができる。
  • 2回目以降は表示されない
    WEBを閲覧したい人へのアクセスからプログラムをつけることができる。
  • 画面の画像を時間で変える。

JavaScriptの記述の特徴

ゼロからはじめるJavaScript P12

HTMLの文章に直接記述することができる。

クライアントサイドとサーバーサイドに分かれているが、

JavaScriptはWEBページを見ているクライアントが行動を起こしたら、起動する仕組み。

なので、カウンター・掲示板等のプログラムはJavaScriptでは設定できない。

JavaScriptとJavaの違い

JavaScriptはWEB上で動くプログラム

Javaは、携帯・家電製品など様々なものでプログラムしている。汎用のプログラム

Javaアプレットとゆうのもあり、JavaをWEB上で実行できるもの。

JavaScriptの実行タイミングは

HTMLファイルが全て表示されてからプログラムが実行される。

2コマ目

JavaScriptプログラムの作成

JavaScriptの記述は

<script>プログラム</script>のように、<script></script>タグで囲まれた部分がJavaScriptのプグラム

ヘッドタグ

<script type="text/javascript">

記述されているが、ここではブラウザに種類を認識させるために明記する。

省略しても動くがしっかり記述すること

<!--javascriptが記述-->HTML文章では、コメントタグで囲むこと。

※ブラウザによっては、解釈できないブラウザがあるので、ブラウザ上でこのプログラム記述が表示されてしまわないようにするため。

メタタグでの記述

<meta http-equiv="Content-Script-Type" content="text/javascript">

を記述してJavaScriptだとブラウザに認識させるために記述する。

記述を2つ書いているのは、<meta>タグが認識されないブラウザのために記述する。

※Content-Script-Typeの記述は必ず大文字・小文字を区別して書く

ボディタグでの記述

<noscript>

ここに記述された内容は、scriptに対応したブラウザは表示されない。

逆に、scriptに対応していないブラウザはこの部分が表示される。

</noscript>

3コマ目

課題01のHTMLの記述

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
window.status="ようこそ";
-->
</script>
<title>箱根温泉物語のトップ</title>
</head>
<body>
<noscript>
JavaScriptに対応するブラウザでご覧ください。
</noscript>
<h1>箱根温泉物語</h1>
</body>
</html>

課題01のWEBページはこちらをクリックして移動してください。

JavaScriptの記述場所について

4種類の記述方法がある。

  • headタグの中・・・ページが表示された後に実行される
  • bodyタグの中・・・ページ表示中に実行される
  • タグ内に属性として・・・イベント発生時(タグの上にマウスが重なった場合等)
  • 外部ファイル・・・ファイルの拡張子はjs 実行タイミングは、記述した場所により異なる。

それぞれの記述の違い

プログラムの実行の始まるタイミングが違う

イベント属性

ゼロからはじめるJavaScript P17

前置詞の後に大文字で記述すると見やすい

  • onLoad
  • onunLoad
  • onClick
  • ondbClick
  • onKeypress
  • onMouseover
  • onMouseout
  • onSubmit
  • onReset
  • onFocus
  • onBluer
  • onSelect
  • onChange

等がある。

イベントについては、P17に記述されている。

4コマ目

イベント属性を記述する。

ゼロからはじめるJavaScript P25~29

今回はタグに直接記述する形での JavaScriptを作動させてみたいと思う。

課題02のHTML文章

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">・・・定番の記述
<title>箱根温泉物語のトップ</title>
</head>
<body>
<noscript>
JavaScriptに対応するブラウザでご覧ください。
</noscript>
<!--▼▼▼ここにJavaScriptを記述▼▼▼-->
<h1 onMouseover="window.status='ようこそ'" onMouseout="window.status=''">箱根温泉物語</h1>
<!--▲▲▲ここまでがJavaScriptを記述▲▲▲ -->
</body>
</html>

課題02のWEBページはこちらをクリック

使用したJavaScript

onMouseover

マウスが乗ったときのプログラム

onMouseout

マウスが離れたときのプログラム

onMouseover="window.status='ようこそ'"

window.status・・・ブラウザのウィンドウステータスに’’で囲んだ文字を表示させる。

onMouseout="window.status=''"

window.status・・・ブラウザのウィンドウステータスに’’で囲んだ文字を表示させる。ここでは、空白なので、離れた時にステータスバーになにも記述されない

注意点

イベントの中でJavaScriptを記述する場合”(ダブルコーテーション)の中での囲いは’(シングルコーテーション)にする。

5コマ

プログラムの規則

window.document.write( )

※このプラグラムの.(ドット)の意味は、~のとゆう意味になる。

※右に書かれているプログラムほど、物(オブジェクト)の記述がなされている。

オブジェクトとは・・・状態・操作がある。

状態(プロパティ)・・・ウィンドウの位置・大きさ・ステータスバーの状態・ツールバーの状態、等

window.status="ようこそ"等のプログラム

プログラムの=とは右側のものを左側に入れるとゆう解釈でプログラムは処理される。

操作(メソッド)・・・ウィンドウを閉じる。新たなウィンドウを表示する。ウィンドウを最小化する、等

window.open( )等のプログラム

( )の中に・・・何を・どのようにといったプログラムを記述する。

※メソッドの場合後ろに( )が必ず付く

オブジェクト・プロパティメソッドを確認する

ゼロからはじめるJavaScript P31~39

課題03

課題03のWEBページはこちらをクリック

以上をふまえて、JavaScriptを記述する。

出来上がったHTML文章は下にに記述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>三大珍味</title>
</head>
<body>
<h1>三大珍味</h1>
<p>世界三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<script type="text/javascript">
<!--
document.write("トリュフ、フォアグラ、キャビア");
-->
</script>
<!--▲▲▲ここまでJavaScript▲▲▲-->
<hr>
<p>日本三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="form1">
<p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみ、このわた、うに'">
<!--▲▲▲ここまでJavaScript▲▲▲-->
</p>
<p>
<!--▼▼▼ここからテキストエリアのタグ▼▼▼-->
<textarea cols="40" rows="4" name="textarea1"></textarea>
<!--▲▲▲ここまでテキストエリアのタグ▲▲▲-->
</p>
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
<hr>
</body>
</html>

できあがったWEBページはこちらから移動

JavaScriptの記述

<script type="text/javascript">
<!--
document.write("トリュフ、フォアグラ、キャビア");
-->
</script>

ここでは、ドキュメントのオブジェクトにて、writeの()の中身の部分をページ上に表示される。

onClick="document.form1.textarea1.value='からすみ、このわた、うに'"

クリックした時に、ドキュメントオブジェクトのform1とゆう名前のtextarea1とゆう名前の部分に、’’内の文字列を表示する。

注意

タグのオブジェクトを指定する場合、タグを直接指定できないので、必ずタグに名前を記述する。

ここでは、<form name="form1">フォームタグにform1

<textarea cols="40" rows="4" name="textarea1"></textarea>テキストエリアにtextarea1とゆう名前を記述した。

課題03のWEBページはこちらをクリック

番外編

同じオブジェクトに同じイベントをかけて別々の部分に同時に表示させたい場合;(カンマ)をつける。

<hr>
<p>日本三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="form1">
<p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみ、このわた、うに'document.form1.textarea2.value='このわた、うに、からすみ'">
<!--▲▲▲ここまでJavaScript▲▲▲-->
</p>
<p>
<!--▼▼▼ここからテキストエリアのタグ▼▼▼-->
<textarea cols="40" rows="4" name="textarea1"></textarea>
<textarea cols="40" rows="4" name="textarea2"></textarea>
<!--▲▲▲ここまでテキストエリアのタグ▲▲▲-->
</p>
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
<hr>

日本三大珍味に数えられる3つの食材は何でしょう?


スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/53-0d36ef41
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

07 | 2018/08 | 09
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。