超簡単なコード🦋マウス追従をする。 #javasriptcode

2022.11.28

Logging

おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。

そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです(尺も短いし…)。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

余談:
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。

タグ

addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, , 使用, 先週, , 再生, 判断, 動画, 回数, 土曜日, , 撮影, , 検証, 理由, 超簡単, 距離, 追従, 間隔, ,

chart.jsでデモを試してみました。📈 #javascriptcode

2022.11.18

Logging

おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。

さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は3箇所ほど変更して使用しないといけないのかなって。

chart.jsでデモを試してみました。📈
chart.jsでデモを試してみました。📈

そういう訳で、こちらのブログにソース・コードを貼り付けておきます。

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

業務で変更しないといけない最低限3箇所はこちらです~😆。

  • ラベル
  • データーセットの中のラベル
  • データーセットの中のデータ

上記の3箇所を売上のデータや何やらに使用することで活用できるかと思います。

タグ

12, 19, 2, , 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, , , 今日, 使用, 動画, 場合, 変更, , 実際, , 業務, 編集, ,

htmlとcssとphp-初学非同期処理とおまけ-No.3

2022.11.14

Logging

おはようございます。月曜日の朝ですね‥お仕事探しは続いています。

さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

ぐぐると自分言っていた意味がなんとなく分かるかと思います。ちなみに非同期動画(youtube)のおまけとして、背景画像を変える処理のソースコードを書いています。プログラムコードとしては3行ですが、初学者の方はこの3行のソースコードの方が面白いのかもしれません。自分が書いたソースコードを所々、変更して動かしてみてください。そうすることで、徐々にコードの意味が理解してくると思います。

追伸:サンプルサイトの動画は少しお休みします()?

https://358tool.com/sample-site/

タグ

, 39, addEventListener, btn, click, css, document, gt, html, let, name, no, php, querySelector, querySelectorAl, quot, Text, value, いつ, おまけ, お仕事, , 仕事, , 処理, 初学, 同期, 月曜日, , , 結果,

よんでんコンシェルジュの不具合について考える人。 #日別料金計算

2022.09.27

Logging

おはようございます。タイトルの不具合が解消されていたらゴメンナサイ。これは昨日に書いた記事です🤔。

夕方頃によんでんコンシェルジュの日別の電力と電力料金を見ようとした所、何やら不具合が発生していたらしく、合計金額が見えなくなっていたのでコードを書いてみました😌。

ざっくりとした金額合計が表示するような物ですので、実際の金額とは差異が発生します。ソースコードはこんな感じです。

let kwh =  document.querySelectorAll(".img_area > table > tbody > tr > td");
if(kwh){let s = 0;
    for(let i = 0;i < kwh.length ; i++){
        if(kwh[i].innerText.match(/(kWh)/)){
          s = s + (Number(String(kwh[i].innerText).replace("kWh",""))*100);
          console.log(kwh[i].innerText);
        }
    }
    let r = 0;
    s = Math.floor(s /100);
    if(s >11){
        if(s < 120){
            r = ((s -11) * 20) + 411;
        }
        if(s < 300){
            r = ((s - 120) * 27) + 411 + 2220;
        }
        if(s >= 300){
            r = ((s - 300) * 30) + 411 + 2220 + 4858;
        }
    }
    console.log("合計金額="  + String(s) + "kWh  " + String(r) + "円");
}

尚、消費電力が11kwh以下の人の金額は0円になっていますが、実際は料金が発生します。それにしても四国電力の料金内訳を見ていると何だか、モヤモヤする料金体系になっていて、これは面倒だなと感じました。こんな料金体系じゃなく一律のお値段にして欲しいですね・・・(消費電力によって値段が変動しますし…etc…)。

ソースコードの取り扱い:
上記のソースコードを四国電力(よんでんコンシェルジュ)の日別ページを開いた状態にして、ブラウザのコンソール画面にソースコードを貼り付けて実行してみてください。電力の合計金額などがコンソール画面に表示されます。

タグ

0, area, document, For, gt, if, img, innerText, kwh, length, let, lt, match, querySelectorAll, quot, TABLE, tbody, td, tr, コード, これ, コンシェルジュ, ソース, タイトル, よんでん, 不具合, , 合計, 夕方, 実際, 差異, 感じ, , 料金, 日別, 昨日, , 発生, 表示, 解消, 計算, 記事, 金額, 電力,

セレクトメニューの都道府県は毎回、作るよりストックしておくべし。

2021.12.13

Logging

駆け出しフロントエンドエンジニアさんや駆け出しコーダーさんの中にはお問い合わせなどで、都道府県を毎回、書いている人はいると思いますが、大体、同じことを何回もするのは無駄です。なので、自分専用の雛形を作っておくといいですよ。そうする事によって作業は結構、短縮されたりします。今回は自分がよく使う、セレクトメニューの都道府県をJSで都道府県リストを生成するように作りました。

都道府県生成

繰り返しになりますが、こんな感じに自分が使用するデータや独自の関数はストックしておくと作業効率は上がります、毎回調べてプログラミングやコードを書くのは仕事上では手間になるので辞めた方が良いです。

最後にJSコードとGitHubのリンクを貼っときますので、ご自由使用くださいませ。

https://github.com/zip358/select_jp_ken

let useKendata = [
    {'no':'01','name':'北海道'},
    {'no':'02','name':'青森県'},
    {'no':'03','name':'岩手県'},
    {'no':'04','name':'宮城県'},
    {'no':'05','name':'秋田県'},
    {'no':'06','name':'山形県'},
    {'no':'07','name':'福島県'},
    {'no':'08','name':'茨城県'},
    {'no':'09','name':'栃木県'},
    {'no':'10','name':'群馬県'},
    {'no':'11','name':'埼玉県'},
    {'no':'12','name':'千葉県'},
    {'no':'13','name':'東京都'},
    {'no':'14','name':'神奈川県'},
    {'no':'15','name':'新潟県'},
    {'no':'16','name':'富山県'},
    {'no':'17','name':'石川県'},
    {'no':'18','name':'福井県'},
    {'no':'19','name':'山梨県'},
    {'no':'20','name':'長野県'},
    {'no':'21','name':'岐阜県'},
    {'no':'22','name':'静岡県'},
    {'no':'23','name':'愛知県'},
    {'no':'24','name':'三重県'},
    {'no':'25','name':'滋賀県'},
    {'no':'26','name':'京都府'},
    {'no':'27','name':'大阪府'},
    {'no':'28','name':'兵庫県'},
    {'no':'29','name':'奈良県'},
    {'no':'30','name':'和歌山県'},
    {'no':'31','name':'鳥取県'},
    {'no':'32','name':'島根県'},
    {'no':'33','name':'岡山県'},
    {'no':'34','name':'広島県'},
    {'no':'35','name':'山口県'},
    {'no':'36','name':'徳島県'},
    {'no':'37','name':'香川県'},
    {'no':'38','name':'愛媛県'},
    {'no':'39','name':'高知県'},
    {'no':'40','name':'福岡県'},
    {'no':'41','name':'佐賀県'},
    {'no':'42','name':'長崎県'},
    {'no':'43','name':'熊本県'},
    {'no':'44','name':'大分県'},
    {'no':'45','name':'宮崎県'},
    {'no':'46','name':'鹿児島県'},
    {'no':'47','name':'沖縄県'},
];
document.getElementById("ken").insertAdjacentHTML('afterbegin',(function(ken){
    let str = '';
    for (const key in ken) {
        str+= '<option value=' + ken[key].no + '>' + ken[key].name +'</option>';
    }
    return str;
}(useKendata)));

タグ

01, 39, github, JS, let, name, no, useKendata, エンジニア, エンド, お問い合わせ, コーダー, コード, こと, ご自由, ストック, セレクト, データ, プログラミング, フロント, メニュー, リスト, リンク, , , , 今回, 仕事, 何回, 作業, 使用, 効率, 北海, 大体, 専用, 感じ, 手間, , 最後, 毎回, 無駄, 生成, 短縮, 自分, 都道府県, 関数, 雛形, 駆け出し,

Yahooが567(コロナ)の情報を取り扱っているそれも県単位でURLまとめたよ。

2020.12.20

Logging

Yahooが567の情報を取り扱っている。567(コロナ)を県単位で情報を配信しているまとめリンクサイトを作りましたので、ご自由にお使いください。
リンクはこちらです。https://zip358.com/tool/demo28/

ソースコードとJSONを貼っときます。IT土方さんみたいな事をした?。

<script>
	fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
		let ken = [];
		ken.push('<div class="list-group">');
		for (const key in data) {
			ken.push("<a  class='list-group-item list-group-item-action' href='https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "' target='_"+ data[key].roman +"'>" + data[key].name +":::https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "</a>");
		}
		ken.push("</div>");
		document.getElementById("covid19-link-list").innerHTML = ken.join("")
	});
</script>
{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

タグ

39, 47, 567, assets, class, const, data, div, fetch, For, gt, in, IT, JS, json, ken, key, let, list-grou, list-group, list-group-item, lt, push, quot, response, script, then, url, Yahoo, コード, こちら, コロナ, サイト, ソース, それ, まとめ, リンク, , 単位, 土方, 情報, , 配信,

js初心者さんのお勉強:思いつき写経。

2020.06.01

Logging

js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。

ソースコードはこちら

let btn1 = function (e) {
	//btn2
	console.clear();
	console.log("btn1");
	let p = document.getElementsByTagName("p");
	let style1 = [["backgroundColor", "fontSize", "color"], ["#000000", "20px", "#ffffff"]];
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (var i = 0; i < style1[0].length; i++) {
				element.style[style1[0][i]] = style1[1][i];
			}
		}
	}
};
let btn2 = function (e) {
	//btn2
	console.clear();
	console.log("btn2");
	let p = document.getElementsByTagName("p");
	let style2 = {
		backgroundColor: "#ffffff",
		fontSize: "20px",
		color: "#000000"
	};
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (const key2 in style2) {
				element.style[key2] = style2[key2];
			}
		}
	}
};
document.body.style.backgroundColor = "#0b222b";
document.getElementById("btn1").addEventListener("click",btn1);
document.getElementById("btn2").addEventListener("click",btn2);

デモページ
https://zip358.com/tool/demo17/

タグ

, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, , 作法, 写経, 初心者, 勉強, , 基本, , 思いつき, 感じ, 昨日, 書き方, 本当, , 簡略, 自分, 馬鹿,

Javascript? EVENT処理の際に引数を渡す。

2019.04.26

Logging

Javascript? EVENT処理の際に引数を渡す方法。
ちなみにもっと簡略化できます。

//NG
$(function(){
    let hoge = "test";
    $("input[type='text']").on("change",(function(hoge){
        console.log(hoge);
    })(hoge));
});
//OK!
//js
function hoge(a){
    return function(){
        console.log(a +  this.value);
    };
};
document.querySelector('input[type="text"]').addEventListener("click",hoge("aaaaaaa~"),false);
//jq
$(function(){
    let hoge = function(a){
        return function(){
            console.log(a + $(this).val());
        };
    };
    $("input[type='text']").on("change",hoge("test="));
});

タグ

aaaaaaa, addEventListener, change, click, console, document, EVENT, false, fu, function, hoge, input, javascript, jq, JS, let, log, NG, OK, ON, querySelector, return, test, Text, this, type, value, 処理, 引数, 方法, 簡略, ,

Canvasで円がぐるぐる回る。

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <canvas id="ctx" ></canvas>
    <script>
            "use strict";
            let x = 0,y = 0;
            let xs = 300,ys = 300;
            let xc = 1,yc = 1;
            let ctx = document.querySelector("#ctx");
            let canvas;
            ctx.width = window.screen.width;
            ctx.height = window.screen.height;
            if(ctx.getContext)
            {
               canvas = ctx.getContext("2d");
               setInterval(draw,77);
            }
            function draw(){
               canvas.beginPath();
               canvas.fillStyle = "#3399ff";
               canvas.arc(x,y,35,0,Math.PI*2,true);
               canvas.globalCompositeOperation = "xor";
               canvas.fill();
                x =((Math.sin (xc) * xs)) + 500;
                y =(Math.cos(yc) * ys) + 500;
                console.log(x + ":" + ctx.width);
                console.log(y + ":" + ctx.height);
                if(x < 0 || x > ctx.width)
                {
                   xs*=-1;
                }
                if(y < 0 || y > ctx.height)
                {
                    ys*=-1;
                }
                if(x<0)
                {
                    x=0;
                }
                if(y<0)
                {
                    y=0;
                }
                if(x > ctx.width)
                {
                    x=ctx.width;
                }
                if( y > ctx.height)
                {
                    y=ctx.height;
                }
                xc+=1
                if(xc>360)
                {
                    xc=0;
                }
                yc+=1
                if(yc>360)
                {
                    yc=0;
                }
            }
        </script>
</body>
</html>

Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html

タグ

0, , 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, ,

javascriptでEVENT処理レベル1

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <input type="text" class="zyezyezye">
    <script>
            "use strict";
            let zyezyezye = document.querySelector(".zyezyezye");
            zyezyezye.addEventListener("input",()=>{
                console.log(">おいら>>" + zyezyezye.value);
                if(zyezyezye.value=="じぇじぇじぇ")
                {
                    console.log("おいら>>キタ━━━━(゚∀゚)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
                }
            });
        </script>
</body>
</html>

jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ!?
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。

タグ

, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,

素数判定、単純なソース。

2017.06.25

Logging

素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
4桁までの処理が限界でした、基本:javascriptで動いています・
ローカルのパソコン性能に左右されます。
ソースを変更して5桁とか試してみるのも良いかもしれません?
サンプルサイト
https://zip358.com/tool/sosu/

function sosu(){
    let sosuno = [2];
    for(let i=3;i<=9999;i++){
        let flg = true;
        if(i%2===0){
            continue;
        }
        for(let ii=2;ii<i;ii++){
            if(ii%2===0){
                continue;
            }
            if(i%ii===0){
                flg = false;
                break;
            }
        }
        if(flg){
            sosuno.push(i);
        }
    }
    document.getElementById("my-textarea").value = sosuno.join(',');
}
document.getElementById("btn").addEventListener("click",sosu);

タグ

$flg, 0, 2, , 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,