Javascript

HTML要素からクラスを削除するのは、JavaScriptのclassListプロパティのremove()を使用するだけです。 方法。すでに要素にクラスを追加する方法を読んだ場合は、クラスの削除がまったく同じ方法であり、逆になっていることに気付くでしょう。 最初に一般的なclassList.remove（）式を見てから、実際の例を続けてみましょう。 式 var element = document.querySelector(selector) element.classList.remove(class) 上記の一般的な例では、最初のHTML要素が見つかります 指定されたセレクター名のペ

このきちんとしたコードスニペットを使用すると、JavaScriptを使用して既存のHTML要素にID属性を追加できます。 コード let featuredTitle = document.querySelector(h1); featuredTitle.id = featured-title; ビデオで起こっていることは次のとおりです。 最初に、Webページでh1要素を見つけて、それをfeaturedTitleという変数に割り当てます。 。 次に、この場合はドット表記（variableName.attribute）を介してその変数にID属性を付加します：featuredTitle.

JavaScriptオブジェクトをサーバーに直接送信することはできませんが、できます。 JSONの送信—誰もがアクセスできる文字列形式。 このコードスニペットを使用すると、JavaScriptオブジェクトをJSON文字列にすばやく変換できます。これにより、データをサーバーに送信できます。 一人の人物を表すJavaScriptオブジェクトは次のとおりです。 let personObject = { name: Adam, age: 25, city: San Diego, profession: Web Developer, }; 上記のJavaScriptオブジェクトを

初心者向けで実用的なVanillaJavaScriptチュートリアル。重要なポイント：高性能ウィンドウイベントの書き方 ユーザーのハードウェアを破壊することはありません。 対象：完全な初心者から中級者 今日は、「ビューポートディメンション」と呼ばれるすばらしい小さなアプリを作成しています。 この機能は非常に効果的です。ブラウザウィンドウのサイズを変更すると、ブラウザのビューポートの幅と高さの値が表示されます。 レスポンシブデザインを行う場合、これは非常に貴重なツールです。 CodePenにも同様の機能があります。しかし、もっと大きなものといくつかの追加機能が必要だったので、自分で作成する

JavaScriptのclassListプロパティのcontains（）を使用すると、要素にクラスが存在するかどうかを簡単かつ迅速に確認できます。 メソッド。 まず、 classList.contains（）を使用するための一般的な式を見てみましょう。 次に、実用的について見ていきます。 使用事例。 classList.contains（）式 var element = document.querySelector(selector) element.classList.contains(class) 上記の一般的な例では、用途の広い querySelector（）を使用しています。

ユーザーのマウスがその領域に入ったときに表示したい非表示の要素（アクションバー/メニューなど）があるとします。これを行うには、JavaScriptのmou​​seenterイベントを設定します。 方法： HTMLマークアップ お気に入りのエディターに次のHTMLコードを追加します（オンラインの場合はCodePenをお勧めします。 CSSスタイリング 次のCSSをスタイルシートに追加します： .invisible-box { opacity: 0; transition: all 500ms; padding: 32px; margin-top: 32px; mar

JavaScriptを使用して要素のクラスを切り替える方法は、開発者として学ぶことができる最も実用的なスキルの1つです。トグルは、メニューの表示と非表示、検索フィルターの追加と削除、ソーシャルメディアボタン（いいね、いいね）など、さまざまな目的で使用されます。 もちろん、コンテキストに応じて、切り替えは数行のコードよりも複雑である必要はありません。今日は、トグルするだけでなく、JavaScript全般を学ぶことから始める簡単な方法を学びます。 HTML構造 JavaScriptの機能に取り掛かる前に、いくつかのHTML要素を設定して、何かを操作できるようにします。ラッパー、ボタン、ボッ

JavaScriptを使用して文字列から最後の文字を削除する最も簡単な方法は、slice()を使用することです。 メソッド。 そのためには、slice()内に2つのパラメータを追加する必要があります 方法： 開始点（0） 削除するアイテムの数（1） スペルミスのある会社名を修正する例を次に示します。 const companyName = Netflixx const fixCompanyName = companyName.slice(0, -1) console.log(fixCompanyName) // output: Netflix 注：splice() メソッドは元の変

JavaScriptを使用して、文字列に特定の単語の値が含まれているかどうかをどのように確認しますか？ JavaScriptの組み込みのincludes()を使用する メソッド。文字列に探している特定の文字が含まれているかどうかを判断します。 したがって、このHTMLページに「JavaScript」という単語が含まれているかどうかを知りたいとします。 JavaScriptで調べるには、まず、探している文字列値（単語）が含まれていると思われる要素を選択する必要があります。この場合、それは<article> 要素： const findJavaScriptString = do

JavaScript配列の最初のX個の要素にどのようにアクセスしますか？ JavaScriptの組み込みのslice()を使用します メソッド。 例として、配列の最初の3つの項目を操作する必要があるとします。この場合、配列は演習のリストです： const exerciseList = [ Deadlift, Squat, Push-up, Pull-up, Turkish Get-up, Kettlebell Swing, ] まず、アクセスするアイテムの数を定義します： // get the first 3 items const numberOfItems =

プレーンなバニラJavaScriptを使用してDOM要素を表示および非表示にする方法を学びます。 JavaScriptには、styleと呼ばれるstyleプロパティがあります。 、要素にCSSプロパティを設定し、CSSの場合と同じようにスタイルを設定するために使用できます。やってみましょう！ JavaScriptでDOM要素を非表示にする方法は次のとおりです。 element.style.display = none DOM要素を再度表示するには： element.style.display = block 注：DOM要素が元々inlineに設定されていた場合 またはinline-bl

JavaScriptを使用して配列にアイテムを追加するいくつかの方法を学ぶ 配列にアイテムを追加するには、JavaScriptのpush()を使用できます。 メソッドまたはconcat() コンテキストに応じて、メソッド。どちらのメソッドもJavaScript配列オブジェクトによって提供されます。 実際に両方の方法を使用する方法と理由を説明します。 単一のアイテムを配列に追加します 野菜の既存のリスト（配列）に野菜を追加しましょう： const vegetables = [broccoli, onion, spinach] vegetables.push(carot) これで、結果を印

2つの異なるメソッドを使用して、JavaScriptオブジェクトのプロパティの数をカウントする方法を学びます。 JavaScriptオブジェクトのプロパティの数を数えるには、次のいずれかを使用できます。 for ループ またはObject.keys() メソッド。 両方を調べてみましょう！ forループでオブジェクトのプロパティをカウントする これがdogというJavaScriptオブジェクトです ： const dog = { name: Naya, age: 2, color: black, Breed: Rottweiler mix, } dogのオブジェク

JavaScriptを使用して要素の外側のクリックを検出する方法を学ぶことは、多くの状況で使用できる強力なスキルです。メニューやモーダルウィンドウを非表示にします。数分で、その方法がわかります。 基本的なJavaScriptの外部要素の検出 HTMLでボックス要素を作成します： CSSを使用してボックスのスタイルを設定し、要素の非表示ユーティリティクラスを作成しましょう： .box { margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; border-radius: 4px;

テキスト内のパターンを検索するためのツールであるRegex（正規表現）を使用して、文字列内の空白をJavaScriptに置き換える方法を学びます。 Regex（「RegEx」または「RegExp」と綴られることが多い）は、文字列（テキスト）を操作するためのパフォーマンスの高いツールです。正規表現の最も一般的な使用例は次のとおりです。 テキストの検証 テキスト検索 今日は、正規表現を使用してテキスト（文字列）の行のすべての空白を何もないに置き換える簡単な例から学びます。 —ただし、次のコード例を使用して、空白を他の文字に置き換えることができます。 空白は文字と見なされます。したがって、

2つの異なる方法を使用して、JavaScriptを使用して配列を文字列に変換する方法を学びます。 JavaScriptには、配列の内容を文字列として返すことができるメソッドがいくつかあります。それらはtoString()と呼ばれます およびjoin() 。表面上はほとんど同じように見えますが、ご覧のとおり、そうではありません。両方をテストしましょう！ 数字のリストを含む配列オブジェクトは次のとおりです。 const numbersArray = [2, 4, 6, 8, 10] 配列を文字列に変換するには、toString()をアタッチしてみましょう。 numbersArrayへのメソッ

JavaScriptを使用して文字列から二重引用符で囲まれたテキストを抽出する方法を学びます。 テキストブロックから引用符で囲まれたテキストを取得するとします。引用符は通常、二重引用符で囲まれます（" " ）。問題ありません。JavaScriptのmatch()を使用できます メソッドといくつかの正規表現の魔法。 これは、textWithQuoteという変数に割り当てる、二重引用符で囲まれた1つの文を含むテキストブロック（文字列値）です。 ： const textWithQuote = One of my favorite quotes is First we ma

JavaScriptを使用して文字列から1つまたは複数の数値を抽出する方法を学びます。 数字を含む文字列があり、数字のみを抽出したいとします。問題ありません。JavaScriptのmatch()を使用できます メソッド。 これは、1つの数値を含む文字列値です（1995 ）stringWithOneNumberという変数に割り当てられます ： const stringWithOneNumber = JavaScript was invented in 1995 by Brendan Eich それでは、match()を添付しましょう メソッドを変数に追加し、\d+を追加します 引数として、

正規表現（RegEx）とreplace()を使用して、JavaScriptで単語（文字列）のすべてのインスタンスを置き換える方法を学びます メソッド。 会社の最新の製品について説明する膨大な量のテキストがあるとしますが、残念ながら、1つの単語のつづりが何度も間違っていました。次のテキストブロックは、「GloriousGames」ではなく「EpicGames」と表示されているはずです。 const textBlock = We at Glorious Games, are very proud to present the latest edition of the Unreal Tour

正規表現（RegEx）とreplace()を使用して、（文字列）内の任意の文字をJavaScriptに置き換える方法を学びます メソッド。 テキストのブロックがあり、emダッシュを使用するつもりだったとします。 （—）しかし、誤ってハイフンを使用しました （-）： const textBlock = When you’re typing fast it’s normal to make a few spelling mistakes here and there - it just means you’re human. 幸い、正規表現とreplace()を使用して、JavaScrip