JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. 【JavaScript】再帰処理でネストされた配列内のすべての整数を合計する方法

    ネストされた（入れ子になった）配列に含まれるすべての整数を合計するには、同じ関数を何度も呼び出す「再帰処理」を使います。配列の要素を一つずつ調べ、要素がさらに配列であれば自分自身を再度呼び出し、整数であれば合計に加算する、という流れで処理を行います。 サンプルコード function sumOfTotalArray(numberArray){     var total = 0;     for (var index = 0; index < numberArray.length; index++) { &n

  2. JavaScriptでテキストボックスをクリックした瞬間に入力ヒントを消す方法（onfocus/onblur活用）

    テキストボックスに最初から表示されている入力ヒント（デフォルト値）は、onfocus と onblur の仕組みを使うことで、マウスカーソルでクリックした瞬間に消すことができます。 まず、次のような入力用テキストボックスを用意します。 <label for=name>StudentName: <input name=name id=studentName value=Enter your Name ????> </label> サンプルコード <!DOCTYPE html> <html lang=ja> <head>

  3. HTMLファイルからJavaScriptモジュールの関数が見つからない原因と解決方法

    エラーが発生する原因HTMLファイルからJavaScriptモジュール内の関数をインポートできない場合、最もよくある原因は、「export」ステートメントを使っていないことです。JavaScriptでは、別のファイルからインポートして使いたい関数には、事前に「export」キーワードを付けておく必要があります。「export」を付けていない関数は、そのファイルの外からは参照できないため、HTML側でimportしても「関数が見つからない」というエラーになってしまいます。解決方法：exportステートメントを追加するインポート対象の関数の前に「export」を付けるだけで解決できます。以下は、d

  4. JavaScriptでオブジェクトのオブジェクトを「オブジェクトの配列を持つオブジェクト」に変換する方法

    JavaScriptでは、キーごとにオブジェクトが格納された「オブジェクトのオブジェクト」を、各値が配列（中身は1つのオブジェクト）になっている形式へ変換できます。この変換には、Object.fromEntries() を map() と組み合わせて使うのが効果的です。 変換の仕組み まず Object.entries() を使って元のオブジェクトを「[キー, 値] のペア」からなる配列に変換します。次に map() で各値を配列でラップし、最後に Object.fromEntries() でペアの配列を再びオブジェクトへ戻す、という流れになります。 コード例 const studentDet

  5. 空のiframeのsrcは有効？about:blankを使った正しい設定方法を解説

    空のiframeのsrcには「about:blank」を使用する HTMLで<iframe>要素のsrc属性を空にしたい場合は、「about:blank」を指定するのが一般的です。src属性を完全に省略してしまうと、ブラウザによっては意図しない動作やセキュリティ上の問題が発生することがあります。そのため、何も表示しないiframeを作成したい場合でも、明示的にabout:blankを設定することをおすすめします。 <iframe src=about:blank></iframe> 実装例 以下に、空のsrcを持つiframeを含む完全なHTMLコードの例を示

  6. JavaScriptのfilter()メソッドを使って配列からオブジェクトを削除する方法

    JavaScriptでは、filter()メソッドを活用することで、配列から特定の条件に合わないオブジェクトを簡単に取り除くことができます。本記事では、detailsプロパティを持たないオブジェクトを配列から除外する方法を、具体的なコード例とともに解説します。 対象となるデータの例 まず、次のようなオブジェクトが格納された配列を想定します。 ObjectValue = [ { id: 101, details: { Name: John, subjectName: JavaScript } }, { id: 102, details: { Name: David, subjectNam

  7. JavaScriptでループ処理を使ってnull以外かつ空でない値をカウントする方法

    JavaScriptで配列内の「null以外かつ空でない値」の個数を数えたい場面はよくあります。本記事では、forEach()メソッドを使って配列をループ処理し、有効な値をカウントする方法を解説します。 サンプルデータの準備 まず、以下のような配列を用意します。 let subjectNames = [JavaScript, Angular, AngularJS, Java]; forEach()の基本構文 nullや空文字ではない値をカウントするには、forEach()メソッドを使用します。基本構文は以下のとおりです。 { yourStatement1 . .

  8. 【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

    はじめに Webページ上の既存のHTML要素を一時的に取り除き、あとから再び表示したい場面はよくあります。そんなときに便利なのが、jQueryが提供するhide()メソッドとshow()メソッドです。この2つのメソッドを使えば、ボタン操作ひとつでページ内のコンテンツを簡単に「削除（非表示）」したり「追加（表示）」したりできます。 用意するボタン まず、コンテンツを隠すためのボタンと、再表示するためのボタンの2つをHTMLに配置します。 <button type="submit" id="hide">クリックすると上記のコンテンツを非表示にし

  9. JavaScriptで辞書（オブジェクト）のすべてのキーに同じ値をマッピングして初期化する方法

    はじめにJavaScriptで辞書（オブジェクト）を作成する際、すべてのキーに同じ値を割り当てて初期化したいケースはよくあります。このような場合は、for...ofループを使うことで簡単に実現できます。本記事では、具体的な手順とコード例をわかりやすく解説します。手順1：キーとなる配列を設定するまず、辞書のキーとして使用する配列を用意します。const name = [Name1, Name2];手順2：forループでキーに同じ値をマッピングする続いて、空のオブジェクトを作成し、forループを使って配列内のすべてのキーに対して同じ値「John」をマッピングします。const name = [Na

  10. JavaScriptでUL（順序なしリスト）に改行付きで項目を追加する方法

    順序なしリスト（UL）に新しい項目を改行付きで追加するには、document.querySelector()とappend()メソッドを組み合わせて使用します。ユーザーが入力した値をli要素として動的にリストへ追加することで、各項目が新しい行に表示されます。以下に具体的なサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

  11. JavaScriptのオブジェクト配列から最初のBOTIDだけを取得する方法

    JavaScriptでは、オブジェクトが格納された配列から特定のフィールドの値を取り出す場面は非常に多くあります。ここでは、BOTIDと担当ユーザーの名前（Name）を持つレコード配列を例に、最初の要素のBOTIDのみを取得する方法を解説します。サンプルデータの準備まず、以下のようなBOTIDとNameを持つオブジェクト配列を用意します。let objectArray = [ { BOTID: 56, Name: John }, { BOTID: 57, Name: David }, { BOTID: 58, Name: Sam }, { BOTID: 59,

  12. JavaScriptで小数を小数点以下第1位に四捨五入する方法

    JavaScriptで小数を小数点以下第1位（十分の一の位）に四捨五入するには、toFixed(1) メソッドを使用します。構文は次のとおりです。var anyVariableName = yourVariableName.toFixed(1)たとえば、次のような小数があるとします。var decimalValue = 200.432144444555; console.log(元の値= + decimalValue)それでは、この小数を実際に四捨五入してみましょう。コードは以下のとおりです。サンプルコードvar decimalValue = 200.432144444555; console

  13. JavaScriptで特殊文字シーケンスを含む文字列を部分文字列に分割する方法

    例えば、次のように <----> という特殊文字シーケンスを含む文字列があるとします。var fullName=" John <----> Smith ";この文字列を部分文字列に分割するには、正規表現（regex）と split() メソッドを組み合わせて使用します。まず、区切りとなる特殊文字シーケンスにマッチする正規表現を定義し、trim() で前後の余分な空白を取り除いた文字列に対して split() を呼び出します。構文は以下の通りです。var anyVariableName=(/\s*<---->\s*/g);var anyVa

  14. JavaScriptで文字列内の各文字の出現回数をカウントする方法

    文字ごとの出現回数をカウントする仕組みJavaScriptで文字列内に含まれる各文字の出現回数を調べるには、オブジェクト（連想配列）を使って頻度を記録するのが一般的な手法です。基本的な考え方は以下のとおりです。各文字の頻度を保存するためのオブジェクトを用意する文字列を先頭から1文字ずつ走査する同じ文字がすでに記録されている場合はカウントを1つ増やし、初登場の文字なら1をセットする例として、次の文字列を対象に考えてみましょう。var sentence = My name is John Smith;この文字列には「m」が3回、「i」「s」「n」「h」がそれぞれ2回出現しています。以下が、実際に出

  15. 【jQuery】HTMLテーブルのデータをJavaScriptの配列に変換する方法

    HTMLテーブルのデータを配列に変換するとは Webアプリケーションを開発していると、HTMLテーブルとして表示されているデータを、JavaScript側で配列として扱いたい場面があります。そんなときは、jQueryのfind()メソッドで<td>要素のデータを取得し、push()メソッドで配列に格納することで、簡単に実現できます。 サンプルとなるHTMLテーブル 今回は、以下のような「名前（Name）」と「年齢（Age）」を持つシンプルなテーブルを例に説明します。 <table id="details"> <thead> <tr

  16. JavaScriptのオブジェクトエントリから部分文字列（サブストリング）を抽出・表示する方法

    はい、可能です。Object.fromEntries()とsubstr()を組み合わせることで、オブジェクトのキー（プロパティ名）から部分文字列を抽出し、新しいオブジェクトとして表示できます。 substr()を使用する際には、第1引数に「部分文字列の取得を開始するインデックス」、第2引数に「切り出す文字数（長さ）」を指定します。これにより、キー名から不要な部分を取り除いた文字列を作成できます。 処理の流れ 以下の手順で処理を行います。 Object.entries()でオブジェクトを[キー, 値]のペア配列に変換する map()で各キーにsubstr()を適用し、必要な部分だけを切り出す

  17. JavaScriptで値が空かどうかを確認する方法

    JavaScriptでは、空文字列（）と null を使った条件式で、値が空かどうかを簡単にチェックできます。たとえば、ユーザーがテキストボックスに入力せずにフォームを送信しようとした場合に、警告メッセージを表示して送信を防ぐことができます。サンプルコード以下は、フォーム送信時に入力値が空でないかを検証する完全なHTMLの例です。<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,

  18. 【JavaScript】Setを使って配列から重複する値を削除する方法

    JavaScriptで配列を扱っていると、同じ値が複数含まれているケースによく出会います。例として、以下のように同名の生徒が複数回登場する配列を考えてみましょう。const listOfStudentName = [John, Mike, John, Bob,Mike,Sam,Bob,John];この配列には「John」「Mike」「Bob」がそれぞれ複数回含まれています。このような重複した値を削除したい場合に便利なのが、ES6（ECMAScript 2015）で導入されたSet（セット）という概念です。Setで重複を除去できる理由Setは「同一の値を2つ以上格納できない」という特徴を持つデー

  19. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  20. JavaScriptで文字列内の各単語の先頭文字を大文字に変換する方法

    JavaScriptで文字列内の各単語の先頭文字を大文字にするには、まず split() メソッドを使って文字列をスペースで分割します。その後、charAt() で各単語の1文字目を取り出し、toUpperCase() を使って大文字へ変換します。処理の流れこの手法は以下のステップで構成されています。toLowerCase(): 文字列全体を一旦小文字に統一し、変換後の表記を揃えます。split( ): スペースを区切り文字として文字列を配列に分割します。charAt(0) + toUpperCase(): 各単語の先頭文字を大文字に変換します。substring(1): 2文字目以降をそのま

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:110/297  20-コンピューター/Page Goto:1 104 105 106 107 108 109 110 111 112 113 114 115 116