JavaScriptでWebアプリを作ってみる
試して学ぶ

このページの目次
インプットボックス
チェックボックス
ラジオボタン
その他のボタン

htmlにJavaScriptを組み込むためにしておくこと

まずjavascriptの勉強を始める前提として、ある程度のhtml・cssの知識を持っていることが重要。
計算や処理をするのはJavaScriptなんですが、表示するのはブラウザでのhtmlページなので。

簡単な計算プログラムを作って学ぶ

English Pronunciation Quiz

Select a sentence and click the button to hear it:

選んで[Speak]ボタンを押してね　未選択を発音中です

書いた文の発音を覚えよう

英語で読ませたい英文を入力してみよう

二つの値を比較した結果はtrue(正)かfalse(否)

a: b:

同じか？　　a == b :
異なるか？　a != b :
小さいか？　a < b :
大きいか？　a > b :
以下か？　　a <= b :
以上か？　　a >= b :

比較の記述の仕方を確認。これはC++と同じという認識でOK。javascriptの方には型変換を行わない比較がある(===, !==など)。これを使うべきタイミングは今の段階では分からないので飛ばしましょう。また、C++20には宇宙船演算子とかいうものがあるの？GPT先生がそんなこと言ってました。とりあえず飛ばしましょう。

楕円形の面積を求めよう

長半径[mm]：短半径[mm]：

楕円か正円かの判定

面積がここに出るよ　[mm2]

JavaScriptを勉強し始めるにあたり、まずはこのような『Webページに入力』されたデータを用いて計算する方法を覚えよう。
ページに入力欄を置くには、<input id="in01">を使う。
入力されたデータをscriptで使うには、let a = document.getElementById("in01").value;　のようにを使う。Idがin01のvalue（値）を使いたいということ。
逆に、script側で計算した値をhtmlに渡すには、document.getElementById("out01").textcontent = a * a * 3.14;　のように書けばOK
小数点以下の桁数を指定したい場合は.toFixed(2)を付けると小数点以下は二桁になる。
(a*a*3.14).toFixed(2)と書いてしまって良いみたい。GPT先生もそれでいいとのこと。
ちなみに、円周率はMath.PIで取得できる。Math.〇〇でいろんな定数や計算ができるようだ。

BMI計算機

身長[m]：体重[kg]：
あなたのＢＭＩは：未計測　です。判定は、未判定　です。

この計算機は上二つの応用で、身長と体重の入力値を用いて計算し、ifで閾値とくらべて判定する基本的なものです。
if文の書き方はc言語とほぼ同じ。条件式の後に文が1個だけ(;が一個)の場合は{}を省略できるなどの細かい違いこそあれ、書き方としては同じと考えてよいだろう。

チェックボックスを使ってみよう

A： B： C：

チェックボックスをクリックすると結果が表示されるよ
A && B && C => ANDの結果
A || B || C => ORの結果
A： Aの結果・・・B： Bの結果・・・C：Cの結果

チェックボックスを使う場合、まずhtml（ウェブページ）の方にチェックボックスを置く必要がある。
A：<input id="id_a" type="checkbox" onchange="ckbox()">のように書けばよい。
　　type="checkbox"　でチェックボックスを指定
　　onchange="checkbox()"　で変更があったとき（クリックされたとき）にckbox()関数が実行される。
　ここで、ckbox()は自分で適当に名前を付けていい。JavaScriptの方でfunction ckbox(){～～～}と書いた関数が呼ばれるだけ。

ラジオボタンを使ってみよう

今の気分は？
お腹減った
ゲームしたい
眠たい

いずれかのラジオボタンを選択して、[判定！]ボタンをクリックすると結果が表示されるよ
1：腹減ったの結果・・・2：ゲームしたいの結果・・・3：眠たいの結果

ラジオボタンを使う場合、まずhtml（ウェブページ）の方にラジオボタンを置く必要がある。
<input type="radio" id="option1" name="option" value="1"> <label for="option1">お腹減った</label><br>のように書けばよい。
　　type="radio"　でラジオボタンを指定
　　onclick="radiotest()"　で変更があったとき（クリックされたとき）にradiotest()関数が実行される。
　ここで、radiotest()は自分で適当に名前を付けていい。JavaScriptの方でfunction radiotest(){～～～}と書いた関数が呼ばれるだけ。

選択されていると true 、選択されていなければ false となる。これがキホンだから覚えておこう。

どの料理を食べに行きますか？

【ここにおすすめの店が出ます】

今回は、どれかを選択すると下におすすめの店が出るような仕掛けです。押されたら関数を呼び出すのはonclickを使っています。ボタンと同じですね。
結果の表示を太字でそれぞれ色を変えていますが、これは.innerHTMLプロパティを使ってbタグにclassで装飾を設定しています。

<input type="radio" id="katsudon" name="food" value="katsudon" onclick="displayMessage()>　
<label for="katsudon">かつ丼</label>　
このようにラジオボタンのidには個々を判別できるものを、nameには選択肢のグループを示す共通のfoodとします。
また、scriptの方では
var food = document.querySelector('input[name="food"]:checked').value;
とし、選択されたラジオボタンのvalueを取得するようになっています。

ページを開いたときの処理

今日は　
kyou：
nen：＿＿＿＿tsuki：＿＿＿＿ nichi：＿＿＿＿day：

これまではボタンを押したりチェックを入れたりすると関数が呼び出されるような仕掛けを作ってきました。
ここでは、ページが開いたときに実行される関数を作っていきます。
htmlの方には、表示したいところにidを付けたpとかspanとかを用意しておきます。
07html
scriptを下に載せます。上の『今日は』の後にid="hinichi"のstrongタグが書いてあります。
その下に各変数の素の中身を表示するようにidをつけたspanを並べてあります。 code07

カテゴリトップ

cssのあれこれ1

　一般社団法人ピンタニーニャ・プログラミング学習協会

最後まで読んでいただきありがとうございます

JavaScriptでWebアプリを作ってみる 試して学ぶ