-
JavaScriptで2つ以上の文字列を結合する方法
JavaScriptを使用して2つ以上の文字列を結合する方法を学びます。 JavaScriptには、プラス演算子+など、2つ以上の文字列を結合するさまざまな方法があります。 、プラスは+=に等しい 演算子、およびconcat() 。 注：+ および+= 代入演算子として知られています。 3つすべて試してみましょう！ プラス演算子（+） firstNameという2つの変数があるとします。 およびlastName 、およびこれらの変数の合計値をfullNameと呼ばれる3番目の変数に割り当てます。 。あなたはこのようにそれをすることができます： const firstName = Ste
-
JavaScriptを使用して特定の配列位置にアイテムを追加する方法
JavaScriptで特定の配列位置（インデックス）にアイテムを追加する方法を学びます。 アイテムを配列に追加したいが、追加（最後に追加）または追加（最初に追加）したくないとします。配列の特定の位置/場所にアイテムを追加したい。 注：特定の位置/場所でデータを操作する場合、それをインデックスと呼ぶことがよくあります。 配列インデックスを使用 0からカウントを開始します 、つまり： 0 1です 1 2です など。 したがって、5つのアイテムを含む配列があり、3番目のアイテムにアクセスしたい場合は、2としてアドレス指定します。 。 了解しました。ここに来た目的を実行しましょう。
-
JavaScript変数の命名規則（規則）
以下はルールです （ガイドラインではありません）JavaScript変数に名前を付ける場合： 変数名は、英数字（aからzの文字）のみで構成できます。 と数字0から9 ）、アンダースコア（ _ ）またはドル記号 $ 。 変数名を数字で始めることはできません。 変数名は文字、ドル記号で始まる必要があります （ $ ）またはアンダースコア （ _ 。 変数名にスペースを含めることはできません。 変数名に、 Javascriptなどの特定の予約キーワードを含めることはできません 、 true 、 this その他多数。 予約済みのJavaScriptキーワード 予約されたキーワードに関
-
[レビュー]バニラJavaScriptでコード化されたスペースインベーダー（Andrea Mailleによる）
AndreaMailleによるSpaceInvadersは、1978年の有名な2Dゲームの純粋なバニラJavaScriptバージョンです。 ゲームには次の機能があります。 衝突検出 スペースバーでの撮影 キーボードの矢印を使用した左右（x軸）の動き 平和モード（ロケットの代わりにバラで敵を撃ちます😂） タイマー スコア数 ハイスコアボード スコアを送信する このゲームは、敵のAIに関してあまり抵抗力がなく、効果音もありませんが（すぐに中毒になります）、純粋なバニラJavaScriptを使用してゲームを構築したい人にとっては学習とインスピレーションの素晴らしい情報源です。 スペース
-
JavaScriptとCSSを使用してページの一番下までスムーズにスクロールする方法
JavaScriptとほんの少しのCSSを使用して、ユーザーを長いWebページの一番下までスムーズにスクロールする方法を学びます。 ユーザーがページの一番下までスムーズにスクロールできるようにする場合は、scroll-behaviorというCSSプロパティを使用できます。 scrollIntoView()と呼ばれるJavaScriptメソッド 。 次のものが必要です： ブラウザの右側にあるy軸スクロールバーをアクティブにするのに十分なコンテンツを含む長いWebページ ページ上部にあるidのアンカー要素 idを持つ要素 ページの下部にある scroll-behavior CSSプロパ
-
JavaScriptを使用して配列内の単一のアイテムを見つける方法
バニラJavaScriptを使用して配列内の単一の（特定の）アイテムを検索するには、ES6メソッドArray.find()を使用できます。 。 リストアイテムの配列、この場合は野菜があるとします。ここで、リストからニンジンを見つけたいと思います： const vegetables = [broccoli, carot, kale, spinach] // Find carot in array let carot = vegetables.find(function(vegetables) { return vegetables === carot }) console.log(ca
-
JavaScriptを使用して（マウスオーバーで）Webサイトの背景色を変更する方法
バニラJavaScriptを使用して、Webサイト上にマウスを移動したときにWebサイトの背景色を変更する方法を学びます。 HTML 単純なHTMLページのマークアップは次のとおりです。 JavaScript ユーザーがページの任意の部分にマウスを移動したときに背景色を変更するには、次のことを行う必要があります。 <body>をターゲットにする 要素を作成し、その要素への参照を変数に格納します。 windowのイベントリスナー mouseoverをリッスンするオブジェクト イベント。 backgroundColorを適用します 色の値を持つプロパティ。 次の
-
JavaScriptを使用して（マウスオーバーで）Webサイトの背景色を切り替える方法
JavaScriptのmouseoverを使用して、ウェブサイトの内側と外側にマウスを移動したときに、ウェブサイトの背景色を切り替える方法を学びます。 およびmouseout イベント。 HTML 単純なHTMLページのマークアップは次のとおりです。 CodePenのような無料のオンラインテキストエディタを使用して、このチュートリアルに従うことができます。 JavaScript ユーザーがマウスをWebサイトのフレームの上または外に移動したときに、Webサイトの背景色を切り替えるには、次のことを行う必要があります。 <body>をターゲットにする 要素を作成し、
-
インラインJavaScriptを使用してmouseOver/mouseOutで画像を交換する簡単な方法
これは、マウスをその上に移動したときにデフォルトの画像を別の画像と交換し、マウスを再び外に移動したときにデフォルトに戻すための、すばやく簡単なインラインJavaScriptアプローチです。 この例は同じですが、画像ソースとして外部プレースホルダー画像を使用しています： コードデモ
-
JavaScriptを使用してページボタンを印刷または保存する方法
ブラウザの印刷または保存を開くボタンを作成する方法を学びます クリックするとファイルウィンドウのプロンプトが表示されます。 特定のWebサイトでページを印刷または保存する場合は、ブラウザ（通常は左上隅）に移動できます： ファイル→印刷→をクリックします 保存をクリックします ボタンをクリックして、ファイルをPDFドキュメントとして保存するか、プリンタで印刷します。 ショートカットの印刷/保存： cmd + p（Mac）/ ctrl + p（Windows）。 しかし、クリックするとすぐにブラウザの印刷プロンプトウィンドウを開く[ファイルの印刷または保存]ボタンをユーザーに提供すること
-
JavaScriptでアラートボックスを作成する方法
アラートボックスとは何ですか？ アラートボックスは、ある種のユーザーインタラクション（クリック、スクロール、入力など）への応答としてポップアップする小さなウィンドウです。アラートボックスは主に、問題についてユーザーに警告するために使用されます ただし、単にエンドユーザーに通知するためにも使用されます。 警告ボックスを使用する一般的な例は、ユーザーがフォームの送信ボタンをクリックしたが、必須フィールドに入力するのを忘れた場合です。アラートボックスには、問題をユーザーに説明するメッセージが表示されます。 アラートボックスの作成方法 上のスクリーンショットから正確なアラートボックスを複製しま
-
JavaScriptを使用して訪問者を別のWebサイトまたはページにリダイレクトする方法
JavaScriptのwindow.locationを使用して、ウェブサイトの訪問者を別のURLにリダイレクトする方法と理由を学びます オブジェクト。 ページリダイレクトの方法 Webサイトの訪問者を新しいURLにリダイレクトするには、リダイレクト元のWebページで次のJavaScriptを実行するだけです。 window.location = https://wheretoredirect.com コードを外部の.jsに挿入することもできます ファイルを作成するか、ヘッドセクションにインラインで配置します（<head> ）あなたのウェブページの： これで、https://
-
ブラウザに基づいてサイト訪問者をリダイレクトする方法
あなたのウェブサイトは、いくつかのブラウザ（特にInternet Explorerのような古い/レガシーブラウザ）と互換性のないいくつかの最新の最先端機能を実行している可能性があります。幸い、JavaScriptを使用して、サイトの訪問者が使用している（または使用していない）ブラウザーを検出できます。その後、訪問者をブラウザと互換性のあるバージョンのWebサイトにリダイレクトできます。 ユーザーがChromeを使用していない場合はリダイレクトします 現在のところ、最先端バージョンのウェブサイトはChromeブラウザと100％しか互換性がなく、Chromeを使用していない訪問者を別のバージョン
-
JavaScriptで数値を文字列に変換する方法
JavaScriptを使用して数値を文字列に変換するには、toString()を使用します 方法： let number = 10 let numberToString = number.toString() console.log(numberToString) // 10
-
キャッチされない構文エラーの一般的な原因：JavaScriptで予期しない識別子
コンソールで次のJavaScriptエラーが発生した場合： Uncaught SyntaxError: Unexpected identifier 最も一般的な理由の1つは、constを変更（変更）しようとしていることです。 変数。それはできません。 JavaScriptでは、キーワードconst いわゆる不変変数です これは、誰にも変更または再宣言させたくない変数に使用されます。 letを使用する 変数を次のようにしたい場合：変更可能、変更可能、変更可能、更新可能（同じこと、異なる単語）。
-
JavaScriptでブラウザプリンタダイアログを開く方法
JavaScriptでは、JavaScriptの印刷関数print()を使用して、プリンターブラウザダイアログをトリガーできます。 。 他の多くのプログラミング言語とは異なり、JavaScriptではprint() コンソールへのメッセージの印刷には使用されません。console.log()を使用します そのために。 実用的なprint()の場合 例はこのチュートリアルをチェックしてください。
-
バニラJavaScriptでダブルクリックを検出する方法
JavaScriptでダブルクリックを検出するには、イベントリスナーdblclickを使用できます 。 以下の例では、windowのダブルクリックをリッスンします。 オブジェクト。つまり、ウェブページ内のどこかでマウスをすばやくダブルクリックすると、検出されます。 { console.log(Double-click detected) // Double-click detected }) dblclickを添付することもできます ボタンなどのDOM要素のイベントリスナー： { console.log(Double-click detected) // Double
-
JavaScriptで値が数値かどうかを確認する方法
JavaScriptでは、値が数値であるか他のものであるかを確認するさまざまな方法があります。 最も一般的な方法は、typeofを使用することです。 演算子： const value = 5 console.log(typeof value) // number 実用的なコンテキストで使用できる1つの方法は、typeofを使用して、フォームが正しく入力されているかどうかを確認することです。 条件文で。 値がtypeかどうかを確認しましょう 入力値のではない 数値タイプを入力してから、コンソールにメッセージをログアウトします。 const inputFieldAge = 10 if (t
-
JavaScriptで明日の日付を取得する方法
JavaScriptで明日の日付を取得するには、現在の日付を取得してから、次のように1日を追加するだけです。 const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) tomorrow.toDateString() 昨日の日付でコンソールからログアウトしてみてください： console.log(tomorrow.toDateString()) 素晴らしくシンプルです！
-
JavaScriptでオブジェクトが空かどうかを確認する方法
これは空のオブジェクトです： const emptyObject = {} しかし、JavaScriptでオブジェクトが空かどうかをどのように確認しますか？ Object.entries()を使用する 機能。 もう1つの空のオブジェクトは次のとおりです： const someObject = {} 次に、Object.entries()を使用します その上で機能する： Object.entries(someObject) 結果をログアウトするには： console.log(Object.entries(someObject)) // [] (empty array) オブジェクトが