javascript
js で querySelector では取れない「コメント」ノードをを取得したい。 スクレイピングしていると、データのIDが属性値になくコメントに入っている事があるので。 コメント・ノードを取得する function getComments( node ) { var comments = []; var treeWa…
js で http query をオブジェクトからビルドする JavascriptのオブジェクトをURLのGET引数に変換したいときには、npm 探しますか？ ライブラリ探しますか？ URLSearchParams ができています。 GETパラメタを扱うときは、これがあれば、だいたい解決する http…
JS のコードレビューをしていて、気になってしょうがない split.join いっぱい次のような、関数をいっぱい見かけるのですが、これは replaceAll の代りにし使ってるんだろうか。一般的なんだろうか。 どっかのサイトで上位に出てくるんだろうか。○iita とか …
JS で動的ロードして関数を追加する。 適当な関数を突っ込んで、ロードされるのを待ってから、関数を使いたい。 とりあえず、script.onload で解決することはわかってるんだけど。読み込みたい関数が複数だと、全部ロードされるのを待つのをコールバック・チ…
blur イベントが上手く起きない react などちょっと最近のJSだと Element.blur() で イベントが発火しなかった。 動かない a=document.querySelector("#zipCode") a.blur() blur とかフォーカスのイベントハンドラが上手く起動しない。 動く ちゃんとEventを…
モーダルウインドウ出すやつで良いのがない。 jQuery に依存してたり、細かなイベントが取れなかったり、設定が煩雑だったり、もっと簡単に出来るだろう。と思ってたけど ネット探して片っ端から試したけど、これ。というのがない。 仕方ないので作った。画…
要素のスタイルを見た目をそのまま保存したくないですか？ 出来るんですよ。 computedStyle を使えば出来ます。 大昔は 紙Copiとかあったし、あの人はそのまま、カーリル作ったりGyazo買収して忙しそうですけど。ScrapBoxはちょっと依存強すぎてすきになれな…
以前、JSONのstringify の 第二引数の話を書いた。 takuya-1st.hatenablog.jp そういえば、完成形を書いてない。 JSONで関数も含めてシリアライズする例はこれ。 関数も含めてシリアライズしてコピーする。 var a = { name: "takuya", say: function() { con…
名前空間の利用 名前空間を利用するとJavaScriptがもっと楽しくなる。 何でもかんでも、Globalなオブジェクトに登録していくと、どうしても限界が早くなる。 コードを書くよりもコードを読むのに時間がかかるという点です。問題に深く集中して売る時、腰を据…
プライベートなメンバを作る プライベートメンバを作るには、どうするか？ プライベート・メンバを作るパターンが基本パターンとして次があげられる。 function Phone() { //プライベート・メンバ var name = 'Xperia' //パブリック・メンバ this.getName = …
Object.assign が使えるようになってる。 Object.assign() - JavaScript | MDN Object.assign(target, ...sources) せっかくなので調べてみて、ソースコードの重複が減らせるのに使えるか調べてみた。 Object.assign は何をするのか var a = { age : 17 } va…
jq 便利ですよね。 jq 使ってます。みんなあれ整形程度にしか使ってなかったり、絞込にしか使ってない気と思うんですよね jq である条件を満たすオブジェクトを取り出したい SQLのselect where みたいに select {} where [].name = 'takuya' みたいな jq が…
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 を使って関数を作る Function のコンストラクタを使って関数を作る var a = new Function("c", "return c"); a(1) //=>1 使い方 new Function ( 引数, 引数,,,, 関数本文) ポイントは、全てを文字列で渡す点にある。 function(c){ return c } // お…
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…
JavaScript のJSONはprimitiveな変数だけしか扱えなかった。 JSONというのは、本当にお前さんらはね。サムライになれないんだよ。 JSON var obj = {"a": "takuya", "say":function(){ console.log(`My name is ${this.a}.`) } } obj.say() //=>My name is ta…
this. この便利でハマりどころの多い変数 Array.forEach / map 系 のthisArg が安定しない。 this 変数の紹介 this 変数の例 apply , call window オブジェクト コールバック イベントハンドラ Array.forEach 個人的な結論 this はできるだけ避ける 調べたキ…
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…
js で要素が空っぽの配列１０個作ってループ変数代わりに使ってみよう forループとかダルいよねと思って。１０個ループ変数してみたら。。。 Array(10).forEach( (e)=>{ console.log(e) } ) //=> undefined あれ？なんで？ map で初期化したら？ Array(10).m…
ある指定要素の直後に要素を追加したい。 こういうインプットやHTMLがあった時に、直後に要素を追加したい <input type="text" placeholder="なにか書いて" /><br> <a href="#">ここはリンク</a> <input type="text" placeholder="なにか書いて" /><br> <span>ここは追加された</span> <a href="#">ここはリンク</a> 動作サンプル ここはリンク アプローチは２つ interface Elementを使う。 interface Nodeを使う。 1.…
以前、ruby / php で xpath で見つけた要素のfull_xpath を見つける方法を書いた。 XPATH のパス名を取り出せるので、HTMLドキュメント中の要素の文字列の量を計算する - それマグで！ ノードからXpathを取り出す。 - それマグで！ これ、Javascriptではどう…
DOMのNodelistがiteratable じゃないので面倒だったりする。 nodelistは配列っぽいけど配列じゃない list = document.getElementsByTagName("a") list.length ; //#=> 10 list.forEach() // #=> undefined for each とか、mapとかしたいじゃん ArrayObjectに…
よく使うレジストリの読み書きはJScriptで書きためていたりする。その中から必要なことをまとめた。 レジストリの種類 名前空間がある。名前空間でレジストリを管理されている。ユーザー・システム毎に管理されている。 RegRead、RegWriteで指定する。 ルー…
