JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでドキュメント内の特定のアンカー要素を取得・表示する方法

    JavaScriptでは、ドキュメント内のアンカータグ（<a>タグ）が配列のような（array-like）構造として管理されています。特定のアンカー要素を取得して表示したい場合は、document.anchorsコレクションにインデックス番号を指定し、innerHTMLプロパティを組み合わせます。これは、配列から特定の要素を取り出すときとまったく同じ考え方です。 構文 element = document.anchors[i].innerHTML; 例1：最初のアンカー要素を表示する 次の例では、ページ内にある2つのアンカータグのうち、最初のアンカー要素のテキストを表示しています

  2. JavaScriptでドキュメント内のリンク数を取得する方法

    JavaScriptでドキュメント内のリンク数を取得するJavaScriptのDOM（Document Object Model）には、ドキュメントに関するさまざまな情報を取得するためのプロパティが多数用意されています。その中でもdocument.links.lengthを使用すると、ドキュメント内に含まれるリンク（<a>タグ）の総数を簡単に取得できます。document.linksは、href属性を持つすべてのアンカー要素を格納したHTMLCollectionを返します。そのlengthプロパティを参照することで、リンクの総数がわかります。この操作はページの通常の動作に影響を与え

  3. JavaScriptでページ内リンクのhref属性を取得する方法｜document.linksの使い方を解説

    JavaScriptでリンクのhref属性を取得する方法JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。例1：3番目のリンクのhref属性を取得

  4. 【JavaScript】document.domainでドキュメントが読み込まれたサーバーのドメインを取得する方法

    JavaScriptには、読み込まれたドキュメントに関するさまざまな情報を取得できるdocumentオブジェクトが用意されています。その中でもdocument.domainプロパティを使うと、現在ドキュメントが読み込まれているサーバーのドメイン名を簡単に取得できます。 document.domainとは document.domainは、ブラウザに組み込まれたプロパティで、現在表示中のHTMLドキュメントがどのサーバー（オリジン）から提供されたかを示すドメイン文字列を返します。たとえば、ドキュメントが「tutorialspoint」のサーバー上で読み込まれている場合、このプロパティは「www.

  5. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo

  6. JavaScriptで画面の有効幅・有効高さを取得する方法（availWidth／availHeight）

    JavaScriptでは、window.screenオブジェクトを使うことで、ブラウザが動作している画面（ディスプレイ）に関するさまざまな情報を取得できます。その中でも、screen.availWidthとscreen.availHeightプロパティを使用すると、タスクバーなどのOSのインターフェース要素を除いた「実際に利用できる」画面の幅と高さを取得することが可能です。この記事では、それぞれのプロパティの特徴と使い方を、サンプルコード付きでわかりやすく解説します。画面の有効幅（availWidth）を取得するscreen.availWidthプロパティは、画面全体の幅からWindowsのタ

  7. JavaScript正規表現の「/g」フラグとは？文字列をグローバルに置換する方法を解説

    正規表現の/gフラグは、文字列操作を効率化するための重要なオプションの一つです。/g（global）を付けると、指定した単語を文字列全体からグローバル（全件）に検索できます。文中に登場するすべての該当語を別の単語に一括置換したい場合に、このフラグが活躍します。本記事では、その基本的な使い方をサンプルコード付きでわかりやすく解説します。 /gフラグなしの場合の挙動 次の例では、文中に含まれるすべての「blue」を「red」に置き換えたいとします。まず、通常のstr.replace()メソッドを使った場合を見てみましょう。グローバル指定がないため、最初に出現した「blue」のみが「red」に置き換

  8. JavaScriptの「/i」フラグとは？大文字・小文字を区別せずに置換する方法を解説

    JavaScriptは大文字と小文字を区別する（case sensitive）言語です。そのため、文字列の中である単語を別の単語に置き換える場合、アルファベットが大文字なのか小文字なのかを意識する必要があります。単語が1つだけなら確認は簡単ですが、置換対象の単語が多数あるケースでは、いちいち大文字・小文字を判定していては非効率です。こうした問題を簡単に解決してくれるのが、正規表現の「/i」フラグです。「i」は「ignore case（大文字小文字を無視する）」の略で、このフラグを使うと、元の文字列内の大文字・小文字に関係なく、すべての該当単語を指定した単語に置き換えることができます。「/i」フ

  9. JavaScriptでHTML DOMに新しい要素を追加する基本手法を解説

    HTML DOMに新しい要素を追加するには、まず要素を作成し、その後で既存の要素に追加（アペンド）するという2段階の手順が必要です。 実行手順 1）まずdivセクションを作成し、<p>タグを使ってテキストを配置しておきます。 2）document.createElement(p) を使用して、新しい <p>要素を作成します。 3）document.createTextNode() を使用してテキストノードを作成し、手順2で作成した要素（<p>）の中に挿入できるようにします。 4）appendChild() を使って、作成した要素とテキストをまとめて、既存の

  10. JavaScriptで既存のHTML要素を削除する方法【removeChild()の使い方を解説】

    既存のHTML要素を削除するには、removeChild()メソッドを使用する必要があります。このメソッドは、親要素から任意の子要素を取り除くことができます。 構文 removeChild(element); 引数として削除したい要素を渡すと、その要素がDOMから取り除かれます。 使用例 次の例では、div要素内に最初は2つのテキスト（p要素）が含まれています。しかし、removeChild()メソッドを実行すると、そのうちの1つが削除され、div要素内には1つのテキストだけが残ります。出力結果では、残ったテキストが表示されます。 <html> <body> <d

  11. JavaScriptのstartsWith()メソッドとは？indexOf()との違いと使い方を解説

    文字列が特定の文字や文字列で始まっているかどうかを確認するには、従来indexOf()メソッドが使われてきました。しかし、より複雑な高度なアプリケーション開発においては、この方法では不十分になりがちです。そこでES6（ECMAScript 2015）では、そうした高度な処理を簡単かつ直感的に行えるstartsWith()メソッドが新たに提供されました。 従来の方法：indexOf()を使った判定 まずは従来のアプローチとして、indexOf()メソッドを使って、文字列が特定の文字で始まっているかどうかを確認する例を見てみましょう。 サンプルコード <html> <body

  12. JavaScriptのtest()メソッドとは？使い方をサンプル付きで解説

    JavaScriptのtest()メソッドは、正規表現（RegExp）に属するメソッドの一つです。対象となる文字列の中に、指定したパターンが存在するかどうかを検索し、その結果に応じてtrueまたはfalseのブール値を返します。パターンが見つかればtrue、見つからなければfalseとなります。また、test()メソッドは大文字と小文字を区別するという重要な特徴を持っています。ここでは、実際のコード例を使いながら、test()メソッドの使い方を詳しく見ていきましょう。 基本構文 test()メソッドは、以下のように正規表現リテラルに対して呼び出して使用します。 /パターン/.test(検索対象

  13. JavaScriptのexec()メソッドとは？正規表現での文字列検索の使い方を解説

    exec()メソッドとはexec()は、JavaScriptの正規表現（RegExp）メソッドの一つです。文字列の中から指定したパターンを検索し、マッチしたテキストをオブジェクトとして返します。同じく正規表現メソッドであるtest()がtrue/falseという真偽値を返すのに対し、exec()はマッチした文字列や位置などの詳細情報を持つオブジェクトを返す点が大きな違いです。パターンが見つからなかった場合はnullが返されます。戻り値のオブジェクトには、obj[0]でマッチした文字列そのものを、obj.indexで文字列内のマッチ開始位置（インデックス番号）を取得できます。例1：パターン「es

  14. JavaScriptのゲッター（getter）とセッター（setter）の違いとは？使い方を実例で解説

    ゲッター（getter）とセッター（setter）を使用すると、オブジェクトアクセサ（Object Accessors）を定義できます。両者の違いは、ゲッターがオブジェクトからプロパティの値を取得するために使われるのに対し、セッターはオブジェクトのプロパティに値を設定するために使われるという点です。ここでは、具体例を挙げながらそれぞれの使い方を解説します。 ゲッター（getter）とは ゲッターは、get キーワードを使って定義します。対応するプロパティにアクセスしたタイミングで関数が自動的に実行され、その戻り値が取得されます。 コード例 次の例では、「business」という名前のオブジェク

  15. JavaScriptのスプレッド演算子でオブジェクトをクローン（複製）する方法

    オブジェクトのクローン（複製）とは、ある変数に格納されたオブジェクトを別の変数へコピーすることを指します。しかし、単純に代入演算子（=）を使ってコピーしても、意図した通りには動作しません。本来、クローンを作る目的は、片方の変数に加えた変更がもう片方の変数に影響を与えないようにすることです。ところが代入演算子の場合、両者の変数は同じオブジェクトへの参照を共有するため、一方への変更が必ず他方にも反映されてしまいます。この問題を解決するために、ES6ではスプレッド演算子が導入されました。例1：代入演算子でコピーした場合次の例では、代入演算子を使ってオブジェクトをコピーしています。この場合、元のオブジ

  16. JavaScriptで文字列を繰り返す2つの方法｜repeat()とfill()の使い方を解説

    JavaScriptで文字列を繰り返し生成する方法は、主に2つあります。1つ目はstring.repeat()メソッドを使う方法、2つ目はArray.fill()メソッドを組み合わせる方法です。ここでは、それぞれの構文や使い方をサンプルコード付きで詳しく解説します。 方法1：string.repeat()メソッド 構文 string.repeat(number); repeat()メソッドは、引数として数値を1つ受け取ります。指定した回数分だけ元の文字列が繰り返された、新しい文字列を返します。なお、0を指定した場合は空文字列が返され、負の値を指定するとエラー（RangeError）になる点に注

  17. JavaScriptで文字列を分割する3つの方法とは？【split()・スプレッド演算子・Array.from()】

    JavaScriptで文字列を個々の文字に分割する方法は、主に3つあります。1つ目は従来から使われているstring.split()メソッドによる方法、残りの2つはES6（ECMAScript 2015）で導入されたスプレッド演算子とArray.from()メソッドを使う方法です。それぞれの使い方を詳しく見ていきましょう。 1. String.split() split()は最も古典的で広く使われている方法です。引数に空文字列 を渡すことで、文字列を1文字ずつに分割し、配列として取得できます。 構文 string.split(); 使用例 次の例では、string.split()メソッ

  18. JavaScriptで文字列内の部分文字列を検索する2つの方法【indexOf()とincludes()】

    JavaScriptでは、ある文字列の中に特定の部分文字列が含まれているかどうかを確認する方法が2つあります。1つはindexOf()メソッドを使う方法、もう1つはES6（ECMAScript 2015）で導入されたincludes()メソッドを使う方法です。ここでは、それぞれの特徴と使い方を詳しく解説します。 indexOf()メソッド 構文 indexOf(str); このメソッドは、指定した部分文字列が文字列内で最初に出現するインデックス（位置）を返します。見つかった場合はその位置（0以上の数値）、見つからなかった場合は-1が返ります。そのため、戻り値が-1以外であれば部分文字列が

  19. JavaScriptでブラウザのアプリケーション名とバージョン情報を取得する方法を徹底解説

    JavaScriptには、ブラウザに関するさまざまな情報を取得できるnavigatorオブジェクトが標準で用意されています。このうち、アプリケーション名とバージョン情報を取得するには、それぞれnavigator.appNameプロパティとnavigator.appVersionプロパティを使用します。本記事では、それぞれの使い方について具体例を挙げながら詳しく解説します。 ブラウザのアプリケーション名を取得する（navigator.appName） アプリケーション名を取得するには、navigator.appNameプロパティを使います。少し意外に感じるかもしれませんが、IE11・Chrom

  20. JavaScriptでブラウザの製品名とコードネームを取得する方法

    JavaScriptには、ブラウザに関するさまざまな情報を取得できるnavigatorオブジェクトが用意されています。このオブジェクトが持つnavigator.productプロパティを使えばブラウザの製品名を、navigator.appCodeNameプロパティを使えばコードネームをそれぞれ取得できます。ここでは、両者の使い方を順番に解説していきます。製品名（product）を取得するproductプロパティは、ブラウザの製品名を文字列として返します。ほとんどのブラウザでは、この戻り値は「Gecko」に固定されています。サンプルコード<html> <body> <

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:167/297  20-コンピューター/Page Goto:1 161 162 163 164 165 166 167 168 169 170 171 172 173