教育・子育て

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

遂に！今年最後の月！！！気温もかなり下がって最低気温一桁だけど、まだなんとか耐えられる！年内に雪降らないトいいけどね(￣▽￣)

投稿者の人気記事

ありがとうございます。

Like token

Tip token

今日も暑い（т-т）

Like token

Tip token

雨が辛いｗｗｗ

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

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

681.47 ALIS 121.79 ALIS

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

799.98 ALIS 947.13 ALIS

他カテゴリ

BCAAは本当に必要なのか？徹底的調査

0.00 ALIS 1.20 ALIS

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

246.34 ALIS 16.10 ALIS

他カテゴリ

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

133.78 ALIS 24.07 ALIS

他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

827.50 ALIS 114.82 ALIS

無料案内所という職業

596.41 ALIS 84.20 ALIS

他カテゴリ

ALISのシステム概観

0.00 ALIS 5.00 ALIS

教育・子育て

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

153.37 ALIS 23.75 ALIS

Eye catch

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

1.10k ALIS 61.20 ALIS

他カテゴリ

オランダ人が語る大麻大国のオランダ

66.13 ALIS 46.20 ALIS

他カテゴリ

機械学習を体験してみよう！（難易度低）

454.56 ALIS 124.82 ALIS