カテゴリ：JavaScript：記事一覧

Webページのtextarea要素に文章が入力されているとき、JavaScriptを使って行番号でカーソルを移動させる方法をお伝えします。

JavaScriptには文字列からhtmlのタグを削除する関数が用意されていません。 そのため自作する必要があります。そこで今回は、文字列からhtmlタグを取り除く関数を作成してみました。

JavaScriptでユーザー入力やWebAPI等から取得した文字をそのままブラウザで表示すると、リンクやスクリプト等のタグが紛れ込んで意図しない結果を招く可能性があります。 そのためタグを無害化するエスケープ処理を行うのですが、場合によってはそのまま表示できます。 少し混乱ぎみなので、整理してみます。

JavaScriptで処理時間を計測する場合Date.now()でタイムスタンプを取得して差分を求める方法があります。 この方法で得られる精度はミリ秒ですが、もっと高精度な計測が求められるケースもあります。そこで今回は、JavaScriptで高精度なパフォーマンス計測する方法をお伝えします。

先日、JavaScriptでh2タグの前に目次に移動するリンクを挿入するスクリプトを作成して、今見てもらっているWebページに適用しました。 JavaScriptコードの参考になるかと思い、コードを公開します。 目次ではなくて、トップに移動などでも応用できると思います。

JavaScriptのプロトタイプチェーンを継承と呼ぶこともあります。 これらのチェーン上のプロパティを含めてプロパティ名を列挙します。

JavaScriptのObject.getOwnPropertyNames()とObject.keys()は、オブジェクトが自分自身で直接所持するプロパティの名前を配列で返すメソッドです。結果が同じに見える二つのメソッドは、何が異なるのかを調べてみました。

JavaScriptで二つの配列を、要素を重複させずに結合（マージ）する方法を紹介します。reduce()とindexOf()を使用して総当たりで確認していく方法とSetオブジェクトを使用する方法です。

JavaScriptで新規ページを開くときはwindows.open()を使用します。 開いた後に条件が合えば、そのページの情報を取得したり、DOMを操作したりできます。今回は、その方法をお伝えします。

JavaScriptのreduce()メソッドは配列の要素を集計するとき、欠かせないメソッドです。 様々な場面で使用できるので、使い慣れるとプログラムコードの効率が上がります。

Webサイト上のリンクを見て、一目で外部リンクとわかるサイトって最近多いですよね。 僕もやろうと思いましたが、既存の記事を修正するのに時間がかかるためJavaScriptで動的に処理させることにしました。やることは、リンクが外部リンクかどうかを確認してクラス名を追加するだけです。 最終的に、次のような見た目になりました。

JavaScriptでaタグの属性（hrefとtargetおよびrel）の値を取得したり、書き換えたりする方法をお伝えします。

JavaScriptでDOM要素にクラスを追加したり削除する方法と、複数のクラスを一括で追加・削除する方法を紹介します。

JavaScriptで、DOM要素が単一または複数の特定クラスを持っているかどうかを確認する方法を紹介します。

以前、JavaScriptでテキストをクリップボードにコピーする方法を紹介しました。 今回はこの方法の使用例として、動的にクリップボードへコピーするボタンを追加するコードを作成してみます。

JavaScriptでDOM要素を操作する時は、DOM要素が構築されるのを待つ必要があります。 しかし外部スクリプトを読み込む場合、属性によっては実行されるタイミングがズレた結果、上手く動作しないことがあります。そこでasync・defer属性を含めて、DOM要素の構築後に処理を開始できるような仕組みをお伝えします。