@Blog{zip358.com}

超簡単なコード🦋マウス追従をする。 #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のデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は３箇所ほど変更して使用しないといけないのかなって。

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

        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
                    }
                }
            }
        });

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

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

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

タグ

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.webp");
}

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

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

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

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

タグ

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

検索されなかったワード埋もれた価値について! #javascript #php

2022.09.26

Logging

おはようございます、今日は引き落とし日です🫠。

さて、今日は検索されなかったキーワードの価値のお話です。此処で言う検索されなかったというのは、エンターキーや検索ボタンを押さなかった、キーワードの価値のお話です、たぶん、その情報をGさんは収集してそうな気がします。GサイトやYサイト等のキーワード収集は基本出来ませんが、自サイトの検索フォームの情報を収集出来ます。

此処からは技術的なお話になりますが、検索ボタンを押した時とは別に文字入力をしたときの挙動を感知するプログラムを導入する事により比較的簡単に導入できるかと思います。例えば下記のようなjavascriptコードを検索フォームに導入します。

document.getElementById("sh").addEventListener("input",(e)=>{
    $.ajax({
        type: "post",
        url: "example.com/sh.php",
        data: {text:this.value},
        dataType: "json",
        success: function (response) {
            
        }
    });
});

あとはPHP側でデータを受信しデータベース等に保存すれば良いだけです。この検索されなかったワードは、結構価値があると思います。より細かな情報を取得したい方はIPアドレスやどのページからの情報なのかも取得可能です。

これらのデータを元に販路開拓は十分出来ると思います。情報を保存する際に大量の情報が収集されるので、保存先に一工夫必要になります。JSで制御する手段もありますが、それだとあまり情報収集出来ないですからね。

因みにこのサイトに情報収集の処理は導入していません（今後の導入は未定）。

タグ

addEventListener, ajax, document, getElementById, gt, input, javascript, php, quot, sh, エン, お話, キーワード, コード, サイト, ターキー, とき, フォーム, プログラム, ボタン, ワード, 下記, 事, 今日, 価値, 入力, 収集, 基本, 導入, 情報, 感知, 挙動, 文字, 日, 時, 検索, 此処, 気, 簡単, 自,

JavaScriptのdocumentがドキュメントな訳。

2022.06.07

Logging

おはようございます。そろそろ梅雨入りなのかもなって。

さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。

因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。

タグ

document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,

悪意になるコードそうだよねぇ～オープンソース怖い。

2022.06.01

Logging

おはようございます。６月が始まりました。

今日のお題は「悪意になるコードそうだよねぇ～オープンソース怖い。」です。

こう思ったのは結構前からなのですが、今回、コードマフィアさんのYOUTUBE動画を見て再確認にした次第です。因みにこのソースコードが動くかどうかは知りません。

コードマフィアさんもお話されている通り、公式サイトで公開されているアプリ以外は注意が必要です、例えば無料配布サイトやgithubなどに置いてあるコードを実装するとかは、信頼性のないものは自らコードチェックを行わないと悪意のコードが入っていたという事もあるので・・・。

気をつけてくださいな😎

(function(){
    const doc = document.querySelectorAll("input");
    doc.forEach((e,k,p)=>{
        p[k].addEventListener("blur",(e)=>{
            var data = {};
            data["name"] = e.target.name;
            data["value"] = e.target.value;
            send1(data);
        });
    });
})();

function send1(data){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/?${data.name}=${data.value}", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);     
}

タグ

6, const, doc, document, foreach, function, github, gt, input, querySelectorAll, quot, youtube, アプリ, オープン, お話, コード, サイト, ソース, チェック, マフィア, もの, 事, 今回, 今日, 信頼性, 公式, 公開, 前, 動画, 実装, 必要, 悪意, 次第, 気, 注意, 無料, 確認, 自ら, 通り, 配布, 題,

一見似ていて全然違うコードですよ、初心者のどつぼの壺。

2022.04.02

Logging

おはよう御座います。土曜日の朝です😪。

下記のコードは一見似ていて全然違うコードですよ、初心者のどつぼの壺と言いますか・・・。初心者がハマりやすい、thisの領域です。特にメンターのいない独学で勉強をしている人はハマりやすいかなと思ったので今回、サンプルコードを記載しました。昔、自分が何故と思ったのですが今ではfunctionがねぇと気づく内容のコードです。

document.getElementById("example").addEventListener("input",function(){
    main()
})
document.getElementById("example").addEventListener("input",main);

function main(){
    if(this.value){
        console.log(this);
    }
}

最初はみんな初心者です、間違いながら覚えていけばよいのです、失敗しながら覚えていけばバグ取り🐤が上手になります。そのうち、動作するバグ🐞になっていきます。動作するバグが一番厄介です、動作するのでエラーコードを出力しないのでバグを取るにはトレースか当たりをつけてトレースするしか無いのです。

そういうことなので、初心者の皆様気おつけてくださいませ😌。

タグ

addEventListener, document, example, function, getElementById, if, input, main, quot, this, value, コード, サンプル, ドツボ, メンター, 一見, 下記, 人, 今, 今回, 内容, 初心者, 勉強, 土曜日, 壺, 昔, 朝, 独学, 自分, 記載, 領域,

ブラウザに画像をドロップして表示させる部分的な処理（javascript）。これを使って?

2021.10.07

Logging

本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

さて、ブラウザに画像をドロップして表示させる部分的な処理（javascript）を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。

ソースコードはこちらになります。

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://zip358.com/tool/demo43/

        var obj_input = document.createElement("input");
        obj_input.type = "file";
        obj_input.accept = "image/png,image/jpeg";
        var element = document.getElementById("dropArea");
        element.addEventListener("dragover", function(e) {
            e.preventDefault();
            this.classList.add("dragover");
        });
        element.addEventListener("dragleave", function(e) {
            e.preventDefault();
            this.classList.remove("dragover");
        });
        element.addEventListener("drop", function(e) {
            e.preventDefault();
            element.classList.remove("dragover");
            if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
                var obj = element;
                obj.innerHTML = e.dataTransfer.files[0].name;
                var imgfiles = e.dataTransfer.files;
                obj_input.files = imgfiles;
                var fr = new FileReader();
                fr.readAsDataURL(obj_input.files[0]);
                fr.onload = function() {
                    obj.style.backgroundImage = "url(" + fr.result + ")";
                    obj.style.backgroundSize = "cover";
                };
            }
        });

タグ

2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

Anglesharpというライブラリの話。

2021.03.13

Logging

久しぶりに技術的なお話の記事を書きます。AnglesharpというのはC#などでスクレイピングするときにスクレイピングを補助してくれるライブラリで結構人気のあるライブラリなるようです。スクレイピングするコードは下記のようになります。この書き方が至ってシンプルで書きやすいのではないかなと思っています。

http://anglesharp.github.io/

var Url = $"https://zip358.com/";
var querySelector = $"#index_post_list > li.clearfix.num1.type1 > div > h3";
var document = BrowsingContext.New(Configuration.Default.WithDefaultLoader()).OpenAsync(Url).Result;
var element = document.QuerySelector(querySelector);
Console.WriteLine($"blogtitle is {element.InnerHtml}");

このライブラリはとても良いのですが、一つ問題があります。スクレイピングするのですが・・・これjavascriptがOFFの状態でスクレイピングされるのですね。どうもこのコードではJSがONにはならないようですね。因みに自分はそのことを知っていなかったのでどハマリしました。大手の検索サイトなどはjavascriptがOFFの状態でも閲覧できるようになっている事を知りました、試しにブラウザをOFFの状態にしてみるとソースコードがかなり違っていてJSのONの状態とは情報が差異がある事が理解できると思います。

Anglesharpのコンフィグ設定（init）でエージェントなどを設定してあげると上手くJSがONの状態をスクレイピングすることが可能なのかもしれません。動画を見る限りではまだかもしれません・・・。

タグ

１, ３, 358, anglesharp, BrowsingContext, clearfix, com, Configuration, default, div, document, element, gt, https, index, li, LIST, new, num, OpenAsync, POST, QueryS, querySelector, quot, result, type, url, var, WithDefaultLoader, zip, お話, コード, シンプル, スク, とき, ピング, ライブラリ, レイ, 下記, 久しぶり, 人気, 書き方, 補助, 記事, 話,

おつりアルゴリズム番外編。

2020.07.10

Logging

おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。

デモ21としてリンクを載せときます、実際に使用してみて勘どころを掴んでください。なお、このコードはHTMLとJSで動させています。PHPなどは使用していません。ジャバスクリプト（JavaScript）で結構いろいろなことを処理することが可能だと感じますね。WEBでなにか勉強しようと考えている場合、JS（ジャバスクリプト）は必須であり、ブラウザさえあれば普通に動くのでお勧めな言語かなと思います。

ソースコードは下記になります。https://zip358.com/tool/demo21/

document.getElementById("money").addEventListener("input",function(){
	var money = document.getElementById("money").value;
	var change = {
		calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
		calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
		// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
		calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
		calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
		calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
		calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
		calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
		calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
		calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
	};
	money = money.replace(/[,|，]/g,"");
	if(money.match(/[0-9]{1,}/g)){
		for (const key in change) {
			if (change.hasOwnProperty(key)) {
				const obj = change[key];
				change[key].change  = Math.floor(money / obj.yen);
				money = money % obj.yen;
			}
		}
		var anser = function() {
			var str = "";
			for (const key in change) {
				if (change.hasOwnProperty(key)) {
					const obj = change[key];
					if(obj.change){
						str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
					}
				}
			}
			return str;
		};
		document.getElementById("change_print").innerHTML = anser();
	}else{
		document.getElementById("change_print").innerHTML = "入力が不適切です！";
	}
});

タグ

21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, 動, 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,

JavaScriptを再勉強しているのだが、ある疑惑が！？

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,

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のアロー関数ってアレだな。

2020.05.20

Logging

javascriptのアロー関数ってアレだな、無名関数の省略形だと思ったら良いです。アロー（arrow）＝矢って意味、まんまだよね。日本語に直訳すると矢関数って意味になるのかな・・・。矢関数って響きが良くないのでアロー関数って読んでいるだけだと思うのです。英語のわからない自分は矢関数で良いじゃないと思ったりするわけです。

例文：載せときます、、比較的新しいブラウザなら動作します。

	const test = (e)=>{
		var view = document.querySelector("#view1");
		view.innerHTML = e.target.value;
	};
	const input = document.querySelector("#t");
	input.addEventListener("input",test);

一応、デモサイトのリンクも載せときますので、動作確認してみてくださいな。
尚、今回は純正なjavascriptだけで記載しました。これから極力、純正で純粋なjavascrpitで書いていこうと思います、いまのWEBの流れはそうなんだって。そしてTypescriptとかが今後来るみたいに言われていますよね。

https://zip358.com/tool/demo15/

タグ

１, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, 矢, 自分, 英語, 関数,

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, おいら, レベル, 処理,