教育・子育て

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

マんタ
2020/05/28 06:11

では昨日の続きから

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

ここにjavascriptのプログラムが入ります。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

&lt;/head&gt;

&lt;body&gt;

&lt;div class="mein"&gt;

&lt;noscript&gt;

&lt;/noscript&gt;

&lt;form name="form1"&gt;

&lt;title&gt;おちゃ～～～注文書&lt;/title&gt;

&lt;p&gt;お茶一覧&lt;/p&gt;  

       &lt;p&gt;合計&lt;input name="moto"type="text"value="0"size="20"&gt;円&lt;/p&gt;



&lt;table summary="数量"&gt;

 &lt;caption&gt;お茶&lt;/caption&gt;

&lt;tr&gt;

&lt;th&gt;ナンバー&lt;/th&gt;

&lt;th&gt;商品名&lt;/th&gt;

&lt;th&gt;単価&lt;/th&gt;

&lt;th&gt;数量&lt;/th&gt;

&lt;th&gt;小計&lt;/th&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td class="right"&gt;01&lt;/td&gt;

&lt;td&gt;ほうじ茶&lt;/td&gt;

&lt;td class="right"&gt;1000円&lt;/td&gt;

&lt;td class="right"&gt;&lt;select name="na1" onchange="ocha1()"&gt;

&lt;option value="Hou0"selected&gt;0&lt;/option&gt;

&lt;option value="Hou1"&gt;1&lt;/option&gt;

&lt;option value="Hou2"&gt;2&lt;/option&gt;

&lt;option value="Hou3"&gt;3&lt;/option&gt;

&lt;option value="Hou1"&gt;4&lt;/option&gt;

&lt;option value="Hou2"&gt;5&lt;/option&gt;

&lt;option value="Hou3"&gt;6&lt;/option&gt;

 &lt;option value="Hou1"&gt;7&lt;/option&gt;

&lt;option value="Hou2"&gt;8&lt;/option&gt;

&lt;option value="Hou3"&gt;9&lt;/option&gt;

&lt;option value="Hou4"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;

&lt;td class="right"&gt;&lt;input name="sum1"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td class="right"&gt;02&lt;/td&gt;

&lt;td&gt;麦茶&lt;/td&gt;

&lt;td class="right"&gt;300円&lt;/td&gt;

&lt;td class="right"&gt;&lt;select name="na2" onchange="ocha2()"&gt;

&lt;option value="m0"selected&gt;0&lt;/option&gt;

&lt;option value="m1"&gt;1&lt;/option&gt;

&lt;option value="m2"&gt;2&lt;/option&gt;

&lt;option value="m3"&gt;3&lt;/option&gt;

 &lt;option value="m4"&gt;4&lt;/option&gt;

&lt;option value="m5"&gt;5&lt;/option&gt;

&lt;option value="m6"&gt;6&lt;/option&gt;

 &lt;option value="m7"&gt;7&lt;/option&gt;

&lt;option value="m8"&gt;8&lt;/option&gt;

&lt;option value="m9"&gt;9&lt;/option&gt;

&lt;option value="m10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;

&lt;td class="right"&gt;&lt;input name="sum2"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;

&lt;/tr&gt;

   &lt;tr&gt;

&lt;td class="right"&gt;03&lt;/td&gt;

&lt;td&gt;ジャスミン茶&lt;/td&gt;

&lt;td class="right"&gt;500円&lt;/td&gt;

&lt;td class="right"&gt;&lt;select name="na3" onchange="ocha3()"&gt;

&lt;option value="jas0"selected&gt;0&lt;/option&gt;

&lt;option value="jas1"&gt;1&lt;/option&gt;

&lt;option value="jas2"&gt;2&lt;/option&gt;

&lt;option value="jas3"&gt;3&lt;/option&gt;

 &lt;option value="jas4"&gt;4&lt;/option&gt;

&lt;option value="jas5"&gt;5&lt;/option&gt;

&lt;option value="jas6"&gt;6&lt;/option&gt;

 &lt;option value="jas7"&gt;7&lt;/option&gt;

&lt;option value="jas8"&gt;8&lt;/option&gt;

&lt;option value="jas9"&gt;9&lt;/option&gt;

&lt;option value="jas10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;

&lt;td class="right"&gt;&lt;input name="sum3"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;

&lt;/tr&gt;



&lt;/table&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

今回のJavaScriptのプログラムがこちら

&lt;script type="text/javascript"&gt;

&lt;!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 }
function ocha2(){
 document.form1.sum2.value=300*document.form1.na2.selectedIndex;
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 }
--&gt;
&lt;/script&gt;

プログラムの説明

function ocha1(){

　　　　　｝

関数　ocha1（）を宣言

document.form1.sum1.value

**=1000*document.form1.na1.selectedIndex;**

1000*na1の選択項目のインデックス番号に設定するという意味ですね。

選択項目って何って思う人もいるかもしれないので・・・

上のプログラムを表示すると

Content image

こんな風に表示されるので数量の横にある小さい下Vを押すと

Content image

このように選択項目が表示されるわけです。

ここで、選択項目のインデックス番号を返すプログラムの書き方

選択項目のインデックス番号を返す
document.フォーム名.選択リスト名.selectedIndex;
選択リストで選択する項目のインデックス番号を返す

onchange="ocha1()"

対象の値が変化したときにocha1()を実行する。

今回のプログラムは本数の小計が計算されるプログラムなので実際に確かめてみます

Content image

数を選ぶと自動で計算してくれるんですねwww

次に1.2.3の合計を自動的に出してみるプログラム

&lt;script type="text/javascript"&gt;
&lt;!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 }
function ocha2(){
 document.form1.sum2.value=300*document.form1.na2.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 }
--&gt;
&lt;/script&gt;

&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="gou" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;

今回追加した部分は上の2つです

詳しく解説する前に今回のポイントと使い方の説明をします。

まずは+について

+は文字列の連結や加算の演算に使えます
　文字列の接続例
document.write("今夜は”+"満月？")
こんな風に表示されますねｗｗｗ
　加算
document.write(1980+33900)

次に文字列を整数に変換する方法

文字列を整数に変換
parseInt(文字列)
文字列を整数に変換
小文字のⅼ(エル）じゃなくて大文字のI(アイ)なので注意！！

最期に先ほど作った合計のプログラムを起動します。

Content image

きちんと計算されていますね。

次回かその次で終わりになりますここまでご覧いただきありがとうございました。

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

BYマんタ

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

参考書は

よくわかる

ゼロからはじめるJavaScript

発行者　　大森　康文

著作/制作　富士通エフオーエム株式会社

Office JavaScript Webページプログラミング topic-education-parenting

0人がサポートしています

獲得ALIS:

42.10 ALIS

0.00 ALIS

マんタ
@25kit6

5月、そろそろ温かくなってきたかな？でも、少し肌寒いから健康管理は気を付けないとね。感染症もいろいろと流行ってるみたいだし・・・

投稿者の人気記事

雨が辛いｗｗｗ

Like token

Tip token

今度はチョコレート味ｗｗｗ

Like token

Tip token

ホームページ仮③　TOPページとリンク

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす！

246.34 ALIS 16.10 ALIS

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

676.97 ALIS 120.79 ALIS

教育・子育て

【科学（化学）】進化に必要だった猛毒のガス～酸素～

585.68 ALIS 25.63 ALIS

教育・子育て

【科学】アリストテレスにデカルトにニュートンに…みな光に取り憑かれた～光学の発展～

141.70 ALIS 22.75 ALIS

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

144.63 ALIS 159.32 ALIS

Eye catch

約２年間ブロックチェ－ンゲームをして

1.08k ALIS 61.20 ALIS

Bitcoin史〜0.00076ドルから6万ドルへの歩み〜

780.31 ALIS 947.13 ALIS

他カテゴリ

防犯意識マーキング下書き供養④

133.78 ALIS 24.07 ALIS

無料案内所という職業

596.41 ALIS 84.20 ALIS

「ハッシュ」とは何なのか、必ず理解させます

189.12 ALIS 0.10 ALIS

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

852.58 ALIS 38.31 ALIS

他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

389.09 ALIS 26.20 ALIS