#JavaScript
【JavaScript】リストを任意の順番にソートする
何度説明を読んでも分からなかったのがやっと出来るようになったので、未来の自分のために自分の言葉で整理しておきます。
Array.prototype.sort()の仕様
リストの中身を「文字コード順」でソートします。つまり
var test = [5,4,3,2,1]
なら
test.sort()console.log(test) // 1,2,3,4,5
と順当にソートされますが
【JavaScript＋CSS】クエリパラメータに応じてCSSを切り替える
ダッシュボード的な画面を作りまして、さて皆さんどうぞご利用ください、と公開してみたら、「こっちの部署ではこの情報だけで良いんだけど」「あっちはあの情報もその情報も全部見たいんだけど」というご要望を頂き、「え～～～内部の処理同じなのに複数画面作ってhtmlもcssもjsも全部メンテするのや～だ～」ってことで、「同じhtml＋jsを、クエリパラメータによってcssを切り替えて表示すりゃいいんじゃ？」と
もっとみる【JavaScript】クエリパラメータを取得する
毎回調べてるのでそろそろ。
基本はこれだけ。let param = location.search
クエリパラメータとはhttp://***略***/hoge.html?v=123
の、?から先の部分のこと。
このままだと不便すぎ上記のコードで取得したクエリパラメータは
console.log(param)
してみると
?v=123
で表示されるので、このままだと大変不便。
Ma
【JavaScript】JSでもクラスを使ってみる
jsで複雑なもの作るのあんまり好きじゃないんですが、にっちもさっちも行かない案件が出てきたので、jsでもクラスを使ってうごうごしていきたいと思います。ざーっくりとだけど、継承まで一気にいくぜ。
先に、後で見返すとき用の書式まとめ。class Elements{ constructor(hoge){ this.hoge = hoge; } getElements(i
【Firestore+Firebase】コレクションの変更を監視して、ドキュメント名と内容をセットで受け取る
前回のこれ
を実際に使ってみたら、受信データを配列に入れるときにドキュメント名がどっか行っちゃったので、ドキュメント名もちゃんと取得出来るようにします。
ドキュメント名はdoc.idで取れるfunction get() { var query = firebase.firestore() .collection('コレクション名')
【Firebase+Firestore】画面からFirestoreドキュメントを更新する
HTMLに取り付けたjsで、画面操作の結果を受け取ってfirestoreドキュメントを更新します。
function inputCheck(){ for(let index in inputFormElements){ let elem = inputFormElements[index] if(typeof(elem) != "object"){continue}
【Firebase+Firestore】コレクションの変更を監視する
「ドキュメントが更新されたら画面の表示を変更する」はもうずっと使っているんですが、ドキュメントが複雑になってきたので、ドキュメント配下にコレクションを作って、そのコレクションを監視するように変更していきたいと思います。
結論'use strict'; // 動作を安定させるおまじないfunction loadMessages() {var query = firebase.firestore()
【JavaScript】クリップボードにテキストをコピーするnavigator.clipboard.writeText()
「JavaScript クリップボード コピー」で検索すると、
document.execCommand('copy');
でやる方法がﾁｮｺﾁｮｺ引っかかるのですが、このやり方は現在非推奨で、clipboardを使う方式へ順次移行が進んでいるところ、とのことなので、ナウいやり方をチェックしていきましょう。
順次移行が進んでいるところなので、2021年9月現在、古いブラウザだと動作しなかった
【JavaScript】window.confirm()でOK／キャンセル処理を作る
OKボタンがあるだけのalertじゃなくて、OK・キャンセルボタンのあるあれ……あれはどうやって作るんだっけ……
って、突然そう言う基本的な事忘れるよね。
window.confirm()でOK／キャンセルボタンが付いているウインドウが出せる
これは、
window.confirm("入力内容を消去します")
これだけで出ます。
戻り値はTrueかFalse。ブラウザがダイアログを拒否
【JavaScript】onClick="clear()"が動かない時はメソッド名を変えろという話
うごかねぇんですよ
最初からあったこれは動く<button name="submit" id="submit" onclick="submit()">投稿</button>
同じHTMLファイル上に足した、これが動かない<button name="clear" id="clear" onclick="clear()">クリア</button>
もちろんjs内にclearメソッドは用意している
【JavaScript】Date.SetMinutes()で時間計算する（時に、ハマりまくった話）
結論let now = new Date(); // 常に現在時刻を入れておく為のオブジェクトfunction calc(){ let now = new Date(); // 使い捨てにする計算用。必ず別に定義する。 let people = document.getElementById("people").value; // 入力フォームのvalueを取得 let
もっとみる
【JavaScript】わたしへ。「Uncaught SyntaxError: Unexpected token '<'」が出てきたらHTMLからjsファイルへのリンクパスを疑え
タイトルが全てです。3日で2回同じところにハマりました。
と、いうわけで、「Uncaught SyntaxError: Unexpected token '<'」が出てきたらHTMLからjsファイルへのリンクパスを疑え。
何が起きたかなーんかjsが上手く動かなくてコンソール見てみると、真っ赤な文字でUncaught SyntaxError吐いてるじゃないですか。んで、
こっちが出てくれれば、
【JavaScript】こっちのjsで行った値変更をあっちのjsで感知したい-MutationObserverを使ってみる
表題の通りです。
地獄のスパゲッティと化してきたjsファイルを分割するにあたって、今までワンストップでやっていた処理を、「こっちは表示を変えるだけ」「表示が変わったらこっちで計算をし直す」に分割したいのですが、イベントリスナーのchangeだと、jsから行った値の変更は感知出来ない。
ということで調べてみたところ、MutationObserverが良さそうということで使ってみます。
結論ht
【Javascript】Mapを使って連想配列をちゃんと使う
JavaScriptの連想配列ってなんかこう、ふわっとしてるよなーってずっと思って居たんですが、どうもObjectっていう基底クラス的な仕組みを使い回して連想配列的に使っているだけで、「JavaのMapやらpythonの辞書みたいに、キーと値のペアを保存するため（だけ）の仕組み」という訳ではなかったようで。そりゃふわっとしてるわ。
しかし、実はちゃんとMapという仕組みが用意されていて、こっちが