彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。
2021.07.12
vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。
htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。
<!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">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
#el{
width: 100vw;
height: 100vh;
}
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
<span v-on:click="colorclick('#000')"style="color:#000">■</span>
<span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
<span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
<span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
---{{ color }}---
X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>var vm = new Vue({
el:"#el",
data:{
color:"#fff",
x:0,
y:0
},
methods:{
colorclick:function(c){
this.color = c;
document.body.style.backgroundColor = c;
return true;
},
mouseXY:function(event){
this.x = event.clientX;
this.y = event.clientY;
}
}
});
タグ
body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,
今はよく使う無名関数と即時関数というモノ？
2021.06.21
javascriptを例に無名関数と即時関数をよく書いています。尚、PHPでも同じ要領で無名関数と即時関数がかけます。たぶんいろいろな言語に同じ要領で書けるようになっていると思います。但しPHPにアロー関数での無名関数と即時関数がどうか分かりません。因みにPHPの方に即時関数があることは結構、最近になって知りました。
自分は無名関数の存在は知っていましたが、あまり使うことがなく使い方もヘンテコな使い方をしていましたね。
無名関数や即時関数を使わない人もいると思います、駆け出しのエンジニアさんに配慮して書かないという職場もあるでしょうし、制約で書けない場合もあるかもしれません。
そんな感じで仕事をしているといろいろ制約の中でコードを書くことになるので、ちょっと窮屈感を感じる人も多いと思います。特に開発に新しい技術を取り入れるような実験が出来る職場は少ないです。大規模開発になればなるほど、実験的な事ができなくなる傾向にあると思います。それも仕事だと割り切るしか無いかなと思います。使いたい技術は私用で開発するときに使うようにしましょう。そういうITエンジニアは結構いますよ。
//functionで無名関数
var mumei1 = function(a){
return a;
};
console.log(mumei1(123));
//アロー関数で無名関数
var mumei2 = (a)=>{
return a;
};
console.log(mumei2(123));
//functionで即時関数
console.log((function(a){
return a;
})(123));
//アロー関数で即時関数
console.log(
((a)=>{
return a;
})(123));
タグ
javascript, php, アロー, いろいろ, エンジニア, コード, こと, ヘンテコ, もの, 中, 事, 人, 今, 仕事, 使い方, 例, 傾向, 制約, 即時, 場合, 大規模, 存在, 実験, 感, 感じ, 技術, 方, 最近, 無名, 窮屈, 職場, 自分, 要領, 言語, 配慮, 開発, 関数, 駆け出し,
文字の置き換えはよく使う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>タグ
btn, btn-primary, button, class, EC, gt, ID, javascript, lt, name, product, quot, type, いろいろ, こと, コレ, システム, じぶん, データー, とき, ベース, 中小企業, 今日このごろ, 使用, 再帰, 処理, 参考書, 名前, 吾輩は猫である, 命名, 商品, 基本, 整理, 文字, 現実, 番号, 登録, 系, 製品, 連番, 開発, 頃, 題材,
おつりアルゴリズム番外編。
2020.07.10
おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。
デモ21としてリンクを載せときます、実際に使用してみて勘どころを掴んでください。なお、このコードはHTMLとJSで動させています。PHPなどは使用していません。ジャバスクリプト（JavaScript）で結構いろいろなことを処理することが可能だと感じますね。WEBでなにか勉強しようと考えている場合、JS（ジャバスクリプト）は必須であり、ブラウザさえあれば普通に動くのでお勧めな言語かなと思います。
ソースコードは下記になります。https://zip358.com/tool/demo21/
document.getElementById("money").addEventListener("input",function(){
var money = document.getElementById("money").value;
var change = {
calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
};
money = money.replace(/[,|，]/g,"");
if(money.match(/[0-9]{1,}/g)){
for (const key in change) {
if (change.hasOwnProperty(key)) {
const obj = change[key];
change[key].change = Math.floor(money / obj.yen);
money = money % obj.yen;
}
}
var anser = function() {
var str = "";
for (const key in change) {
if (change.hasOwnProperty(key)) {
const obj = change[key];
if(obj.change){
str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
}
}
}
return str;
};
document.getElementById("change_print").innerHTML = anser();
}else{
document.getElementById("change_print").innerHTML = "入力が不適切です！";
}
});タグ
21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, 動, 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,
JavaScriptのPromise例えが分からない人のために。
2020.06.06
自分は『Promiseってなんやねん、わからんわ。』という人でした。皆さん賢いので複雑怪奇なコードで教えてくれていて…わかんない。
Promiseって非同期処理にするための道具です。Promiseって書いてその中に非同期処理の内容を書いてあげる。値を戻したい場合は命名した名前のカッコの中に値を返してあげれば良いが！！、どうも渡せる値は一つだけなのだ。
ちなみにthen（その後）で、非同期処理が終わった後にする処理が書けるですね(´・ω・`)。thenの中に非同期処理の値も返ってくる‥但しひとまとめで、、そんだけの話。またエラーになった時の処理も対応できるってさ…、そしてチェーン（数珠繋ぎ）の様に書くことも可能です、ここではそれらは割愛しますね?。
ちなみに最初、asyncとawaitと混合していて悩んでおりました。asyncとawaitは対になっていると同じような感覚でPromiseとthenは対になっていると考えてください。あまり複雑怪奇に考えずサンプルコードを動かして出来るできないを判断した後に賢い人が書いたリファレンスなどを読むことをオススメします。
最後に単純なソースコードとコンソールの結果を載せときますね。
"use strict";
var a = 0;
const q1 = new Promise((zaru)=>{//zaru...名前付けは何でも良い（予約されているものでなければ
a++;
zaru(a + "1..");//データをまとめて返す
});
const q2 = new Promise((zaru)=>{
a++;
zaru(a + "2..");
});
const q3 = new Promise((zaru)=>{
zaru("3~~~~n");
});
const qdaaaaaaaa = new Promise((zaru)=>{
zaru([1,2,3,"Dahahaha!!"]);
});
Promise.all([q1,q2,q3,qdaaaaaaaa]).then((val)=>{
console.log(val);
}
);
qdaaaaaaaa.then((val)=>{
console.log(val);
});
Array(4) [1, 2, 3, "Dahahaha!!"]
move.js:26
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
Array(4) ["11..", "22..", "3~~~~n", Array(4)]
move.js:21
length:4
__proto__:Array(0) [, …]
0:"11.."
1:"22.."
2:"3~~~~n"
3:Array(4) [1, 2, 3, …]
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"タグ
async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, 中, 人, 但し, 値, 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, 対, 対応, 後, 感覚, 数珠繋ぎ, 時, 最初, 混合, 皆さん, 自分, 話, 道具,
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;
});タグ
addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,
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/
タグ
１, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, 事, 作法, 写経, 初心者, 勉強, 右, 基本, 左, 思いつき, 感じ, 昨日, 書き方, 本当, 用, 簡略, 自分, 馬鹿,
javascriptのアロー関数ってアレだな。
2020.05.20
javascriptのアロー関数ってアレだな、無名関数の省略形だと思ったら良いです。アロー（arrow）＝矢って意味、まんまだよね。日本語に直訳すると矢関数って意味になるのかな・・・。矢関数って響きが良くないのでアロー関数って読んでいるだけだと思うのです。英語のわからない自分は矢関数で良いじゃないと思ったりするわけです。
例文：載せときます、、比較的新しいブラウザなら動作します。
const test = (e)=>{
var view = document.querySelector("#view1");
view.innerHTML = e.target.value;
};
const input = document.querySelector("#t");
input.addEventListener("input",test);一応、デモサイトのリンクも載せときますので、動作確認してみてくださいな。
尚、今回は純正なjavascriptだけで記載しました。これから極力、純正で純粋なjavascrpitで書いていこうと思います、いまのWEBの流れはそうなんだって。そしてTypescriptとかが今後来るみたいに言われていますよね。
https://zip358.com/tool/demo15/
タグ
１, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, 矢, 自分, 英語, 関数,
プログラミングって何から勉強したら良いの？パソコンが有れば無料で勉強できる方法。
2020.01.11
プログラミングって何から勉強したら良いの？
答えは通称js（ジェーエス）と呼ばれるjavascript(ジャバスクリプト)言語から
始めると良いです^_^。
ちなみにプログラミンスクールに通う必要なんてないです。
偏差値50ぐらい有れば独学で身につくことが出来ると言われています。
自分を知っている人ならあいつでも出来るなら私でも出来ると思って
トライしてみてください。
繰り返しになりますが、参考書などは買わなくて良いです。
下記の方法で勉強してみてください。
- YOUTUBE動画を見る。
- 動画に記載しているプログラムを実際に同じコードを書いてみる。
- 動作したらプログラムコードを変更してみる。
- 一旦、プログラムコードを消して今度は記述コードを見ないで書いてみる。
- コードがわからない時は動画を見ずにググる。
上記のことを繰り返しすることで何だかわからないけど、感覚的に身につくはずです。難しい横文字などは後から覚えたら良いです。
JavaScriptを解説している動画リンクを貼っておきます。
動画のリンク切れあった場合はYOUTUBEで JavaScript 入門などの単語で検索してみてください。
入門解説動画：何となく進めるが大事です。
エラーになった時の対処方法：デバッグ方法。
中級者JSテクニック動画。
尚、プログラムコードを書く場合、大体のプログラマーはエディターやIDEを
使用してプログラミングコードを記載します。
自分はVisualStudio codeを使用しています。
こちらWindowsやMac、リナックスのOSにそれぞれ対応しています。
https://code.visualstudio.com/ [日本語化出来ますググって]
補足：今でもC言語などやJAVA言語から初めると良いよと言われますが
おそらくC言語で始めるとメモリの事などで挫折しJAVA言語で始めると
オブジェクトで挫折します。
JSで始め、大体の事をマスターすると他のプログラミング言語へ
移行しやすいです。いろいろな言語を覚えるのではなく。
まずは一つの言語をマスターする事が大事になります。
皆さんトライしてみてくださいね（・(ｪ)・）b
タグ
50, javascript, JS, youtube, あいつ, エス, コード, こと, ジェー, ジャバ, スクール, スクリプト, トライ, パス, パソコン, プログラミン, プログラミング, プログラム, 一旦, 上記, 下記, 人, 今度, 何, 偏差値, 勉強, 動作, 動画, 参考書, 変更, 実際, 必要, 方法, 時, 横文字, 無料, 独学, 私, 答え, 自分, 言語, 記載, 記述, 身, 通称,
jsのクリックイベントの謎？？
2019.06.22
javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。
See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.0
タグ
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, イベント, クリック, これ, 奥, 挙動, 気, 謎,
Javascript? EVENT処理の際に引数を渡す。
2019.04.26
Javascript? EVENT処理の際に引数を渡す方法。
ちなみにもっと簡略化できます。
//NG
$(function(){
let hoge = "test";
$("input[type='text']").on("change",(function(hoge){
console.log(hoge);
})(hoge));
});
//OK!
//js
function hoge(a){
return function(){
console.log(a + this.value);
};
};
document.querySelector('input[type="text"]').addEventListener("click",hoge("aaaaaaa~"),false);
//jq
$(function(){
let hoge = function(a){
return function(){
console.log(a + $(this).val());
};
};
$("input[type='text']").on("change",hoge("test="));
});タグ
aaaaaaa, addEventListener, change, click, console, document, EVENT, false, fu, function, hoge, input, javascript, jq, JS, let, log, NG, OK, ON, querySelector, return, test, Text, this, type, value, 処理, 引数, 方法, 簡略, 際,
オブジェクト指向を勉強するのに最適なのは
2019.04.05
オブジェクト指向を勉強するのに最適なのはjavaのような気がする。
C言語で理解するというのはベタなのかもしれないけれど、
javaが最適化と思ったりする。
javaとjavascriptとは全然違うけれど、javascriptもかなり
ゴリゴリ書こうと思えば書けます。
プログラムをどこから学べ良いだろうかと悩んでいる方は
ソフトウェア系ならjava、Web系ならjavascriptが良いじゃないだろうか。
仕事でコードのレベルを上げるべきなのかというのは
人それぞれ考え方が違うかもしれないけれど、人が多ければ多いほど
平均に合わさないといけないのではないだろうかと思うのです。
これ本当に大事なことなんです。
訳のわからないコードは負の遺産に他ならない。
自分は他人のコードを見て大体の平均に合わせて書いているつもりです。
新人が入社してきてもそれまで勉強してきたことで
理解できるレベルでコードを書いている。
なのであまりコメントは書かない。
修正に修正を加えたコードを見ているとこれは直すべきだと思う人も
いると思う、昔はそう考えていた時もあったけれど
今はそれで良いじゃないだろうかと思っています。
何故かといえば、処理がかなりの遅延になっていれば
それは直さないといけないけれど、そうではない場合は
わざわざ直す必要はないと教えられてきたこともあり
直さない。先人に敬意を払うということだ。
言語のバージョンによって直さないといけない箇所は
出てきます、そういう箇所は修正しないといけないかもしれないが
そうではない場合、直さなくて良いが
答えではないだろうか。
来週からコードサンプルに戻ります。
タグ
java, javascript, web, オブジェクト, かなり, コ, コード, こと, これ, ソフトウェア, それぞれ, それまで, つもり, どこ, プログラム, ベタ, レベル, 人, 仕事, 他人, 入社, 勉強, 大事, 大体, 平均, 指向, 新人, 方, 最適, 最適化, 本当, 気, 理解, 系, 考え方, 自分, 言語, 訳, 負, 遺産,
javascriptでEVENT処理レベル1
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" class="zyezyezye">
<script>
"use strict";
let zyezyezye = document.querySelector(".zyezyezye");
zyezyezye.addEventListener("input",()=>{
console.log(">おいら>>" + zyezyezye.value);
if(zyezyezye.value=="じぇじぇじぇ")
{
console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
}
});
</script>
</body>
</html>jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。
タグ
１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,
javascriptのアロー関数というものを使ってみた。
2019.02.24
javascriptのアロー関数というものを使ってみた。
関数と同じだよねとおもっていると落とし穴があるみたい。
どうもグローバル変数が挙動不審みたいなんです。
/* アロー関数 */
let func1 = a => a + 3;
console.log(func1(5));
let func2 = (a,b)=>{
return a + b + 3;
}
console.log(func2(1,2));タグ
１, 2, ３, 5, console, FUNC, gt, javascript, let, log, return, アロー, グローバル, もの, 変数, 落とし穴, 関数,
javascriptを勉強中
2018.12.15
var a = 3;
var b = 10;
var obj = {
hoge:function(a){
a = a + a;
return a;
},
a:a = a && 5,
b:b = b || 3
};
console.log(obj.hoge(2));
console.log(obj.a);
console.log(obj.b);上記のCodeを動かすと仕事と表示されます（笑）、4，5，10と表示されます。
何故そうなったかを考えるとキリがないのでそういうものだと
思ったほうが良いかもしれないです。
説明するとhogeはオブジェクトです。あとは変数とIF文の省略系を
記述しているだけです、実際は＝もいらないですが・・・。
わかりやすく自分なりに記載したつもりです。
javascriptライブラリってこういうのが何百行も記載して成り立っていますが
概念はこういう事です。自分は基本的に概念しか覚えないのです。
何故、そうしているか・・・自分が怠惰な人間だからです。
タグ
10, 2, ３, 4，5，10, 5, amp, Code, console, function, hoge, if, javascript, log, obj, return, 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");
タグ
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("未記入です");
}
});
});タグ
１, 2021, alert, alert-danger, eq, function, html, if, input, javascript, jquery, JS, keyup, php, quot, this, UP, val, うち, これ, ご参考, デモ, トイウコトデ, プログラム, ページ, 世, 中, 作成, 内容, 勉強, 原点, 可能性, 回帰, 基礎, 復習, 意味合い, 掲載, 毎週, 気, 自分, 言語, 記入, 追記,
Chromeの拡張機能を作りました限定公開してます。
2018.01.21
Chromeの拡張機能を作りました限定公開してます。
自サイトの新着記事を表示するようにしています、自虐的に言えば
誰も使わないだろうけれども・・・。
お試しに作ってみたよぐらいのレベルです。
有料で販売することも可能みたいなので、ヒットすれば
結構な収入になることは間違いないですね。
試しにお使いになる方はこちらのリンクからインストールを
行ってくださいな。
尚、たまにレスポンスが遅くなり表示反応が悪い時あり。
https://chrome.google.com/webstore/detail/zip358com/deggndfnobbcfjklgpaeggkjfdhcjgde?hl=ja?
タグ
Chrome, Informatics&, javascript, インストール, お使い, お試し, プログラミング, レスポンス, 収入, 徹底マスター, 拡張機能, 教科書, 教養, 有料, 自サイト, 言語仕様, 開発技法, 限定,
jsって言ってるアレ、そうアレ。
2017.12.30
この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは
親切にしてほしくないところかな。
$(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&, javascript, var fooooooooo, var FUSION, var YaYaYaaaaaaaaa, yabai2, アレ, オブジェクト渡し, じぶん, プログラミング, 参照渡し, 参照渡し役, 徹底マスター, 配列, 開発技法,
php：3項演算子の使い方。
2017.09.16
3項演算子の使い方を解説しているサイトは
数多くあるので割愛します。プログラミングの記述例を貼っときます。
<?php $a=10; $ret = $a>9 ? "A9":"B9"; print($ret); //A9
このような感じで3項演算子を使います、これあまり複雑怪奇な
書き方をしなければ自分は普通にコーディングに書いて良いような気がします。
トイウコトで3項演算子を使うと便利かな。
コードって書かなくなると何ていうか、自分の場合、苦労して覚えていないので
あっという間に忘れ去ってしまうですけどね。この頃、javascriptの記述や挙動がいまいち
つかめていない、javaとか言うものを全然勉強していないからなんだろうなと感じる事が多々あり。
もっと使う機会を増やしたいのだけど、この頃、PHPオンリーなので
何とも・・・、他人のコード見て自分もガリガリとコードを書きたいなと
思うのですけど、いまの自分が任されている仕事にゴリゴリ書くことが必要不可欠かと
言えばそうでもないですよね。
他人が書いたコードの修正や機能追加ってのは
どうしてもやりづらく、特にいわゆる普通のコードで
書いている場合、手直しが面倒くさい。普通のコードには
普通のコーディングしないと何だか、無駄な処理が増えるだけだなと。
逆に洗練されたコードは余分なものが殆どないので
下手に触ると挙動が変になるというデメリットもあるのですがね。
会社で難コーディングが書けない分、自宅でいろいろコードを書かないと
進歩がなさそうな気がします。その書くことに時間をこの頃使っていない気がします。
ちなみに自サイトのブログ以外のサイトを
昨日、映画を観終わって帰宅後リニューアルしました。
タグ
$a>, 3項演算子, A9, AM, B9, javascript, php, ret, コード, トイウコト, プログラミング, やさしい教本, 他人, 使い方, 手直し, 挙動, 書き方, 記述, 難コーディング,
AMP (Accelerated Mobile Pages)HTMLしなさいと勧められる。
2017.07.12
AMP (Accelerated Mobile Pages)HTMLしなさいと勧められるので
WordPressのAMPを導入しました。
さて、「AMPってなんでですかー？」って事だけど
簡単に言えばグーグルが進めているモバイル（スマホ）の表示速度を
改善させるあらたなHTMLなどの記述を指すみたい。
ちなみにアクセルレイテッド モバイル ページと読むそうですよ。
アクセルレイテッドとは加速を意味するものだとか、、。
ほぼHTMLとCSSだけしか許さないので
当たり前のごとく表示速度は速いですが、javascriptの記述に
制限があるので、殆どのWordPressのプラグインjsは動かないと
言っても良いです。
※ちなみにAMPに広告を表示させたい場合などは
プラグインを若干、編集しないといけない場合があります、
また、そのままJSをコピペで貼っても表示されないので
AMP用の記述などが必要になりますが、恐らくAMPじわじわ浸透していく
だろうなぁと感じます。最終的にJSなどがサーバサイドで動かすように
なるじゃないのかなぁと思っています（今はクライアント側で動いているけど）。
タグ
Accelerated, amp, css, html, javascript, JS, mobile, Pages, WordPress, アクセル, カー, グーグル, コピペ, じわ, スマホ, テッド, プラグイン, ページ, もの, モバイル, レイ, 事, 制限, 加速, 場合, 導入, 広告, 当たり前, 必要, 意味, 改善, 殆ど, 用, 簡単, 編集, 若干, 表示, 記述, 速度,
素数判定、単純なソース。
2017.06.25
素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
4桁までの処理が限界でした、基本：javascriptで動いています・
ローカルのパソコン性能に左右されます。
ソースを変更して5桁とか試してみるのも良いかもしれません？
サンプルサイト
https://zip358.com/tool/sosu/
function sosu(){
let sosuno = [2];
for(let i=3;i<=9999;i++){
let flg = true;
if(i%2===0){
continue;
}
for(let ii=2;ii<i;ii++){
if(ii%2===0){
continue;
}
if(i%ii===0){
flg = false;
break;
}
}
if(flg){
sosuno.push(i);
}
}
document.getElementById("my-textarea").value = sosuno.join(',');
}
document.getElementById("btn").addEventListener("click",sosu);タグ
$flg, 0, 2, ３, 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,
MONACAでらくらくアプリ開発。｛HTML、JavaScript、PHP｝
2016.06.22
MONACAでらくらくアプリ開発。
出来そうな予感がします。一度、触ってみて頓挫していたのですが外部連携や端末のDB接続等などもできるみたいなのでこれだけで、簡単なものやそれほどゴリゴリ書くものではなければアプリ開発ができそうな気がしてきたので
土日でアプリの開発を行ってみたいなと思ってます。
HTMLやjavascriptなどでアプリが開発できる時代ってほんと、凄いなと、ちなみにajaxを使い外部サイトとの連携も出来ちゃうのでPHPなどでも必然的に使えちゃうっていうことになります。（インラインフレームで表示する方法もあり）
?
タグ
ajax, db, html, javascript, Monaca, php, アプリ, インライン, こと, これだけ, サイト, フレーム, ほんと, もの, 一度, 予感, 土日, 外部, 接続, 方法, 時代, 気, 端末, 簡単, 表示, 連携, 開発, 頓挫,
アプリ開発するかもしんない。
2016.06.17
会社でアプリ開発するかもしんないという話が出ました。
それだけでワクワクします。
一から作るのは楽しそうです。
ただ、APIやJavaScriptでの開発だそう・・・・。
簡単なものならHTML5やJavaScriptで作れる時代だから
まぁそうだなと思う反面、もう少しハードル上げてのモノづくりを
してみたいなとも思う所もあります。
どうなるか分からないので
あまり期待せずに創りだしたらワクワクしながら
作れたらなと思います。
基本的にググりながらになりますが
おそらく大体のものは1?3ヶ月で作れるのでは
無いだろうか(´Д｀)。
タグ
3ヶ月, API, HTML5, javascript, アプリ, それだけ, ハードル, 一, 反面, 所, 時代, 話,
誰もSEOについて語らなくなってきている。
2016.06.12
誰もSEOについて語らなくなってきている。
SEOの攻略法って基本的にソーシャルメディア以外なし。
もうひとつ付け加えるとするならば、今までのアクセス数はそのサイトの信用となりうるという事です。
ドメインも買えないならば、日々、記事を書き続けることにしか、チャンスはないとも言える。
自分が出した、いまの結論です。
簡単にいえば、サイトの構造というのは意味をなさない。javascriptのエラーが吐かれていないかとかは、注意はした
方が良いですが・・・。
※昔からあるサイト構造をガラッと変えるのはリスクを伴います。
YOUTUBEなどを貼り付けてたら、JSエラーを吐き出したりしますが、さほど、影響はないに等しいです。
そんな事より、サイトの中身を充実させたほうが今は良いんですね。どこから訪問者が来たか、検索キーワードが
何なのか分からなくなってきている中で、どうすればアクセス数が増えるかなど分かりづらくなっています。
アクセス数は百の壁、千の壁、1万の壁という様に壁があります。凡人が超えれる壁は千の壁までだと自分は
思っています。日に1000人のアクセス数を出すことは不可能ではないです。ただ、1万の壁を超えるのは難しい。
その壁を超えるには広告やメディア戦略が必須となります。なのでお金もかけないでアクセス数をUPするには
ソーシャルメディアを活用することをオススメします。
[余談]
なぜ、昔からのサイト構造を一気に変更するのにはリスクを伴うのか？
答えは簡単で、クローラーが今まで見に行っていたURLが急に見えなくなると、このサイトは移転した可能性があるという判断をするため、急激に検索順位が下がっていく可能性あります。
検索アルゴリズムは移転という可能性を排除しないからです。
なので文言や旧ファイルは残しておく事が一般的です。
?
タグ
１, javascript, JS, SEO, youtube, アクセス, いま, エラー, キーワード, こと, サイト, ソーシャル, チャンス, どこ, ドメイン, メディア, もうひとつ, リスク, 万, 中, 中身, 事, 今, 何, 信用, 充実, 千, 壁, 影響, 意味, 攻略, 方, 日々, 昔, 検索, 構造, 注意, 百, 簡単, 結論, 自分, 記事, 訪問者, 誰,