カテゴリ：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要素の構築後に処理を開始できるような仕組みをお伝えします。

Web上の画像のサイズを取得するコードをJavaScriptで作成してみます。  概要 Imageオブジェクトを作成してsrcプロパティをセットすると、Web上の画像を読み込んでくれます。 読み込み完了時点でイ […]

JavaScriptには変数の宣言方法がvarとlet、それにconstの3種類あります。今まで僕は、ほぼletのみを使用していました。ですがどうやら、それは正しくはなかったようです。そこで今回は、JavaScriptの変数宣言について調べました。

ECMAScript2021から、論理和代入演算子、論理和代入演算子、Null合体代入演算子が導入されました。以前からある加算代入演算子と同じように、演算結果を変数やプロパティに直接代入できるものです。これだけで解説が終わってる気がしますが、もう少し詳しくお伝えします。

formタグでサーバーにリクエストを送ると画面遷移します。しかし画面遷移させずにリクエストを送りたいというケースがあります。その方法をお伝えします。