FC2ブログ

スポンサーサイト

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

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

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

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

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

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

授業の内容

第7章 フォームを処理するプログラム

ゼロからはじめるJavaScript P165~199

ここの章はプロの現場でも使用しているところが多い!!

使用タグ一覧

<select>

<textarea・・・・>

<input ・・・・>

のタイプ

<input type="submit">・・・・サーバーに送信するボタン

<input type"reset">・・・・初期値に戻すリセットボタン

<form>タグの中

actionについて

フォームの内容を送信する送信先を書く"

送信先(例)・・・tyumon.cgiまたはphp

cgi拡張子はサーバースクリプトで書かれたファイル 主なものとして、perlがある。

わざと拡張子を偽装して送る場合はHTMLの拡張子も存在する。

今回は・・・

action="mailto:mail@address"

と記述されており、クライアントサイドから、上記のメールアドレスに送信することになっている。

メールアドレスを送信する場合の注意事項

注意1

送信はユーザーにゆだねられる。

注意2

事前セットアップがユーザーに必要となる。

mehtodについて

データの送信手法を記述する

get

post(主流)

の2種類が存在する。

postとは?

サーバーに接続(URL)した後、それとは別に

フォームのデータを送信していく方法。

getとは?

サーバーに接続し(URL+フォームデータ)を送信する。

URLに表示される

フォームを文字データにしてURLと一緒に送信されるので、情報が漏れやすい。

enctypeについて

enctypeは文字の書き出し形式をしていするダグ

通常フォーム送信では使用しない。

enctype="text/plain"

text/plainは書式なしテキスト形式で書き出されるとゆう意味

プルダウンメニューについて

<select>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

と記述され、

下記のように表示される。

ラジオボタン

<label for="dai"><input id="dai" type="radio" name="shiharai" value="daibiki">代金引換</label>
<label for="gin"><input id="gin" type="radio" name="shiharai" value="furikomi">銀行振込</label>

と記述され、ラジオボタンをひとくくりにする場合

同じ名前を付けてあげる。

lavelタグについて

このラベルタグは関連づけのタグで、

この場合、<input id="dai" type="radio" name="shiharai" value="daibiki">がラベルタグの中にあるので、このなかにあるものは、関連づけられてるの意味で、

ラベルにid=daiと記述されており、このなかの部分は、id=daiの動きをしますとゆう意味

つまり、代金引換の文字をクリックしても、ラジオチェックボタンが選択されます。とゆうことになる。

テキストエリア

<textarea name="memo" cols="50" rows="5">ご意見ご要望などありましたら、ご記入ください。</textarea>

cols="50"は列の数を指定

rows="5"は行の数を指定

テキストエリアは

<textarea>この中に最初のテキストの表示する文字を記入する。</textarea>

送信ボタン・リセットボタン

<input type="submit" value="注文">&nbsp;<input type="reset" value="リセット">

 

送信ボタン(submit)はフォームの中の内容を送信するボタン

リセットボタン(reset)はフォームの中身を元の状態の戻すボタン

税率の計算の場合

端数処理を行う。

お届け先の配送量設定

swith(制御命令)を使う

swith(何番だったらとゆう変数を書く)

case 0:0番目の処理;
break;

case 1:1番目の処理;
break;

case 2:2番目の処理;
break;

case 3:3番目の処理
;break;

breakとは、その処理から外れるとゆう意味

これがないと、次の処理まで行ってしまうので注意する。

入力チェック

ifの分岐関数を使う

onsubmitでサブミット(送信されたときに起動させる。)

turuを返すと、送信が実行される。

falseを返すと、送信が実行されない。

return呼び出しもとに返す

これを利用して入力チェックをする。

alertメソッド

テキスト読み上げソフトに対応していないので、多様は禁物

ダイアログボックス(警告ウィンドウ)を表示させるメソッド

forcusメソッド

カーソルが項目に移動するメソッド

テキストボックスを入力不可にする方法

入力してほしくないテキストボックスに、

onFocus="this.blur()"を記述する。

onFocusでフォーカスが当たった時

this.blur()・・・このオブジェクトのフォーカスを外すメソッド

なので、テキストボックスに入力ができなくなる。

送信時ラジオボタンの選択漏れをチェックする

オブジェクト.checkedプロパティ

ラジオボタンにチェックがついている場合、true

ラジオボタンにチェックがついていない場合 false

よって、

if(document.form1.shiharai.checked==false && document.form1.shiharai[1].checked==false){
alert("支払い方法を選択してください。");
return false;
}

とゆうプログラムとなる。

リセット時に確認メッセージを表示する。

return confirm("入力した内容をクリアしますか?")
で動作確認ウィンドウが立ち上がる。

はいと答えると、trueを返す。

いいえと答えるとfalseを返す。

これを

FORMタグで onReset="return kakunin()"を記述すると動く

CGIについて

いままで作ったプログラムはjavascriptで行い、うまく送信された場合その受注処理は様々なものがある。

今回は、↓の様な処理をする。

担当者のパソコンにメールで送る。

クライアントのメールに受付完了メッセージを送る。

第7章 フォームを処理プログラム

今回作成した注文フォームのWEBページはこちら

作成した課題23を見てみる

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

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

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

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

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

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

授業の内容

前回までのおさらい

手の抜きどころ

教科書・インターネットから引用してもよいが、必ず説明できるようにすること。

配列関数

a=new Array();

a[0]="ABC"

a[1]="DEF"

Javascriptの基本的な動きではなく、なんのためにこの関数を利用したかを説明できるようにする。

習ったメソッド

w=window.open("表示させたいURL");

w.resizeTo;(幅のピクセル数,高さのピクセル数)

w.moveTo;(親要素から横の位置ル数,親要素から縦の位置)

w.close();

授業の続き

ゼロからはじめるJavaScript P103

一定時間後に画像を順番に表示させる

使用メソッド

setTimeout()・・・ビルドイン関数

このプログラムが実行した後に特定時間後に動作する。

setTimeout("実行したい命令",時間(単位はミリ秒))

一定時間ごとに画像を入れ替える

使用メソッド

setInterval("命令プログラム",ミリ秒)

設定したプログラムを何回も表示させる。

JSファイルを作成し、外部ファイルにする

新たにファイルを作成して、そこにいままでプログラムしたプログラムを移す

ファイルの拡張子は、jsで記述する。

あとは、HTMLでその外部ファイルをリンクさせる。

<script type="text/javascript" src"ここに外部ファイルにしたファイルを指定するリンクを張る"></script>

どこでもソースをリンクさせることができるが、だいたいはヘッダーのなかに記述される。

JavaScriptを外部ファイルにする利点

HTMLの記述が少なくなるので、メンテナンス性がよくなる。

他のHTMLファイルで複数共有することができる。

弟5章 文字列を処理するプログラム

ゼロからはじめるJavaScript P121~133

文字列の一部を抜き出して表示する。

使用メソッド

文字列はオブジェクトであるので、メソッドとプロパティがある。

文字列 .substring(開始位置,終了位置)

使用プロパティ

文字列.length

文字列オブジェクトの文字数のプロパティ

substring()メソッドの 意味

文字列の一部を取り出すメソッド

文字列の始まりは0から始まる。

テスト
012

.substring(開始位置を指定,終了位置を指定)

文字列をスクロールしながら表示させる。

ABCD

BCDA

CDAB

DABC

と文字列を移動してあげるプログラムを作る。

上の場合、substring(1,4)+substring(0,1)

第六章 日時を処理するプログラム

ゼロからはじめるJavaScript P135~163

使用メソッド

new Date("2006/11/16")

new・・・は新しいオブジェクトの登場の意味

年・月・日時を区切る記号は/を使うのが一般的

new Date()と記述すると、現在時刻が表示される。

日時の計算の仕方

ゼロからはじめるJavaScript P158~163

解禁日.getTime()-本日.getTime()を引く

ただ単位がミリ秒なので、1000*60*60*24で割ると日時が表示される。

このページのトップへ移動する。

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

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

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

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

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

授業の内容

うるう年のプログラムの解説

うるう年とは?

4で割れる かつ 100で割れない ただし400で割れるもの

コード

%を使用・・・%は、あまりを計算することができる。

!を使用・・・!はその条件を否定する意味。

4で割り切れる→コード・・・ year%4==0

100で割り切れない→コード・・・year%100!==0

400で割り切る→コード・・・year%400==0

よって分岐条件ifは↓

if((year%4==0&&year%100!==0)||year%400==0)

あとはこの分記条件を利用して、プログラムを組んであげる。

テキストボックスへ値を羅列したい場合

valueプロパティを使用する。

このとき、テキストボックス.value="ここに表示させたい値"

と記述すると、=は代入するとゆう意味があるので、新しく上書きされてしまう。

なので、文字列を消してあげたい場合、

テキストボックス.value=""と記述すると何も記述されないvalueが代入されるので、データを消去することができる。

テキストエリアの枠・スクロールバーを消す場合

overflowとborderのプロパティを

hiddenと0pxにする。

オプション課題 ジャンケンプログラム

先生のプログラムの解説

プルダウンメニューのプルダウンにvalue属性で値を入れてあげると、値で指定できる。

<select>
<option value="0">グー</option>
<option value="1">チョキ</option>
<option value="2">パー</option>
</select>

あとはほとんど自分の組んだプログラムと変わらない。

ランダム関数

Math.floor(Math.random()*3);

Mathは数学関連のオブジェクト

Math.random()は0~1までの乱数をランダムに与える

Math.floor()は少数点を切り捨てる

Math.abs()数値を絶対値にする。

コード化

ジャンケンのグー・チョキ・パーをコンピュータに認識させるために、任意の数値を割り当てること。

プログラマーは・・・

今後の変更のことも考えて、不等号で組んであげた方が汎用性が高い

<や>を使う

<=や>=を使うのは避けている。

コンピュータは微妙に誤差がある。

配列・・・

教科書の弟6章あたりにでてくる。

配列とは・・・

データの並びを作る変数を作る。

配列変数 a  変数(箱)をいくつでも並べることができる。

変数 b ・・・一つの箱だけ

配列変数の表示の仕方はa[0]a[1]a[2]a[3]a[4]a[5]a[6]のように配列変数の中の変数に番号を付けて並べられている。

イメージは↓

a[0]
a[0]
a[0]

 

配列・・・添え字

a[1]この[]の中に入っている変数のことを添え字とゆう。

配列関数の記述のしかた。

a = new Array();  と記述する。

a[0]="グー";

a[1]="チョキ";

a[2]="パー";

別の記述方法

a = new Array("グー","チョキ","パー");

a = ["グー","チョキ","パー"];

 

がその中身

配列はオブジェクト

上の記述の意味はaに新しいオブジェクト(配列関数)を作るとゆう意味

定型分として覚えるとよい。

イメージはa[グー][チョキ][パー]と箱の中に入って連結しているイメージ

a[0]="グー"

a[1]="チョキ"

a[2]="パー"

i=Math.floor(Math.random()*3);

document.write(a[i]);

このプログラムの訳は

グーチョキーパーをドキュメントに書き出す

2次元配列

配列の中に配列を作ることができる。

イメージはこんな感じ↓

a[0][0]
a[0][1]
a[0][2]
a[1][0]
a[1][1]
a[1][2]
a[2][0]
a[2][1]
a[2][2]

2次元配列の書きかた

a = new Array();

for(i=0;i<4;i++){
a[i] = new Array();
}

と記述するして、変数を利用する時は、

a[1][2] ="ここに文字列を記入"

余談・・・上のプログラムで、forの中身・・・も不等号を使わない(プロ使用)

他の書きかた

a=[[5,1,2],[4,2,5],[10,1,3]];と記述するやり方もある。ただ一般的に記述するときは、

a=[[5,1,2],
[4,2,5],
[10,1,3]];

が一般的

ジャンケンプログラムでの応用

自分\相手

0:グー 1:チョキ 2:パー

0:グー

[0][0]

あいこ

[0][1]

勝ち

[0][2]

負け

1:チョキ

[1][0]

負け

[1][1]

あいこ

[1][2]

勝ち

2:パー

[2][0]

勝ち

[2][1]

負け

[2][2]

あいこ

これを2次元配列で記述する

a[[あいこ,勝ち,負け],
[負け,あいこ,勝ち],
[勝ち,負け,あいこ]]

配列を使うための利点

汎用性が高い

メンテナンス(変更)がしやすい

弟3章 ウィンドウ

ゼロからはじめるJavaScript P69~87

ウィンドウを開く

使用メソッド

window.open("開きたいURLを書く");

オプション設定

ウィンドウに様々な設定をかけることができる。

今回はメニューバーとツールバーのみ表示させる設定を行う。

window.open("開きたいURLを書く","ここにウィンドウに任意の名前を付ける。","ここにオプション設定を入れる。");

プログラムを書く常識

関数はヘッダーの中に書く

引数を利用

関数()の()の中に書く変数を引数とゆう。

変数なので、任意に名前を付けることができる。

ヘッダータグ

<!--
function hiraku(file){
window.open(file);
}
-->

ボディタグ

<p><input type="button" value="目次を見る" onclick="hiraku('sweden.html')"></p>

<p><input type="button" value="目次を見る" onclick="hiraku('italy.html')"></p>

<p><input type="button" value="目次を見る" onclick="hiraku('egypt.html')"></p>

この引数を利用すると、関数を一つだけ書くことで、他の3つのボタンでもこの関数を使うことができる。

ウィンドウを閉じる

使用メソッド

window.close()を使用する。

ウィンドウの位置・大きさを変える

使用メソッド

resizeTo(横の大きさ(ピクセル指定),縦の大きさ(ピクセル指定))

moveTo(親ウィンドウから横の位置(ピクセル指定),親ウィンドウから縦の指定(ピクセル指定))

このメソッドを反映させたいオブジェクトを指定しないと動かないので、

このプログラムでは、

var win=window.open();

win.resizeTo(,);

win.moveTo(,);

でウィンドウオブジェクトを変数に入れて指定してあげている。

弟4章 画像を処理するプログラム

ゼロからはじめるJavaScript 89ページ

ロールオーバー

リンクの画像に対して

onMouseover="ここに重なった時の画像"

onMouseout="ここに元の画像にする"

指定方法

document.画像オブジェト(<img>タグにつけた名前).src='ここに画像のファイルアドレスを入力する。'

補足

画像を指定するとき・・・<img>のタグ内に記述する場合、オブジェクト指定をthisで省略できる。

this.src'ここにURLを記述

こうすると、<img>タグに名前を指定しなくても動く

オブジェクトを指定しなくても動く模様

スワップイメージ

ロールオーバーと同じ手法で、変更するオブジェクトを指定してあげるだけ

このページのトップへ移動する。

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

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

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

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

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

授業の内容

昨日の復習

ゼロからはじめるJavaScript P63

繰り返し for

for(カウンター変数を初期化のため初期値を与えるものi=初期値;
繰り返す条件(繰り返す回数)を設定i<=繰り返す回数を記入する。;
カウントアップ数を設定する。i=カウントアップ数を設定 ;)
{繰り返し行いたい一連の処理をプログラムする。 }

※iは変数なので、プログラムの中で使用することも可能

※この中にさらにforプログラムやifプログラムをしようすることも可能

課題17

昨日の課題16を変更したうるう年のプログラムを作成

プログラム内容

指定した年数から20年間分の年数を羅列して、

さらにうるう年のテキストカラーを赤色に変更して表示させる。

作成した課題17のWEBページを見てみる。

今回作成したページで、HTMLタグでのバグがあったので、報告します。

バグ報告

<form>タグの中で、テキストフィールドを一つだけだと、そのテキストフィールドの中を選択して、ENTERキーを押すと勝手に送信(submit)されてしまう症状です。

解決方法

テキストフィールドを2つ以上フォームの中に入れると、ENTERキーを押してもsubmit(送信)されないので、新たに作成して、そのテキストフィールドを見えなくさせる。

見えなくする方法は2つ

テキストフィールドの幅を0pxに指定して、枠線を0pxに指定する方法

(例)

<p><input type="text" style="width : 0px;"></p>

この部分だと選択すると見える。

CSSで、表示させない方法  (display : none;)をテキストフィールドに入れる方法

<p><input type="text" style="display : none;" value="ここは、フォームのバグ対策"></p>

上に表示されてるんですがわからないでしょう。

このページのトップへ移動する。

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

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

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

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

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

授業の内容

条件分岐のおさらい

条件1かつ条件2のプログラムでの表現

if(条件1 && 条件2){ここにプログラム}

条件1または条件2のプログラムの表現

if(条件1 || 条件2)

できること・・・

何個でも繋げることができる。

&&と||を併用することも可能

&&と||を併用した場合、&&のプログラムのほうが強い

条件1&&(条件2||条件3)をつけると先に実行される。

3つのデータを並べ替える方法・・・(基本交換法・バブルソート)

データ1・データ2・データ3を作り

条件一個目

データ2とデータ3を比較してデータ3が大きい場合並べ替える

条件2個目

データ1とデータ2を比較してデータ1が大きい場合並べ替える

条件3個目

データ2とデータ3を比較してデータ2が大きい場合並べ替える

処理を繰り返す

ゼロからはじめるJavaScript P63~67

繰り返し関数for

for(i=1(初期値);i<=10(繰り返す条件つまり繰り返す回数);i++(繰り返し毎の演算)){
document.write("毎月5000円ずつ貯金します。<br>");

ポイント

iは変数である。

iにはカウント数が入れられる。

writeのなかに変数を利用したいときは””の外で使用すること。

for(i=1;i<=18;i++){
document.write(i,"ヵ月後 毎月5000円ずつ貯金します。<br>");

課題14で作成したプログラムをWEB上で見てみる。

課題15

テキストボックスに年数を記入してもらう。

年一覧のボタンを作成して、クリックすると、テキストボックスに20年分を表示する。

指定した年数も表示する。

このようなプログラムを作成する。

出来上がったプログラム課題15のWEBページを見てみる。

課題16

課題15と同様

テキストボックスに年数を記入してもらう。

年一覧をクリックすると、

テキストボックスを入れられた年

~20年後までのうるう年を表示

うるう年は4で割れる年

100の倍数は普通

400の倍数はうるう年

出来上がったプログラム課題16のWEBページを見てみる。・・・明日の課題

このページのトップへ移動する。

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

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

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

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

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

授業の内容

昨日作成した課題08・課題09の答え合わせ

課題08の加算プログラム

関数は3行で住んでいる。

答えの変数を使わない方がみやすいかも

課題09の入れ替えプログラム

変数はできるだけ小さいほうがコンピューターに負担がかからなくて済む。

これからは、変数はできるだけ少なくするように心がける。

本日の課題11の演習

分岐関数ifを使った演習

if(a>10)

条件が真ならば実行・・・true

条件が偽ならば実行・・・false

課題11・・・並べ替えプログラム

並べ替えると、数値が小さい方が必ず上にくるようにプログラムを組む

演習11で作成した課題11をWEBで見てみる。

課題12・・・3つの値の並べ替えプログラム

並べ替えると、数値が小さい順に必ず上にくるようにプログラムを組む

演習12で作成した課題12をWEBで見てみる。

演習13条件分岐関数のプログラム

else関数を使う

else関数とは・・・ if関数で設定した関数以外の時に行うプログラムである。

分岐関数について ゼロからはじめるJavaScript P62

if関数の中にif関数を使うことができるさらにその中にもelseを使うことができる。

else ifと続けて記述することも可能

分岐関数で、3つを比較させる場合

if(1<money<100)と記述して分岐関数が使えないので、

&&を使用すると、2つの条件が満たされたときにプログラムを実行することができる。  and

||を使用すると、またはの意味になる。 or

アンドとオアを両方一緒に使用することもできる。

条件A&&条件B||条件C

どの部分が条件なのかわからないので、()をつける。

条件Aかつ条件Bまたは条件Cの場合

(条件A&&条件B)||条件C

条件Aかつ条件Bまたは条件Cの場合

条件A&&(条件B||条件C)

これらはいくつでも分岐関数で繋げることができる。

例・・・

if(money>1&&money<=100)  &&はかつとゆう意味合い
{
緑色に変化する。
}

この場合、1~100までの数値に入った時実行するプログラムになる。

演習13で作成した課題13をWEBで見てみる。

このページのトップへ移動する。

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

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

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

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

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

授業の内容

1コマ目

JavaScriptのおさらい

JavaScriptの記述場所・・・起動するタイミング

外部ファイル・・・外部ファイルを読み込んだタイミング

ヘッダー・・・ページ表示終了直後

ボディ・・・ページ表示中

タグ内・・・イベント発生時 onClick onMouseover等

関数(複雑な処理をまとめたもの)を使うと、記述場所が醜くならなくて済む

オブジェクト

オブジェクトの種類

window

document

ここから下は複数存在する可能性があるので、名前を記述する。

form

textarea

名前の記述のしかたは、<タグの後ろにname="ここに任意の名前をつける。">

オブジェクトのプログラム

プロパティ(状態・設定)

オブジェクトが持っている変数のことをプロパティと呼ばれている。

メソッド(操作)・・・プログラムの右側に()がついているのが特徴
(例)・・・write("ここにテキストを記述する。")
オブジェクトが持っている操作用の関数をメソッドと呼ばれているので関数の一種。
オブジェクト(引数)を記述してプログラムの記述をする。

の2種類がある。

オブジェクトはオブジェクトを含む

(ここでは決まった名前)window.document.(ここからは、任意でつけた名前)form1.textarea1でオブジェクトを指定する。

データ処理

変数・・・データの入れ物(箱)

変数で行うこと

  • 任意で名前をつける。半角英数 と_ 最初に数字を使えない 予約語は使えない
  • =で代入する。
  • 代入すると上書きされる。

変数の書き方

var a ;

a=5;

a=5+3;

省略した形

a=5;

kono;

この書きかただと、間違えやすいので注意すること。

変数・スコープ

function test(){
var a;
ここで記述した変数はこの中の変数のみで反映される。
}

グローバル変数

ある共通したデータを全ての関数に反映されたい場合、関数のそとで変数の設定を行う。

var a;
ここで変数を設定すると関数全てに反映される。
function test1(){
}
function test2(){
}

2コマ目

JavaScriptを使ってページを作成する。

課題08

テキストボックス 2つ

ボタンが1つ

テキストボックスの上に表示されるように設定する。

ボタンを押すごとに加算されるよに設定する。

課題08の制作WEBページに移動する。

3コマ目・4コマ目

JavaScriptを使ってページを作成する。

課題09

テキストボックス 2つ

ボタンが1つ

テキストボックスの上に表示されるように設定する。

ボタンを押すごとに数値が入れ替えるよに設定する。

課題09の制作WEBページに移動する。

5コマ目

補足

=・・・は代入の意味

例文

a=1;

a=a+1;・・・右の部分を先に実行されるので、aが1なので2になり、それをaに代入する考え方

この時のaの値はa=2

例文2

a=3;

a=a*5;・・・右の部分を先に実行されるので、aが3なので15になり、それをaに代入する考え方

aの値は15となる。

よく使われる記述

a=a+1・・・a++; と記述しても同じプログラムが実行される。

a=a-1・・・a--;と記述しても同じプログラムが実行される。

課題08のプログラムを1行で行うプログラム

document.fm_kei.tb_ue.value = document.fm_kei.tb_ue.value*1 + document.fm_kei.tb_sita.value*1

条件によって処理を分岐する

ゼロからはじめるJavaScript P56~62

今までは・・・

1から4の順番をそのままの順番で実行するプログラムを組んでいた。

これからは・・・

1~2を実行して、条件Aを満たした場合3・4のプログラムを実行して6に移項する。

1~2を実行して、条件Aを見てしていない場合3・4・5を実行して6に移項する。

このプログラムを条件分岐と呼ばれる

または、

1~5のプログラムを5回実行して、6に移項する。

条件分岐

if関数を使う

1の処理

 if(条件式){

  2の処理

3の処理

ある条件2番が満たされたとき2の処理を行う。

比較演算

  • >・・・a>b aがbより大きい
  • <・・・a<b   aがb小さい
  • >=・・・a>=b aがb以上
  • <=・・・a<=b  aがb以下
  • ==・・・a==b  aがbと同じ
  • !=・・・a!=b  aがbではない、等しくない

※必ず=が後ろにつく。

※等しい時は必ず==を付ける

文字列でも使える。

6コマ目

具体例 課題10

結果がマイナスならば、赤字で表示

money= moneyin-moneyout;

もし moneyが負ならば残高テキストの文字を赤にする。

document.fm_keisan.tb_zandaka.value = money;

をプログラムする。

if(money<0){

document.fm_keisan.tb_zandaka.style.color = "red";

}

課題10の制作WEBページに移動する。

このページのトップへ移動する。

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

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

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

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

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

授業の内容

1コマ目

改行について

HTMLとして表示した文字を表示する場合<br>で改行

例・・・document.write("ここに文字を記述<br>ここから改行して表示される。")

プレーンテキスト

textarea.value="ここに文字を記入nにより改行する・・・ここのテキストを専門用語でプレーンテキストと呼ばれる"

input.value="ここに文字を記入・・・ここのテキストを専門用語でプレーンテキストと呼ばれる"

input.valueは1行分のテキストボックスなので、改行は入らない。

※は名前をつけないとプログラムを動かなくなるので注意

演算

=の記号・・・javascriptでの=の意味は右の記述を左の記述に代入するプログラムになる。どの演算子よりも一番最後に動く

A=B=Cと記述された場合・・・CをBに代入してその値をAに代入する。

*の記号・・・掛け算

/の記号・・・割り算

-の記号・・・引き算

+の記号・・・加算する

+の記号の使用注意

文字列の場合、+は文字列加算の処理されるので、左に記述した文字列の右に順に加算されるプログラムとなる。

+の記号を使って数値として加算させたい場合

等数の値として認識させた後に加算されるので、数値として認識させる。

A=B/1+C/1

A=B*1+C*1

parseInt(文字列) 関数(ビルドイン関数・組み込み関数)を使う・・・ゼロからはじめるJavaScript P176

例・・・

A=parseInt(B)+10

事件

javascriptの間にコメントタグが入ってるとうまく実行しないので注意

よい例

<!--<script></script>-->となるようにする。

悪い例

<!--<script>--></script>となるようにすると実行されな

関数について

関数とは一連の処理をまとめて表示するくとができる。

例・・・

ヘダーの中に

fanction keisan(){
A=B+C+D+E+F+G
}

ボディの中に

<タグ onclick="keisan()">

名前付け

  • ・オブジェクト textbox,textarea,form等のタグ
  • ・自分で作成した関数 function 任意の名前()
  • ・自分で作成した変数  自分でつけた名前=プログラムの記述

名前を付ける時の注意

  • 半角英数・記号_等(記号は_(アンダーバー以外)あまり使わないようにする。)
  • 1文字目は数字以外で始めること、記号はOK(通常はアルファベットからスタートする任意の文字)
  • 大文字小文字は区別される。(だからといってTotal,totalと名前を付けるのは避ける。)
  • 予約語は使えない(予約語とは?ゼロからはじめるJavaScript P49)

予備知識

start()・color()は予約語ではないが、使わないことをお勧めする。

2コマ目

本日の課題07 変数

変数とは?データの入れ物

テキストボックスの値をコピーして置いておくところ・・・詳しいことはここのページを参照

電卓でゆと、M+キー

書き方

var 変数の名前 ;・・・データの入れ物を作った

変数の名前=データを指定

例 収入テキストボックスの値を入れる(コピーする)ための変数を作る

var moneyin ;

moneyin=document.fm_keisan.tb_syunyu.value;

var moneyout ;

moneyout=document.fm_keisan.tb_sisyutu.value;

docoument.fm_keisan.tb_zandaka.value=moneyin-moneyout;

3コマ目

注意

        function zandaka(){
            var moneyin;
            moneyin=document.fm_keisan.tb_syuunyu.value;
            var moneyout;
            moneyout=document.fm_keisan.tb_sisyutu.value;
            var money;
            money = document.fm_keisan.tb_zandaka.value;
            money = moneyin - moneyout;
        }
		

と記述すると、プログラムが動かないので、注意すること!!

変数で代入した前の値は、考えられなくなってしまう(データは残る)。

解釈は、moneyってゆうプログラムに値が代入されるので、document.fm_keisan.tb_zandaka.valueには値が反映されないので、WEB上では表示されない。

イメージは箱のイメージで考えるとわかりやすい。

こう書くと記述される。

                function zandaka(){

                    var moneyin;
                        moneyin=document.fm_keisan.tb_syuunyu.value;
                    var moneyout;
                        moneyout=document.fm_keisan.tb_sisyutu.value;
                    var money;
                        money=moneyin-moneyout;
                    document.fm_keisan.tb_zandaka.value = money;
                }

4コマ目

授業で行った方法の考え方(収入計算・・・手順書)

  • 収入データを入れる箱「money」を用意する。
  • 収入テキストボックスの値をmoneyinに入れる
  • 支出データを入れる箱「moneyout」を用意する。
  • 支出テキストボックスに値をmoneyoutに入れる
  • 残高の計算結果を入れる「money」を用意する。
  • 残高の計算をする計算式moneyにmoneyin-moneyouの結果を入れる。
  • 残高テキストボックスにmoneyを入れる。

5コマ目

授業で行った方法の考え方(消費税率・・・手順書)

  • 本体価格データを入れる箱「hontai」を用意する。
  • 本体価格テキストボックスの値をhontaiに入れる。
  • 消費税率データを入れる箱「zei」を用意する。
  • 消費税率テキストボックスの値をzeiに入れる。
  • 税込金額のデータを入れる「zeikomi」を用意する。
  • 税込金額を計算する計算式zeikomiにhontai*(1+zei/100)の結果を入れる
  • 税込テキストボックスにzeikomiを入れる。

6コマ目

変数の記述方法には3通りの記述方法がある。

var a;
a=58

var a = 58;

a=58;

var a,b,cと記述する場合もある。

これは、aとbとcの変数を宣言していることになる。

テクニック

変数をどのような意味で付けたかに関するコメントを入れる。

例・・・

var moneyin; // 収入 

var moneyout; // 支出

var money; // 残高

//を記述したら、改行されるまでコメントとして扱われる。

/*コメント*/この記述は/**/で囲まれた部分はコメントとして扱われる。

変数の(有効範囲)

関数の中のみ有効になるので、

下の記述では、zandaka関数内のみ有効

<script>
var total; ・・・このように、関数の外に記述している変数をグローバル変数と呼ばれる
funvtion zandaka(){
var money; ・・・関数の中に記述している変数をローカル変数と呼ばれる
}
funvtion zeikomi(){
var money;
}
</script>

下で記述された変数monyはzandaka関数とは別物

関数の外で記述した変数は、どの関数でも利用が可能

関数が2回呼び出されると、関数の中に記述された変数は何が起こるかわからない。

練習課題07のWEBページはこちら

ソースコードはWEBを開いて、ソースコードを参照してください。

このページのトップへ移動する。

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

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

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

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

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

授業の内容

1コマ目

テラパッドの使い方

選択した部分のインデント

CTRL+SHIFT+I

選択した部分の逆インデント

CTRL+SHIFT+U

昨日の復習

ゼロからはじめるJavaScript P36

昨日学習したJavaScriptの注意する点をおさらい。

昨日作成した課題を編集する(テキストに改行を入れる)。

ゼロからはじめるJavaScript P37

メソッド write()の改行法について・・・<br>のタグを記述する。

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

と記述する。

writeメソッドは、文字列をHTMLコードにて記述されるので、改行タグの<br>を記述する。

2コマ目

,(カンマの使い方)

write構文では,でくくって文字列を複数表示させることができる。

一つの文字列として

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

と記述しても同じ表示がされる。

他の記述法として・・・+をつかう。

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

と記述しても同じ結果が表示されるが、プログラムの処理としては文字列を+(付け加えながら表示する)

プロパティ要素 value での改行法は・・・nコードを記述する

<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみnこのわたnうに';">
<!--▲▲▲ここまでJavaScript▲▲▲-->

valueプロパティは文字を列普通の文字列として認識するので、HTMLタグも文字列のして扱われるので、改行させたい文字列に、nとJavaScriptの改行コードを記述する。

作成した課題04はこちらからページを移動する。

3コマ目

ゼロからはじめるJavaScript P40~44

課題05演算子の利用

コツ

プログラムを日本語で書いて、それをJavaScriptに変換する。

名前をつけるためのコツ

プログラムの記述を行いやすいためにわかりやすい名前をつける。

悪い例・・・text1 text2 text3 text4 text5

よい例・・・tb_zandaka

演算市の記述のコツ

演算市の両端に半角スペースを記述すると、読みやすくなる。

残高の計算

残高の値=収入の値-支出の値これをJavaScriptのプログラムに変えてあげる。

残高の値のしていプログラム・・・document.fm_keisan.tb.zandaka.value

収入の値・・・document.fm_keisan.tb_syuunyu.value

支出の値・・・document.fm_keisan.tb_sisyutu.value

よって、

残高の値=収入の値-支出の値は

document.fm_keisan.tb.zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value

これを表示させたいところに記述すると、実行される。

手順

フォームタグ・テキストタグに名称をつける。

制作したタグの記述は、

<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka" onFocus="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value">円</p>
<input type="button" value="リセットボタン" onfocus="document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0'">
</form>

消費税の計算

考え方

1番目・・・実行タイミング

税込金額のtextboxにフォーカスが当たったとき

税込金額のtextboxのonFocusイベント

2番目・・・ブラウザに何をさせたいのか?

本体金額の値*(1+消費税率の値/100)を税込金額の値に代入

税込金額=本体金額*(1+消費税率/100)

3番目タグに名前をつける

必要・・・本体金額の値の名前,消費税率の値の名前,税込金額の名前

本体金額の値の名前・・・document.fm_keisan.tb_hontai.value

消費税率の値の名前・・・document.fm_keisan.tb_zei.value

税込金額の値の名前・・・document.fm_keisan.tb_zeikomi.value

よって、javascriptは・・・

document.fm_keisan.tb_zeikomi.value=document.fm_keisan.tb_hontai.value*(1+document.fm_keisan.tb_zei.value/100)

記述は、

<form name="fm_keisan">

<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onfocus="document.fm_keisan.tb_zeikomi.value=document.fm_keisan.tb_hontai.value*(1+document.fm_keisan.tb_zei.value/100)">円</p>
</form>

さらに改良してこんなプログラムを組んでみました。

収支計算

収入 

支出 

残高 


消費税計算

本体金額 

消費税率 %

税込金額 

プログラムは下記

<h2>収支計算</h2>
<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu" onchange="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value;">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu" onchange="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value;">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka">円</p>
<input type="button" value="リセットボタンだぴょーん" onClick="document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0';">
<hr>
<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onFocus="document.fm_keisan.tb_zeikomi.value = document.fm_keisan.tb_hontai.value * (1 + document.fm_keisan.tb_zei.value / 100);">円</p>
<input type="reset" value="リセットボタンだよ~ん">
</form>

<input type="reset" value="リセットボタンだよ~ん">このボタンはフォームタグの中の記述を最初の状態に戻る。なので、上の計算も同じようにリセットされてしまう。

出来上がった課題05はこちらをクリックすると見れます。

上記のページのソースを見てもらうとわかるのですが、CSSのスタイルをコメントアウトしているが、ブラウザ等によって対応していないブラウザで見ると、表示されてしまう場合があるので、コメントアウトしている。

考え方は、JavaScriptと同じ

4コマ目

ブラウザがオブジェクトの名前を認識するのはいつ?

ブラウザが、HTML文書を上から読んでいって、名前の定義がされている部分を読み込んだ時

ブラウザが名前を認識する前にはJavaScriptのプログラムで名前を使うことはできない。

注意

bodyダグにjavascriptを埋め込む時、名前の指定タグより上に記述をしてしまうと、プログラムが実行しなくなるので、注意すること。

5コマ目

課題06関数の利用

ゼロからはじめるJavaScript P45~49

関数とは処理をまとめる

まとまった手順に名前をつけてまとめたもの

関数の書き方

ヘッドタグの中に記述する。

function ****(){このなかにjavascriptを記述する}

****()の部分にそのプログラムを実行したいタグで任意に名前をつけた名前を記述する。

6コマ目

完成した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-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<!--▼▼▼ここからスタイルシート▼▼▼-->
<style type="text/css">
<!--
.right{
text-align:right;
}
-->
</style>
<!--▲▲▲ここまでスタイルシート▲▲▲-->
<!--▼▼▼ここからjavascript▼▼▼-->
<script type="text/javascript">
<!--
function zandaka(){
document.fm_keisan.tb_zandaka.value = document.fm_keisan.tb_syuunyu.value - document.fm_keisan.tb_sisyutu.value;
}
function zandaka_reset(){
document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0';
}
function zeikomi(){
document.fm_keisan.tb_zeikomi.value = document.fm_keisan.tb_hontai.value * (1 + document.fm_keisan.tb_zei.value / 100);
}
-->
</script>
<!--▲▲▲ここまでjavascript▲▲▲-->

<title>簡単計算機</title>
</head>
<body>
<h1>簡単計算機</h1>
<hr>
<h2>収支計算</h2>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu" onchange="zandaka();">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu" onchange="zandaka();">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka">円</p>
<input type="button" value="リセットボタンだぴょーん" onClick="zandaka_reset()">
<hr>
<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onFocus="zeikomi()">円</p>
<input type="reset" value="リセットボタンだよ~ん">
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
</body>
</html>

完成WEBページ課題06へはこちら

数値を加算する場合

テキストボックス(文字列の並びが入っているとゆう扱いになる)

なので、処理は5000+2000=50002000とゆう処理の仕方になってしまう。

-だと、ブラウザが数値と判断するので正常に計算される。

なので、加算したい場合は

5000/1+2000/1=7000とゆうようにすると計算される。

5000*1+2000*1=7000でもよい

このページのトップへ移動する。

職業訓練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つの食材は何でしょう?


このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。