クリックでON、OFFする表示だけど。無数の書き方があると思ふ?

2021.08.26

Logging

不要不急の町内アナウンスが流れる中、この記事を書いています。不要不急ってなんだろう、人によって解釈が違ってしまうし判断もかなり違うような気がします。

さて、今日は凄く単純なJS(javascript)のコードを書いてみました。とても簡単なコードですが素人が書くともっとコード数は増えると思いますし、玄人が書くともっとコードを短く書くことも可能かと思います、例えば自分はonoffという変数をスイッチ代わりに使用していますが、本当はこれもいらないです。そうなるともっとコード数は少なくなります。なぜ要らなくなるかと言えば、表示されている文字で判断することが可能だからです。

今回はそのコードは記載しませんので、ご自身で考えてみてください。

クリックでON、OFFする表示だけど。

プログラムコードは無数にあります、最初は短く書くという事が難しいかもしれませんが徐々に上達していくものだと思います。なので、手を動かしながら学ぶことは大切かと思います。駆け出しのエンジニアさんはいろいろなコードを見て先人の技を盗んでくださいませ。

このソースコードは美しいという考え方はわかります。数式が美しいと意味は似ているように思えてなりません。数式はわかりませんがね?。

https://zip358.com/tool/demo39/

onoff = 0;
document.getElementById("c").addEventListener("click",()=>{
    document.getElementById("view").innerHTML = (()=>{
        onoff = !onoff?1:0;
        return onoff?"on":"off";
    })();
});

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

javascript, JS, off, ON, onoff, アナウンス, かなり, クリック, コード, こと, これ, ご自身, スイッチ, プログラム, もの, 上達, 不要不急, , , , 今回, 今日, 使用, 判断, 単純, 可能, 変数, 大切, , 文字, 書き方, 最初, 本当, , 無数, 玄人, 町内, 簡単, 素人, 自分, 表示, 解釈, 記事, 記載,

C#でwebview2を使用して情報を収集するためのサンプルコード。

2021.08.22

Logging

今日は日曜日ですね。先日は久しぶりにお天気になったので外へ出ていっておりました。これを投稿する日は晴れているでしょうか。

さてjavaを勉強している合間にC#も勉強しております。javaを勉強しているとC#に応用が効くのでとてもやりやすいですね。webview2というオブジェクトをインストールして使用しました、VC#2019で開発しているのですが既存のwebBrowserというオブジェクトは全然というほど役に立ちません。例えばYahooのトップページを開いたらjavascriptエラーのアラートが表示されたりして動作してくれません。おそらくwebBrowserというオブジェクトを使用して何か開発している人はあまりいないじゃないかなと思います。

今回、作成したサンプルコードはYahoo!ニュースのITニュースのタイトルとリンクを収集するものですが、この方法を応用してブラウザの作業を自動化することはそれ程難しくないと思っています。

サンプルコードの一部を記載します=ボタンをクリックする場所に埋め込んだソースコードになります。因みにawaitを使用しているのでボタンクリックにはasyncしてあげる必要があります。

※注意事項としてYahoo!ニュースのソースコードが変わればそれに対応したコードを記載する必要があります。

C# webview2でテスト
PM> Install-Package Microsoft.Web.WebView2 -Version 1.0.902.49
        async private void button1_Click(object sender, EventArgs e)
        {

         var result = await webView21.ExecuteScriptAsync(
                "(()=>{let obj = document.querySelectorAll(\"#uamods-topics > div > div > div > ul > li > a\");" +
                "let str = \"\";" +
                "for (let i = 0; i < obj.length; i++)" +
                "{" +
                "str += obj[i].innerText + \"[\" + obj[i].href + \"],\";" +
                "}" +
                "return str;" +
                "})();"
             );
            richTextBox1.Text = result.Replace(",","\n").Replace("\"","");
        }

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

2, 2019, IT, java, javascript, VC++, webBrowser, webview, Yahoo, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, , 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, , 天気, , 応用, 情報, 投稿, 方法, 既存, , 日曜日, 自動, 表示, 開発,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging


vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように!!ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ?を使用して書くほうが短いコードで書けるので良いなと実感。

超Vue.js 2 入門 完全パック – Vueでアプリを作りたい方必見! (Vue Router, Vuex含む)

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな(時間がない?^^;)。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん(@HEP1147)、凄いところ!!ですね。

https://www.youtube.com/watch?v=kltx14qMt5M
<!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;
        }
    }    
});
  

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, , 使用, 入門, 勉強, 動画, 学習, 実感, , 意識, 推奨, , 時間, 理解, 簡単, 背景, 能力, 自分, , 解説, 記載, ,

今はよく使う無名関数と即時関数というモノ?

2021.06.21

Logging

javascriptを例に無名関数即時関数をよく書いています。尚、PHPでも同じ要領で無名関数と即時関数がかけます。たぶんいろいろな言語に同じ要領で書けるようになっていると思います。但しPHPにアロー関数での無名関数と即時関数がどうか分かりません。因みにPHPの方に即時関数があることは結構、最近になって知りました。
自分は無名関数の存在は知っていましたが、あまり使うことがなく使い方もヘンテコな使い方をしていましたね。
無名関数や即時関数を使わない人もいると思います、駆け出しのエンジニアさんに配慮して書かないという職場もあるでしょうし、制約で書けない場合もあるかもしれません。

【JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ!【ヤフー出身エンジニアの入門プログラミング講座】

そんな感じで仕事をしているといろいろ制約の中でコードを書くことになるので、ちょっと窮屈感を感じる人も多いと思います。特に開発に新しい技術を取り入れるような実験が出来る職場は少ないです。大規模開発になればなるほど、実験的な事ができなくなる傾向にあると思います。それも仕事だと割り切るしか無いかなと思います。使いたい技術は私用で開発するときに使うようにしましょう。そういう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));

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

javascript, php, アロー, いろいろ, エンジニア, コード, こと, ヘンテコ, もの, , , , , 仕事, 使い方, , 傾向, 制約, 即時, 場合, 大規模, 存在, 実験, , 感じ, 技術, , 最近, 無名, 窮屈, 職場, 自分, 要領, 言語, 配慮, 開発, 関数, 駆け出し,

文字の置き換えはよく使うjavascript「吾輩は猫である。」

2020.12.06

Logging

文字の置き換えはよく使う。いろいろな参考書にも文字の置き換えは出てくる基本中の基本だ、そしてコレは結構使うことがある、とくに商品名を整理するときなど、連番に命名を置き換えるなどに使用することがある。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

OFUSEで応援を送る

タグ

btn, btn-primary, button, class, EC, gt, ID, javascript, lt, name, product, quot, type, いろいろ, こと, コレ, システム, じぶん, データー, とき, ベース, 中小企業, 今日このごろ, 使用, 再帰, 処理, 参考書, 名前, 吾輩は猫である, 命名, 商品, 基本, 整理, 文字, 現実, 番号, 登録, , 製品, 連番, 開発, , 題材,

おつりアルゴリズム番外編。

2020.07.10

Logging

おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。

デモ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 = "入力が不適切です!";
	}
});

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, , 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,

JavaScriptのPromise例えが分からない人のために。

2020.06.06

Logging

自分は『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!!"

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, , , 但し, , 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, , 対応, , 感覚, 数珠繋ぎ, , 最初, 混合, 皆さん, 自分, , 道具,

JavaScriptを再勉強しているのだが、ある疑惑が!?

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

https://www.youtube.com/watch?v=RQD4m5WNfDk

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, , 処理, 勉強, 動画, 同期, , , 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,

js初心者さんのお勉強:思いつき写経。

2020.06.01

Logging

js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。

https://www.youtube.com/watch?v=9q6gd5FDelQ

ソースコードはこちら

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

OFUSEで応援を送る

タグ

, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, , 作法, 写経, 初心者, 勉強, , 基本, , 思いつき, 感じ, 昨日, 書き方, 本当, , 簡略, 自分, 馬鹿,

javascriptのアロー関数ってアレだな。

2020.05.20

Logging

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/

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, , 自分, 英語, 関数,

プログラミングって何から勉強したら良いの?パソコンが有れば無料で勉強できる方法。

2020.01.11

Logging

プログラミングって何から勉強したら良いの?
答えは通称js(ジェーエス)と呼ばれるjavascript(ジャバスクリプト)言語から
始めると良いです^_^。
ちなみにプログラミンスクールに通う必要なんてないです。
偏差値50ぐらい有れば独学で身につくことが出来ると言われています。

自分を知っている人ならあいつでも出来るなら私でも出来ると思って
トライしてみてください。
繰り返しになりますが、参考書などは買わなくて良いです。

下記の方法で勉強してみてください。

  1. YOUTUBE動画を見る。
  2. 動画に記載しているプログラムを実際に同じコードを書いてみる。
  3. 動作したらプログラムコードを変更してみる。
  4. 一旦、プログラムコードを消して今度は記述コードを見ないで書いてみる。
  5. コードがわからない時は動画を見ずにググる。

上記のことを繰り返しすることで何だかわからないけど、感覚的に身につくはずです。難しい横文字などは後から覚えたら良いです。

JavaScriptを解説している動画リンクを貼っておきます。
動画のリンク切れあった場合はYOUTUBEで JavaScript 入門などの単語で検索してみてください。

入門解説動画:何となく進めるが大事です。

【Javascript入門】#1 Javascriptを始めましょう

エラーになった時の対処方法:デバッグ方法。

入門】JavaScriptのデバッグ方法を解説!これだけは知っておけ!

中級者JSテクニック動画。

https://www.youtube.com/watch?v=mNJ06S60B9k

尚、プログラムコードを書く場合、大体のプログラマーはエディターやIDEを
使用してプログラミングコードを記載します。

自分はVisualStudio codeを使用しています。
こちらWindowsやMac、リナックスのOSにそれぞれ対応しています。
https://code.visualstudio.com/ [日本語化出来ますググって]

補足:今でもC言語などやJAVA言語から初めると良いよと言われますが
おそらくC言語で始めるとメモリの事などで挫折しJAVA言語で始めると
オブジェクトで挫折します。

JSで始め、大体の事をマスターすると他のプログラミング言語へ
移行しやすいです。いろいろな言語を覚えるのではなく。
まずは一つの言語をマスターする事が大事になります。

皆さんトライしてみてくださいね(・(ェ)・)b

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

50, javascript, JS, youtube, あいつ, エス, コード, こと, ジェー, ジャバ, スクール, スクリプト, トライ, パス, パソコン, プログラミン, プログラミング, プログラム, 一旦, 上記, 下記, , 今度, , 偏差値, 勉強, 動作, 動画, 参考書, 変更, 実際, 必要, 方法, , 横文字, 無料, 独学, , 答え, 自分, 言語, 記載, 記述, , 通称,

jsのクリックイベントの謎??

2019.06.22

Logging

javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。

See the Pen jsのクリックイベントの謎?? by taoka (@taoka-toshiaki) on CodePen.

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

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

Logging

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="));
});

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

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

Logging

オブジェクト指向を勉強するのに最適なのはjavaのような気がする。
C言語で理解するというのはベタなのかもしれないけれど、
javaが最適化と思ったりする。
javaとjavascriptとは全然違うけれど、javascriptもかなり
ゴリゴリ書こうと思えば書けます。
プログラムをどこから学べ良いだろうかと悩んでいる方は
ソフトウェア系ならjava、Web系ならjavascriptが良いじゃないだろうか。


仕事でコードのレベルを上げるべきなのかというのは
人それぞれ考え方が違うかもしれないけれど、人が多ければ多いほど
平均に合わさないといけないのではないだろうかと思うのです。
これ本当に大事なことなんです。
訳のわからないコードは負の遺産に他ならない。
自分は他人のコードを見て大体の平均に合わせて書いているつもりです。
新人が入社してきてもそれまで勉強してきたことで
理解できるレベルでコードを書いている。
なのであまりコメントは書かない。
修正に修正を加えたコードを見ているとこれは直すべきだと思う人も
いると思う、昔はそう考えていた時もあったけれど
今はそれで良いじゃないだろうかと思っています。
何故かといえば、処理がかなりの遅延になっていれば
それは直さないといけないけれど、そうではない場合は
わざわざ直す必要はないと教えられてきたこともあり
直さない。先人に敬意を払うということだ。
言語のバージョンによって直さないといけない箇所は
出てきます、そういう箇所は修正しないといけないかもしれないが
そうではない場合、直さなくて良いが
答えではないだろうか。
来週からコードサンプルに戻ります。


 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

java, javascript, web, オブジェクト, かなり, , コード, こと, これ, ソフトウェア, それぞれ, それまで, つもり, どこ, プログラム, ベタ, レベル, , 仕事, 他人, 入社, 勉強, 大事, 大体, 平均, 指向, 新人, , 最適, 最適化, 本当, , 理解, , 考え方, 自分, 言語, , , 遺産,

javascriptでEVENT処理レベル1

2019.03.09

Logging

<!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ばかり書いている自分です。なれないといけないと思いつつ!?
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 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

Logging

javascriptのアロー関数というものを使ってみた。
関数と同じだよねとおもっていると落とし穴があるみたい。
どうもグローバル変数が挙動不審みたいなんです。

/* アロー関数 */
let func1 = a => a + 3;
console.log(func1(5));
let func2 = (a,b)=>{
    return a + b + 3;
}
console.log(func2(1,2));

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 2, , 5, console, FUNC, gt, javascript, let, log, return, アロー, グローバル, もの, 変数, 落とし穴, 関数,

javascriptを勉強中

2018.12.15

Logging

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ライブラリってこういうのが何百行も記載して成り立っていますが
概念はこういう事です。自分は基本的に概念しか覚えないのです。
何故、そうしているか・・・自分が怠惰な人間だからです。
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

10, 2, , 4,5,10, 5, amp, Code, console, function, hoge, if, javascript, log, obj, return, var, あと, オブジェクト, キリ, つもり, もいら, もの, 上記, 仕事, 勉強, 変数, 実際, , 省略, 自分, 表示, 記載, 記述, 説明,

javascriptでテキストファイルやCSVファイルを読み込む方法。

2018.11.13

Logging

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

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

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

Logging

世の中、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

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 2021, alert, alert-danger, eq, function, html, if, input, javascript, jquery, JS, keyup, php, quot, this, UP, val, うち, これ, ご参考, デモ, トイウコトデ, プログラム, ページ, , , 作成, 内容, 勉強, 原点, 可能性, 回帰, 基礎, 復習, 意味合い, 掲載, 毎週, , 自分, 言語, 記入, 追記,

Chromeの拡張機能を作りました限定公開してます。

2018.01.21

Logging


Chromeの拡張機能を作りました限定公開してます。
自サイトの新着記事を表示するようにしています、自虐的に言えば
誰も使わないだろうけれども・・・。
お試しに作ってみたよぐらいのレベルです。
有料で販売することも可能みたいなので、ヒットすれば
結構な収入になることは間違いないですね。
試しにお使いになる方はこちらのリンクからインストールを
行ってくださいな。
尚、たまにレスポンスが遅くなり表示反応が悪い時あり。
https://chrome.google.com/webstore/detail/zip358com/deggndfnobbcfjklgpaeggkjfdhcjgde?hl=ja?

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

Chrome, Informatics&amp, javascript, インストール, お使い, お試し, プログラミング, レスポンス, 収入, 徹底マスター, 拡張機能, 教科書, 教養, 有料, 自サイト, 言語仕様, 開発技法, 限定,

jsって言ってるアレ、そうアレ。

2017.12.30

Logging


この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは
親切にしてほしくないところかな。

$(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の場合、参照渡しになっちゃう事を覚えておいたほうが
良さげです。逆にうまく使えれば参照渡し役に立つかもしれないだろうけど。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, console.log, function, FUSION2, Informatics&amp, javascript, var fooooooooo, var FUSION, var YaYaYaaaaaaaaa, yabai2, アレ, オブジェクト渡し, じぶん, プログラミング, 参照渡し, 参照渡し役, 徹底マスター, 配列, 開発技法,

php:3項演算子の使い方。

2017.09.16

Logging


3項演算子の使い方を解説しているサイトは
数多くあるので割愛します。プログラミングの記述例を貼っときます。

<?php
$a=10;
$ret = $a>9 ? "A9":"B9";
print($ret);
//A9

このような感じで3項演算子を使います、これあまり複雑怪奇な
書き方をしなければ自分は普通にコーディングに書いて良いような気がします。
トイウコトで3項演算子を使うと便利かな。
コードって書かなくなると何ていうか、自分の場合、苦労して覚えていないので
あっという間に忘れ去ってしまうですけどね。この頃、javascriptの記述や挙動がいまいち
つかめていない、javaとか言うものを全然勉強していないからなんだろうなと感じる事が多々あり。
もっと使う機会を増やしたいのだけど、この頃、PHPオンリーなので
何とも・・・、他人のコード見て自分もガリガリとコードを書きたいなと
思うのですけど、いまの自分が任されている仕事にゴリゴリ書くことが必要不可欠かと
言えばそうでもないですよね。
他人が書いたコードの修正や機能追加ってのは
どうしてもやりづらく、特にいわゆる普通のコードで
書いている場合、手直しが面倒くさい。普通のコードには
普通のコーディングしないと何だか、無駄な処理が増えるだけだなと。
逆に洗練されたコードは余分なものが殆どないので
下手に触ると挙動が変になるというデメリットもあるのですがね。
会社で難コーディングが書けない分、自宅でいろいろコードを書かないと
進歩がなさそうな気がします。その書くことに時間をこの頃使っていない気がします。
ちなみに自サイトのブログ以外のサイトを
昨日、映画を観終わって帰宅後リニューアルしました。
 
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$a&gt, 3項演算子, A9, AM, B9, javascript, php, ret, コード, トイウコト, プログラミング, やさしい教本, 他人, 使い方, 手直し, 挙動, 書き方, 記述, 難コーディング,

Photo by rovenimages.com on Pexels.com

AMP (Accelerated Mobile Pages)HTMLしなさいと勧められる。

2017.07.12

Logging

AMP (Accelerated Mobile Pages)HTMLしなさいと勧められるので
WordPressのAMPを導入しました。
さて、「AMPってなんでですかー?」って事だけど
簡単に言えばグーグルが進めているモバイル(スマホ)の表示速度を
改善させるあらたなHTMLなどの記述を指すみたい。
ちなみにアクセルレイテッド モバイル ページと読むそうですよ。
アクセルレイテッドとは加速を意味するものだとか、、。
ほぼHTMLとCSSだけしか許さないので
当たり前のごとく表示速度は速いですが、javascriptの記述に
制限があるので、殆どのWordPressのプラグインjsは動かないと
言っても良いです。
※ちなみにAMPに広告を表示させたい場合などは
プラグインを若干、編集しないといけない場合があります、
また、そのままJSをコピペで貼っても表示されないので
AMP用の記述などが必要になりますが、恐らくAMPじわじわ浸透していく
だろうなぁと感じます。最終的にJSなどがサーバサイドで動かすように
なるじゃないのかなぁと思っています(今はクライアント側で動いているけど)。

Intro to AMP (Accelerated Mobile Pages)

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

Accelerated, amp, css, html, javascript, JS, mobile, Pages, WordPress, アクセル, カー, グーグル, コピペ, じわ, スマホ, テッド, プラグイン, ページ, もの, モバイル, レイ, , 制限, 加速, 場合, 導入, 広告, 当たり前, 必要, 意味, 改善, 殆ど, , 簡単, 編集, 若干, 表示, 記述, 速度,

素数判定、単純なソース。

2017.06.25

Logging

素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
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);

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, 0, 2, , 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,

MONACAでらくらくアプリ開発。{HTML、JavaScript、PHP}

2016.06.22

Logging


MONACAでらくらくアプリ開発。
出来そうな予感がします。一度、触ってみて頓挫していたのですが外部連携や端末のDB接続等などもできるみたいなのでこれだけで、簡単なものやそれほどゴリゴリ書くものではなければアプリ開発ができそうな気がしてきたので
土日でアプリの開発を行ってみたいなと思ってます。
HTMLやjavascriptなどでアプリが開発できる時代ってほんと、凄いなと、ちなみにajaxを使い外部サイトとの連携も出来ちゃうのでPHPなどでも必然的に使えちゃうっていうことになります。(インラインフレームで表示する方法もあり)
?

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

ajax, db, html, javascript, Monaca, php, アプリ, インライン, こと, これだけ, サイト, フレーム, ほんと, もの, 一度, 予感, 土日, 外部, 接続, 方法, 時代, , 端末, 簡単, 表示, 連携, 開発, 頓挫,