2020年5月18日(月)行動記録

清水真樹@風水鑑定士

2020年5月18日 23:45

なんとなく気乗りしなくても、コードを書いているうちにだんだん楽しくなってくる。
手を動かすのって大事。

朝

9時起床。
食材の買い物で外出し、帰宅後に縄跳びチャレンジ。

回数カウンターが最初動かず、実際は350回くらい跳んでいるはず。

昼

仕事が発生したので、夜まで従事。

夜

以前書いたコードの手直しをした。
Webブラウザに設置したボタンをクリックすると、ブラウザの背景色と不透明率が変わるJavaScriptのコード。

<!DOCTYPE html>
<html lang="en">

<head>
 <title>ボタンクリックで背景色と不透明率が変わるコード</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
 <!-- ┗('ω')┛ -->
 <button type="button" id="my-button">push┗('ω')┛it</button>

 <script type="text/javascript" src="script.js"></script>
</body>

</html>

htmlには変更なし。

'use strict';

// Event
// 'my-button'のid属性を持つタグ用の処理
const button = document.getElementById('my-button');

// ボタンをクリックすると、イベントが実行される
button.addEventListener('click', () => {
   // 背景色生成処理 10進数
   let r = Math.floor(Math.random(0, 256) * 256);
   let g = Math.floor(Math.random(0, 256) * 256);
   let b = Math.floor(Math.random(0, 256) * 256);
   // 不透明率生成処理 0 〜 1.0
   let aCalc = Math.random() * (1.1 - 0);

   // 整形処理
   let n = 1; // 不透明率の小数点を何位で切り捨てるか判定(1 = 1位以下切り捨て)
   let a = Math.floor(aCalc * Math.pow(10, n)) / Math.pow(10, n); // 不透明率の小数点1位以下を切り捨て pow()メソッドは、指定された底と指数の累乗を返す。
   let p1 = "rgba(";
   let p2 = ")";
   let rgba = p1 + r + ", " + g + ", " + b + ", " + a + p2; // 式として結合する処理 => rgba(r, g, b, a)
   document.body.style.backgroundColor = rgba; // HTMLへ処理を渡す
   console.log("Result! : " + rgba + "┗('ω')┛muscle");
});

JSファイルを1行修正。

  // 不透明率生成処理 0 〜 1.0
   let aCalc = Math.random(0, 1.1); // Before
  //                      ↓
   let aCalc = Math.random() * (1.1 - 0); // After

不透明率を変更するための乱数を取得する際、キレイに小数点1位以下を切り捨てられなかった部分を修正。

動画を撮ったのに掲載できない悲しみ。

修正のヒントをくれたインストラクターさんに感謝です。
試行錯誤を繰り返した回数が多いほど、成功したときの達成感もまた大きい。

まこと

この記事が気に入ったらサポートをしてみませんか？