MENU
基礎プロ05解説

基礎プログラミング解説第5回

課題前に...


まずはセットアップ。これらができているなら課題を行っていこう。


課題１


Q.テキストボックスを作り、ボタンをクリックすると入力された文字列をそのままアラート表示するプログラムを作成せよ。

A.HTMLでボタンと入力フォームを制作してから、jsでアラートを作ろう！

手順1

HTMLの<body>と</body>の間に以下の構文を入れよう。

<h2>課題1</h2>
<input type="text" id='ex01_1'><br>
<input type="button" value="おうむ返し" onclick='parrot();'>


手順2

jsに以下の構文を入れよう。

function parrot() {
    const input = document.getElementById("ex01_1").value;
    alert(input);
  }


終了！

手順1の意味

input type="text"

　→ ユーザーが文字を入力できる「テキストボックス」のこと。

　→ id='ex01_1' は、後で JavaScript からこのボックスを使うための「名前タグ」のようなもの。


<br>

　→ 改行（Enter）。見た目を整えるためのもの。


input type="button"

　→ 「ボタン」を制作。

　→ value="おうむ返し" は、ボタンに表示される文字。

　→ onclick='parrot();' は、「ボタンがクリックされたら parrot() という関数（動き）を実行する」という意味。


手順2の意味

function parrot() { ... }

　→ parrot という名前の関数（決まった動きのまとまり）を制作している。

　→ ボタンが押されたときに実行されるのがこの関数。


document.getElementById("ex01_1").value;

　→ HTMLの中から id="ex01_1" のついたテキストボックスを探して、その「中に入力された文字（value）」を取り出す。

　→今回は結構重要なので覚えておく！


const input = ...

　→ 取り出した文字を input という名前の変数に入れている。


alert(input);

　→ 画面にポップアップ（アラート）を表示します。中身は、さっきの input（ユーザーが入力した文字）になっている。

課題2


Q.先週のBMI算出プログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。

A.HTMLでボタンと入力フォーム2つ制作してから、jsで「あなたのBMIは○○です。」のアラートを作ろう！

手順1

HTMLの課題1(↓の構文)の後に以下の構文を入れよう。

さっき書いたやつ(今回は書かない)

<h2>課題1</h2>
<input type="text" id='ex01_1'><br>
<input type="button" value="おうむ返し" onclick='parrot();'>


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

<h2>課題2</h2>
名前：<input id="name"><br>
学部：<input id="faculty"><br>
学年：<input id="grade">
<input type="button" value="確認" onclick='showinfo();'>


手順2

さっき制作した以下のjs構文(↓の構文)の後に構文を追加しよう。

さっき書いたやつ(今回は書かない)

function parrot() {
    const input = document.getElementById("ex01_1").value;
    alert(input);
  }


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

function showinfo() {
      const name = document.getElementById("name").value;
      const faculty = document.getElementById("faculty").value;
      const grade = document.getElementById("grade").value;
      alert(name + "さんは" + faculty + "学部の" + grade + "年生ですね");
    }


終了！

手順1の意味

"input id="name"

　→名前を入力するためのテキストボックス。「id="name"」で後から使えるようにしている。


input id="faculty"

→名前を入力するためのテキストボックス。「id="faculty"」で後から使えるようにしている。


input id="grade"

→名前を入力するためのテキストボックス。「id="grade”」で後から使えるようにしている。


input type="button" value="確認" onclick='showinfo();'

　→ 「ボタン」を制作。

　→ value="確認" は、ボタンに表示される文字。

　→ onclick='showinfo();' は、「ボタンがクリックされたら showinfo() という関数（動き）を実行する」という意味。


手順2の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略

alert(name + "さんは" + faculty + "学部の" + grade + "年生ですね");

　→ 入力された情報を組み合わせて、ポップアップで表示する。

　→今回なら(name関数：入力した名前)₊「さんは」という文字列+(faculty関数：入力した学部)₊「学部の」という文字列₊(grade関数：入力した学年)+「年生ですね」という文字列。

課題3-1


Q.先週のBMI算出プログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。

A.HTMLでボタンと入力フォーム2つ制作してから、jsで「あなたのBMIは○○です。」のアラートを作ろう！

手順1

HTMLの課題1(↓の構文)の後に以下の構文を入れよう。

さっき書いたやつ(今回は書かない)

<h2>課題2</h2>
名前：<input id="name"><br>
学部：<input id="faculty"><br>
学年：<input id="grade">
<input type="button" value="確認" onclick='showinfo();'>


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

<h2>課題3</h2>
身長(m):<input type="text" id='ex02_1'><br>   
体重(kg):<input type="text" id='ex02_2'><br>
<input type="button" value="BMIを計算する" onclick='getBMI();'>


手順2

さっき制作した以下のjs構文(↓の構文)の後に構文を追加しよう。

さっき書いたやつ(今回は書かない)

function showinfo() {
      const name = document.getElementById("name").value;
      const faculty = document.getElementById("faculty").value;
      const grade = document.getElementById("grade").value;
      alert(name + "さんは" + faculty + "学部の" + grade + "年生ですね");
    }


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

function getBMI() {
    const height = parseFloat(document.getElementById("ex02_1").value);
    const weight = parseFloat(document.getElementById("ex02_2").value);

const bmi = weight / (height**2);
    alert("あなたのBMIは " + bmi + " です。");
  }


終了！

手順1の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略


手順2の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略


const bmi = weight / (height ** 2);

　→BMIを計算する構文。BMIの公式は：体重 ÷ (身長 × 身長)、つまり、体重を身長の2乗で割るということ。

　→height ** 2 は「height の2乗」という意味。今回だったら身長(m)の2乗


 alert("あなたのBMIは " + bmi+ " です。");

　→計算結果のBMIを画面にアラート表示。

　→でもこれだと小数点以下が多く表示されたりメートルで記入しないといけない...課題3-2をみよう！


課題3-2(任意)

Q.できたら、cmで入力できるようにすること。できたら、小数点第2位で四捨五入すること。

A.jsでのBMI計算で身長を100で割り(m→cmにしている)、Math.round（）で小数点を第2位まで表示させる。

手順1

さっき制作した以下のjs構文(↓の構文)を変更しよう。

さっき書いたやつ(今回は書かない)

function getBMI() {
    const height = parseFloat(document.getElementById("ex02_1").value);
    const weight = parseFloat(document.getElementById("ex02_2").value);

const bmi = weight / (height**2);
    alert("あなたのBMIは " + bmi + " です。");
  }


さっき書いたやつを↓に変えよう(今回追加するやつ)

function getBMI() {
    const height = parseFloat(document.getElementById("ex02_1").value);
    const weight = parseFloat(document.getElementById("ex02_2").value);

const bmi = weight / ((height/100) ** 2);
    const roundedBMI = Math.round(bmi * 100) / 100;
     alert("あなたのBMIは " + roundedBMI + " です。");
  }


手順2

HTMLで身長(m)を身長(cm)に変えておこう。


終了！

手順1の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略

bmi * 100

　→小数第2位を整数として扱うために100倍（例：22.756 → 2275.6）。


Math.round(...)

　→bmi * 100を四捨五入（例：2275.6 → 2276）。

/ 100

　→最後に100で割って小数に戻す（例：2276 → 22.76）。

課題4


Q.先週の和、差、積、商、余りを求めるプログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。

A.HTMLでボタンと入力フォーム2つを制作してから、jsで四則演算と余りのアラートを作ろう！

手順1

HTMLの課題1(↓の構文)の後に以下の構文を入れよう。

さっき書いたやつ(今回は書かない)

<h2>課題3</h2>
身長(m):<input type="text" id='ex02_1'><br>   
体重(kg):<input type="text" id='ex02_2'><br>
<input type="button" value="BMIを計算する" onclick='getBMI();'>


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

<h2>課題4</h2>
1つ目の数:<input type="text" id='ex03_1'><br>
2つ目の数:<input type="text" id='ex03_2'>
<input type="button" value="演算する" onclick='four();'>


手順2

さっき制作した以下のjs構文(↓の構文)の後に構文を追加しよう。

さっき書いたやつ(今回は書かない)

function getBMI() {
    const height = parseFloat(document.getElementById("ex02_1").value);
    const weight = parseFloat(document.getElementById("ex02_2").value);

const bmi = weight / (height**2);
    alert("あなたのBMIは " + bmi + " です。");
  }


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

function four() {
    const num1 = parseFloat(document.getElementById("ex03_1").value);
    const num2 = parseFloat(document.getElementById("ex03_2").value);

    const add = num1 + num2;
    const subtract = num1 - num2;
    const multiply = num1 * num2;
    const divide = num1 / num2;
    const remainder = num1 % num2;
 
    const message = "和：" + add +
                  "差：" + subtract +
                  "積：" + multiply +
                  "商：" + divide +
                  "余り：" +remainder;
    alert(message);
  }


終了！

手順1の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略


手順2の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略


add は足し算の変数（和）


subtract は引き算の変数（差）


multiply はかけ算の変数（積）


divide は割り算の変数（商）


remainder は割り算の余りの変数（% は割ったあとの余りを出す記号）


課題5(少し難しいから頑張ろう！)


Q.係数a, b, cの値をテキストボックスから入力し、ボタンをクリックすると2つの解をアラート表示するプログラムを作成せよ。

A.HTMLでボタンと入力フォーム3つを制作してから、jsで2次方程式の計算する構文と2つの解を表示する構文を作ろう！

手順1

HTMLの課題1(↓の構文)の後に以下の構文を入れよう。

さっき書いたやつ(今回は書かない)

<h2>課題4</h2>
1つ目の数:<input type="text" id='ex03_1'><br>
2つ目の数:<input type="text" id='ex03_2'>
<input type="button" value="演算する" onclick='four();'>


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

<h2>課題5</h2>
<input type="text" size='5' id='ex04_1'>x<sup>2</sup>+
<input type="text" size='5' id='ex04_2'> x +
<input type="text" size='5' id='ex04_3'>
= <input type="button" value="答え" onclick='solve();'>


手順2

さっき制作した以下のjs構文(↓の構文)の後に構文を追加しよう。

さっき書いたやつ(今回は書かない)

function four() {
    const num1 = parseFloat(document.getElementById("ex03_1").value);
    const num2 = parseFloat(document.getElementById("ex03_2").value);

    const add = num1 + num2;
    const subtract = num1 - num2;
    const multiply = num1 * num2;
    const divide = num1 / num2;
    const remainder = num1 % num2;
 
    const message = "和：" + add +
                  "差：" + subtract +
                  "積：" + multiply +
                  "商：" + divide +
                  "余り：" +remainder;
    alert(message);
  }


さっき書いたやつの後に↓を入れよう(今回追加するやつ)

function solve() {
    const a = parseFloat(document.getElementById("ex04_1").value);
    const b = parseFloat(document.getElementById("ex04_2").value);
    const c = parseFloat(document.getElementById("ex04_3").value);

    const discriminant = Math.pow(b, 2) - 4 * a * c;
    const sqrtD = Math.sqrt(discriminant);
    const x1 = (-b + sqrtD) / (2 * a);
    const x2 = (-b - sqrtD) / (2 * a);

    alert("解は x = " + x1 + " と x = " + x2 + " です。");
}


終了！

手順1の意味

ex04_1 に数字を入れると **x² の前の数（係数 a）**になる。


ex04_2 に数字を入れると **x の前の数（係数 b）**になる。


ex04_3 に数字を入れると **定数（c）**になる。


「答え」というボタンを押すと、solve() という関数が呼ばれて、答えを計算。


手順2の意味

前回と同じ内容(関数名だけ変わっているやつ)は省略。


const discriminant = Math.pow(b, 2) - 4 * a * c;

　→**判別式（はんべつしき）**を計算。

　→数学でいうb²-4acの部分。


const sqrtD = Math.sqrt(discriminant);

　→判別式の**平方根（√）**を求める。

　→Math.sqrt(...) は「平方根を計算する関数」。


const x1 = (-b + sqrtD) / (2 * a);

const x2 = (-b - sqrtD) / (2 * a);

　→2次方程式の解の公式を使用。


alert("解は x = " + x1 + " と x = " + x2 + " です。");

　→alertで答えを表示。

最後に

今回の解説はどうでしたか？jsを初めて使用する人にとっては難しい講義だったので解説サイトを制作させていただきました。もし他にもわからない人がいたら共有してあげてください。また、質問や分からないことがあったらInstagram,Discordなどで連絡していただければ幸いです。