JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. ES6（ECMAScript 6）のテンプレートリテラルがJavaScriptで動かない原因と対処法

    JavaScriptでテンプレートリテラルが正しく動作しない場合、最もよくある原因は引用符の種類の間違いです。テンプレートリテラルを使用するには、シングルクォート（ ）やダブルクォート（ ）ではなく、バッククォート（` `）で文字列を囲む必要があります。 バッククォートは、キーボードの左上（数字の「1」の左側）にある「`」キーです。見た目がシングルクォートと似ているため、うっかり混同してしまうケースが非常に多いのです。 コード例 以下に、テンプレートリテラルを使ったサンプルコードを示します。 var firstName=John; var lastName=Smith; console.log

  2. 【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

    JavaScriptでは、配列のデータをもとにラジオボタンを動的に生成することができます。その際に活用するのが、要素を作成する createElement() メソッドと、作成した要素を画面に追加する appendChild() メソッドです。 サンプルコード 以下は、性別の選択肢を配列で管理し、それを元にラジオボタンを自動生成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=devic

  3. JavaScriptでselect要素にaddEventListenerが動作しない原因と解決方法

    JavaScriptで要素に対してaddEventListener()を直接使ってもイベントが発火しない場合があります。その主な原因は、要素の取得方法に問題があるケースです。解決策としては、querySelector()を使って要素を正しく取得し、その上でaddEventListener()を組み合わせる方法が有効です。コード例以下は、セレクトボックスの選択が変更されたときに「change」イベントを検知してコンソールに出力するサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=U

  4. JavaScriptでセレクトボックスの選択に応じて非表示のdivを表示・切り替える方法

    Webフォームを作成していると、セレクトボックス（select要素）で特定のオプションが選ばれたときだけ、隠しておいたdiv要素を表示したいという場面によく出くわします。このような動的な表示切り替えは、JavaScriptの「style.display」プロパティを操作することで簡単に実現できます。表示したいタイミングで値を「block」に設定し、非表示にしたいときは「none」に戻すだけでOKです。実装例以下に、セレクトボックスで2番目のオプション（Javascript）が選択されたときに、非表示のdivを表示するサンプルコードを紹介します。<!DOCTYPE html> <

  5. JavaScript（jQuery）で同じクラスを持つ複数要素の空白を一括削除する方法

    はじめにWebページ内で同じクラス名を持つ複数の要素から、テキスト中の空白をまとめて削除したいケースはよくあります。このような場合、jQueryのドット(.)セレクターとeach()メソッドを組み合わせることで、すべての対象要素に対して一括処理を行うことができます。実装例以下がそのコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=wid

  6. jQueryで選択したチェックボックスの値を取得する方法

    はい、jQueryを使用すれば、選択されたチェックボックスの値を取得することができます。input要素の概念と、:checkedセレクターを組み合わせて利用します。実装のポイントチェックボックスの値を取得するには、以下の手順が基本となります。1. name属性などを使って対象のチェックボックスを絞り込む2. :checkedセレクターで「チェックが入っている」要素だけを選択する3. .each()メソッドで各選択項目をループ処理し、値を取り出すコード例以下に具体的なサンプルコードを示します。<!DOCTYPE html> <html lang=ja> <head&

  7. JavaScriptで2つのfloat値を正確に減算する方法

    JavaScriptで浮動小数点数（float）を単純に減算すると、「0.19999999999999998」のような予期しない誤差が発生することがあります。これは、JavaScriptがIEEE 754規格に基づく2進数で数値を内部的に扱っており、一部の10進小数を正確に表現できないことが原因です。 このような誤差を避けて2つのfloat値を正しく減算するには、parseFloat() と toFixed() を組み合わせて使用します。toFixed()で小数点以下の桁数を揃えることで、計算精度を安定させることができます。 サンプルコード 以下が実際のコードです。 var firstValu

  8. JavaScriptのループを停止する方法｜clearInterval()の使い方を解説

    JavaScriptでsetInterval()によって繰り返し実行されている処理（ループ）を停止したい場合は、clearInterval()を使用します。setInterval()は指定した間隔ごとに関数を繰り返し呼び出すメソッドですが、そのままでは無限に処理が続いてしまいます。そこで、あらかじめ戻り値として取得したタイマーIDをclearInterval()に渡すことで、ループを任意のタイミングで止めることができます。コード例以下は、一定回数スクロール処理を繰り返した後にループを停止するサンプルコードです。<!DOCTYPE html> <html lang="

  9. JavaScriptで整数の配列を正しくソートする方法を解説

    JavaScriptで整数の配列をソートするには、sort()メソッドを使用します。ただし、注意点があります。sort()はデフォルトでは要素を文字列として比較するため、数値の配列をそのままソートすると意図しない結果になることがあります。例えば、[1, 10, 2]を引数なしでsort()すると、結果は[1, 10, 2]ではなく文字列順に並び替えられてしまいます。整数を正しく昇順にソートするには、比較関数（コンパレータ）を渡す必要があります。基本的な使い方比較関数として (first, second) => first - second を渡すことで、数値として正しく昇順ソートが行われ

  10. JavaScriptでsetInterval()を一定時間後や特定の操作後に停止させる方法

    JavaScriptでsetInterval()による繰り返し処理を、一定時間の経過後や何らかの条件を満たしたタイミングで停止させたい場合があります。そんなときは、clearInterval()と条件分岐を組み合わせることで簡単に実現できます。 例えば、開始時刻を記録しておき、経過時間が30秒を超えたら処理を止めるといった実装が可能です。 サンプルコード 以下のコードでは、2秒ごとにコンソールへ「working」と出力し続け、開始から30秒（半分）が経過すると自動的に停止します。 <!DOCTYPE html> <html lang=ja> <head> &

  11. 【JavaScript】Array.prototype.fill()でオブジェクトを生成すると参照が共有される問題とmap()による解決法

    Array.prototype.fill()の参照共有問題とはJavaScriptでnew Array(n).fill(オブジェクト)のように配列を初期化すると、すべての要素に同じオブジェクトへの参照が渡されます。つまり、各要素に対して新しいインスタンスが作られるわけではないため、1つの要素を変更すると、他のすべての要素にも同じ変更が反映されてしまいます。この問題を解決するには、map()メソッドを組み合わせて使用します。解決策：fill()とmap()を組み合わせる構文は以下の通りです。var anyVariableName = new Array(yourSize).fill().map(

  12. JavaScript / TypeScriptでオブジェクトのnullチェックを行う方法

    JavaScriptやTypeScriptでnullチェックを行う場合、「!」（論理否定）を使った条件式を利用するのが一般的です。値がnull、undefined、空文字列、0などのfalsyな値であるかどうかを簡潔に判定できます。サンプルコード以下に基本的な実装例を示します。var value=null; if(!value) { console.log(This is null.); } else { console.log(This is not null.); }プログラムの実行方法上記のコードを実行するには、Node.jsを使って次のコマンドを入力します。node f

  13. JavaScriptで配列要素のすべての組み合わせを取得する方法

    JavaScriptでは、独自の関数を定義することで、配列内の値のすべての組み合わせを簡単に取得できます。ジェネレーター関数（function*）を再帰的に利用すると、コードを簡潔に保ちながら組み合わせを効率的に生成することが可能です。実装例以下のコードは、渡された配列の値から重複を許可したすべての組み合わせを生成する例です。function combination(values) {    function * combinationRepeat(size, v) {       if (size)      

  14. JavaScriptで2つのオブジェクトのプロパティを動的にマージする方法

    JavaScriptで2つ以上のオブジェクトのプロパティを1つにまとめたい場合、スプレッド構文（...）を使うのが最もシンプルで効果的な方法です。{ ...object1, ...object2, ...objectN } のように記述するだけで、複数のオブジェクトのプロパティを動的にマージできます。マージの基本構文スプレッド構文は、新しいオブジェクトの中に既存のオブジェクトを展開して結合します。なお、同じプロパティ名が複数のオブジェクトに存在する場合は、後ろに記述したオブジェクトの値が優先される点に注意してください。サンプルコード以下のコードでは、2つのオブジェクトをスプレッド構文でマージし

  15. 【JavaScript】外部関数の内側からイベントリスナーを削除する方法

    JavaScriptで、外部関数の内側からイベントリスナーを削除したい場合は、removeEventListener()メソッドを使用します。 リスナーを削除する際のポイント removeEventListener()でリスナーを正しく削除するには、addEventListener()で登録したときと同じ関数への参照を渡す必要があります。そのため、無名関数（匿名関数）をそのまま登録してしまうと、後から削除できなくなる点に注意しましょう。本記事のサンプルコードでは、登録時に名前付き関数funを渡し、それをそのまま外部関数へ引き渡すことで、内側からの削除を実現しています。 コード例 以下が実際

  16. JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

    スパンタグ（<span>）から価格の値を取得するには、まずタグ内のテキストを抽出し、文字列から整数へ変換します。その後、任意の数値を掛け合わせて計算結果を求め、ページ上の要素に表示できます。 処理の流れ jQueryの .text() メソッドでスパンタグ内のテキストを取得し、.trim() で前後の空白を除去、さらに .replace(,, ) でカンマを削除したうえで、parseInt() を使って整数に変換します。この一連の処理を行うことで、「1,000」のような金額表記も正しく数値として扱えるようになります。 コード例 以下がサンプルコードです。 <!DOC

  17. JavaScriptの正規表現で特定の単語に完全一致させる方法

    JavaScriptの正規表現を使って、文字列の中から特定の単語だけを正確に一致させたい場合は、単語境界を表す \b を活用します。単語境界を指定することで、「javascript」という単語そのものだけが一致し、「javascripting」のような別の単語の一部として含まれるケースは除外されます。サンプルコード以下は、文章の中に「javascript」という単語が含まれているかどうかを判定する例です。var sentence = "This is the not javascript Tutorial";var regularExpression = /\bjavasc

  18. SeleniumでJavaScriptコードの戻り値を取得する方法

    Selenium WebDriverを使用すると、JavaScriptコードの戻り値を取得することができます。SeleniumはexecuteScriptメソッドを利用してJavaScriptコマンドを実行でき、実行したいJavaScriptコマンドはこのメソッドの引数として渡します。 JavaScriptコードから値を返す際にはreturnキーワードを使用します。また、JavaScriptを操作するためには、import org.openqa.selenium.JavascriptExecutorというインポート文を追加する必要がある点にも注意してください。 構文 JavascriptEx

  19. PythonとSeleniumでJavaScriptを実行する方法【execute_script活用ガイド】

    Selenium WebDriver(Python版)では、JavaScriptを実行することができます。Document Object Model(DOM)は、JavaScriptを通じてページ上の要素とやり取りを行います。SeleniumでJavaScriptのコマンドを実行するには、execute_scriptメソッドを使用します。実行したいコマンドは、このメソッドの引数として渡します。ページを下方向にスクロールするような操作は、Seleniumの標準メソッドだけでは直接実行できない場合があります。こうした操作は、JavaScript Executorを使うことで実現できます。スクロール

  20. Selenium WebDriverでJavaScript変数を読み取る方法

    Selenium WebDriverを使用すると、ページ内のJavaScript変数の値を読み取ることができます。SeleniumはexecuteScriptメソッドを利用してJavaScriptのコマンドを実行します。実行したいJavaScriptのコードは、このメソッドの引数として渡します。また、JavaScriptを扱う場合は、import org.openqa.selenium.JavascriptExecutorというステートメントを追加する必要がある点に注意してください。 構文 JavascriptExecutor j = (JavascriptExecutor) driver;

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:67/297  20-コンピューター/Page Goto:1 61 62 63 64 65 66 67 68 69 70 71 72 73