Logging

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

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

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

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/







    映画、イントゥ・ザ・スカイ~気球でみらいを変えたふたり #アマプラ前のページ

    ザ・プレイリストを観ました。 #シーズン1 #ネトフリ#Spotify次のページ

    関連記事

    1. Logging

      何故、気づかない。宇宙の成り立ち、始まりの始まりは無限ループですよねぇ。

      先日、派遣の面接に行ってきましたがお断りしようと思っています。そして…

    2. Logging

      ブロックチェーン技術の語りにはっと思った、2030年世界の大変化(中田敦彦解説)

      ブロックチェーン技術の語りにはっと思った、2030年世界の大変化(中…

    3. Logging

      phper会議がYOUTUBEであったのだが

      phper会議がYOUTUBEであったのだが見逃してしまった。強強エ…

    2022年11月
     123456
    78910111213
    14151617181920
    21222324252627
    282930  

    カテゴリー

    アーカイブ

    PAGE TOP