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

JavaScriptの基本構文をまとめて整理する

著者：Eve Cole 更新時間：2022-08-08 08:55:00
この記事では、JavaScript に関する関連知識を紹介します。主に、インターネット上で最も人気のあるスクリプト言語です。皆さんの参考になれば幸いです。

はじめに

JavaScript は、インターネット上で最も人気のあるスクリプト言語であり、HTML および Web に使用でき、サーバー、PC、ラップトップ、タブレット、スマートフォン、その他のデバイスで広く使用できます。

JavaScriptの機能

  • JavaScriptはスクリプト言語です。
  • JavaScriptは軽量のプログラミング言語です。
  • JavaScriptは、HTMLページに挿入できるプログラミングコードです。
  • JavaScriptがHTMLページに挿入されると、すべての最新のブラウザーによって実行できます。
  • JavaScriptは簡単に習得できます。

JavaScriptは、ECMAScriptを通じてECMA（欧州コンピューターメーカー協会）によって言語として標準化されています。

年の名前説明
1997 ECMAScript 1ファーストバージョン
1998 ECMAScript 2
バージョンの変更
ECMAScript 4は
、 「 Strict
Mode 」を
追加して
います。
array.prototype.includes
の

使用法は、

<script>と</script>タグの間に配置する必要があります。スクリプトは、HTMLページの<body> and <head>セクションに配置できます。

多くの場合、ユーザーがボタンをクリックしたときなど、イベントが発生したときにコードを実行する必要があります。 JavaScript コードを関数に入れると、イベントの発生時にその関数を呼び出すことができます。

例1：head 
<！doctype html>

のスクリプト関数

<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title> headタグのスクリプト</title>
    <スクリプト>
        機能myfunction（）{
            document.getElementById（ "demo"）。innerhtml = "これは私の関数です";
        }
    </script>
</head>
<本文>
<h1>私の関数</h1>
<p id = "demo">段落</p>
<button type="button" onclick="myFunction()">これは関数です</button>
</body>
</html>

例2：ボディのスクリプト関数

<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title> body </title>のスクリプト
</head>
<本文>
<h1>私の関数</h1>
<p id = "demo">私の関数</p>
<ボタンタイプ= "button" onclick = "myfunction（）"> </button>をクリックします
<スクリプト>
    機能myfunction（）{
        document.getElementById（ "demo"）。innerhtml = "これは私の関数です"
    }
</script>
</body>
</html>

javascriptは、外部拡張機能が.jsであることに注意することもできます。

例 3: 外部呼び出し JavaScript 外部

call.js

function myFunction() {
    document.getElementById（ 'demo'）。innerhtml = "これは私の関数です"
}

外部スクリプトを呼び出します

<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title>外部スクリプトの呼び出し</title>
</head>
<本文>
<p id = "demo">テキストの段落</p>
<button type = "button" onclick = "myfunction（）">試してみてください</button>
<script src="外部スクリプト.js"></script>
</body>
</html>

出力

JavaScriptデータは、さまざまな方法で出力できます。Window.Alert

  • （）を使用して警告ボックスをポップアップします。
  • document.write（）メソッドを使用して、コンテンツをHTMLドキュメントに書き込みます。
  • innerHTML を使用して HTML 要素に書き込みます。
  • Console.log（）を使用して、ブラウザのコンソールに書き込みます。

例1：aler（）ポップアップウィンドウ出力

<！Doctype HTML>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title>アラート出力</title>
</head>
<本文>
<h1>アラート出力</h1>
<スクリプト>
    Window.Alert（5 + 6）
</script>
</body>
</html>

例 2: document.write() の出力

<!DOCTYPE html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title> document.write output </title>
</head>
<本文>
<h1> document.write output </h1>
<スクリプト>
    document.write（date（））;
    document.write（ "hello、web！"）;
</script>
</body>
</html>

例3：html document

<！doctype html>
に書き込みます
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title> HTMLドキュメントへの書き込み</title>
</head>
<本文>
<h1> HTMLドキュメントに書き込み</h1>
<スクリプト>
    機能myfunction（）{
        document.write（ "関数出力"）;
    }
</script>
<button onclick = "myfunction（）">ここをクリック</button>
</body>
</html>

例4：console.log（）を使用してブラウザのコンソールに書き込みます

<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title> console.log（）を使用して、ブラウザのコンソールに書き込みます</title>
</head>
<本文>
<h1> console.log（）は、ブラウザのコンソール</h1>に書き込みます
<スクリプト>
    a = 5;
    b = 6;
    c = a + b;
    console.log（c）
</script>
</body>
</html>

構文はじめに

JavaScriptはスクリプト言語です。

プログラミング言語の

リテラル

、通常は固定された値はリテラルと呼ばれます。
  • 数字リテラル：整数または小数または科学表記法（e）にすることができます。 3.14、5.88など
  • 文字列リテラル: "一重引用符または二重引用符を使用できます。「Hello」、「Web」など。
  • 式リテラル:計算用の固定値。3 + 2.2、3.14 * 2 など。
  • 配列 (Array ) : リテラル:定義[1,3,4,5,6]などの配列
  • ：{john "、" doe " 、age：eycolor：" "}。
  • 関数リテラル：関数を定義します。たとえば、関数myFunction（a、b）{return a * b;}。

javascript

では

、ステートメントを"; "で終了する必要があることに注意してください

。変数は、データ値を保存するために使用されます。変数を定義
し

、変数を互いに操作することができます。

// var points = x * 10;
「John

」

、LastName：「doe」
}

;

、b）{
    a + bを

返し

  • ます

。

  • JavaScriptはUnicode文字セットを使用します。
  • JavaScriptは、キャメルケースネーミングを使用して変数を定義し、命名のキーワードを回避することをお勧めします。
  • JavaScriptは、型型文字型であり、変数はVARキーワードを使用して定義されています。
javascript
キーワード（アルファベット順
）要約スーパーブール
列enm intスイッチ
エクスポートインターフェイス同期バイト
のスーパーブール
式列挙のインスタンス
このケースレットこの
ケースレットオールスロー
キャッチファイナルネイティブスロー
最終的​​
​​​​
var default public void delete delete return volatileは

、javascriptコメント（javaと同じ）

を

使用
して静的に
doubleを短時間で
インポートします（
Javaと同じ）

/*これはコードです*/：マルチラインコメント、通常はエディターのCtrl + Shift + Lキーです。

ステートメント

JavaScriptステートメントは、ブラウザに発行されたコマンドであり、ブラウザに何をすべきかを伝えます。

次のJavaScriptステートメントは

、

「Hello 
World

！」をIDを使用してHTML要素に出力します

カーリーブラケット、これはJavaに非常に似ています。

Java識別子

関数は。 エラー処理を実装し条件付きステートメントが真の
共通JavaScript識別子
ステートメント説明
ブレークは、ループから抜け出すために使用されます。
CATCHステートメントブロックは、TRYステートメントブロックの実行中にエラーが発生すると実行されます。
続行ループの反復をスキップします。
してください...ステートメントブロックを実行し、条件付きステートメントが真の場合にステートメントブロックの実行を続けます。
条件ステートメントが真の場合に指定された回数のコードブロックを実行できます。
for ... inは、配列またはオブジェクトのプロパティを通過するために使用されます（配列またはオブジェクトのプロパティをループします）。
、異なる条件に基づいて異なるアクションを実行する場合、
関数を定義します
Return Exit関数
スイッチは、さまざまな条件に基づいて異なるアクションを実行するために使用されます。
スロースロー（生成）エラー。
て、CACTと一緒に使用してください。
varは変数を宣言します。
場合、ステートメントブロックを実行します。

ほとんどの言語は、オペレーターの両側にスペースを追加することをお勧めします。ただし、HTMLの使用に注意してください。 JavaScriptでは、次の2つの文が同じです

。VARA= 10;
var b = 10

;

オブジェクト

定義オブジェクト

すべてはオブジェクトであり、同じ特性を持つものの間の特性の抽象的なインスタンスです。人間の間のシャオ・ミンのように。

JavaScript では、オブジェクトは属性変数のコンテナーであり、Python の辞書や Java のハッシュ マップに似ており、オブジェクトの属性を定義します。

var people = {
    FirstName：「マイク」、
    ラスト名：「スミス」、
    年齢：「18」、
    住所：「北京」、
    仕事：「学生」
}

上記の定義はもちろん、私はそれを1行に書くことができます。

オブジェクトのプロパティにアクセスするには、

「JavaScript オブジェクトは変数のコンテナである」と言えます。ただし、通常、「JavaScriptオブジェクトはキー価値ペアのコンテナ」と考えています。キー価値のペアは通常、キーとして書かれています（キーと値はコロンによって分離されます）。また、ユニバーサルを介してプロパティにアクセスします（ほとんどの言語はこれを使用しています）。

<!DOCTYPE html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <title>これはウェブサイトです</title>
</head>
<本文>
<h1>アクセスクラス属性</h1>
<！ - 次のステートメントは、スクリプトの前に来なければなりません - >
<p id = "demo"> </p>
<スクリプト>
    var people = {
        FirstName：「マイク」、
        ラスト名：「スミス」、
        年齢：「18」、
        住所：「北京」、
        仕事：「学生」
    };
    document.getElementById（ "demo"）。innerhtml =
        people["firstName"] + "." + people.lastName;
</script>
</body>
</html>

2つのアクセス方法では、Object name.propertyまたはobject nameを使用できます。["Property"]。

関数 関数は、

呼び出されたときに実行される、イベント駆動型または再利用可能なコードのブロックです。この関数が呼び出されると、関数内のコードが実行されます。関数は、イベントが発生したとき（ユーザーがボタンをクリックするときなど）、JavaScriptによってどこからでも呼び出すことができます。

パラメータと戻り値

関数を呼び出すとき、パラメータと呼ばれる値を渡すことができ、パラメータの数に制限はありません。

機能myfunction（ var1 、 var2 ）
{
コード
}

パラメーターを呼び出す場合、以下に示すように、それらは注文に厳密に渡す必要があります：

<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title>これはJavaScriptのWebサイト</title>です
</head>
<本文>
<h1>関数パラメーターの渡された問題</h1>
<p>下のボタンをクリックして呼び出します</p>
<button onclick = "myfunc（ 'mike'、 '18'、 'beijing'）">ここをクリック</button>
<スクリプト>
    function myfunc（名前、年齢、住所）{
        alert（ "私の名前は「 + name +」、年齢は「 + age +」、私の家は「 +アドレスにあります）;
    }
</script>
</body>
</html>

javaScript関数は戻り値を持つことが許可されており、返されるキーワードは返されます。関数が値を返すと、関数は実行を停止し、返品後のステートメントは実行されません。

例：2つの数値の積を計算し、結果を返します

<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title> JavaScript Webサイト</title>
</head>
<本文>
<h1> 2つの数値の値を計算し、</h1>を返します
<p id = "demo"> </p>
<スクリプト>
    関数myfunc（a、b）{
        a * bを返します。
    }

    document.getElementById（ "demo"）。innerhtml = myfunc（3、4）;
</script>
</body>
</html>

変数

JavaScript 変数は 2 つのタイプに分類されます:

  • グローバル変数: 関数の外で宣言された変数はグローバル変数であり、Web ページ上のすべてのスクリプトと関数がアクセスできます。
  • ローカル変数：JavaScript関数（VARを使用）内で宣言された変数はローカル変数であるため、関数内でのみアクセスできます。

宣言されていないJavaScript変数に値を割り当てると、変数は自動的にウィンドウのプロパティとして扱われます。たとえば、次のステートメント:

name = "Mike";
は、

ウィンドウの属性名を宣言します。非厳密モードで宣言されていない変数に値を割り当てることによって作成されたグローバル変数は、グローバル オブジェクトの構成可能な属性であり、削除できます。例：

var var1 = 1;
console.log（window.var1）;

var1を削除します

var2を削除します。 
console.log（var2を削除）;

console.log

（

var2

）

;

JavaScriptがHTMLページで使用されると、JavaScriptはこれらのイベントをトリガーできます。

HTMLイベントは、ブラウザのアクションまたはユーザーアクションです。以下は、

  • HTMLページの読み込みを終了
  • し
  • ます

。 JavaScriptは、イベントがトリガーされたときに何らかのコードを実行できます。イベント属性は HTML 要素に追加でき、JavaScript コードを使用して HTML 要素を追加できます。

  • 単一の引用：< html-element some-event = ' javascriptコード' >
  • 二重引用符：< html-element some-event = " javascriptコード" >
<！doctype html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title> JavaScriptイベント</title>
</head>
<本文>
<h1>JavaScript イベントを処理する 2 つの方法</h1>
<p id = "demoone"> </p>
<button onclick = "getElementById（ 'demoone'）。innerhtml = date（）"> [時間1] </button>をクリックしてクリックします
<p id = "demotwo"> </p>
<button onclick = "this.innerhtml = date（）">クリックして時間2 </button>を表示します
</body>
</html>

javascriptは通常、マルチラインコードであり、あまり一般的ではないものはイベント属性を介して呼び出されます。

<!DOCTYPE html>
<html lang="ja">
<頭>
    <meta charset="UTF-8">
    <Title> JavaScriptイベント</title>
</head>
<本文>
<h1> javascriptイベント属性コール</h1>
<p>クリックして<em> myfunc（）</em> function </p>を実行します
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        document.getElementById（ "One"）。innerhtml = date（）;
    }
</script>
</body>
</html>
一般的な HTML イベント
イベントの説明
onchange HTML 要素の変更
onclickユーザーが HTML 要素をクリックする
onmouseoverユーザーが HTML 要素上でマウスを移動する
onmouseoutユーザーが HTML 要素からマウスを遠ざける
onkeydownユーザーがキーボード キーを押す
onloadブラウザは、ロード

後もさらに多くのイベントが学習され続ける

ページを完了しました
。

イベントロール

イベントは、フォーム検証、ユーザー入力、ユーザーの動作、ブラウザアクションを処理するために使用できます。

  • イベントは、ページがロードされるとトリガーされ、
  • ページが閉じたときにイベントがトリガーされ、
  • ユーザーはアクションを実行し、
  • 確認します。ユーザー入力コンテンツの正当性を考慮して、

複数のメソッドを使用して

  • JavaScript
  • コードを実行できます。HTML
  • イベント属性では、JavaScript 関数を呼び出すことができます。
  • イベントの発生を防ぐことができ

ます

。

var a = "abc";
var b = "hello";

文字

列内の各文字は、

var c = b [1]
を使用してアクセスできます

。

<!DOCTYPE html>
<html>
<頭>
    <meta charset="utf-8">
    <title>文字列長</title>
</head>
<本文>
<スクリプト>
    var txtone = "hello world！";
    document.write（ "<p>" + txtone.length + "</p>"）;
    var txttwo = "abcdefghijklmnopqrstuvwxyz";
    document.write（ "<p>" + txttwo.length + "</p>"）;
</script>
</body>
</html>

javascriptには特殊文字もあります。たとえば、引用符を印刷する場合は、「」を追加する必要があります。

JavaScript Common Special Character
Code Output
'シングルQuote
" Double Quote
\ backslash
nline Feed
rcarriage Retul
ttab （タブ文字）
bbackspace文字
f Formfeed

文字

文字

文字：var firstName = "Mike"を使用して作成できますが、新しいキーワード
を

使用して、var firstName = new String（ "Mike"）として定義することもできます

プロパティの説明
コンストラクターストリングプロパティの長さを作成する機能を返す
文字列プロトタイプの長さを返すと
、オブジェクト
文字列
共通方法
に
プロパティと
メソッドを追加できます。lastindexof（）は、文字列 ）で抽出された部分を返しの文字列内の文字列の文字列のにはのみに応じて文字列を大文字。大文字にに変換しますの先頭と後続のブランクを削除し
インデックス位置での文字の値は、
2つ
以上の文字列を連結し、
Charcode（）をsuncodeに変換します。
文字列
localecompare（ ）
の指定
された文字の最後の発生の位置を返し
ます。
正規表現マッチングサブストリング
検索（）正規表現スライス（）を抽出する値を取得し
、文字列のフラグメントを抽出し、新しい文字列
分割（
ます。 string index numbers
substring（）数字を抽出する文字列tolocalelowercase（）の2つの指定されたインデックス番号の間に文字列を抽出します
。ホストのロケールに従って文字列を小文字に変換します。 （トルコ語など）局所固有のケースマッピングトロカレ
ウッパーセース（）、ホストのロケール
（トルコなど）に変換します
Lowercaseに変換する
toString（） String Object value
touppercase（）を返しますtouppercase（） stringを大文字の
trim（）string
valueof（）ますobjectの元の値

== ===違い

1。文字列や数字などの基本タイプの場合、

  • ==と=== a）異なるタイプの比較には
違いがあります。
  • 「等しい、===タイプが異なる場合、結果は不平等になります。b
  • ）同じタイプの比較のために、直接「値」の比較は同じ結果になります。

2。アレイとオブジェクトなどの高度なタイプの場合、「ポインターアドレス」の比較には違いは

  • あり

ませ

ん

  • 基本タイプの高度なタイプと「値」の比較
  • b）タイプが異なるため、===結果はfalse

4。 ==

var num = 1;

var str = "1";

var test = 1;

test == num //同じタイプと同じ値テスト=== num //同じタイプと同じ値テスト！非操作は false でなければなりません 

num == str //true str を数値に変換し、等しいかどうかを確認します。 

num！= str // false ==非操作num === str // falseタイプは異なり、falseを直接返す
num
！ == strは、
異なるタイプ

の

numとstが等しくないことを意味します。
x
x = y+2 7 5
-SubTraction x = y -2 3 5
*乗算x = y * 2 10 5
/ division x = y / 2 2.5 5
％ modulo（残り） x = y％2 1 5
++増分x = ++ y 6 6
x = y ++ 5 6
-decrement= -y 4 4
x = y - 5 4
javascript共通割り当て演算子（x = 10、y = 5）
演算子の例は操作と同等です
= x =y x = 5
+= x+= y x = x+y x = 15
- = x- = y x = xy x = 5
*= x*= y x = x*y x = 50
/= x /= y x = x/y x = 2
％= x％= y x = x％y x = 0
x <= 8
javascript共通比較演算子（x = 5）
演算子説明比較復帰値
== x == 8 false
x == 5 true
= = = = = = = = =絶対に等しい（値とタイプの両方が等しい） x === "5" false
x === 5 true
！=等しくないx！= 8 true
！==絶対に等しくない（値とタイプの1つはそうではない等しい、または両方が等しくない） x！== "5" true
x！== 5 false
> x> 8より大きいfalse
< x <8 true
> = x> = 8 false
<= x <= 8 true
<= 8 true <=以下x <= 8 true
javascript共通論理演算子（x = 6、y = 3）
演算子の説明例
&&および（x <10 && y> 1）はtrue
|| or (x== 5 || y==5) is false
! not !(x==y) is true

J​​avaScript には、特定の条件に基づいて変数に値を割り当てる条件演算子も含まれています。例：

variablename =（条件）？value1：value2

条件判断

javascriptでは、次の条件ステートメントを使用できます。

  • ステートメントの場合- 指定された条件が真の場合に、このステートメントを使用してコードを実行します
  • 。 when 条件が true の場合にコードを実行し、条件が false の場合に他のコードを実行します。
  • if...else if....else ステートメント- このステートメントを使用して、複数のコード ブロックの 1 つを選択して実行します。
  • switch ステートメント- このステートメントを使用して、複数の 1 つを選択します。

IFステートメントを

  • 実行するためのコードブロックのうち、

条件が真の場合にのみコードが実行されます。例：

<！Doctype HTML>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <Title> JavaScript Webサイト</title>
</head>
<本文>
<h1>これはIFステートメント</h1>です
<button onclick="myFunc()">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        var x = "";
        var time = new date（）。gethours（）;
        if（time <20）{
            x = "こんにちは、20：00の前に";
        }
        document.getElementById（ "One"）。innerhtml = x;
    }
</script>
</body>
</html>

if ... elseステートメントは、

条件が真の場合にコードを実行するif ... elseステートメントを使用し、条件がfalseの場合は他のコードを実行します。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv="x-ua-compatibility" content="IE=edge">
    <Title> JavaScript Webサイト</title>
</head>
<本文>
<h1>これはif ... elseステートメント</h1>です
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        var x = "";
        var time = new date（）。gethours（）;
        if（time <20）{
            x = "こんにちは、20：00の前に";
        }それ以外 {
            x = "こんにちは、20：00以降";
        }
        document.getElementById（ "One"）。innerhtml = x;
    }
</script>
</body>
</html>

複数if..elseステートメント

<！doctype html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <Title> JavaScript Webサイト</title>
</head>
<本文>
<h1>複数のif ... elseステートメント</h1>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        var x = "";
        var time = new date（）。gethours（）;
        if（time <12）{
            x = "おはようございます";
        } else if（time <14）{
            x = "グッドアフタヌーン";
        }
        それ以外 {
            x = "グッドアフタヌーン";
        }
        document.getElementById（ "One"）。innerhtml = x;
    }
</script>
</body>
</html>

switchステートメント

スイッチステートメントを使用して、実行するコードの複数のブロックのいずれかを選択します。例：

<！Doctype HTML>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>JavaScript ウェブサイト</title>
</head>
<本文>
<h1> switchステートメント</h1>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        var x = "";
        var time = new date（）。getMonth（）;
        switch（time）{
            ケース0:
                x = "1月";
                壊す;
            ケース1:
                x = "February";
                壊す;
            ケース 2:
                x = "March";
                壊す;
            ケース 3:
                x = "April";
                壊す;
            ケース4:
                x = "may";
                壊す;
            ケース5:
                x = "jane";
                壊す;
            ケース6:
                x = "7月";
                壊す;
            ケース7:
                x = "August";
                壊す;
            ケース8：
                x = "9月";
                壊す;
            ケース9：
                x = "10月";
                壊す;
            ケース10：
                x = "11月";
                壊す;
            ケース11：
                x = "12月";
                壊す;
            デフォルト：
                x = "error";
        }
        document.getElementById（ "One"）。innerhtml = x;
    }
</script>
</body>
</html>

ループ

javascriptはさまざまなタイプのループをサポートします：

    for-
  • ループ
  • コードブロック
  • の
  • 特定
  • - 条件が真のときに指定された場合、

ループの

指定されたコードブロックをループ
<！doctype html>
<html>
<頭>
    <meta charset="utf-8">
    <title> javascriptループ</title>
</head>
<本文>
<h1>ボタンをクリックして、コードを5回ループします。 </h1>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "demo"> </p>
<スクリプト>
    関数 myFunc() {
        var x = "";
        for（var i = 0; i <5; i ++）{
            x = x + "数字は" + i + "<br>"です。
        }
        document.getElementById（ "demo"）。innerhtml = x;
    }
</script>
</body>
</html>

fo /in ループ

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>
<p>下のボタンをクリックして、オブジェクトの人属性をトラバースします</p>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        xとしましょう;
        text = "";
        const person = {
            FirstName：「ビル」、
            ラスト名：「ゲート」、
            年齢：56
        };
        for（x直接）{
            text = text + "" + person [x];
        }
        document.getElementById（ "One"）。innerhtml = text;
    }
</script>
</body>
</html>

while loop

<！doctype html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>
<p>ボタンをクリックすると、i が 5 未満の場合に出力が印刷されます</p>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one">ここに表示</p>
<スクリプト>
    functionmyfunc（）{
        x = ""、i = 0とします。
        while（i <5）{
            x = x + "この数値は" + i + "<br>"です。
            i++;
        }
        document.getElementById（ "One"）。innerhtml = x
    }
</script>
</body>
</html>

do/while loop

<！doctype html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv="x-ua-compatibility" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>
<p>ボタンをクリックして5未満の数字を印刷</p>
<button onclick = "myfunc（）">ここをクリック</button>
<p id = "one"> </p>
<スクリプト>
    functionmyfunc（）{
        x = "" とします。
        i = 0とします。
        する {
            x = x + "数字は" + i + "<br>"です。
            i++;
        }
        while（i <5）;
        document.getElementById("one").innerHTML=x;
    }
</script>
</body>
</html>
for loopとwhile loop 
<！doctype html>

の比較

<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p>これはファンコーン</p>です
<button onclick = "funcone（）"> [funcone </button]をクリックします
<p id = "one"> funconeはここにあります</p>

<p>これはfunctwo </p>です
<button onclick="funcTwo()">funcTwo をクリック</button>
<p id = "two"> functwoはここにあります</p>

<スクリプト>
    関数funcone（）{
        数字= [1、2、3、4、5、6、7、8、9];
        i = 0とします。
        アドレス= 0とします。
        while（numbers [i]）{
            アドレス += numbers [i];
            i++;
        }
        document.getElementById（ "One"）。innerhtml = addres + "<br>";

    }

    function functwo（）{
        数字= [1、2、3、4、5、6、7、8、9];
        i = 0とします。
        Mulres = 1とします。
        for（; numbers [i];）{
            mulres *= numbers [i];
            i++;
        }
        document.getElementById（ "2"）。innerhtml = mulres + "<br>";
    }
</script>

</body>
</html>

ブレイクアンド続行

ブレークステートメントは、ループから抜け出すために使用されます。継続は、ループの反復をスキップするために使用されます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>
<p>これは、継続的なステートメントとブレイクステートメントです</p>
<button onclick = "funcone（）"> [funcone </button]をクリックします
<p id = "one">これはfuncone </p>です
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick = "functwo（）"> [functwo </button]をクリックします
<p id = "two">これはfunctwo </p>です
<スクリプト>
    関数funcone（）{
        x = "" とします。
        i = 0とします。
        for（i = 0; i <10; i ++）{
            if（i <5）{
                壊す;
            }
            x = x + "その数字は" + i + "<br>";
        }
        document.getElementById（ "One"）。innerhtml = x;
    }

    function functwo（）{
        x = "";
        i = 0とします。
        for（i = 0; i <10; i ++）{
            if（i === 8）{
                続く;
            }
            x = x + "数字は" + i + "<br>"です。
        }
        document.getElementById（ "2"）。innerhtml = x;
    }
</script>

</body>
</html>

typeof、null、および未定義の

ofof演算子を使用して、変数のデータ型を検出します。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>
<p id = "one"> </p>
<スクリプト>
    document.getElementById（ "One"）。innerhtml =
        typeof "john" + "<br>" +
        typeof 3.14 + "<br>" +
        typeof false + "<br>" +
        typeof [1、2、3、4] + "<br>" +
        typeof {name： 'John'、age：34};

</script>

</body>
</html>

JavaScriptでは、配列は特別なオブジェクトタイプです。 したがって、typeof [1,2,3,4]はオブジェクトを返します。

ヌルは空、つまり「何もない」という意味です。 Typeof検出を使用すると、オブジェクトが返されます。オブジェクトは未定義を使用してクリアできます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv="x-ua-compatibility" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>
<p> 1つ：</p>
<p id = "one"> </p>
<p> 2：</p>
<p id = "2"> </p>

<スクリプト>
    var person = {firstName： "bill"、lastName： "gates"、age：50};
    var person = null;
    document.getElementById（ "One"）。innerhtml = typeof person;
    人=未定義
    document.getElementById（ "2"）。innerhtml = typeof person;
</script>

</body>
</html>

コンストラクタープロパティコンストラクター

プロパティは、すべてのJavaScript変数のコンストラクターを返します。コンストラクタープロパティを使用して、オブジェクトが配列か日付か（文字列「日付」を含む）かどうかを確認できます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv="x-ua-compatibility" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>コンストラクター属性は、変数またはコンストラクタを返します</p>
<p id="one">HRER</p>
<スクリプト>
    document.getElementById("one").innerHTML =
        「こんにちは」.constructor + "<br>" +
        3.14.Constructor + "<br>" +
        false.constructor + "<br>" +
        [1、2、3] .constructor + "<br>" +
        {name： "hello"、age：18} .constructor + "<br>" +
        new date（）。コンストラクター + "<br>" +
        関数 （） {
        }。コンストラクタ;
</script>

</body>
</html>

型変換

javascript変数は
、

新しい変数または他のデータ型に変換でき

  • ます
  • 。
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p> string（）メソッドは、数値を文字列に変換できます</p>
<p id = "one">ここ</p>
<p> toString（）メソッドは、数値を文字列に変換できます</p>
<p id = "2">ここ</p>
<スクリプト>
    x = 123とします。
    document.getElementById（ "One"）。innerhtml =
        文字列（x） + "<br>" +
        文字列（123） + "<br>" +
        文字列（100 + 23）;
    document.getElementById（ "2"）。innerhtml =
        x.toString（） + "<br>" +
        （123）.toString（） + "<br>" +
        （100 + 123.2）.toString（）;
</script>

</body>
</html>

Unary Operator+

Operator+を使用して、変数を数値に変換できます。

<！Doctype HTML>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p> typeof演算子は、変数または式タイプ</p>を返します
<button onclick = "myfuncone（）">ここをクリック</button>
<p id = "one">ここ</p>
<button onclick="myFuncTwo()">ここ 2 つをクリック</button>
<p id = "2">ここ</p>
<スクリプト>
    機能myfuncone（）{
        y = "5"とします。
        x = +yとします。
        document.getElementById（ "One"）。innerhtml =
            typeof y + "<br>" + x + "<br>" + typeof x;
    }

    機能myfunctwo（）{
        a = "hello";
        b = +aとします。
        document.getElementById（ "2"）。innerhtml =
            typeof a + "<br>" + b + "<br>" + typeof b;
    }

</script>
</body>
</html>
" 20
javascriptタイプ変換
プリミティブ値変換数への変換弦への変換
false 0 " false
true 1 " true " true
0 0 " 0 " false
1 1 " 1 " true
" 0 " 0 " 0 "" True
"000" 0 "000" True
"1" 1 "1" True
Nan Nan " Nan" false
Infinity " Infinity" true
-infinity -infinity "-infinity" true
"" " 0 " "" " false
" 20 "20" 20 "20" 20 "20" 20 " 20"20" 20 " " true
" runoob " nan " runoob " true
[] 0 " " true
[20] 20 " 20 " true
[10,20] nan " 10,20 " true
[" runoob "] nan " runoob " true
[" runoob " 、 "Google"] Nan "Runoob、Google" True
Function（）{} nan "function（）{} "
true { } nan
" [ object object
] " True Null

0

正規表現（英語：正規表現、しばしば正規表現、Regexp、またはRe in codeのRe）は、単一の文字列を使用して、特定の構文ルールに準拠する一連の文字列検索パターンを記述および一致させます。

Search（）は

、指定されたサブストリングを文字列内のサブストリングを取得するか、正規表現に一致するサブストリングを取得し、サブストリングの開始位置を返すために使用されます。

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p>文字列を取得し、位置を一致させます</p>

<button onclick = "myfuncone（）">ここをクリック</button>
<p id = "one">ここ</p>

<button onclick = "myfunctwo（）">ここをクリック</button>
<p id = "2">ここ</p>

<スクリプト>
    機能myfuncone（）{
        let str = "hello、world！";
        document.getElementById("one").innerHTML = str.search(/World/i);
    }

    機能myfunctwo（）{
        str = "welcome to china！";
        document.getElementById（ "2"）。innerhtml = str.search（ "china"）;
    }
</script>

</body>
</html>

置換（）は、

一部の文字を文字列内の他の文字に置き換えるか、正規表現に一致するサブストリングを置き換えるために使用されます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p>正規表現置換（）交換</p>

<button onclick = "myfuncone（）"> [1つ] </button>をクリックします
<p id = "one">こんにちは、java </p>

<button onclick = "myfunctwo（）"> [2つ] </button>をクリックします
<p id = "two">こんにちは、java </p>

<スクリプト>
    機能myfuncone（）{
        let str = document.getElementById（ "One"）。innerhtml;
        document.getElementById（ "One"）。innerhtml = str.replace（/java/i、 "python"）;
    }

    機能myfunctwo（）{
        let str = document.getElementById（ "2"）。innerhtml;
        document.getElementById（ "2"）。innerhtml = str.replace（ "java"、 "javascipt"）;
    }
</script>

</body>
</html>

正規表現パターン

正規表現修飾子
修飾子説明
ケース非感受性マッチングを実行します。
Gはグローバルマッチを実行します（最初の試合が見つかった後に停止するのではなく、すべての試合を見つけます）。
mはマルチラインマッチングを実行します。
正規表現特殊文字
式の説明
[ABC]は、正方形の括弧の間にある文字を見つけます。
[0-9]は0から9までの任意の数を見つけます。
（x | y） |で区切られたオプションを見つけます。
正規表現定量因子
定量剤説明
n+は、少なくとも1つのnを含む任意の文字列に一致します。
n*は、ゼロ以上のnを含む任意の文字列と一致します。
n ？

test（）は、

文字列が一致するテキストが含まれている場合、trueを返すかどうかを検出するために使用されます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<スクリプト>
    obj = new regexp（ "e"）;
    let boolone = obj.test（ "こんにちは、これはjavascript"）;
    let booltwo = obj.test（ "これはjavascript"）;
    document.write（boolone + "<br>" + booltwo）;
</script>

</body>
</html>

exec（）は、

一致する結果が保存される配列を返すために、正規表現の一致を取得するために使用されます。一致が見つからない場合、返品値はnullです。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <Meta http-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<スクリプト>
    obj = new regexp（/e/）;
    resone = obj.exec（ "こんにちは、これはjavascript"）;
    RESTWO = obj.exec（ "これはjavascript"）;
    /*null*/
    document.write（resone + "<br>" + restwo）;
</script>

</body>
</html>

エラー例外

エラータイプ

  • JavaScriptエンジンがJavaScriptコードを実行すると、さまざまなエラーが発生します。
  • これは構文エラーである可能性があります。通常、プログラマーが作成したコーディングエラーまたはタイプミスです。
  • スペルミスまたは言語の機能が欠落している可能性があります（おそらくブラウザの違いが原因です）。
  • エラーは、サーバーまたはユーザーからの出力が誤っていないためになる可能性があります。
  • もちろん、それは他の多くの予測不可能な要因によるものである可能性もあります。

try ... CACT

THE TRY THE STATEMEでは、実行中にエラーがテストされているコードブロックを定義できます。CACTステートメントにより、TRYコードブロックでエラーが発生したときに実行されるコードブロックを定義できます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<入力型= "button" value = "view message" onclick = "myfunc（）">
<スクリプト>
    txt = "";

    functionmyfunc（）{
        試す {
            alert111（ "こんにちは、世界！"）
        }
        catch（err）{
            txt = "ここにエラーがあります n  n";
            txt + = "エラー説明：" + err.message + " n  n";
            txt += "[OK]をクリックして n  n"を続行します。
            アラート（TXT）
        }
    }
</script>

</body>
</html>

スローステートメント

を使用すると

、カスタムエラーを作成できます。

正しい技術用語は、例外を作成またはスローすることです。 Try Try CatchでThrowを使用する場合、プログラムフローを制御し、カスタムエラーメッセージを生成できます。

<!DOCTYPE html>
<html lang = "zh-cn">
<頭>
    <Meta http-equiv = "content-type" charset = "utf-8">
    <メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
    <title>タイトル</title>
</head>
<本文>

<p> 5〜10 </p>の数字を入力してください
<label for = "one"> </label> <input id = "one" type = "text">
<ボタンタイプ= "button" onclick = "myfunc（）"> </button>をクリックします
<p id = "message">ここ</p>

<スクリプト>
    functionmyfunc（）{
        メッセージをしましょう。
        xとしましょう;
        message = document.getElementById（ "メッセージ"）;
        message.innerhtml = "";
        x = document.getElementById（ "One"）。value;
        試す {
            if（x === ""）
                「値は空」をスローします。
            if（isnan（x））
                throw "不是数字";
            x = Number(x);
            if (x < 5)
                throw "太小";
            if (x > 10)
                throw "太大";
        } キャッチ (エラー) {
            message.innerHTML = "错误" + error;
        }
    }
</script>

</body>
</html>

函数调用

JavaScript 函数有4 种调用方式，每种方式的不同在于this的初始化。一般而言，在Javascript中，this指向函数执行时的当前对象。

调用1：作为一个函数调用

one

function myFunc(a, b) {
    return a * b;
}

myFunc(1, 2);

two

function myFunc(a, b) {
    return a * b;
}

window.myFunc(1, 2);

调用2：函数作为方法调用

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>函数作为方法调用</p>
<p id="one">HERE</p>

<スクリプト>
    let myObject = {
        firstName: "Bill",
        lastName: "Gates",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("one").innerHTML = myObject.fullName();
</script>

</body>
</html>

调用3：使用构造函数调用函数

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>该实例中，myFunc()是函数的构造函数</p>
<p id="one"></p>
<スクリプト>
    function myFunc(argOne, argTwo) {
        this.Name = argOne;
        this.Number = argTwo;
    }

    let x = new myFunc("Hello", 123);
    document.getElementById("one").innerHTML = x.Name;
</script>

</body>
</html>

调用4：作为函数方法调动函数

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>作为函数方法调动函数</p>
<p id="one">HERE</p>

<スクリプト>
    let obj, array;

    function myFunc(a, b) {
        return a * b;
    }

    array = [5, 6];
    obj = myFunc.apply(obj, array);
    document.getElementById("one").innerHTML = obj;
</script>

</body>
</html>

闭包

内嵌函数

实际上，在JavaScript中，所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数，嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量：

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>内嵌函数</p>
<p id="one">HERE</p>

<スクリプト>
    document.getElementById("one").innerHTML = add();

    関数 add() {
        let counter = 0;

        function plus() {
            counter += 1;
        }

        プラス（）;
        return counter;
    }
</script>

</body>
</html>

闭包

函数的自我调用称为bibao

<!DOCTYPE html>
<html lang="zh-CN">
<頭>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>タイトル</title>
</head>
<本文>

<p>局部计数器</p>
<button type="button" onclick="myFunc()">计数器</button>
<p id="one">HERE</p>

<スクリプト>
    let add = (function () {
        let counter = 0;
        return function () {
            return counter += 1;
        }
    })();

    function myFunc() {
        document.getElementById("one").innerHTML = add();
    }
</script>
</body>
</html>
関連記事