ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScript のスペシャル

著者：Eve Cole 更新時間：2025-01-07 17:39:30

この章では、これまでに学習した JavaScript の機能を、微妙な部分に特に注意を払いながら簡単にまとめます。

コード構造

ステートメントはセミコロンで区切られます。

アラート('こんにちは');アラート('世界');

通常、改行も区切り文字として扱われるため、これも機能します。

アラート('こんにちは')
アラート('世界')

それは「自動セミコロン挿入」と呼ばれます。場合によっては、たとえば次のように機能しないことがあります。

 alert("このメッセージの後にエラーが発生します")

[1, 2].forEach(アラート)

ほとんどのコードスタイル ガイドは、各ステートメントの後にセミコロンを置くべきであることに同意しています。

コード ブロック{...}の後にはセミコロンは必要ありません。また、ループのようにセミコロンを使用して構文を構築することもできます。

関数 f() {
  // 関数宣言の後にセミコロンは必要ありません
}

のために（;;） {
  // ループの後にセミコロンは必要ありません
}

…しかし、どこかに「余分な」セミコロンを入れることができたとしても、それはエラーではありません。無視されます。

詳細: コード構造。

ストリクトモード

最新の JavaScript のすべての機能を完全に有効にするには、スクリプトを"use strict"で開始する必要があります。

 '厳密を使用';

...

ディレクティブは、スクリプトの先頭または関数本体の先頭になければなりません。

"use strict"を指定しなくてもすべてが機能しますが、一部の機能は昔ながらの "互換性のある" 方法で動作します。一般的には、最新の動作を好みます。

この言語のいくつかの最新機能 (将来学習するクラスなど) は、厳密モードを暗黙的に有効にします。

詳細: 最新のモード「厳密な使用」。

変数

以下を使用して宣言できます。

  • let

  • const (定数、変更不可)

  • var (古いスタイル、後で説明します)

変数名には次のものを含めることができます。

  • 文字と数字。ただし、最初の文字は数字ではない場合があります。

  • 文字$および_文字と同等の通常の文字です。

  • 非ラテン文字や象形文字も使用できますが、通常は使用されません。

変数は動的に型付けされます。任意の値を保存できます。

 x = 5 とします。
x = "ジョン";

データ型は 8 つあります。

  • 浮動小数点数と整数の両方のnumber 、

  • 任意の長さの整数の場合はbigint 、

  • 文字列にはstring 、

  • 論理値のboolean : true/false 、

  • null – 単一値nullを持つ型。「空」または「存在しない」を意味します。

  • undefined – 単一の値undefinedを持つ型、「割り当てられていない」ことを意味します。

  • objectとsymbol – 複雑なデータ構造と一意の識別子については、まだ学習していません。

typeof演算子は値の型を返しますが、次の 2 つの例外があります。

 typeof null == "object" // 言語のエラー
typeof function(){} == "function" // 関数は特別に扱われます

詳細については、「変数とデータ型」を参照してください。

交流

作業環境としてブラウザを使用しているため、基本的な UI 機能は次のようになります。

  • prompt(question, [default])

  • questionをし、訪問者が入力した内容を返すか、「キャンセル」をクリックした場合はnull返します。

  • confirm(question)

  • questionして、[OK] か [キャンセル] のどちらかを選択するよう提案します。選択はtrue/falseとして返されます。

  • alert(message)

  • messageを出力します。

これらの関数はすべてmodalであり、コードの実行を一時停止し、訪問者が応答するまでページを操作できなくなります。

例えば：

 let userName = プロンプト("あなたの名前は?", "アリス");
let isTeaWanted =confirm("お茶は飲みますか?");

alert( "訪問者: " + ユーザー名 ); // アリス
alert( "お茶が欲しい: " + isTeaWanted ); // 真実

詳細: インタラクション: アラート、プロンプト、確認。

オペレーター

JavaScript は次の演算子をサポートしています。

  • 算数

  • 通常: * + - / 、また、剰余を表す%と数値のべき乗を表す** 。

    バイナリのプラス+文字列を連結します。また、オペランドのいずれかが文字列である場合、他のオペランドも文字列に変換されます。

    アラート( '1' + 2 ); // '12'、文字列
アラート( 1 + '2' ); // '12'、文字列

  • 課題

  • 単純な代入があります: a = bと、 a *= 2のような組み合わせです。

  • ビットごと

  • ビット単位の演算子は、最低のビットレベルで 32 ビット整数を処理します。必要な場合はドキュメントを参照してください。

  • 条件付き

  • 3 つのパラメータを持つ唯一の演算子: cond ? resultA : resultB 。 condが真実の場合はresultAを返し、それ以外の場合はresultB返します。

  • 論理演算子

  • 論理 AND &&および OR ||短絡評価を実行し、停止した位置の値を返します ( true / falseである必要はありません)。論理的否定!オペランドをブール型に変換し、その逆の値を返します。

  • ヌル合体演算子

  • ??演算子は、変数のリストから定義された値を選択する方法を提供します。の結果はa ?? b 、 null/undefined限りaであり、その場合はbです。

  • 比較

  • 異なる型の値の等価性チェック== 、値を数値に変換します (互いに等しく、他に何も等しいnullとundefinedを除く)。したがって、これらは等しいです。

    アラート( 0 == false ); // 真実
アラート( 0 == '' ); // 真実

    他の比較も数値に変換されます。

    厳密な等価演算子===変換を行いません。異なる型は常に異なる値を意味します。

    値nullとundefinedは特別です。これらは互いに==に等しく、他の値とは等しくありません。

    大小比較では文字列が文字ごとに比較され、他の型は数値に変換されます。

  • その他のオペレーター

  • カンマ演算子など、他にもいくつかあります。

詳細: 基本的な演算子、数学、比較、論理演算子、NULL 合体演算子 '??'。

ループ

  • 3 種類のループについて説明しました。

     // 1
while (条件) {
  ...
}

// 2
する {
  ...
while (条件);

// 3
for(let i = 0; i < 10; i++) {
  ...
}

  • for(let...)ループ内で宣言された変数は、ループ内でのみ表示されます。ただし、 let省略して既存の変数を再利用することもできます。

  • ディレクティブbreak/continue 、ループ全体/現在の反復を終了できます。ラベルを使用してネストされたループを解除します。

詳細については、「ループ: while および for」を参照してください。

後で、オブジェクトを処理するためのさらに多くの種類のループを学習します。

「スイッチ」構造

「switch」構造は複数のifチェックを置き換えることができます。比較には=== (厳密な等価性) を使用します。

例えば：

 let age = プロンプト('あなたの年齢は?', 18);

スイッチ (年齢) {
  ケース 18:
    alert("動作しません"); // プロンプトの結果は数値ではなく文字列です
    壊す;

  ケース「18」：
    alert("これはうまくいきます!");
    壊す;

  デフォルト：
    alert("上記の値と等しくない値");
}

詳細は「switch」ステートメントを参照してください。

機能

JavaScript で関数を作成する 3 つの方法について説明しました。

  1. 関数宣言: メイン コード フロー内の関数

    関数 sum(a, b) {
  結果 = a + b とします。

  結果を返します。
}

  2. 関数式: 式のコンテキスト内の関数

    let sum = function(a, b) {
  結果 = a + b とします。

  結果を返します。
};

  3. アロー関数:

     // 右辺の式
sum = (a, b) => a + b; とします。

// または { ... } を含む複数行の構文は、ここで return する必要があります:
let sum = (a, b) => {
  // ...
  a + b を返します。
}

// 引数なし
letsayHi = () =>alert("Hello");

// 引数を 1 つ指定する
double = n => n * 2 とします。

  • 関数にはローカル変数、つまり本体またはパラメータ リスト内で宣言された変数がある場合があります。このような変数は関数内でのみ表示されます。

  • パラメーターにはデフォルト値を指定できます: function sum(a = 1, b = 2) {...} 。

  • 関数は常に何かを返します。 returnステートメントがない場合、結果はundefinedなります。

詳細: 関数、アロー関数、基本を参照してください。

さらに今後も

以上が JavaScript の機能の簡単なリストでした。今のところ、基礎的なことしか勉強していません。さらにチュートリアルでは、JavaScript のさらに特殊な機能や高度な機能について説明します。

関連記事