こんにちは Atsu1209です。
今回は プログラマーが落ち着かなくなるコードを書いてみた番外編です。
第一弾
第二弾
はじめに
今回は第一弾で作った奇数偶数を判定するコードをパワーアップしてきます。
閲覧注意です!
前回のクソコード
前回のクソコードです。
1~10で奇数偶数を判定します。
(JSのみ)
main.js
const textarea = document.getElementById("textarea");
function btn(){
if(textarea.value == "1"){
alert("奇数");
}
if(textarea.value == "2"){
alert("偶数");
}
if(textarea.value == "3"){
alert("奇数");
}
if(textarea.value == "4"){
alert("偶数");
}
if(textarea.value == "5"){
alert("奇数");
}
if(textarea.value == "6"){
alert("偶数");
}
if(textarea.value == "7"){
alert("奇数");
}
if(textarea.value == "8"){
alert("偶数");
}
if(textarea.value == "9"){
alert("奇数");
}
if(textarea.value == "10"){
alert("偶数");
}
textarea.value = "";
}
HTMLは第一弾をご覧ください。
早速パワーアップ
パワーアップしていきましょう
数字
まず数字を変数にしてしまいましょう
変数名はローマ字です。
main.js
const iti = "1";
const ni = "2";
const san = "3";
const yon = "4";
const go = "5";
const roku = "6";
const nana = "7";
const hati = "8";
const kyuu = "9";
const zyuu = "10";
文字
奇数 偶数の文字列も変数にしてしまいましょう。
もちろん変数名はローマ字です。
main.js
const kisuu = "奇数";
const guusuu = "偶数";
クリック検知
現在 HTMLのbuttonのonclickをつけてクリックを検知しています。
なので文字数を多くするために addEventListenerを使います。
↓ボタンのコード
index.html
<button id="btn" onclick="btn()">判定</button>
main.js
const botan = document.getElementById("btn");
botan.addEventListener('click', () => {
/* 奇数偶数のコード */
});
ボタンのIDを取得するための変数はしっかりとローマ字です。
完成
完成しました
ご覧ください。
main.js
const textarea = document.getElementById("textarea");
const botan = document.getElementById("btn");
const iti = "1";
const ni = "2";
const san = "3";
const yon = "4";
const go = "5";
const roku = "6";
const nana = "7";
const hati = "8";
const kyuu = "9";
const zyuu = "10";
const kisuu = "奇数";
const guusuu = "偶数";
botan.addEventListener('click', () => {
if(textarea.value == iti){
alert(kisuu);
}
if(textarea.value == ni){
alert(guusuu);
}
if(textarea.value == san){
alert(kisuu);
}
if(textarea.value == yon){
alert(guusuu);
}
if(textarea.value == go){
alert(kisuu);
}
if(textarea.value == roku){
alert(guusuu);
}
if(textarea.value == nana){
alert(kisuu);
}
if(textarea.value == hati){
alert(guusuu);
}
if(textarea.value == kyuu){
alert(kisuu);
}
if(textarea.value == zyuu){
alert(guusuu);
}
textarea.value = "";
}
});
究極の技
これまでのパワーアップした物を別のJSファイルに移しましょう。
hennsuu.js
const textarea = document.getElementById("textarea");
const botan = document.getElementById("btn");
const iti = "1";
const ni = "2";
const san = "3";
const yon = "4";
const go = "5";
const roku = "6";
const nana = "7";
const hati = "8";
const kyuu = "9";
const zyuu = "10";
const kisuu = "奇数";
const guusuu = "偶数";
main.js
botan.addEventListener('click', () => {
if(textarea.value == iti){
alert(kisuu);
}
if(textarea.value == ni){
alert(guusuu);
}
if(textarea.value == san){
alert(kisuu);
}
if(textarea.value == yon){
alert(guusuu);
}
if(textarea.value == go){
alert(kisuu);
}
if(textarea.value == roku){
alert(guusuu);
}
if(textarea.value == nana){
alert(kisuu);
}
if(textarea.value == hati){
alert(guusuu);
}
if(textarea.value == kyuu){
alert(kisuu);
}
if(textarea.value == zyuu){
alert(guusuu);
}
textarea.value = "";
}
});
HTML
おまけでHTMLも書いておきます。
html.index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>偶数奇数(出会いたくない)</title>
<meta charset="UTF-8">
</head>
<body>
<h1>1~10の数字を入力</h1>
<textarea id="textarea"></textarea>
<button id="btn" onclick="btn()">判定</button>
</body>
<script src="main.js"></script>
<script src="hennsuu.js"></script>
</html>
まとめ
今回はかなり強烈なクソコードになったと思います。
まだまだ修正点があると思うので良かったらコメントでもっとクソコードを提案してください
もしかしたらコメントパワーアップ版を出すかもしれません。
最後に
最後まで見てくださりありがとうございました。
これを見た方はだいぶ疲れていると思います ゆっくりお休みください
また次の記事で
では