よさこい祭り２０２３参加チーム一覧
https://yosakoi-video.com/yosakoi2023/ JSONデータ有り🐜
//yosakoi-2023
let hasData = async()=>{
let response = await fetch("./assets/yosakoi2023.json");
if(!response.ok){
throw new Error("E");
}
let data = await response.json();
return data;
};
(async()=>{
let data = await hasData();
var str = "<table class='table table-striped'>"
str+= `<tr><th>チーム名</th><th>受付番号</th></tr>`;
str+= data.map(d=>{
return `<tr><td>${d.name}</td><td>${d.no}</td></tr>`;
}).join("");
str = str + "</table'>";
document.getElementById("yosakoi-2023").innerHTML = str;
})();javascriptネイティブで書くことが多くなった。
下記のコードはサイト紹介で使用したコードの一部です。こんな感じにjavascriptネイティブでコードを書くことが多くなりました。脱jqueryしたいひとはこのサイトがおすすめです。https://www.willstyle.co.jp/blog/1025/ ?このサイトを見てもらえれば分かる通り、jqueryで書いたコードをjavascriptで書くとどうなるかを記載しています。
document.getElementById("site").innerHTML = list_make(site);
document.getElementById("sns").innerHTML = list_make(sns);
document.body.addEventListener("mousemove", (e) => {
var x = e.clientX?e.clientX:0;
var y = e.clientY?e.clientY:0;
document.getElementById("fox").innerHTML = x + "/" + y;
});
document.body.addEventListener("touchmove", (e) => {
var x = e.clientX?e.clientX:0;
var y = e.clientY?e.clientY:0;
document.getElementById("fox").innerHTML = x + "/" + y;
});
document.oncontextmenu = function () { return false; }
function list_make(v) {
if (!(() => {
var urlHash = location.hash;
return urlHash === "#site-link" ? true : false;
})()) {
return "not found";
}
var hoge = [];
for (var key in v) {
hoge[key] = "<li><a href='" + v[key].url + "' name='" + v[key].name + "'>" + v[key].url + "</li>";
}
return hoge.join("\n");
}
wordpressにも記載していきます。
wordpressにも記載していきます。このコードはnoteにも記載したコードになります。即時関数を使用した形のプログラミングコードです。
document.getElementById("rectangle").innerHTML = (() => {
let color = ["#17dad1", "#2199ff", "#ff215e", "#21ffeb", "#21ff5b", "#8ba091", "#dab017", "#da17cb", "#ffffff"];
let str = "";
for (key in color) {
str += "<span style='color:" + color[key] + ";' class='color' data-color='" + color[key] + "'>■</span> ";
}
return str;
})();
let object = document.querySelectorAll(".color");
for (const key in object) {
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
element.addEventListener("mouseover", function(e) {
document.body.style.backgroundColor = this.getAttribute("data-color");
});
}
}RSS