それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

javascript

JSでHTTP GET クエリ文字列を JS オブジェクトから作成する-

js で http query をオブジェクトからビルドする JavascriptのオブジェクトをURLのGET引数に変換したいときには、npm 探しますか? ライブラリ探しますか? URLSearchParams ができています。 GETパラメタを扱うときは、これがあれば、だいたい解決する http…

JS で String#replaceAll すべて置換をするには

JS のコードレビューをしていて、気になってしょうがない split.join いっぱい次のような、関数をいっぱい見かけるのですが、これは replaceAll の代りにし使ってるんだろうか。一般的なんだろうか。 どっかのサイトで上位に出てくるんだろうか。○iita とか …

動的に複数script を追加したときに読み込みを待つ。Promise版(body/headに足したあと待つ)

JS で動的ロードして関数を追加する。 適当な関数を突っ込んで、ロードされるのを待ってから、関数を使いたい。 とりあえず、script.onload で解決することはわかってるんだけど。読み込みたい関数が複数だと、全部ロードされるのを待つのをコールバック・チ…

blurなどのHTMLEvent イベントをちゃんとおこしてみる

blur イベントが上手く起きない react などちょっと最近のJSだと Element.blur() で イベントが発火しなかった。 動かない a=document.querySelector("#zipCode") a.blur() blur とかフォーカスのイベントハンドラが上手く起動しない。 動く ちゃんとEventを…

JSでモーダルダイアログなポップアップを出すやつ

モーダルウインドウ出すやつで良いのがない。 jQuery に依存してたり、細かなイベントが取れなかったり、設定が煩雑だったり、もっと簡単に出来るだろう。と思ってたけど ネット探して片っ端から試したけど、これ。というのがない。 仕方ないので作った。画…

要素のスタイルをそのまま取り出して、要素をコピーして保存する

要素のスタイルを見た目をそのまま保存したくないですか? 出来るんですよ。 computedStyle を使えば出来ます。 大昔は 紙Copiとかあったし、あの人はそのまま、カーリル作ったりGyazo買収して忙しそうですけど。ScrapBoxはちょっと依存強すぎてすきになれな…

JSON をシリアライズ・デシリアライズ で関数を含めてObjectをコピーする

以前、JSONのstringify の 第二引数の話を書いた。 takuya-1st.hatenablog.jp そういえば、完成形を書いてない。 JSONで関数も含めてシリアライズする例はこれ。 関数も含めてシリアライズしてコピーする。 var a = { name: "takuya", say: function() { con…

javascriptで名前空間を作って生産効率を上げる

名前空間の利用 名前空間を利用するとJavaScriptがもっと楽しくなる。 何でもかんでも、Globalなオブジェクトに登録していくと、どうしても限界が早くなる。 コードを書くよりもコードを読むのに時間がかかるという点です。問題に深く集中して売る時、腰を据…

JavaScriptでプライベートな変数やメソッドを作る

プライベートなメンバを作る プライベートメンバを作るには、どうするか? プライベート・メンバを作るパターンが基本パターンとして次があげられる。 function Phone() { //プライベート・メンバ var name = 'Xperia' //パブリック・メンバ this.getName = …

Object.assign は何をする為にあるんや?

Object.assign が使えるようになってる。 Object.assign() - JavaScript | MDN Object.assign(target, ...sources) せっかくなので調べてみて、ソースコードの重複が減らせるのに使えるか調べてみた。 Object.assign は何をするのか var a = { age : 17 } va…

jq で 条件にマッチするオブジェクトを取り出す where 句的なこと

jq 便利ですよね。 jq 使ってます。みんなあれ整形程度にしか使ってなかったり、絞込にしか使ってない気と思うんですよね jq である条件を満たすオブジェクトを取り出したい SQLのselect where みたいに select {} where [].name = 'takuya' みたいな jq が…

JSでマウスイベント(クリック)を起こす/ mouseEvent を Dispatch して起動する

Javascript でクリックイベントを起こす。 クリックイベントを起こさないとテストできないページが有る。 クリックイベントをFireするには、initEvent と dispatch イベントを使う。 マウスイベント var me = document.createEvent("MouseEvents") me.initMo…

ユーザーが画面を拡大しているか判定する

javascript で画面の拡大率を取得するには window.innerWidth == document.width //拡大縮小しているか window.innerWidth / document.width //拡大率 window.innerWidth / document.body.clientWidth // 最近はコッチ window の幅とdocument の幅を比較すれ…

function(){} と new Function

Function を使って関数を作る Function のコンストラクタを使って関数を作る var a = new Function("c", "return c"); a(1) //=>1 使い方 new Function ( 引数, 引数,,,, 関数本文) ポイントは、全てを文字列で渡す点にある。 function(c){ return c } // お…

JavaScriptで文字列化したfunction を実行する

eval しなくてもいい感じ Function.call(this, "return "+ v )(); javascript の深淵に触れた気がする var a = {name:"takuya",say:function(){console.log(this.name)}} //=>{ a: 'takuya', say: [Function] } var b = a.say.toString() //=>'function (){c…

端末(デバイス)の向きを判定する

画面の向きを判定するには CSS の matchMedia を使う 画面の向きが横か縦か判別することが出来る css で縦の時だけに適用されるスタイルはこれ。 @media (orientation : portrailt ){ } このCSSのマッチングを、Javascript 側から行うには window.matchMedia…

JSON.stringify で関数(funciton) も文字列化、JSON.parseでdeserialize する。

JavaScript のJSONはprimitiveな変数だけしか扱えなかった。 JSONというのは、本当にお前さんらはね。サムライになれないんだよ。 JSON var obj = {"a": "takuya", "say":function(){ console.log(`My name is ${this.a}.`) } } obj.say() //=>My name is ta…

ES/JavaScriptのthisとアロー演算子について知っておくべきこと

this. この便利でハマりどころの多い変数 Array.forEach / map 系 のthisArg が安定しない。 this 変数の紹介 this 変数の例 apply , call window オブジェクト コールバック イベントハンドラ Array.forEach 個人的な結論 this はできるだけ避ける 調べたキ…

XMLHttpRequest で レスポンスを dom として html をパースする

xhr のリクエストでレスポンスをHTMLとして解釈する。 xhr で取得したHTMLをDOMとしてxpath/querySelectorしたい var dom ; xhr = new XMLHttpRequest() xhr.responseType = "document" xhr.onload = function(e){ dom = e.target.responseXML;console.log(e…

Array(10) がundefined になる問題。

js で要素が空っぽの配列10個作ってループ変数代わりに使ってみよう forループとかダルいよねと思って。10個ループ変数してみたら。。。 Array(10).forEach( (e)=>{ console.log(e) } ) //=> undefined あれ?なんで? map で初期化したら? Array(10).m…

指定の要素(ノード)の直後に、HTML要素を追加する。

ある指定要素の直後に要素を追加したい。 こういうインプットやHTMLがあった時に、直後に要素を追加したい <input type="text" placeholder="なにか書いて" /><br> <a href="#">ここはリンク</a> <input type="text" placeholder="なにか書いて" /><br> <span>ここは追加された</span> <a href="#">ここはリンク</a> 動作サンプル ここはリンク アプローチは2つ interface Elementを使う。 interface Nodeを使う。 1.…

jsで NodeオブジェクトからXpathを取り出す。

以前、ruby / php で xpath で見つけた要素のfull_xpath を見つける方法を書いた。 XPATH のパス名を取り出せるので、HTMLドキュメント中の要素の文字列の量を計算する - それマグで! ノードからXpathを取り出す。 - それマグで! これ、Javascriptではどう…

NotelistをArrayとして扱ってForEachしたい

DOMのNodelistがiteratable じゃないので面倒だったりする。 nodelistは配列っぽいけど配列じゃない list = document.getElementsByTagName("a") list.length ; //#=> 10 list.forEach() // #=> undefined for each とか、mapとかしたいじゃん ArrayObjectに…

JScriptでレジストリを操作する方法まとめ。

よく使うレジストリの読み書きはJScriptで書きためていたりする。その中から必要なことをまとめた。 レジストリの種類 名前空間がある。名前空間でレジストリを管理されている。ユーザー・システム毎に管理されている。 RegRead、RegWriteで指定する。 ルー…