2020年5月18日(月)行動記録
なんとなく気乗りしなくても、コードを書いているうちにだんだん楽しくなってくる。
手を動かすのって大事。
朝
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位以下を切り捨てられなかった部分を修正。
動画を撮ったのに掲載できない悲しみ。
修正のヒントをくれたインストラクターさんに感謝です。
試行錯誤を繰り返した回数が多いほど、成功したときの達成感もまた大きい。
まこと
この記事が気に入ったらサポートをしてみませんか?