htmlとcssとphp-初学非同期処理とおまけ-No.3
2022.11.14
おはようございます。月曜日の朝ですね‥お仕事探しは続いています。
さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。
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/
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, 39, addEventListener, btn, click, css, document, gt, html, let, name, no, php, querySelector, querySelectorAl, quot, Text, value, いつ, おまけ, お仕事, 事, 仕事, 何, 処理, 初学, 同期, 月曜日, 朝, 次, 結果,
文字の置き換えはよく使うjavascript「吾輩は猫である。」
2020.12.06
文字の置き換えはよく使う。いろいろな参考書にも文字の置き換えは出てくる基本中の基本だ、そしてコレは結構使うことがある、とくに商品名を整理するときなど、連番に命名を置き換えるなどに使用することがある。EC系のシステム開発ではデーターベースへ製品名（product name）を登録するときなどによく使うのである?が、製品名や商品番号が整っていないのは、よくあることだ、だがしかしコレが中小企業の現実なのである。
この頃、再帰処理を使うことが少なくなってきて、何でも良いから再帰処理に当てはまる題材をじぶんに課すべきだと思う今日このごろです?
<p>吾輩は猫である、名前はまだない。</p>
<p>吾輩は猫である、名前はまだない。</p>
<button class="btn btn-primary" id="btn" type="button">名前はまだない？</button><script>
document.getElementById("btn").addEventListener("click",(e)=>{
var object= document.querySelectorAll("p");
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
(element).innerText = (element).innerText.replace("名前はまだない。","名前は猫はちだ。");
}
}
});
</script>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
btn, btn-primary, button, class, EC, gt, ID, javascript, lt, name, product, quot, type, いろいろ, こと, コレ, システム, じぶん, データー, とき, ベース, 中小企業, 今日このごろ, 使用, 再帰, 処理, 参考書, 名前, 吾輩は猫である, 命名, 商品, 基本, 整理, 文字, 現実, 番号, 登録, 系, 製品, 連番, 開発, 頃, 題材,
js初心者さんのお勉強：思いつき写経。
2020.06.01
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/
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, 事, 作法, 写経, 初心者, 勉強, 右, 基本, 左, 思いつき, 感じ, 昨日, 書き方, 本当, 用, 簡略, 自分, 馬鹿,