あのYahoo!と同じ機能を追加しようか悩んでいる．選択した文字を

2024.11.01

Logging

おはようございます．あのYahoo!と同じ機能を追加しようか悩んでいる．選択した文字をサイト内検索する機能．やり方はこのサイトを参照すると導入できそうなんだけど、ちょっとウザいかもしれないと言う気持ちが自分の中にあるので悩んでいます．

もし追加するなら休みの日に機能追加をするつもりです．なので、直近の三連休中に追加していなかったら追加しなかったんだなと思って頂いて構わないです．

let paragraphElement = document.querySelector("p");

paragraphElement.addEventListener('selectstart', function() {
    paragraphElement.addEventListener('mouseup', function(event) {
        console.log(window.getSelection().toString());
    });
});

その場合でもこんな感じになります的なコードは公開しようと思っています．

明日へ続く

タグ

console.log, EVENT, function, let paragraphElement, mouseup&#39, paragraphElement.addEventListener, querySelector, quot;p&quot, selectstart&#39, toString, window.getSelection, Yahoo, ウザ, コード, 休み, 文字, 機能, 機能追加, 気持ち, 直近,

今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromise

2024.08.20

Logging

おはようございます．今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromiseの関係．asyncは非同期、awaitは同期（処理待ち）だと思う．ここでasyncした関数を取得するにはawaitして取得するだけで良いみたい．そうPromiseは出番なくて良いみたい😱．

例文コードを書いていきます．まずは非同期処理の場合です．

async function example1(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}

example1(123).then(d=>console.log(d)).catch(e=>console.log(e));
example1('abc').then(d=>console.log(d)).catch(e=>console.log(e));

こんな感じに書けば良いだけ．．．．

次に処理待ちの場合はこんな感じです．

async function example2(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}
async function example3() {
    let result = await example2(123).then(d=>d);
    document.body.textContent = result;
}
example3();

async function example4() {
    let result = await example2('123').then(d=>d).catch(e=>e);
    document.body.textContent = result;
}
//example4();

非常にシンプルなコードです．こんな感じで取得することが出来るからPromiseを使ったコードを見なくなったのですね😁．

もっと詳しく知りたい方は下記の記事を参考にしてみてください．

https://qiita.com/soarflat/items/1a9613e023200bbebcb3

明日へ続く．

タグ

async function example, asyncとawait, await, await example, body.textContent, catch, console.log, example, example1, example3, example4, if, let result, Number.isInteger, Promise, result, then, 出番, 同期, 関数,

jsのincludesっていう関数。

2024.03.13

Logging

おはようございます、jsのincludesっていう関数をつい最近しりました…。遅っ。こういう関数あるだろうなっては思っていたのですが調べようともせずバニラJsを使っていましたが、これからは便利なincludesという関数を使用していきたいと思っています。

includesの説明はchatGPTにしてもらいましたので、それをそのまま引用する形になります。includesとは特定の値が配列に存在するかどうかを判定するために使用されます。このメソッドは真偽値（trueまたはfalse）を返します。以下に、includesメソッドの基本的な説明と例を示します。

例えばこんな感じにコードを記載します。

const fruits = ['apple', 'banana', 'orange'];

const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true

const hasGrape = fruits.includes('grape');
console.log(hasGrape); // false

これどんなときに使用するか？例えばmap関数でデータをチェックし一つでもtrueが存在する場合は後続処理を行わせたいなど、いちいち配列の中を廻さなくても一行書で判断することが可能になり、とても便利かなと個人的には思います。

明日へ続く。

タグ

ChatGPT, console.log, const fruits, const hasBanana, const hasGrape, false, fruits.includes, hasBanana, hasGrape, includes, includesメソッド, JS, map関数, true, バニラJs, メソッド, 後続処理, 真偽値, 配列, 関数,

非同期処理で並列処理。お腹いっぱい #jscode

2023.06.10

Logging

おはようございます。１８時でも明るくていつカーテンを閉めればよいのか分からないです。さて、非同期処理で並列処理のコードを一週間前にＴｗｉｔｔｅｒで呟いたので、ソースコードをこちらにUPします。非同期処理で並列処理を行うのは、こういう感じだということを理解できると思います、あまり非同期処理で並列処理を行う機会なんて無いかもしれないですが、こういう事が出来るんだということを頭の片隅に置いとくと良いかもです😌。

がっちり覚えとくのも良いですけど、曖昧に覚えているのも悪くないと思います。因みに自分はこういう事は出来るだろうと自分は思っているタイプです。自分が考えていることぐらい頭の良い人は考えているはずなので、出来るだろうという事から始まって大体、ググったりChatGPTに聞くと最適解を教えてくれます。そういう訳でサンプルコードとサンプルサイトのリンクを貼っときます。

https://zip358.com/tool/demo76

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test1");
        resolve(1);
    }, 15);
});
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test2");
        resolve(2);
    }, 11);
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test3");
        resolve(3);
    }, 16);
});
let p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test4");
        resolve(4);
    }, 1);
});
let p5 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test5");
        resolve(5);
    }, 9);
});
(async()=>{
    let a = await Promise.all([p1, p2, p3, p4, p5]);
    console.log(a);
})()
 

タグ

A`, async, await Promise.all, ChatGPT, console.log, gt, new Promise, quot;test1&quot, quot;test2&quot, quot;test3&quot, quot;test4&quot, quot;test5&quot, reject, resolve, setTimeout, Twitter, いつカーテン, 並列処理, 最適解, 片隅,

404の画像をno-imageにする#jscode

2023.05.16

Logging

おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。

if(document.querySelectorAll("img")){
     [...document.querySelectorAll("img")].forEach(elm=>{
        fetch(elm.src).then(response=>{
            if(!response.ok){
                elm.src = "no_image1.gif";
            }
        });
     });
}

因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。

画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。

タグ

'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img&quot, no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,

demo23、javascriptの非同期同期処理?

2020.11.18

Logging

今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？

asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。

尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/

タグ

addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn&quot, quot;click&quot, resolve, setTimeout, デバックモード, 変数, 返却, 関数,

jsって言ってるアレ、そうアレ。

2017.12.30

Logging

この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは
親切にしてほしくないところかな。

$(function(){
    var FUSION= function(yabai){
        var fooooooooo = yabai;
        fooooooooo[0]++;
        fooooooooo[1]++;
        fooooooooo[2]++;
    },
    FUSION2= function(yabai2){
        var YaYaYaaaaaaaaa = yabai2 ;
        console.log(YaYaYaaaaaaaaa);
        return ;
    },
    t=[1,2,3];
    FUSION(t);
    FUSION2(t);
});

上記の記述で参照渡し可能になります。
オブジェクト渡しで参照渡しになるのは何となく理解できるものの
配列も参照渡しになっちゃうのはどうかと。
じぶんとしては参照渡し行ってほしくないだよね。
でもjavascriptの場合、参照渡しになっちゃう事を覚えておいたほうが
良さげです。逆にうまく使えれば参照渡し役に立つかもしれないだろうけど。

タグ

AM, console.log, function, FUSION2, Informatics&amp, javascript, var fooooooooo, var FUSION, var YaYaYaaaaaaaaa, yabai2, アレ, オブジェクト渡し, じぶん, プログラミング, 参照渡し, 参照渡し役, 徹底マスター, 配列, 開発技法,

JSプラグインを作ってみた、今回はANA旅割JSプラグイン（またかよ）。

2017.09.30

Logging

JSプラグインを作ってみた、今回はANA旅割JSプラグイン・・・。
またかよと言われそうなのですが、試しに作ってみたりした。
本当はもっと簡略化できるのだけど、あえてこれを参考に作る人にも
ある程度、参考になるかなというぐらいの代物です。
昨日、datetimepickerというプラグインを仕事で見ていて最初、取り出し方などが
わからず試行錯誤してなんとか取り出すことが出来たのですが、これでは駄目だな。
前、なんか書いていたけど使わなかったらやはり忘れてしまうので
本日から一週間ぐらい、しょぼいJSプラグインを何個かリリースします。
大量のコードは仕事終わってから書くことは出来ないかもしれないけれど
サンプルプログラム程度は簡単にコードが書けるように
しておかないと行けないなという気持ちもあります。
そしてjQueryから自前のjQueryプラグインへ
仕事でもシフトしていくつもりです。
やはりコチラのほうが慣れれば楽かなと感じます。
トイウコトでANA旅割JSプラグインは
こちらからダウンロードを行なってください。
ちなみに作りかけなので、これから再編集してもらっても
構いません。なんせ適当ですから：）
https://zip358.com/tool/ana_js_p/

(function($){
    var ana_tabai = {
        ana75:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-74);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana55:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-54);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana45:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-44);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana28:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setDate(dt.getDate()-27);
            dt.setMonth(dt.getMonth());
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana21:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setDate(dt.getDate()-20);
            dt.setMonth(dt.getMonth());
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        }
    };
 $.fn.tabiwari = {
     ana:function(d){
        if(d.split("-").length==3){
            var a = d.split("-");
            console.log(a);
            s = [ana_tabai.ana75(a),ana_tabai.ana55(a),ana_tabai.ana45(a),ana_tabai.ana28(a),ana_tabai.ana21(a)];
            var str="";
            var days = [75,55,45,28,21];
            for(var i = 0;i < s.length;i++){
                str += days[i] + "days ::" + s[i] + "<br>";
            }
            return str;
        }else{
            return "no!! :( ";
        }
    }
 }
})(jQuery);
function mumu (y,m,dy,dd){
    console.log(dd);
    dd[0] = !m?dd[0]:y;
    dd[1] = !m?dd[1]:m;
    dd[2] = !m?dy:dy;
    return dd;
}

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>zip358.com:ANAJSぷらぐいん</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="ana_tabiwari.js"></script>
  <script>
      $(function(){
          $("#ana_input").change(function(){
            var str = $("#ana_input").tabiwari.ana($(this).val());
            $("#ana").html(str);
          });
      });
  </script>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-71682075-1', 'auto');
  ga('send', 'pageview');
</script>
</head>
<body>
    <input id="ana_input" type="date">
    <div id="ana">
    </div>
    <a href="ana_tabiwari.js" download="ana_tabiwari.js">ANA旅割JSプラグインダウンロード</a>
</body>
</html>

タグ

AM, ANA旅割JSプラグイン, B06XNQCW7B, console.log, d.split, datetimepicker, dt.getDate, dt.setDate, fn.tabiwari, function, jquery, new Date, return dt, return str, s.length, var ana_tabai, var days, var dt, var str, トイウコト,

猫でもできるjsでゴリゴリ

2017.06.10

Logging

有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://zip358.com/tool/ajikan_js/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>猫でもできるjsでゴリゴリ</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script>
        $(function(){
            var ajikan  = {
                ajisen:function(){
                    var str = "味せんべい";
                    console.log(str);
                    return str;
                },neko:function(){
                    var str = "猫が";
                    console.log(str);
                    return str;
                },loop:function(obj){
                    var cnt = Number($(obj).val());
                    console.log(cnt);
                    return cnt;
                },taberu:function(ore,str1,str2,cnt){
                    var o = "";
                    for(var i=0;i<cnt;i++){
                        o+=str1;
                    }
                    for(var i=0;i<cnt;i++){
                        o+=str2;
                    }
                    o+="たべる？";
                    $(ore).html(o);
                    return;
                }
            };
            $("#ore").click(function(){
                  console.log("oioioi・・投資信託");
                  var e  =  ajikan;
                  e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
            });
        });
    </script>
  </head>
  <body class="dark">
      <div id="wrapper">
          <section class="component">
              <input type="text" value="" id="cnt">
              <input type="button" value="お!!" id="ore">
              <div id="obj">
              </div>
            </section>
      </div>
  </body>
</html>

タグ

１, ajax.googleapis.com, AM, console.log, div id, div&gt, DOCTYPE html&gt, head&gt, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script&gt, str1, stylesheet, title&gt, topcoat-desktop-dark.css, var ajikan, var str,