JavaScript: パソコンを便利に！！

2021年05月27日

JavaScript テスト用ブログを用意して動作確認をする

ブログに JavaScript を使った計算ページを作る記事を書いてきましたが、作った計算ページを投稿してみると、ちゃんと動作していなくて、下書きに戻して直すことがけっこうありました。
そこで考えたのが、JavaScript テスト用ブログを作って、そこでテストしてから本来投稿するブログで投稿するという方法です。

JavaScript テスト用ブログは、一般に公開する必要がない（公開しない方がいい）ので、自分だけが見れるように設定します。
また、計算フォームの各部品の配置やデザインも確認したいので、同じブログサービスで同じデザインテンプレートを使う方がいいですが、ブログを１つしか作れないブログサービスの場合は、他のブログサービスを使っても基本的なテストはできると思います。

ファンブログでテスト用ブログを作る

ファンブログでは、１つのアカウントで５つまでブログを作ることができます。
すでに５つ作っているという場合は、別のアカウントを作ればさらに５つ作れそうですが、そんなに同じブログであることにこだわる必要もないので、次に書く Blogger や Seesaaブログを使うのもいいと思います。

１）ファンブログにブログを追加します。
ブログを追加する方法は、こちら。
　　
　ブログの新規作成: ファンブログＦＡＱ

一般に公開しないブログなので、ブログのタイトルは「テスト用ブログ」など適当でいいと思います。
デザインテンプレートは、実際に公開する方のブログと同じものにしておきます。

２）テスト用ブログを作ったら、［設定］を開きます。

３）［設定］ページでは、［ブログ設定］と［ページ認証］の設定をします。
まずは、［ブログ設定］を開きます。

４）［ブログ設定］では、「ブログポータルへの公開」を「紹介しない」に変更します。
これはファンブログの新着記事一覧に表示する設定ですが、一般に公開しないブログなので必要ないですね。
「紹介しない」に変更したら、一番下にある［保存］ボタンをクリックして、［ブログ設定］の設定は終わりです。

５）次に、［ページ認証］の設定をします。
３）のページに戻ってもいいですが、上部メニューの［設定］から［ページ認証］ページを開くことが出来ます。

６）［ページ認証］ページを開いたら、「ディレクトリ名」のところにある［編集］をクリックします。

７）「ユーザー名」と「パスワード」を入力して、［保存］ボタンをクリックします。
「ユーザー名」と「パスワード」は、自分がこのテスト用ブログを見るためのものです。
誰かにアクセスされたとしても困るものではないので、簡単なものでOKです。
私の場合は、「ユーザー名」・「パスワード」とも同じでアルファベット3文字にしています。

８）以上で、テスト用ブログの設定は完了です。
あとは、実際に公開する方のブログで追加しているCSS（スタイルシート）があれば、同じものを追加しておきます。

Seesaaブログでテスト用ブログを作る

Seesaaブログの設定は、ファンブログと似ています。
ファンブログでの手順１）～３）は、少し画面の表示が違う程度です。

４）［ブログ設定］も似たようなものですが、「ブログポータルへの公開」が「ブログを紹介する／しない」という表記になっています。
ここを「紹介しない」にします。

５）～７）の［ページ認証］も似ていますが、Seesaaブログでは「ディレクトリ名」が５つに分類されています。
その一番上の「 / 」で、「ユーザー名」と「パスワード」を設定しておけばOKです。

Blogger でテスト用ブログを作る

Blogger は１つのアカウントで作れるブログの数に制限はありません。
実際に公開するブログを Blogger で作っている場合は、テスト用ブログも Blogger で作るのがいいと思います。

１）Blogger で新しいブログを作るときは、Blogger にログインして、左上のブログ名が表示されている右側にある「▼」をクリックします。

２）Blogger で作成済みのブログが表示された一番下の「新しいブログ」をクリックすると、新しいブログを作ることができます。

３）新しいブログを作ったら、［設定］を開きます。

４）［設定］ページの中の「検索エンジンに表示されるようにする」のスイッチをオフにします。
一般に公開しないブログなので検索エンジンに表示される必要はありませんし、ここをオンしておいた場合、実際に公開するブログの記事より、テスト用ブログの記事を優先して検索エンジンに登録されてしまうかもしれません。

５）同じ［設定］ページの中の「読者の権限」を「投稿者に限定公開」に変更て、［保存］をクリックします。
これで他の人が見れないようにできます。

以上で設定完了です。
こちらも、実際に公開する方のブログで追加しているCSS（スタイルシート）があれば、同じものを追加しておきます。

その他のブログでテスト用ブログを作る

その他のブログでも、設定ページで同じような設定をすれば、テスト用ブログとして使えると思います。
設定すべき点は、以下のとおりです。
１）ページ認証などで、一般の人から見れないようにする。
２）ブログサービスの新着記事に表示させないようにする。
３）検索エンジンに表示されないようにする（これは Blogger だけのはず）

posted by ぽん太親父 at 20:20 | Comment(2) | TrackBack(0) | JavaScript

2021年05月21日

JavaScriptの勉強の最初の一歩は、簡単な計算ページを作ってみるのがいいかも

たまたま HTML5 の outputタグを使って簡単な計算ができることを知って、いろいろな計算をやってみたところ、その限界を感じて、初めて JavaScript というものに挑戦してみることにしました。
挑戦といっても、取っ掛かりは参考になりそうなコードをネットで見つけて、そのコードを少し変えて試してみたという程度のもので、そこから少しずつ改良することで、ブログに計算ページを作るだけなら、まあ使えるレベルのものが作れるようになったと思います。

簡単な計算ページを作ってみただけなのですが、結果としてこれが JavaScript というものを勉強する最初の一歩として、けっこう有効だったんじゃないかと感じています。
JavaScript の初歩とか、初心者向けとして書かれたものを読んでも、難しくてなかなか取っ付きにくいものですが、簡単な計算ページなら、参考のコードをコピペして少しずついじってみることで、基本の形ができてしまいます。
基本の形ができれば、あとは計算式部分をいろいろ変えることで、かなり実用的なページも作っていけます。
電卓で計算して、電卓に表示された計算結果を見て、パソコンのソフトに入力という手順が、ブラウザ上で計算して、コピーボタンでクリップボードにコピー、パソコンのソフトに貼り付けという手順に置き換えられる。
実際に使えるページが作れるということは、その後の応用の勉強を続けるモチベーションアップにもプラスになるはずです。
以下、ブログに計算ページを作った過程を説明した記事と、それを元にいろいろな計算ページを作った実例をあげていますので、もし、JavaScript に少し興味がある、勉強してみたいというときは、参考にしてみてください。

計算ページ作成記事の一覧

ブログに計算ページを作った過程を説明した記事の一覧です。
「1. ブログの記事内でJavaScriptを使って計算できるようにする」で、とりあえず簡単な形を作ってみて、ちゃんと計算できるのか試して、その後で少しずつ改良を加えていっています。
1. から順に読んで試していただけると、7. までで一通り完成します。
各記事はできるだけ詳しく書いてみているのでややこしそうですが、実際にはそれぞれの記事でやっている内容は簡単です。

ブログに計算ページを作った参考例

計算ページが割と簡単に作れると分かって、仕事で電卓で計算している部分を計算ページとして作っておけば、自分でも便利なうえに他の誰かにも使ってもらえると思うと、がぜんやる気が出てきて作ったのがこちらです。
　　　
　建築積算電卓：積算業務補助用各種簡易計算ツール

専門的な計算が多いですが、円・扇形・三角形といった一般的なものもあります。
それぞれのページが、どのようなコードになっているか知りたいときは、ソースを表示すれば見ることができます。
Google Chrome 系のブラウザであれば、次の手順でソースを表示できます。

１）調べたい計算ページのタイトルをコピー

２）計算ページ上で右クリックして［ページのソースを表示］をクリック

３）［Ctrl］＋［F］キーを押して、検索ボックスを表示

４）検索ボックスに［Ctrl］＋［V］で貼り付け
（コピーしておいた計算ページのタイトルが検索ボックスに入ります）

５）計算ページのソースが見つかるはずです。

posted by ぽん太親父 at 19:24 | Comment(0) | TrackBack(0) | JavaScript

2021年05月20日

共通のJavaScriptコードはサイドバーに設置／ブログでJavaScriptで計算

前回記事で、足し算と掛け算を計算するページが完成しました。
　　↓
　計算フォームの見た目を整える／ブログでJavaScriptで計算


そのページでは、JavaScript コードはすべてその記事ページの中に入れてあります。

これを元に計算ページをいろいろ作っていくとすると、計算部分の JavaScript コードはそれぞれのページで違ってきますが、計算結果をコピーする部分の JavaScript コードは、共通で利用できそうです。
数値入力ボックスでIMEを半角入力モードにするの記事でそれを試そうとして、その前のコピーする計算結果の数字は3桁区切りのカンマなしにするの記事に設置してある「計算結果をコピーする JavaScript コード」を利用しようとしましたが、その方法ではどうもうまく機能しないようでした。

共通で利用できるものや少し規模の大きい JavaScript コードは、ファイル化してブログにアップロードするという方法がありますが、無料で利用できるブログでは JavaScript コードをアップロードできないものもあると思います。
そこで、別のブログで試した方法が、ブログのサイドバーに設置する方法です。
試したのは Blogger で、HTML/JavaScript のガジェットに JavaScript コードを書いてサイドバーに設置することで、各記事ページの計算フォームから呼び出して機能しています。
他のブログでは、例えば、ファンブログ・Seesaaブログの場合はコンテンツ→自由形式、FC2ブログの場合はプラグイン→フリーエリアに JavaScript コードを書いて、サイドバーに設置するということになります。
おそらく、それでうまく機能するはずです。
このページで、それを試してみます。

［答えをコピー］ボタンの JavaScript をサイドバーに設置した計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
見た目は前回記事：計算フォームの見た目を整える／ブログでJavaScriptで計算の計算フォームと全く同じですが、［答えをコピー］ボタンの JavaScript をサイドバーに設置して利用するため、その分の JavaScript はここには入っていません。

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV7">
  Ａ：<input class="inputbox1" type="tel" name="a" value="">
  Ｂ：<input class="inputbox1" type="tel" name="b" value="">
  <table>
    <tr>
      <td><input class="keisanbutton" type="button" name="keisan" value="計算" onClick="calTasuKakeruV7();"></td>
      <td><input class="keisanbutton" type="reset" name="reset" value="クリア"></td>
    </tr>
  </table>
  <table>
    <tr>
      <td align="right">Ａ＋Ｂ＝</td>
      <td><input class="inputbox2" type="text" id="answer1" value=""></td>
      <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnswerCopy1();"></td>
      <td><input class="inputbox3" type="text" id="answer1a" value=""></td>
    </tr>
    <tr>
      <td align="right">Ａ×Ｂ＝</td>
      <td><input class="inputbox2" type="text" id="answer2" value=""></td>
      <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnswerCopy2();"></td>
      <td><input class="inputbox3" type="text" id="answer2a" value=""></td>
    </tr>
  </table>
</form>

赤色部分が今回変更したところです。
V7 はこれまでと同じで、ブログ内で名前の重複を避けるためです。

［答えをコピー］ボタンで呼び出す JavaScript の名前は、これまでの AnsCopy1V6 から共通の Script らしいAnswerCopy1・AnswerCopy2 に変えました。
これによって、サイドバーに設置した JavaScript が機能していることも確認できます。

id を ans1,2,1a,2a から answer1,2,1a,2a への変更は特に必要のないものですが、AnswerCopy1,2 の変更に合わせておきました。

変更したコードの解説（JavaScript・このページに設置したもの）

今回のこのページに設置した JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV7()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV7.a.value - 0;
  inputValueB = document.calformTasuKakeruV7.b.value - 0;
  // 変数を使って計算
  answer1 = inputValueA + inputValueB;
  answer2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV7.answer1.value = answer1.toLocaleString();
  document.calformTasuKakeruV7.answer2.value = answer2.toLocaleString();
  document.calformTasuKakeruV7.answer1a.value = answer1;
  document.calformTasuKakeruV7.answer2a.value = answer2;
}
</script>

赤色部分が変更か所ですが、いずれも計算フォームで変更した名前に合わせた変更です。

［答えをコピー］ボタンで呼び出す JavaScript は、サイドバーに設置するため、ここでは削除しています。

［答えをコピー］ボタンで呼び出す JavaScript をサイドバーに設置する

ここファンブログでの説明になりますが、他のブログでも似たようなものです。

１）ブログの管理ページを開いて、［デザイン］→［コンテンツ］を開きます。

Seesaaブログはファンブログと同じです。
Blogger では［レイアウト］→［ガジェットを追加］
FC2ブログでは［設定］→［プラグインの設定］になります。

２）［便利機能］の中の［自由形式］をサイドバーの一番下に、ドラッグして設置します。

Seesaaブログはファンブログと同じです。
Blogger では［HTML/JavaScript］
FC2ブログでは［公式プラグイン追加］→［拡張プラグイン］→［フリーエリア］になります。

３）サイドバーに設置した［自由形式］の歯車アイコンをクリックします。

４）タイトルに「JavaScript」など分かりやすい名称を入れて、コード入力部に JavaScript コードを入力します。
［保存する］ボタンをクリックします。

５）［閉じる］ボタンをクリックします。

「保存されていない内容は破棄されます。よろしいですか？」と聞いてきますが、４）で保存済みなので、そのまま［OK］ボタンをクリックします。

６）サイドバーに設置した JavaScript コードの説明

<script language="javascript">
// 計算結果をコピー
function AnswerCopy1() {
    var copyTarget = document.getElementById("answer1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
function AnswerCopy2() {
    var copyTarget = document.getElementById("answer2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
</script>

前回記事で記事ページに設置した JavaScript コードと基本的には同じです。
赤色部分が変わった部分になりますが、いずれも計算フォームで変更した名前部分を変えただけになっています。

その他

サイドバーに設置するといっても、ブログの画面上には JavaScript 自体は何も表示されません。
あとは、それぞれの記事ページの計算フォームのコードで、AnswerCopy1,2、answer1a,2a の名前を同じにすれば、サイドバーに設置した JavaScript が共通で利用できるということになります。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 21:20 | Comment(0) | TrackBack(0) | JavaScript

2021年05月19日

計算フォームの見た目を整える／ブログでJavaScriptで計算

前回記事までで、思いつく機能はすべて盛り込めました。
　　↓
　数値入力ボックスでIMEを半角入力モードにする／ブログでJavaScriptで計算

今回は、計算フォームの見た目を整えます。
具体的には、ボタンや計算結果の表示スペースのデザインを変えて、ボタンを横に並べたりといった感じです。
ただし、スマホで見ると画面からはみ出したりして酷い状態です。
このブログでは、スマホ版ではCSSが使えないためです。
このブログ（ファンブログ）でスマホ版のCSSが使えることが分かったので、パソコン版と同じCSSを設定しました。

見た目を整えた計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。

前回の計算フォームと比べていただけると、違いが分かると思いますが、以下の点を変えています。
・入力ボックスの幅
・計算結果表示ボックスの幅と色
・各ボタンのデザイン
・計算ボタンとクリアボタンの配置
・計算結果のラベル・数値・コピーボタンの配置
・3桁区切りのない計算結果を非表示に

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV6">
  Ａ：<input class="inputbox1" type="tel" name="a" value="">
  Ｂ：<input class="inputbox1" type="tel" name="b" value="">

<table>
  <tr>
    <td><input class="keisanbutton" type="button" name="keisan" value="計算" onClick="calTasuKakeruV6();"></td>
    <td><input class="keisanbutton" type="reset" name="reset" value="クリア"></td>
  </tr>
</table>

<table>
  <tr>
    <td align="right">Ａ＋Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans1" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy1V6();"></td>
    <td><input class="inputbox3" type="text" id="ans1a" value=""></td>
  </tr>
  <tr>
    <td align="right">Ａ×Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans2" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy2V6();"></td>
    <td><input class="inputbox3" type="text" id="ans2a" value=""></td>
  </tr>
</table>

</form>

赤色・青色・緑色部分が、今回主に変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

１）［計算］ボタンと［クリア］ボタンを横に並べる
ラベル・入力ボックス・ボタンといった各要素を横に整った状態で並べたいときは、<table> タグを使います。
上の例では青色にした部分が <table> タグで、２つの <table> を使っています。
1つ目の <table> で、［計算］ボタンと［クリア］ボタンを横に並べています。
分かりやすくするため、この <table> をシンプルに表すと下のような構造になり、実際のコードでは、①部分に［計算］ボタンのコード、②部分に［クリア］ボタンのコードが入っています。

<table>
  <tr>
    <td> ① </td>
    <td> ② </td>
  </tr>
</table>

２）計算結果部分を横に並べる
２つ目の <table> で、計算結果部分（ラベル・計算結果・コピーボタン・コピー用計算結果）を、2行に分けて横に並べています。
この <table> を簡単に表すと下のようになります。

<table>
  <tr>
    <td> ① </td><td> ② </td><td> ③ </td><td> ④ </td>
  </tr>
  <tr>
    <td> ⑤ </td><td> ⑥ </td><td> ⑦ </td><td> ⑧ </td>
  </tr>
</table>

①～④はＡ＋Ｂの計算結果部分が、それぞれ次のように入っています。
　①：ラベル（Ａ＋Ｂ）
　②：計算結果（3桁区切りあり）
　③：計算結果コピーボタン
　④：計算結果（3桁区切りなし）※ただし非表示
Ａ×Ｂの計算結果も同じように、⑤～⑧に入っています。
①と⑤のラベルは、右寄せにした方が上下で揃って見えるので、align="right" を入れて右寄せにしています。

３）ボタンのデザイン
ボタンのデザインは、CSSで下のように書いて、計算フォームの中の各ボタンのコードで
class="keisanbutton" で呼び出しています。

/* ▼ 計算ボタン ▼ */
.keisanbutton {
  width: auto;
  text-align: center;
  display: block;
  padding: 2px 5px 2px 5px;
  background: #F3F2F2;
  border: 1px solid;
  border-radius: 5px
}
/* ▲ 計算ボタン ▲ */

ボタンのデザインを設定するCSSは、「ボタン　CSS」みたいな言葉でネット検索すると、いろいろなデザインのボタンのCSSが見つかるので、この中から気に入ったものをコピーして使うのがいいと思います。
私もどこかで見つけて、色を変えるなど少し編集して使っています。
ちゃんと理解しきれていない部分もありますが、簡単に説明しておきます。

a) 最初と最後の /* と */ で挟んだ部分はコメントで、CSSとして機能しないメモとして使います。
/* と */ が逆になっているのを間違えないように。

b) .keisanbutton { と } の間にデザインの設定を書きます。
計算フォーム側でそのデザインを呼び出す class="keisanbutton" と同じ名前にします。

c) width: auto; は、ボタンの幅を、ボタンに表示する名称に合わせて自動で設定するものです。

d) text-align: center; は、ボタンに表示する名称をボタンの中心に配置します。

e) display: block; は、ブロックレベル要素にするというもので、意味が分かりづらいですが、ブロックレベル要素にすることで、要素同士が改行されて縦に配置され、余白などを設定できるようになります。

f) padding: 2px 5px 2px 5px; でボタンの文字の周囲の余白を設定しています。
左から順に、上・右・下・左の余白です。

g) background: #F3F2F2; でボタンの色を設定しています。

h) border: 1px solid; でボタンの枠線の太さと種類を設定しています。

i) border-radius: 5px は、ボタンの4隅の面取りです。
5pxを大きくすると面取りが大きくなり、小さくすると面取りが小さくなります。
ちなみに、各行の最後のセミコロン（ ; ）は、複数の設定をするときの区切りなので、最後の行には不要です。
（付いていても、機能しますが）

それぞれの設定値を調べたいときは、「CSS　padding」みたいにネット検索すると、情報が見つかると思います。

４）入力ボックスのデザイン
入力ボックスのデザインは、CSSで下のように書いて、計算フォームの中の各入力ボックスのコードで
class="inputbox1" で呼び出しています。

/* ▼ inputbox(数値入力) ▼ */
.inputbox1 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#FFFFFF;
  border: 1px solid
}
/* ▲ inputbox(数値入力) ▲ */

デザインとして設定している内容は、ボタンと大して変わらないので説明を省きますが、text-align: で数字を右寄せで表示して、padding: で右の余白を 5px にして、数字が右の枠から少し離れるようにしています。
また、標準のままだと文字が少し小さいので、font-size:16px; で少し大きくしています。

５）計算結果ボックス（3桁区切りカンマあり）のデザイン
計算結果ボックス（3桁区切りカンマあり）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックスのコードで class="inputbox2" で呼び出しています。

/* ▼ inputbox(計算結果) ▼ */
.inputbox2 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#F0F0F0;
  border: 1px solid
}
/* ▲ inputbox(計算結果) ▲ */

こちらも、設定している内容は入力ボックスとあまり違わないので、説明を省略しますが、ボックス内の色を background:#F0F0F0; にして、入力する部分と違う色にしています。

６）計算結果ボックス（3桁区切りカンマなし）のデザイン
計算結果ボックス（3桁区切りカンマなし）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックス（3桁区切りカンマなし）のコードで class="inputbox3" で呼び出しています。

/* ▼ inputbox(計算結果非表示) ▼ */
.inputbox3 {
  width: 100px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 0px none
}
/* ▲ inputbox(計算結果非表示) ▲ */

こちらは、画面上に表示されないようにするため、文字とボックス内の色を、ブログの背景色と同じ白（#FFFFFF）で表示するようにしています。
背景色と同じ色にして何もないように見せているわけで、その部分をマウスでドラッグして範囲選択すると、色が反転するので、計算結果が見えます。
なお、スマホ版では表示幅が足りなくなるため、ここの width: 100px; を width: 10px;にして幅が収まるようにしています。
それ以外は、スマホ版のCSSもパソコン版と同じにしています。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV6()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV6.a.value - 0;
  inputValueB = document.calformTasuKakeruV6.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV6.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV6.ans2.value = ans2.toLocaleString();
  document.calformTasuKakeruV6.ans1a.value = ans1;
  document.calformTasuKakeruV6.ans2a.value = ans2;
}
// 計算結果をコピー
function AnsCopy1V6() {
    var copyTarget = document.getElementById("ans1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
function AnsCopy2V6() {
    var copyTarget = document.getElementById("ans2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
</script>

赤色部分が、今回変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

また、計算結果コピー用の3桁区切りカンマなしの数値は見えないようにしたため、最後の行の copyTarget.remove(); でその数値を削除するのをやめて、代わりに copyTarget.blur(); として、コピーのためにその数値を選択した状態を解除しています。
remove(); で数値を削除すると、コピー対象がなくなるので、選択した状態も解除できて、画面上ではその部分に何も表示されないのでいいのですが、コピーしたあとで、もう一度その数値をコピーしたい場合もあるので、できれば数値は削除しない方がいいです。
そこで、コピー対象を削除しないで、単にフォーカスを外す blur(); に変更したというわけです。

その他

今回 CSS を使ってデザインを変えた部分は、計算フォームの HTML コードに直接書いて設定することもできますが、CSS を使っておけば、後で少しデザインを変えたいといったときに、同じデザインを使った部分は CSS の変更だけで済みます。
できるだけ CSSで設定しておいた方がいいです。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 18:07 | Comment(0) | TrackBack(0) | JavaScript

数値入力ボックスでIMEを半角入力モードにする／ブログでJavaScriptで計算

前回記事では、計算結果のコピーを3桁区切りカンマが入らないものにできました。
　　↓
　コピーする計算結果の数字は3桁区切りのカンマなしにする／ブログでJavaScriptで計算

今回は、数値を入力するときにIMEが半角入力モードになるようにします。
こういったことも、「JavaScript （やりたいこと）」みたいな言葉でネット検索すると、やり方を書いてくれている人がたくさんいるので、けっこう簡単に方法が見つかります。
インターネットは、やはり便利ですね。

ところが今回は、いくつかの記事で見つけた方法がうまく機能しませんでした。
少し調べてみると、ブラウザで動作するプログラム（Script）で、Windowsの機能をコントロールできてしまうと危険ということから、IMEをオフにしたりオンにしたりできなくなっていることが分かりました。

いったん諦めようかと考えましたが、その後に見つかった方法でうまくいったので、その方法で説明します。

数値入力欄でIMEが半角英数入力モードになるようにした計算フォーム

計算フォームの見た目は前回のものとまったく同じですが、ＡとＢの入力ボックスをクリックしてカーソルがそこに移動すると、IMEが半角英数モードになるはずです。

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV5">
  Ａ：<input type="tel" name="a" value="">
  Ｂ：<input type="tel" name="b" value="">
  <input type="button" name="keisan" value="計算" onClick="calTasuKakeruV5();">
  <input type="reset" name="reset" value="クリア">
  Ａ＋Ｂ＝<input type="text" id="ans1" value=""> <input type="text" id="ans1a" value="">
  Ａ×Ｂ＝<input type="text" id="ans2" value=""> <input type="text" id="ans2a" value="">
  <input type="button" value="Ａ＋Ｂの答えをコピー" onClick="AnsCopy1V5();">
  <input type="button" value="Ａ×Ｂの答えをコピー" onClick="AnsCopy2V5();">
</form>

赤色部分が今回変更または追加した部分です。
「V5」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更です。
でも AnsCopy1V4 のところは V4のままです。
これは、 AnsCopy1V4 の JavaScript コードが前回の記事で書いたものとまったく同じなので、それがそのまま使えるはずだからです。
AnsCopy1V5 にしたところは、JavaScript コードが前回の記事で書いたものとまったく同じなので、V4のままにして前回記事のJavaScript コードを呼び出せそうなのですが、うまく行ったり行かなかったりするので、V5に変更することにしました。

計算フォームのコードで変わったのは、ＡとＢの入力ボックス部分の type="text" が type="tel" になっているところです。
これによって、これまでテキストの入力ボックスだったのが、電話番号の入力ボックスになり、それに対応してIMEが半角英数モードに変わるわけです。

この方法の場合は、電話番号を入力する場所だと判断して、IME が自ら半角英数モードになるわけで、JavaScript が IME をコントロールしていないので、危険はないということのようです。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV5()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV5.a.value - 0;
  inputValueB = document.calformTasuKakeruV5.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV5.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV5.ans2.value = ans2.toLocaleString();
  document.calformTasuKakeruV5.ans1a.value = ans1;
  document.calformTasuKakeruV5.ans2a.value = ans2;
}
// 計算結果をコピー
function AnsCopy1V5() {
    var copyTarget = document.getElementById("ans1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.remove();
}
function AnsCopy2V5() {
    var copyTarget = document.getElementById("ans2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.remove();
}
</script>

JavaScript のコードで変わったのは、計算フォームの名前の変更に対応して「V5」に変えたところだけです。

あとは、計算結果をコピーするコードをなくしています。
計算フォームのところでも書きましたが、計算結果をコピーするコードは前回記事で使ったものとまったく同じなので、今回の記事の中にはそのコードを入れなくても、前回記事のコードを利用できるからです。
計算フォームのコードの説明でも書いたように、計算結果をコピーするコードは、前回記事のものを呼び出すのが出来たり出来なかったりするので、V4 を V5 に変えて入れてあります。

その他

結局のところ今回の変更は、入力ボックスのタイプを text から tel に変えただけなので簡単でした。
次回は、見た目を整えることをやってみます。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 10:00 | Comment(0) | TrackBack(0) | JavaScript

2021年05月15日

コピーする計算結果の数字は3桁区切りのカンマなしにする／ブログでJavaScriptで計算

前回記事では、計算結果の数値に3桁区切りカンマが入るようにしました。
そのため、計算結果をコピーするボタンをクリックしたときにコピーされる数値も、3桁区切りカンマが入ったものになっています。
　　↓
計算結果の数字に3桁区切りのカンマを入れる／ブログでJavaScriptで計算

このコピーされた数値を、業務用ソフトや Excel に貼り付けてみると、ちゃんと数値として貼り付けられるので、そのままでよさそうな気がしますが、貼り付け先によっては3桁区切りカンマが入るとまずいという場合もあるかもしれません。
コピーされる数値は、3桁区切りカンマが入らないようにする方法を考えてみました。

コピーする計算結果は3桁区切りカンマがないものにした計算フォーム

計算結果を、3桁区切りのカンマがあるものと、ないものの2つ表示して、3桁区切りのカンマがない方をコピーするようにしています。
コピーボタンをクリックすると、3桁区切りのカンマがない答えがコピーされて、画面上から消えるようになっています。
答えをコピーするまで、3桁区切りカンマ付きとカンマなしが表示されるのが不細工ですが、カンマなしの方を非表示にする方法は、別の記事で説明します。

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV4">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">
  <input type="button" name="keisan" value="計算" onClick="calTasuKakeruV4();">
  <input type="reset" name="reset" value="クリア">
  Ａ＋Ｂ＝<input type="text" id="ans1" value=""> <input type="text" id="ans1a" value="">
  Ａ×Ｂ＝<input type="text" id="ans2" value=""> <input type="text" id="ans2a" value="">
  <input type="button" value="Ａ＋Ｂの答えをコピー" onClick="AnsCopy1V4();">
  <input type="button" value="Ａ×Ｂの答えをコピー" onClick="AnsCopy2V4();">
</form>

赤色部分が今回変更または追加した部分です。
「V4」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更です。

なので、変わったのは計算結果を表示している右側に追加した <input type="text" id="ans1a" value=""> だけです。
元々表示していた計算結果の id="ans1" を id="ans1a" に変えていて、3桁区切りのカンマが付かない計算結果を id="ans1a" で表示させようとしているわけです。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV4()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV4.a.value - 0;
  inputValueB = document.calformTasuKakeruV4.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV4.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV4.ans2.value = ans2.toLocaleString();
  document.calformTasuKakeruV4.ans1a.value = ans1;
  document.calformTasuKakeruV4.ans2a.value = ans2;
}
// 計算結果をコピー
function AnsCopy1V4() {
    var copyTarget = document.getElementById("ans1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.remove();
}
function AnsCopy2V4() {
    var copyTarget = document.getElementById("ans2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.remove();
}
</script>

こちらも赤色が変わった部分で、「V4」は前回までと同様に、ブログ内でのコードの重複をさけるための変更です。

「計算結果をフォームに出力」の部分に2行追加していますが、これが計算フォームで追加した部分に対応しています。
計算フォーム（calformTasuKakeruV4）の ans1a の値＝ ans1 としていて、後ろに .toLocaleString() が付いていないので、ans1a の値は3桁区切りのカンマが付かないものになるわけです。

そして、「計算結果をコピー」部分では、その計算フォームの ans1a の値をコピーするように変更しています。

その他

次に使い勝手として気になるのが、ＡとＢの数値を入力するときにIMEが日本語入力モードになっていると、数字が全角で入力されてしまうところです。
半角数字で入力してくださいと表記するとして、［F8］キーで半角にしてもらえばいいのですが、ExcelみたいにIMEを制御したいところです。
次回は、その辺りについてやってみます。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 21:36 | Comment(0) | TrackBack(0) | JavaScript

2021年05月10日

計算結果の数字に3桁区切りのカンマを入れる／ブログでJavaScriptで計算

前回記事で、計算結果をクリップボードにコピーできるボタンが設置できました。
　　↓
　計算結果をコピーできるボタンを設置する／ブログでJavaScriptで計算

今回からは、少し見た目の改善をしていきます。
まずは、計算結果の数字の桁数が大きくなったときに、3桁区切りのカンマを入れて表示するようにします。
やり方は、「JavaScript　3桁区切り」といった言葉でネット検索すると、すぐに見つかりました。
しかも、JavaScript の計算結果を計算フォームに返す部分に、「.toLocaleString()」を加えるだけなので簡単です。

計算結果の数字に3桁区切りのカンマが入る計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
ＡとＢに少し大きめの数字を入力して計算すると、答えの数字に3桁区切りのカンマが入るはずです。

変更したコードの解説（フォーム）

上で設置した計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV3">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">
  <input type="button" name="keisan" value="計算" onClick="calTasuKakeruV3();">
  <input type="reset" name="reset" value="クリア">
  Ａ＋Ｂ＝<input type="text" id="ans1" value="">
  Ａ×Ｂ＝<input type="text" id="ans2" value="">
  <input type="button" value="Ａ＋Ｂの答えをコピー" onClick="AnsCopy1V3();">
  <input type="button" value="Ａ×Ｂの答えをコピー" onClick="AnsCopy2V3();">
</form>

赤色部分が今回変更または追加した部分です。
計算フォームは基本的に変更なしで、前回記事のコードとの重複を避けるためにフォームと JavaScript の名前の「V2」を「V3」に変更しただけです。
（AnsCopy1V3() の部分は、前回のコードの AnsCopy1() に「V3」を加えています）

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV3()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV3.a.value - 0;
  inputValueB = document.calformTasuKakeruV3.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV3.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV3.ans2.value = ans2.toLocaleString();
}
// 計算結果をコピー
function AnsCopy1V3() {
    var copyTarget = document.getElementById("ans1");
    copyTarget.select();
    document.execCommand("Copy");
}
function AnsCopy2V3() {
    var copyTarget = document.getElementById("ans2");
    copyTarget.select();
    document.execCommand("Copy");
}
</script>

赤色部分が今回変更または追加した部分です。
「V2」が「V3」に変わっているのは、計算フォームの変更と同じコードの重複を避けるためのものです。
結局変わったのは、計算結果をフォームに出力する部分の ans1 と ans2 の後ろに「.toLocaleString()」を加えただけということになります。

今回の変更によって、クリップボードにコピーする計算結果も、3桁区切りのカンマが付いた数値でコピーされます。
貼り付け先によっては、3桁区切りのカンマが使いない方がいい場合もありそうです。
次回記事で、その方法を書いてみます。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 20:26 | Comment(0) | TrackBack(0) | JavaScript

2021年05月08日

計算結果をコピーできるボタンを設置する／ブログでJavaScriptで計算

前回記事で、javascript を使ってブログの記事内で計算できる「計算ページ」のようなものを作ることは、そんなに難しくないことが分かりました。
　　　↓
　ブログの記事内でJavaScriptを使って計算できるようにする

上の画像は前回記事で作ったもので、とりあえず javascript を使って計算できるかを確認するだけのものなので、見た目とか何とかしたいところですが、今回は機能を優先することにします。
追加する機能は、計算結果をコピーできるボタンの設置です。
これができれば、計算結果を別のアプリに貼り付けることができるので、少し便利になります。

計算結果コピーボタンを追加した計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
追加したのは、見た目では［Ａ＋Ｂの答えをコピー］ボタンと［Ａ×Ｂの答えをコピー］ボタンで、表示されない JavaScript にボタンをクリックしたときの処理を書き加えています。
ＡとＢに数値を入力して［計算］ボタンをクリックすると計算結果が表示され、2つのコピーボタンをクリックすると、計算結果がクリップボードにコピーされるはずです。

変更したコードの解説（フォーム）

上で設置した計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV2">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">
  <input type="button" name="keisan" value="計算" onClick="calTasuKakeruV2();">
  <input type="reset" name="reset" value="クリア">
  Ａ＋Ｂ＝<input type="text" id="ans1" value="">
  Ａ×Ｂ＝<input type="text" id="ans2" value="">
  <input type="button" value="Ａ＋Ｂの答えをコピー" onClick="AnsCopy1();">
  <input type="button" value="Ａ×Ｂの答えをコピー" onClick="AnsCopy2();">
</form>

赤色部分が今回変更または追加した部分です。

１）フォームと JavaScript の名前に「V2」を追加
計算フォームと［計算］ボタンで呼び出す JavaScript の名前は、前回記事で使ったものと同じだと JavaScript がどちらか判断できないので、「V2」を加えることで、別のフォームと別の JavaScript として扱うようにしています。

２）計算結果の name を id に変更
計算結果をコピーする２つのボタンをクリックしたときに、JavaScript で計算結果をコピーする処理を書いていますが、そのときにどの値をコピーするかを id でしていするため、name を id に変更しています。

３）計算結果をコピーするボタンのコードを追加
最後の2行に、計算結果をコピーするボタンのコードを追加しています。
それぞれのボタンのコードの最後の onClick="AnsCopy1();" と onClick="AnsCopy2();" で、計算結果をコピーする JavaScript を呼び出しています。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV2()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV2.a.value - 0;
  inputValueB = document.calformTasuKakeruV2.b.value - 0;

  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;

  // 計算結果をフォームに出力
  document.calformTasuKakeruV2.ans1.value = ans1;
  document.calformTasuKakeruV2.ans2.value = ans2;
}
// 計算結果をコピー
function AnsCopy1() {
    var copyTarget = document.getElementById("ans1");
    copyTarget.select();
    document.execCommand("Copy");
}
function AnsCopy2() {
    var copyTarget = document.getElementById("ans2");
    copyTarget.select();
    document.execCommand("Copy");
}
</script>

赤色部分が今回変更または追加した部分です。

１）JavaScript とフォームの名前に「V2」を追加
フォームの説明で書いたように、前回記事の JavaScript とフォームと名前が重複しないようにするため、それぞれの名前に「V2」を追加しています。

２）計算結果をコピーするコードの追加
「// 計算結果をコピー」の下に加えたのが、計算結果をコピーするコードです。
［Ａ＋Ｂの答えをコピー］ボタンの処理を function AnsCopy1() に、［Ａ×Ｂの答えをコピー］ボタンの処理を function AnsCopy2() に書いています。

３）var copyTarget = document.getElementById("ans1");
フォームで計算結果の name を id に変更しましたが、その計算結果 id="ans1" を変数 copyTarget に指定してしています。

４）copyTarget.select();
クリップボードにコピーするために、３）で指定した変数 copyTarget を選択しています。

５）document.execCommand("Copy");
３）と４）で選択したコピー対象を、このコードでクリップボードにコピーしています。

その他

フォームと JavaScript は、ブログの中で重複しないように名前を付けること、クリップボードにコピーする対象は name じゃなくて id で名前を付けるという点に注意すれば、今回のコピー機能追加は難しくないと思います。
まだ、改良したいところがいくつかあるので、次回以降の記事で書いていきます。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 21:33 | Comment(0) | TrackBack(0) | JavaScript

2021年05月07日

ブログの記事内でJavaScriptを使って計算できるようにする

HTML5のoutputタグを使うと、ブログの記事内で簡単に計算ができることが分かったので、いろいろな計算をやってみました。
そのときの記事がこれ ↓ です。

　ブログ上でHTML5の新機能outputを使って2乗・平方根・四捨五入などの計算をする

関数もJavaScriptと同じように書いてあげれば、ちゃんと計算してくれます。

仕事で、電卓で計算して、その計算結果をパソコンのソフトに入力するといったような作業をしているので、その電卓計算部分をブログの記事内での計算に置き換えてしまおうと考えています。
同じパソコンの画面上で計算できれば、電卓に表示された計算結果を見て、パソコンのソフトに入力していた部分が、コピーと貼り付けに置き換えられるのと、おそらく計算で叩くキーも少なくできるはず。
少なからずメリットはあるはずです。

ただ、いろいろ計算ページを作り始めてみると、HTML5のoutputタグを使う計算だと、少し変わった計算をしようとすると無理みたいだと思うところも出てきました。
例えば、円の直径を入力して、円の面積と周長を計算させることは出来そうにありません。
input（入力）はいくつあってもいいのですが、output（計算結果）は１つしかできないので、面積か周長のどちらかしか計算できないようなのです。
また、条件によって計算を変える「if ～～」みたいなことも、出来そうにありません。
単に私が分からないだけで、実際にはやり方がある可能性もありますが、ネット上の情報が少ないので、とりあえず今のところは出来ないと判断するしかなさそうです。

せっかくブログに計算ページを作るメリットを考えついたところなので、ここであきらめないで、難しそうという理由でこれまで避けてきた JavaScript に挑戦してみることにしました。

参考になりそうなサンプルコード

JavaScript を使ってブログに計算ページを作るやり方が見つからないかとネット上を探してみると、JavaScript を初歩から説明してくれている記事はいろいろ見つかりますが、そのものズバリというような記事はなかなかなくて、まず何をどうすればいいかが分かりません。
それでも何とか自分でも参考にできそうだと見つけたのが、↓ こちらの掲示板のやり取りです。
　JavaScriptのフォーム入力数値を複数計算式に当てたい

「JavaScriptのフォーム入力数値を複数計算式に当てたい」という質問に対して、AKさんがサンプルコードを書いて回答しているのですが、そのサンプルコードを真似すれば、やりたいと思っていることが出来そうな感じです。
AKさんはいくつかサンプルコードを書いてくれていますが、最初のサンプルコードを参考にしてみることにします。

サンプルコードの最初の5行はHTMLの <head> 部分に入れるもので、ブログの各記事には入れないので、とりあえず考えずに、どうも必要らしいということになれば、後で入れることにします。

<form> ～ </form> 部分が、計算のための入力と、計算結果を表示する部分です。
この <form> ～ </form> の表示部分と、<script> ～ </script> の計算部分を、ブログの1つの記事に入れてみて、うまく機能すれば目的の第一段階は達成できそうです。

ブログに計算ページを作るだけなら簡単かも

上で書いた考えで、実際に簡単な計算を作ってみました。

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScriptは表示されず、計算のためのフォームだけが表示されています。
ＡとＢに数値を入力して［計算］ボタンをクリックすると、計算結果が表示されるはずです。

やはり、ブログの記事内に、計算のためのフォームのコードと、JavaScript のコードを書いてやれば、ちゃんと機能するようです。
であれば、ブログ記事内で JavaScript で計算できるようにするのは、そんなに難しくはなさそうです。

コードの解説（フォーム）

上で設置した計算フォームのコードを説明します。
計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeru">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">

  <input type="button" name="keisan" value="計算" onClick="calTasuKakeru();">
  <input type="reset" name="reset" value="クリア">

  Ａ＋Ｂ＝<input type="text" name="ans1" value="">
  Ａ×Ｂ＝<input type="text" name="ans2" value="">
</form>

１）計算のためのフォームは、<form> ～ </form> の間に書きます。

action="#" は、通常は # 部分に入力したデータを送信する送信先のURLを書きますが、ブログの記事内で計算させるだけなので、次画面に送信する意味になる # を入れています。
つまり、action="#" とすることで、入力したデータはどこにも送信されず、その画面で使うだけという扱いになります。

name="calformTasuKakeru" で、この計算フォームに名前を付けています。
この名前はアルファベットと数字で自由に付けることができますが、同じブログ内で重複しないように、計算フォームごとに別の名前を付けないといけません。
ブログ内で同じ名前のフォームがあると、JavaScript で計算させるときに、どの計算フォームの値か分からないので、計算できません。

２）2行目と3行目が、数値を入力するための入力ボックスです。
Ａ：<input type="text" name="a" value="">
Ｂ：<input type="text" name="b" value="">

「Ａ：」と「Ｂ：」は、そこに何を入力させるか表示するラベルです。
適当な分かりやすい言葉を書いておきます。

<input type="text"> と書くことで、入力のためのテキストボックスが表示されます。
name="a" と name="b" は、テキストボックスの名前です。
この名前はアルファベットと数字で自由に付けられ、ブログの中で重複しても大丈夫ですが、同じフォームの中で重複すると、JavaScript でどの値か分からないので計算できません。

value="" はそのテキストボックスの初期値で、この書き方だと初期値は空白になります。
通常は空白でいいと思いますが、数字を入力すると分からせるために「"0"」としておいてもいいですし、そこでよく使われる値を入れておいてもいいかもしれません。

３）4行目が、［計算］ボタンのコードです。
<input type="button" name="keisan" value="計算" onClick="calTasuKakeru();">

<input type="button"> と書くことで、ボタンが表示されます。

name="keisan" はボタンの名前で、入力ボックスと同じように、同じフォームの中で重複しないように名前を付けます。

value="計算" でボタンに表示される言葉を設定します。

onClick="calTasuKakeru();" でボタンをクリックしたときに何をさせるかを書きます。
ここでは、calTasuKakeru() という名前の JavaScript を実行するようにしています。
この JavaScript の名前もフォームの名前と同じで、ブログの中で重複しないように名前を付けます。
重複があると、どの JavaScript を実行すればいいか分からないからです。

４）5行目が、［クリア］ボタンのコードです。
<input type="reset" name="reset" value="クリア">

［計算］ボタンのコードとほぼ同じですが、ボタンをクリックしたときに何をさせるかのコードがありません。
<input type="reset"> と書くことで、フォーム内の入力・出力の値をリセットする機能があるようです。

５）6行目と7行目が、計算結果を表示するコードです。
Ａ＋Ｂ＝<input type="text" name="ans1" value="">
Ａ×Ｂ＝<input type="text" name="ans2" value="">

「Ａ＋Ｂ＝」と「Ａ×Ｂ＝」は、計算結果が何かを分からせるためのラベルです。
適当な分かりやすい言葉を書いておきます。

コードの内容は、入力ボックスと同じです。
name="ans1" と name="ans2" は、入力ボックスと同じように、同じフォームの中で重複しないように名前を付けます。

計算結果なので、Ａ＋Ｂ＝<output name="ans1">0</output> と書いてテキストボックスの形にしないこともできますが、<input type="text"> を使うと計算結果が枠の中に表示されて分かりやすいので、今回はこちらを採用しています。

コードの解説（JavaScript）

JavaScript のコードを説明します。
フォームで入力された値で計算して、計算結果をフォームに返す役割をしている部分です。
JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeru()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeru.a.value - 0;
  inputValueB = document.calformTasuKakeru.b.value - 0;

  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;

  // 計算結果をフォームに出力
  document.calformTasuKakeru.ans1.value = ans1;
  document.calformTasuKakeru.ans2.value = ans2;
}
</script>

１）JavaScript のコードは、<script language="javascript"> ～ </script> の間に書きます。

今回のような計算のための JavaScript の場合は、2行目の function calTasuKakeru() で JavaScript の名前を書いて、3行目の { と最後の } の間に計算内容を書きます。
JavaScript の名前は、フォームの［計算］ボタンのコードで書いた onClick="calTasuKakeru();" の名前と同じになります。
つまり、［計算］ボタンをクリックすると、この JavaScript の計算が実行されるというわけです。

２）5行目と6行目で、フォームで入力した値を変数に代入しています。
inputValueA = document.calformTasuKakeru.a.value - 0;
inputValueB = document.calformTasuKakeru.b.value - 0;

4行目の「// フォームで入力したデータABを変数に代入」部分はコメント行で、行の先頭に「//」を入れた行は
JavaScript の実行に関係ないメモになります。

inputValueA と inputValueB が変数の名前で、それぞれフォーム（calformTasuKakeru）の a と b の値を代入しています。
言葉にすると「document のフォーム（calformTasuKakeru）の a の値（value）を変数 inputValueA に代入する。」ということになります。
行末の「- 0」は 0 を引いていて計算に影響がなく、なくしても問題なく計算できるようですが、何かそのように書いておく方がいい理由がありそうなので、サンプルコードに従って同じように入れています。

３）変数 inputValueA と inputValueB を使って計算します。
ans1 = inputValueA + inputValueB;
ans2 = inputValueA * inputValueB;
inputValueA と inputValueB を足した計算結果を ans1 に、inputValueA と inputValueB を掛けた計算結果を ans2 に、それぞれ代入しています。

４）計算結果 ans1 と ans2 の値を、それぞれフォームの ans1 と ans2 の値に代入します。
document.calformTasuKakeru.ans1.value = ans1;
document.calformTasuKakeru.ans2.value = ans2;
言葉にすると「document のフォーム（calformTasuKakeru）の ans1 の値（value）を ans1 にする。」ということになります。

その他

少しごちゃごちゃと書きましたが、やってみると計算させるだけの JavaScript であれば、意外と簡単にできることが分かりました。
ただ、このままでは見栄えも悪いですし、計算ページとしての使い勝手もイマイチなので、次回以降の記事でもう少し工夫していこうと思います。

JavaScript については、プログラミング言語を購入して使うようなものなのかなとも思いましたが、どうやらその必要はなくて、決まりに従って今回書いたようなコードを書いてやれば、そのまま動作して使えるようで、お金が掛かるものではなさそうです。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 20:37 | Comment(0) | TrackBack(0) | JavaScript

Ａ＋Ｂ＝
Ａ×Ｂ＝

Ａ＋Ｂ＝
Ａ×Ｂ＝