Menu
計算
文字列の表示
算術演算子
データ型
定数(const)
変数(let)
代入演算子
アラートウインドウ
HTML(表示を変更)
入力した金額で計算
簡単な計算機を作成
本日の日付を表示
現在の時刻を表示
関数
数字のサイコロパズルの作成
javascriptで計算をしてみよう
12345 + 6789 = ?
12345 + 6789 =
javascriptで計算 document.write画面に表示
<p>12345 + 6789 =
<script>
console.log(12345 + 6789);
</script>
</p>
javascriptで計算 console.log(F12コンソール)画面に表示
<script>
console.log(12345 + 6789);
</script>
文字列の表示('')で囲む
文字列('シングルクオート')
<script>
document.write('天才WEBデザイナー');
</script>
算術演算子の説明
| 算術演算子 | 処理の内容 | 例（出力結果） |
|---|---|---|
| + | 左の値と右の値を足す。 | 45 + 18 → 63 |
| - | 左の値から右の値を引く。 | 30 - 12 → 18 |
| * | 左の値と右の値を掛ける。 | 15 * 6 → 90 |
| / | 左の値を右の値で割る。 | 30 / 3 → 10 |
| % | 左の値を右の値で割った余りを求める。 | 45 % 8 → 5 |
| ** | 2乗 | 2 ** 2 → 4 (2 * 2) |
| ** | 3乗 | 2 ** 3 → 8 (2 * 2 * 2) |
10 + 3 =
10 - 3 =
10 x 3 =
10 / 3 =
10 % 3 =
10 ** 2 =
<p>10 + 3 = <script>document.write(10 + 3);</script></p>
<p>10 - 3 = <script>document.write(10 - 3);</script></p>
<p>10 x 3 = <script>document.write(10 * 3);</script></p>
<p>10 / 3 = <script>document.write(10 / 3);</script></p>
<p>10 % 3 = <script>document.write(10 % 3);</script></p>
<p>10 ** 2 = <script>document.write(10 ** 2);</script></p>
計算の順序(掛け算)(割り算)()優先で計算する(算数だよ)
1 + 2 * 5 =
コンピュータの計算の方法(脳味噌)と違う
人間の頭出に計算:0.8 - 0.1 = 0.7
コンピュータの計算:0.8 - 0.1 =
コンピュータの計算(小数点を切り捨て:詳しくは変数(let)で解説):0.8 - 0.1 =
データ型
- 「こんにちは」文字列型
- 「100」数字型
- 「2025/01/07」理論型
確認用
1 + 1 =
定数(const)について知ろう(迷ったら最初はこれで書く)
大事な事
定数は、決まった値を収納する(中身を後から変更できない)
const = price(Ok)
const = 1price(No)先頭の文字(数字は使えない)
定数(const)の書き方
<script>
const price = 600;
document.write(price + '円の税込み価格は' + (price * 1.1) + '円です');
document.write('<br>')
const priceA = 1000;
document.write(priceA + '円の税込み価格は' + (priceA * 1.1) + '円です');
</script>
変数(let)について知ろう
文字列,数字,など入れ替え可能
変数(let)の書き方
<script>
let num = 100;
document.write(num + '円の税込み価格は' + (num * 1.1) + '円です');
document.write('<br>')
let taxIncluded = Math.floor(num * 1.1); // 小数点以下を切り捨てて表示
document.write(num + '円の税込み価格は' + taxIncluded + '円です');
document.write('<br>')
num = 200; // num数字変更
taxIncluded = Math.floor(num * 1.1); // taxIncluded数字変更しないと、最後表示の時に計算がおかしくなる
document.write(num + '円の税込み価格は' + taxIncluded + '円です');
</script>
| ソースコード | 意味 | 例（計算結果） |
|---|---|---|
| Math.floor | 小数点以下を切り捨て | （例: 110.5 → 110） |
| Math.round | 四捨五入 | （例: 110.5 → 111） |
| Math.ceil | 小数点以下を切り上げ | （例: 110.1 → 111） |
代入演算子
sum = sum + 200;
sum1 += 200;
同じ意味で代入演算子をを使えばコードが少し簡単に書ける
<script>
let sum = 100; // 100円の商品を購入した
document.write(sum + '<br>');
sum = sum + 200; //200円の商品を購入した
document.write(sum + '<br>');
</script>
<script>
let sum1 = 100; // 100円の商品を購入した
document.write(sum + '<br>');
//sum = sum + 200; //200円の商品を購入した
sum1 += 200; //上のコードを簡単にかける(代入演算子)
document.write(sum1 + '<br>');
</script>
<script>
// インクリメントメント
let sum2 = 1;
sum2 ++; //常に+1
document.write(sum2);
document.write(sum2 + '<br>');
</script>
<script>
// デクリメント
let sum3 = 1;
sum3 --; //常に-1
document.write(sum3);
</script>
| ソースコード | 意味 | 例 |
|---|---|---|
| += | 足し算 | （例: 1 + 1 = 1） |
| -= | 引き算 | （例: 1 - 1 = 0） |
| *= | 掛け算 | （例: 1 * 1 = 1） |
| /= | 割り算 | （例: 1 / 1 = 1） |
| **= | ？乗 | （例: 1 ** 1 = 1(1 * 1)） |
| **= | ？乗 | （例: 3 ** 3 = 27[3 * 3 * 3]） |
| %= | 過剰残 | （例: 5 % 2 = 1） |
| ++; | インクリメント | （例: 常に 1 + する） |
| --; | デクリメント | （例: 常に 1 - する） |
javascript➡HTML(表示を変更)
<script>
document.title ='神の子'; // property = '文字'
</script>
入力した金額で計算
<script>
const price = window.prompt('貴方はいくら欲しいですか?');
const ansewr = Number(price) + 100; //Number()数字になる
//String()文字になる
document.write(price + '+ 100 =' + ansewr + '円入金されました');
</script>
簡単な計算機を作成(足し算)
<script>
const num1 = window.prompt('1つ目の数字を入力してください');
const num2 = window.prompt('2つ目の数字を入力してください');
const sum = Number(num1) + Number(num2);
document.write(num1 + '+' + num2 + '=' + sum);
</script>
本日の日付を表示
本日の日付表示
指定した部分のみ選択して(+1)
<script>
const today = new Date();
//年を表示 //月を表示(getMont)➡実際の月に－１されてる //日付を表示
document.write(today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日');
// 広げると形のコード
//const today = new Date();
//document.write(today.getFullYear() + '年'); //年を表示
//document.write(today.getMonth() + 1 + '月'); //月を表示(getMont)➡実際の月に－１されてる
//document.write(today.getDate() + '日'); //日付を表示
</script>
<h2>指定した部分のみ選択して(+1)</h2>
<script>
const newyear = new Date(2025,1,1);
document.write(newyear.getMonth() + 1);
</script>
現在の時刻を表示
現在の時刻を表示(時刻を常に2桁で表示したい場合:例:01時間09分)
現在の時刻を表示(0表記:例:1時間:9分)
面白い表記
<script>
<h2>現在の時刻を表示(時刻を常に2桁で表示したい場合（例: 01 時間や 09 分）)</h2>
const today1 = new Date();
const hours = String(today1.getHours()).padStart(2, '0'); //String(文字列に変換)
const minutes = String(today1.getMinutes()).padStart(2, '0'); //String(文字列に変換)
const seconds = String(today1.getSeconds()).padStart(2, '0'); //String(文字列に変換)
document.write(hours + '時' + minutes + '分' + seconds + '秒');
</script>
<h2>現在の時刻を表示(0表記)</h2>
<script>
const today2 = new Date();
document.write(today2.getHours() + '時' + today2.getMinutes() + '分' + today2.getSeconds() + '秒');
</script>
<h2>面白い表記</h2>
<script>
const today3 = new Date();
document.write(today3);
</script>
関数について知ろう
復習で消費税込みの計算
<script>
const priceone = 1000;
const intaxone = Math.round(priceone * 1.1);
document.write(priceone + '円の税込み価格は' + intaxone + '円です');
</script>
関数=>アロー関数
主にこれを使用する(最新)
<script>
// 関数の使い方イメージ
//税込み金額を求める const 関数名 = (受け取るもの) => {
const calcInTaxOneOne = (priceOneOne) => { 処理
const intaxOneOne = Math.round(priceOneOne * 1.1); ....
return intaxOneOne; return 返すもの
} }
const priceOneOne = 100;
const intaxOneOne = calcInTaxOneOne(priceOneOne);
document.write(priceOneOne + '円の税込み価格は' + intaxOneOne + '円です');
</script>
関数=function(2)関数宣言
<script>
function calcInTaxOneOneOne(priceOneOneOne) {
const intaxOneOneOne = Math.round(priceOneOneOne * 1.1);
return intaxOneOneOne;
}
const priceOneOneOne = 200;
const intaxOneOneOne = calcInTaxOneOneOne(priceOneOneOne);
document.write(priceOneOneOne + '円の税込み価格は' + intaxOneOneOne + '円です');
</script>
関数=function(3)関数式
<script>
const calcInTaxOneOneOneOne = function(priceOneOneOneOne) {
const intaxOneOneOneOne = Math.round(priceOneOneOneOne * 1.1);
return intaxOneOneOneOne;
}
const priceOneOneOneOne= 100000000;
const intaxOneOneOneOne = calcInTaxOneOneOneOne(priceOneOneOneOne);
document.write(priceOneOneOneOne + '円の税込み価格は' + intaxOneOneOneOne + '円になり'+'１年後の月収です');
</script>