計算をリアルタイム。
2024.02.27
おはようございます、vue3.jsの一貫として時給計算するちょっとしたWEBサービスを作ってみました。vue.jsを触っていてわかったことはリアルタイム反映みたいなものが簡単にできるところ。これは便利ですね。JQueryから皆さんが移行する意味がいまごろ分かりました。
これからはvue.jsやReact.jsなどを使用していきたいですね。因みに自分はバニラばかりでした、バニラの良い所は慣れているせいか書きやすいところにあります。vueやReactにもバニラが入っていても問題ないので、そういう意味では今までの事が活かせるかもなって思います。
最後にサービスのリンクを貼ってこの記事は〆とします。
https://zip358.com/tool/payroll-calculation/
明日へ続く。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
jquery, react, React.js, vue, vue.js, vue3.js, Webサービス, サービス, ところ, バニラ, リアルタイム反映, リンク, 一貫, 問題, 意味, 時給, 最後, 皆さん, 自分, 良い所,
今年も残る所あと半月ほどになりましたね。 #半月 #2022年大晦日まで
2022.12.15
おはようございます、今年も残る所あと半月ほどになりましたね😆。
先日、呟いた通りですが、フルリモートのお仕事が出来るようになりました。先ずは三ヶ月の雇用との事です、実際に働き出すのは1月からですが今から猛勉強💦します。Laravelは平たく理解しているのですが、今の知識は入門書止まりだと思うので、短期間で実践レベルにまで押し上げていきたいです。
その他にもvue.jsやReact.js等（TypeScriptも含む）も勉強しつつHTMLやCSSを再勉強するつもりでいます。あとバージョン管理でGitLabを使用するみたいなのでそちらも慣れなければいけないなと思っています。
正直な所、自信がないのです、なんかレベル高そうな気がして怖いなー。自信がないのでカバーする為にも勉強するしか無いですね…。
この頃、使用していないjqueryも再勉強しないと・・・やらなければいけない事が山積みだけど頑張るしか無いな。
これから1月半ばまで勉強のアウトプットを記事になると思います、トイウコトデよろしくお願いします🙇。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
css, gitlab, html, jquery, Laravel, React.js, TypeScript, vue.js, アウトプット, トイウコトデ, バージョン管理, フルリモート, 入門書, 勉強, 実践, 所あと半月, 猛勉強, 短期間, 自信, 雇用,
タイトルの下に背景色を変える■を追加しました。
2022.07.22
おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述（ファイルなど）を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。
let htmlcode = `
<span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
<span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
<span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
<span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
<span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function(hex){
let red = parseInt(hex[1]+hex[2],16);
let green = parseInt(hex[3]+hex[4],16);
let blue = parseInt(hex[5]+hex[6],16);
return `rgb(${red}, ${green}, ${blue})`;
};
try {
if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
//console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
}
}
});
}
}ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば１６進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。
この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,
デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。
2022.05.03
おはようございます。
祝日が始まりましたね、お休みの方も多いかと思います。
そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。
非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="api">非同期通信</button>
<script>
document.getElementById("api").addEventListener("click", api);
function api() {
let data = [];
data.push({"name":"樹龍"});
console.log(param(data));
fetch("./api.php", {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body:param(data)
}).then(
response => response.json()
).then(data => {
console.log('data', data);
}).catch(error => {
console.log('error', error);
});
}
function param(data){
let str = [];
for(key in data){
for(keyname in data[key]){
str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
}
}
return str.join("&");
}
</script>
</body>
</html><?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
55, ajax, DOCTYPE, gt, html, jquery, lang, lt, quot, エンジニア, エンド, お休み, コード, こと, コピペ, ご自身, デモ, とき, バック, プログラミング, フロント, 中, 処理, 勉強, 同期, 壁, 実行, 必要, 方, 普通, 次, 注意, 環境, 祝日, 結果, 言葉, 訳, 通信, 連休, 連携, 階層, 頃, 順番,
JavaScriptを再勉強しているのだが、ある疑惑が！？
2020.06.03
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;
});
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,
jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。
2020.03.10
jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。記述は下記になります。ぐぐると出てくるので知っている人の方が多いかもしれませんが…。ちなみに自分はこの記述方法、ごくまれにしか使わないため、忘れてしまいます。event.dataに紐づけてくれるのはとても良いかなと自分は思っていますが、皆さんはいかがでしょうか？もうjqueryなんか使わないよという方もいると思うのですが、自分が思うにゴリゴリ書くよりか、jqueryで済ませれるところは使ったほうがコードは短くて済むと思っています。WEB業界は技術の移り変わりが早いですよね。逆にソフトのほうはWEBよりはスパンが長い気がします。
https://zip358.com/tool/demo9/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="common.js"></script>
<title>Document</title>
</head>
<body>
<p id="pen">お腹空いた(´；ω；｀)お腹空いたと＞φ(..)</p>
</body>
</html>$(function(){
$("#pen").click({sword:"The pen is mightier than the sword"},function(e){
$(this).text(e.data.sword);
});
// $("#pen").on("click",{sword:"The pen is mightier than the sword"},function(e){
// $(this).text(e.data.sword);
// });
});
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,
vue.jsとreact.jsをお触りしているのですが?。
2020.02.13
vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。
react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, 事, 人, 仕様, 企業, 可能, 呪い, 大体, 把握, 方, 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
2019.08.24
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
自動で九九表を生成するjQueryなんかを作ってそう。
(いまの小学生が羨ましいなw夏休み一日中ネットに浸っているだろう）
デモサイトはこちら
https://zip358.com/tool/demo5/index-12.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九九表</title>
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/bootstrap.css" >
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/mdb.css" >
<link rel="stylesheet" href="../fontawesome-free-5.9.0-web/css/all.css">
<script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">数字を入力してください</label>
<input type="text" class="form-control" id="inp" aria-describedby="inp" placeholder="数字を入力してください(デフォルト(9))">
<small id="emailHelp" class="form-text text-muted">1以下の数字、数字以外、または桁が2桁を超えた場合デフォルトを表示します</small>
</div>
</form>
<span id="tbl99"></span>
<script>
$(function(){
var cc = function(){
var c=$(this).val().match(/[0-9]{1,2}/) && Number($(this).val())>1?$(this).val():9;
$("#tbl99").html(c99(c));
return c;
};
$("#tbl99").html(function(){
c99($("#inp").val(cc));
});
$("#inp").on("keyup",cc);
$("#inp").on("keydown",cc);
});
function c99(c){
var str="<h1><span class="badge badge-primary">九九表</span></h1>";
var x = y = c;
str+="<table class="table table-striped table-dark table-bordered">";
for(var i=1;i<=x;i++){
str+="<tr>";
for(var ii=1;ii<=y;ii++){
var s = i * ii;
str+="<td>" + i + " × " + ii + " = " + s + "</td>";
}
str+="</tr>";
}
str+="</table>";
return str;
}
</script>
</body>
</html>
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
aria-describedby, cc, content, css, device-width, function, IE, Ii, initial-scale, inp", jquery, lt, match, Number, placeholder, quot, STR, stylesheet", val,
jsのクリックイベントの謎？？
2019.06.22
javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。
See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,
jQuery独自プラグイン基本サンプル2
2019.01.19
忘れやすい自分のためにメモとして残しときます。
(function($){
$.fn.smp = function (options) {
var config = {
text:"おいら"
};
var cfg = $.extend({}, config, options);
cfg.text = cfg.text + "のお金";
return $(this).html(cfg.text);
};
})(jQuery);
$("#hoge1").smp({text:"ぼく"});
$("#hoge2").smp();
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2, cfg, config, extend, fn, function, hoge, html, jquery, options, return, smp, Text, this, var, おいら, お金, サンプル, ため, プラグイン, ぼく, メモ, 基本, 自分,
javascriptでテキストファイルやCSVファイルを読み込む方法。
2018.11.13
javascriptでテキストファイルやCSVファイルを読み込む方法は下記になります。
この他に、jqueryだとajaxを使用して読み込む方法などもありますが、あえて
javascriptで記述しています。
rt();
function rt(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","xxx.txt",true);
xmlHttp.send(null);
xmlHttp.onload = function(){
var data = xmlHttp.responseText;
}
}追記：アクセス数が結構あるのでサンプルを作りました。
下記のコードをお試しください。
デモページはこちらになります。
https://zip358.com/tool/demo13/ 【改良前】
https://zip358.com/tool/demo13/index2.php 【ちょっと改良】
https://zip358.com/tool/demo13/index3.php 【もうちょっと改良】
https://zip358.com/tool/demo13/index4.php 【もっと改良】
https://zip358.com/tool/demo13/index5.php 【もっともっと改良】2022年度版
※文字の中にカンマ区切りがあるのには対応してません?
"use strict";
var csv = {
load:async function(filename,id){
await fetch(filename).then(data=>data.text()).then((res)=>{
let result = (res.split("\r\n").map(value=>{
return "<tr>" + (value.split(",").map(val =>{
return "<td>" + val.slice(1, -1) + "</td>";
})).join("") +"</tr>";
})).join("");
if(result){
document.getElementById(id).innerHTML = result;
}
}).catch(m =>{
console.error(m);
});
return true;
}
}
csv.load("xxx.csv", "table");"use strict";
var csv = {
load:async function(filename,id){
const res = await fetch(filename);
const data1 = await res.text();
let separate1 = /\r\n/;
let separate2 = ",";
let data_tbl = (data1.split(separate1)).map(function(value){
return (value.split(separate2)).map(function(value1){
return value1.slice(1, -1);
});
});
var str = "";
for (const key in data_tbl) {
str+=`<tr>`;
for (const key1 in data_tbl[key]) {
str+=`<td>${data_tbl[key][key1]}</td>`;
}
str+=`</tr>`;
}
document.getElementById(id).innerHTML = str;
return "OK";
}
};
csv.load("xxx.csv", "table");"use strict";
var csv = {
load: function (filename, id) {
fetch(filename).then(
Response=>{
return Response.text();
}).then(data1 =>{
let separate1 = /\r\n/;
let separate2 = ",";
let data_tbl = (data1.split(separate1)).map(function(value){
return (value.split(separate2)).map(function(value1){
return value1.slice(1, -1);
});
});
var str = "";
for (const key in data_tbl) {
str+=`<tr>`;
for (const key1 in data_tbl[key]) {
str+=`<td>${data_tbl[key][key1]}</td>`;
}
str+=`</tr>`;
}
document.getElementById(id).innerHTML = str;
return "OK";
}).catch(error=>{
console.log("失敗しました" + error);
})
}
};
csv.load("xxx.csv", "table");
"use strict";
var csv = {
load: function (filename, id) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", filename, true);
xmlHttp.send(null);
xmlHttp.onload = function () {
if (xmlHttp.status === 200) {
let separate1 = /\r\n/;
let separate2 = ",";
let data1 = xmlHttp.responseText;
let data_tbl = (data1.split(separate1)).map(function(value){
return (value.split(separate2)).map(function(value1){
return value1.slice(1, -1);
});
});
var str = "";
for (const key in data_tbl) {
str+=`<tr>`;
for (const key1 in data_tbl[key]) {
str+=`<td>${data_tbl[key][key1]}</td>`;
}
str+=`</tr>`;
}
document.getElementById(id).innerHTML = str;
}
};
}
};
csv.load("xxx.csv?123", "table");
"use strict";
var csv = {
load: function (filename, id) {
var data = {};
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", filename, true);
xmlHttp.send(null);
xmlHttp.onload = function () {
if (xmlHttp.status === 200) {
let separate1 = /\r\n/;
let separate2 = ",";
let data_org = xmlHttp.responseText;
let data_en = data_org.split(separate1);
for (let d in data_en) {
data[d] = data_en[d].split(separate2);
}
//data load
var t = document.getElementById(id);
var h = "<table>";
for (var o in data) {
h += "<tr>";
for (var r in data[o]) {
h += "<td>";
h += data[o][r].slice(1, -1);
h += "</td>";
}
h += "</tr>";
}
h += "</table>";
t.innerHTML = h;
}
};
}
};
csv.load("xxx.csv", "table");
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, ajax, com, CSV, data, function, GET, https, javascript, jquery, new, null, onload, open, quot, responseText, rt, send, too, true, txt, var, xmlHttp, XMLHttpRequest, xxx, zip, アクセス, コード, こちら, サンプル, テキスト, デモ, ファイル, ページ, 下記, 他, 使用, 方法, 記述, 追記,
jQueryの基礎1
2018.11.11
世の中、javascriptへの原点回帰が進んでいますが、だからといって、jqueryが無くなるかといえばそうでもない気がします。トイウコトデ、jqueryの基礎的なデモページを作成しました。
ご参考程度どうぞ。これから毎週1回以上、プログラムのデモ的な内容をUPしていきます。自分の勉強や復習の意味合いも兼ねています。プログラム言語はPHP、JS、C#が主の掲載となります。
追記：2021年、jqueryは使わなくなってきています、そのうち使わなくなる可能性があります。
https://zip358.com/tool/demo1/demo1.php
$(function () {
$(".alert.alert-danger").html("未記入です");
$("input").keyup(function () {
if ($(this).val()) {
$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
} else {
$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
}
});
$("input").blur(function () {
if ($(this).val()) {
$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
} else {
$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
}
});
$("input").focus(function () {
if ($(this).val()) {
$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
} else {
$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
}
});
});
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2021, alert, alert-danger, eq, function, html, if, input, javascript, jquery, JS, keyup, php, quot, this, UP, val, うち, これ, ご参考, デモ, トイウコトデ, プログラム, ページ, 世, 中, 作成, 内容, 勉強, 原点, 可能性, 回帰, 基礎, 復習, 意味合い, 掲載, 毎週, 気, 自分, 言語, 記入, 追記,
JSプラグインを作ってみた、今回はANA旅割JSプラグイン（またかよ）。
2017.09.30
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>
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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, トイウコト,
忙しいときは冷静になり、暇な時には情熱を持つ。
2017.03.01
忙しいときは冷静になり、暇な時には情熱を持つ。
インターネットに溺れるなかれ、インターネットの情報は
欲しい情報が瞬時に出てきますが、瞬時にでてくる情報ほど
大した事ない。結局、ネットに掲載されている情報はある一定のレベル
までしか普通はたどり着けない。
実は検索されないようなサイトでも重要な内容を
公表しているところはある。ただ、たどり着くには専門用語を
知っていないといけないというオチがある。
自分はメソッドを覚えていないので結構、ググることが多い。
ググればメソッドなので簡単に出てくる。そんな事をしているとググり
ばかりで頭に記憶されない。この頃、記憶しないのは時間のロスだと
思い始めた。じぶんの場合、ひとつの言語を長く使用した経験がなく
コレまでは、それで良かったのだけど、この頃このまま
覚えないのはまずいなと思い。C#、PHP、jqueryのメソッドや宣言などは
ググらなくとも書けるようにしようと思っています。
特にPHPはよく使うので、そろそろがっつり覚えないと
駄目な気がする。
英単語を覚えるみたいに、、、メソッドを覚える
問形式のサイトを誰かつくっていないだろうか？
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
B00V4DYCPG, jquery, PHPポケットリファレンス, インターネット, オチ, サイト, じぶん, メソッド, 一定, 問形式, 専門用語, 忙しいとき, 情熱, 改訂, 瞬時, 英単語, 言語,
PHPで自前の関数をガッと放り込むとjquery…!!
2017.02.16
デモサイトはこちらから。
https://zip358.com/tool/kansuu.php
実際、関数を引数に放り込む機会はあまりないかなと思いますが
こういう使い方もできると言う事を覚えておくと便利かなと思います。
この頃jQueryを使うことが多くなってきているのですが
使っているうちにライブラリの作り方がなんとなく理解してきましたので
オリジナルライブラリ（プラグイン）を作ってみようかなと思います。
ちなみにプラグインの作り方を紹介しているサイトがググると
結構あります。たとえば、こちらガッツリと解説しているので
こちらを参考に皆さんもオリジナルプラグインを提供してみてはどうでしょうか？
http://qiita.com/k4zzk/items/11e5dbd53cb93edb8b4d
jqueryは結構好きですが全然というほど書き方やメソッドをしらないですね。
一度、どこかでメソッドに関してはリファレンスなどに目を通しておかないと
いけないなと思う今日このごろです。
リファレンスはこちらから。
http://semooh.jp/jquery/
<?php
function kansuu(){
return "un!<br>";
}
function ui($f){
echo $f;
echo $f;
}
echo 'ui(kansuu());<br>';
ui(kansuu());
class un{
function kansuu(){
return "un!<br>";
}
function ui($f){
echo $f;
echo $f;
}
function d($f){
echo $f->kansuu();
}
}
$un = new un();
echo '$un->ui($un->kansuu());<br>';
$un->ui($un->kansuu());
echo '$un->d($un);<br>';
$un->d($un);
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, br>, class un, echo, function d, function kansuu, function ui, jquery, new un, return, UI, un, オリジナルプラグイン, オリジナルライブラリ, プラグイン, メソッド, リファレンス, 今日このごろ, 作り方, 関数,
ANA旅割逆算日導きサービスモバイル版：最終
2016.05.04
<!DOCTYPE html>
<html>
<head>
<title>ANA旅割逆算日導きサービス（mobile）</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery-mobile/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-page{
background:#73cbe6;
}
</style>
<script>
$(function(){
$("#ckday").click(function(){
//alert($("#day").val().replace(/\-/g,'\/'));
$.ajax({
type: 'POST',
url: "../ana_calendar/json.php",
data:{day:$("#day").val().replace(/\-/g,'\/')},
dataType: 'json',
success: function(obj){
var str = '<ul id="ana_listview" data-role="listview">\n';
str = str + '<li>予定日：' + obj.anaday + '</li>\n';
str = str + '<li>75日［旅割］の予約期日：' + obj.day75 + '</li>\n';
str = str + '<li>55日［旅割］の予約期日：' + obj.day55 + '</li>\n';
str = str + '<li>45日［旅割］の予約期日：' + obj.day45 + '</li>\n';
str = str + '<li>28日［旅割］の予約期日：' + obj.day28 + '</li>\n';
str = str + '<li>21日［旅割］の予約期日：' + obj.day21 + '</li>\n';
str = str + '</ul>\n';
$("#ana_api").html(str);
$("#ana_listview").listview().listview('refresh'); ;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" data-title="ANA旅割逆算日導きサービス（mobile）">
<!--ヘッダー領域-->
<div data-role="header">
<h1>ANA旅割逆算日導きサービス（mobile）</h1>
</div>
<div role="main" class="ui-content">
<input type="date" id="day">
<button id="ckday" class="ui-btn">逆算する。</button>
<span id="ana_api"></span>
</div>
<div data-role="footer">
<h3>Copyright zip358.com</h3>
</div>
</div>
</body>
</html>ANA旅割逆算日導きサービスモバイル版：最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので 最初からwebで作れたんじゃねぇっていう疑惑が あると思うです。
webｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)っていう誘惑は モバイル版のアプリを作る時からありましたが アプリ作るよって言ったので、有言実行ということで 作ってみました。
作った結果ですけど・・・ ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?［PC］
zip358.com/tool/ANAmobile/?[モバイル] ?
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,
自作テンプレートを作ってみて。
2015.07.11
自作テンプレートを作ってみて、イマイチ感というよりはLightBox2のプラグインが上手く動作しなかったので元のテンプレートに戻しました。恐らく一部のプラグインが動作しなかったのはBootstrapかjqueryの競合が問題かと思われます。自分で作ってみてもっとWordPressのメソッドを知っていればもっと楽々と作れた事は間違いないですが、自分が思っていた以上にWordPressは難しいという感じではないです。cakePHPなどの方がやはり難しい。それに比べれば幾分、考え方は緩いかなと感じます。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Bootstrap, cakePHP, jquery, LightBox2, WordPress, イマイチ感, プラグイン, メソッド, 一部, 元, 問題, 幾分, 感じ, 楽々, 競合, 考え方, 自作テンプレート,
プログラムのレベル、自己評価。自己嫌悪。自画自賛。
2015.05.01
例えば、ExcelVBAはたぶんソコソコ良い感じだと自分で思っています。Accessも基本VBAがベースなので同じくソコソコ良い感じだと思っています。今ままでVBAで本気を出したことはないけれど恐らく( ｀д´) ｯ!となるレベルです。続いてWEB系のperlですが、これは普通ぐらい・・・ここ数年使ったことがありません。PHPですが、まぁこちらも普通レベルですね。仕事としてまぁ難易度高くなければそつなくこなす程度です。続きましてjqueryとかjavascriptですが大好物です。特にDOMが好きです。むかし凝ってましたが今は、かなり忘れてしまってます。WEB系はCMSをバリバリこなして一人前ですが、ググりゃ何とかいけるレベルです。そつなくこなしている程度です、なので一人前かどうかは分かりません。またまた、続いてソフトウェア系の開発言語にいきまして、Java言語、あまりにもこの言語でコードを書いた事がないので、ググりながらメソッドなどを調べたりライブラリを調べたりしないと言う感じで比較的に難しいです。続いてVB2005以上、こちらはまぁ出来るかなぁぐらいです。続いて続いてVC++ですが、VBが理解できれば応用は効きます。それぐらいの知識です、深くなく浅瀬です・・・・。ここまで書いて読者の皆さんは理解したと思いますが自分は総合的なプログラムレベルは言いませんが・・・昔は自分なんて全然駄目だと感じていたのですが、いろいろな人のコードを見てきた結果、どのレベルに自分がいるかこの頃、見えてきました。あと少しで自分の目標に達成しそうな気がします。あとは時間と努力の問題かなと思ってます（どのぐらい多くコードを書いて自分の身になるかだと思ってます）。
今後、この職業で飯を食うかは分かりませんが、副業としては確実に続けていきます。その方が気楽かなと思っています。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ExcelVBA, javascript, Java言語, jquery, perl, VB2005以上, VC++, コード, ソフトウェア系, それぐらい, プログラム, むかし, メソッド, ライブラリ, 一人前, 基本VBA, 浅瀬, 自己嫌悪, 自画自賛, 難易度,
真鍋 大度さん（ライゾマティクス）は凄いなと改めて思う。
2015.03.10
これ、Perfumeのグローバルサイトのスクリーンショットなんですけど、おそらくこのサイト、JQueryとかで作成されたサイトです。そしてTwitterか何かでつぶやいた、あるキーワードによって各国のこんちはという言葉を音声付きで表示している可能性があります。Flashを使わないでここまで出来るところが凄いな。スクリーンショットでは何がすごいか分からないと思いますが、見てみると凄さがわかると思います。URLはこちら：http://translyrics.perfume-global.com/ 明日の夜にはこのサイトはバージョンアップされているので見えなくなると思いますので、見るなら今だけです。（バージョンアップしています、見た目が若干、変わっています。BETA1.0）
話し変わりまして、本日、AppleWatchが発表されましたが微妙だなと、いろいろとスマートウォッチが発売されていますけど・・・。まだまだな感じがします。今回のAppleのスマートウォッチは防水機能が付いていないとか、いろいろな問題がまだまだ山積みのような気がします。そして、もうひとつ発表されたMacBookですが、この製品もやや問題があるように思えます、バッテリーや処理能力向上は良いですが、外部端子がひとつしかないと言う問題です。確かに外部機器をUSBで繋ぐことが少なくなっていますが一つしかないというのはなんだか。ちょっと不安で不満な感じがします。
トイウコトデ、今回のアップルの発表は若干、今回は期待はずれな感じでした。ios8.2するとウォッチアプリが追加されるのだとか（削除できないらしい）。
※ちなみに真鍋 大度さんはFacebookとTwitterのアカウントを持っています。
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, AppleWatch, BETA1.0, ios8.2, jquery, アカウント, ウォッチアプリ, グローバルサイト, スクリーン, スクリーンショット, スマートウォッチ, トイウコトデ, バージョン, バッテリー, もうひとつ, ライゾマティクス, 外部端子, 大度, 山積み, 真鍋, 若干,