ここでは、言及されたすべての JavaScript の概念をトピック別にまとめて説明します。

JavaScript — 動的クライアントサイドスクリプト

JavaScript はブラウザ內(nèi)で実行される多用途のプログラミング言語であり、Web サイトに動的でインタラクティブな機能を持たせることができます。これは主にクライアント側(cè)のタスクに使用されます。つまり、アニメーション、ユーザー入力、フォーム検証などを処理するためにユーザーの Web ブラウザーによって実行されます。

---

JavaScript の最初のステップ

JavaScript とは何ですか?

JavaScript は、インタラクティブなフォーム、アニメーション、リアルタイム更新などの複雑な機能を Web ページに実裝できるプログラミング言語です。フロントエンド開発では HTML や CSS と一緒によく使用されます。

JavaScript への初めてのスプラッシュ

この概念には、HTML ドキュメントへのスクリプトの埋め込みや、alert('Hello, world!'); のような単純なコマンドの実行など、最初の基本的な JavaScript コードの作成が含まれます。

何が問題だったのでしょうか? JavaScript のトラブルシューティング

JavaScript のトラブルシューティングとは、コード內(nèi)のエラーを特定して修正するプロセスを指します。よくある間違いには、構(gòu)文エラー、論理エラー、実行時エラーなどがあります。ブラウザの開発者コンソールなどのデバッグ ツールは、これらの問題を検査して修正するのに役立ちます。

必要な情報を保存する — 変數(shù)

JavaScript の変數(shù)はデータを保存するために使用されます。 let、const、var などのキーワードを使用して変數(shù)を宣言し、文字列、數(shù)値、オブジェクトなどの値を割り當(dāng)てます。

let name = "John";
const age = 25;

JavaScript の基本的な數(shù)學(xué) — 數(shù)値と演算子

JavaScript は、加算 ( )、減算 (-)、乗算 (*)、除算 (/) などの算術(shù)演算をサポートしています。除算の余りを求めるモジュロ (%) のような、より複雑な演算も使用できます。

JavaScript でのテキストの処理 — 文字列

文字列は JavaScript のテキストを表し、引用符で囲まれます。文字列を連結(jié) (結(jié)合) したり、エスケープ文字を使用して文字列內(nèi)に引用符などの特殊文字を含めたりできます:

let greeting = "Hello, " + "world!";

便利な文字列メソッド

JavaScript には、次のような文字列を操作するためのいくつかの組み込みメソッドが用意されています。

• toUpperCase() — 文字列を大文字に変換します。
• substring() — 文字列の一部を抽出します。
• split() — 區(qū)切り文字に基づいて文字列を配列に分割します。

配列

配列は、複數(shù)の値を 1 つの変數(shù)に格納するために使用されます。配列はさまざまなデータ型を保持でき、push()、pop()、map()、filter() などの強力なメソッドを提供します:

let name = "John";
const age = 25;

ばかげたストーリージェネレーター

これは、文字列と変數(shù)の実際的な使用法を示す初心者向けのプロジェクトです。ユーザーが値を入力するフォームを作成すると、JavaScript がそれらの値に基づいてランダムなストーリーを生成します。

---

JavaScript ビルディングブロック

コード內(nèi)での意思決定 – 條件

條件 (if-else ステートメント) を使用すると、コードが條件に基づいて決定を下すことができます。

let greeting = "Hello, " + "world!";

ループコード

ループを使用すると、コードのブロックを複數(shù)回繰り返すことができます。一般的なループには、for、while、do...while などがあります。これらは、配列、文??字列、數(shù)値の反復(fù)処理に役立ちます。

関數(shù) — 再利用可能なコード ブロック

関數(shù)は、特定のタスクを?qū)g行するように設(shè)計されたコードのブロックであり、再利用できます。 function キーワードを使用して関數(shù)を定義し、その名前で呼び出します。

let fruits = ["apple", "banana", "cherry"];

獨自の関數(shù)を構(gòu)築

これは、2 つの數(shù)値の合計の計算や亂數(shù)の生成など、特定のタスクを?qū)g行するために獨自の関數(shù)を作成して呼び出す実踐的な演習(xí)です。

関數(shù)の戻り値

関數(shù)は return ステートメントを使用して値を返すことができます。このステートメントは関數(shù)を終了し、呼び出し元に値を返します。

イベントのご紹介

イベントは、クリック、キー入力、フォームの送信など、ブラウザーで発生するアクションです。 JavaScript を使用すると、イベント リスナーを使用してこれらのイベントに応答できます。

イベントバブリング

イベント バブリングは、イベントが DOM 階層を通じて上に伝播し、親要素が子要素によってトリガーされたイベントを処理できるようにするイベント処理の概念です。

畫像ギャラリー

JavaScript を使用してインタラクティブな畫像ギャラリーを作成する方法を示す簡単なプロジェクト。サムネイルをクリックすると畫像全體が表示されます。

---

JavaScript オブジェクトの紹介

JavaScript オブジェクトの基本

JavaScript のオブジェクトは、プロパティとメソッドのコレクションです。キーと値のペアを使用してオブジェクトを作成します:

let name = "John";
const age = 25;

オブジェクト プロトタイプ

JavaScript オブジェクトには、設(shè)計図として機能するプロトタイプがあります。プロパティとメソッドはプロトタイプから継承できるため、オブジェクトの再利用と継承が可能になります。

オブジェクト指向プログラミング (OOP)

JavaScript はオブジェクト指向プログラミングをサポートしており、クラスとオブジェクトを使用して現(xiàn)実世界のエンティティをモデル化します。 OOP は、継承とカプセル化を通じてコードの再利用を促進します。

JavaScript のクラス

クラスは、JavaScript でオブジェクトを作成するためのテンプレートです。 class キーワードを使用してクラスを定義し、new キーワードを使用してオブジェクトをインスタンス化できます:

let greeting = "Hello, " + "world!";

JSON の操作

JSON (JavaScript Object Notation) は、サーバーとクライアントの間でデータを交換するために使用される軽量のデータ形式です。 JSON.stringify() と JSON.parse() を使用して、JSON オブジェクトと JavaScript オブジェクトの間で変換できます。

オブジェクト構(gòu)築の練習(xí)

これは、オブジェクトを構(gòu)築し、プロパティとメソッドを追加し、それらを操作する実踐的な演習(xí)です。

弾むボールのデモに機能を追加する

JavaScript を使用してデモを強化し、跳ねるボールのアニメーションにインタラクティブなオブジェクト指向要素を追加する練習(xí)プロジェクト。

---

非同期 JavaScript

非同期 JavaScript の紹介

非同期 JavaScript を使用すると、前のタスクが完了するのを待たずにコードでタスクを?qū)g行できます。これは、サーバーからデータを取得するなど、応答を待っている間にページがフリーズしないようにするタスクに不可欠です。

Promise の使用方法

Promise は、非同期操作の最終的な結(jié)果を表します。保留、履行、または拒否の 3 つの狀態(tài)のいずれかになります。 .then() メソッドと .catch() メソッドを使用して Promise を処理できます。

let fruits = ["apple", "banana", "cherry"];

Promise ベースの API を?qū)g裝する方法

Promise ベースの API の作成には、ファイル読み取りやデータベース クエリなどの非同期タスクを Promise でラップして、非同期に処理できるようにすることが含まれます。

労働者紹介

Web Workers を使用すると、メインスレッドをブロックせずに、JavaScript コードをバックグラウンドで実行できます。これは、UI の速度が低下するデータ処理などのタスクに役立ちます。

アニメーションのシーケンス

JavaScript では、setTimeout、setInterval、または requestAnimationFrame を使用して、時間指定されたアニメーションまたは連続したアニメーションを作成できます。

---

クライアントサイド Web API

Web API の概要

Web API は、開発者がブラウザーや外部サービスと対話できるようにするインターフェイスです。例には、DOM API、Fetch API、Google マップなどのさまざまなサードパーティ API が含まれます。

ドキュメントの操作

DOM (ドキュメント オブジェクト モデル) を使用すると、要素の選択、コンテンツの追加/削除、スタイルの動的変更など、JavaScript が HTML ドキュメントと対話して操作できるようになります。

サーバーからデータを取得しています

Fetch API は、サーバーからのデータを非同期的にリクエストするために使用されます。これは、古い XMLHttpRequest (XHR) オブジェクトを置き換えます:

let name = "John";
const age = 25;

サードパーティ API

これらは、他のサービス (Twitter、Google マップなど) によって提供される外部 API であり、外部のデータや機能をアプリケーションに統(tǒng)合することができます。

グラフィックを描く

JavaScript を使用すると、 のような API を使用してグラフィックを作成および操作できます。 2D 描畫の場合は要素、3D レンダリングの場合は WebGL。

ビデオおよびオーディオ API

MediaElement API などの API を使用すると、ビデオやオーディオの再生を制御したり、字幕を追加したりできます。メディア ファイル內(nèi)でプログラム的に再生、一時停止、シークを行うことができます。

クライアント側(cè)ストレージ

JavaScript には、クライアント側(cè)でデータを保存するための次のような方法がいくつか用意されています。

• localStorage — 有効期限なしでデータを保存します。
• sessionStorage — ページセッション中にデータを保存します。
• IndexedDB — 大量の構(gòu)造化データ用の低レベル API。

---

これらの概念は、変數(shù)やループの基本から、非同期プログラミング、Web API、クライアント側(cè)ストレージなどの高度なトピックまで、JavaScript の重要な部分をカバーしています。各概念は前の概念に基づいて構(gòu)築されており、動的な Web アプリケーションを構(gòu)築するための強固な基盤を提供します。

以上がJavaScript の主な進歩コンセプトの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。