JavaScriptのクイックスタート

その他 2019-08-01 10:13:45 訪問数: null

1.コンセプト

JavaScriptはクライアント側でスクリプト言語（コンパイルせずに、実行は直接ブラウザを解決することができます）、クライアントのブラウザで実行されている、ブラウザのJavaScriptエンジンを解析しています。

JavaScriptの効果

  • htmlページが動的効果の数を持つように、HTMLページとユーザーとの対話を増やし、ユーザーエクスペリエンスを向上させます。

JavaScriptの開発の歴史

  1. C--：1992年、Nombase会社、という名前のフォーム検証のために設計された最初のドアのクライアント側のスクリプト言語を開発しました。JScriptのは、表示された後、ScriptEaseの名前を変更しました。

  2. 1995年には、ネットスケープ（Netscapeの）会社は、クライアント側のスクリプト言語を開発しました：LiveScriptを。SUN会社は、後に最終的にはJavaScriptという名前の専門家を、LiveScriptを変更し、雇いました。

  3. 1996年、Microsoftは盗作はJavaScript JScriptの言語を開発しました。

  4. ECMAScriptの：1997年、ECMA（欧州電子計算機工業会）は、すべてのクライアント側のスクリプト言語のための標準を開発します。

だから、独特のJavaScript =のECMAScript + JavaScriptの何か（BOM + DOM）

2. ESMAScript：標準のクライアント側のスクリプト言語

2.1基本的な構文

2.1.1方法と組み合わせるHTML

私たちは、使用し<script>、内部および外部JS JS二つの方法を組み合わせることがJavaScriptとHTMLファイルにタグを。

使用時には<script>前のラベルに、我々は、以下の2つの考慮事項を知っている必要があります。

  1. でHTMLページの任意の位置は、使用することができます<script>タグを、しかし、順序はhtmlコードを実行される、つまり、状況のページに影響を与えるJavaScriptコードは、別の場所に書かれています。

  2. htmlファイルでは、**あなたは複数定義することができる<script>のタグを。

1.内部JS

使用済み<script>ラベルは、JavaScriptコードは、タグ本体に書かれています。

サンプルコード：

<script>
    alert("内部JS");
</script>

2.外部JS

定義された<script>JS外部ファイルのsrc属性を導入することにより、タグを。

サンプルコード：

<script src='js/a.js'></script>

2.1.2注意事項

ノートJava言語とシングルラインとマルチラインと一致した方法は、二つの種類のコメント。

  1. 単一行コメント：//脚注

  2. 複数行コメント：/ *コメント*コンテンツ/

2.1.3データ型

データ型とデータ型と参照型に元のデータと一致したJava言語の種類で、そのデータとJavaの型が変わります。

1.元のデータ型

  1. 数

    デジタル。これは、整数、小数、およびNaN（非数ではなく、数値型の数）は、3つに分割されています。NaNの任意デジタル位相演算結果またはNaN。

  2. 弦

    文字列のために、我々は注意するには、2つのものを持っています：

    1. 文字列は、Javaクラスであり、したがって、参照データ型であるが、JavaScriptでは、文字列がプリミティブデータタイプです。

    2. 文字は、JavaScriptの変数に存在しないし、単一および二重引用符は、文字列型の変数である、例えば「」文字列型の変数です。

    ただし、引用符で同じ引用符場合、必要とする\エスケープします。単一引用符「エスケープ[」]、二重引用符「[]エスケープ」。もちろん、我々はまた、内層に単一引用符を使用し、二重引用符でクォートする必要があるかもしれません。

  3. ブーリアン

    ブール変数。真と偽の値の2つだけ種類。

  4. ヌル

    これは、プレースホルダオブジェクトが空で表します。

  5. underfined

    表現が定義されていません。変数に値が初期化されていないと宣言されている場合は、暗黙的にunderfinedが割り当てられます。

2.参照データ型

これは、オブジェクトであり、それを意味し、他のオブジェクト指向言語では一致しています。

2.1.4変数

変数：データを格納するメモリ

異なるJavaScriptとJavaは、Javaがあり、強く型付けされた言語 JavaScriptがある一方で、緩やかに型付けされた言語。

  • 強く型付けされた言語：メモリ空間を開くために、データ・ストレージ・スペースのデータ型を定義します。あなただけのことができ、データの固定式を保存します。

  • 弱く型付け言語：あなたは、メモリ空間を開くと、データ・ストレージ・スペースのデータ型を定義していません。あなたはできる異なるタイプのデータを保存します。

変数の構文を使用して

  • 変数を定義します。var 变量名 = 变量值

  • 変数の型を参照してください。使用typeof(变量名)例（NUM）、変数の型を確認することができます機能をtypeof演算

JavaScriptは、我々はできるの形式で出力文字列のHTMLコードを使用たとえば、document.write("<input type='text' />")ページ上のテキスト入力ボックスを表示します。

変換のJavaScriptの変数型

JavaScriptでは、変数は、業務に関わる計算の種類要件、そしてJavaScriptエンジンは自動的に変数の型変換に従わない場合。

  • 転送タイプ番号の他のタイプ

    1. 文字列のターン数

      リテラル値に応じて変換し、文字列リテラルが数値でない場合、それはNaNに変わります。

    2. ブール转数

      真0に偽、1に変換します。

  • 転送型booleanの他のタイプ

    1. 数转ブール

      0またはNaNが偽で、他の数は真です。

    2. 文字列转ブール

      空の文字列（「」）に加えて、他のは本当です。

    3. ブール値またはnullターンunderfined

      ヌルとunderfinedはfalseです。

    4. 参照データ型

      データ・タイプへのすべての参照、限り（すなわち、NOT NULL）の存在は、真です。

お問い合わせの際のtypeof nullは実際にある「オブジェクト」を返します。これは実際にはJavaScriptのバグですが、ECMAScriptのが続いていたが、技術的には、nullがまだ元の値の一つです。

2.1.5演算子

多くの事業者や他のプログラミング言語は、似ている別の事業者の彼らの通常の使用方法で使用される注意と言語を払う必要があります

1.単項演算子

算術演算子の数のみ：+、 - 、+（プラス）、 - （マイナス）

  • 符号（+、 - ）：可変数のタイプにそれを強制するために、変数の他のタイプに使用される前に。

2.算術演算子

一般に、可変回転数の他のタイプの、可変数のタイプに基づいて、（+文字列型変数にスプライシングされ得る）を行う算術演算子は、前述の型変換を見ることができます。

+、 - 、*、/、％、など

3.代入演算子

=、+ =、 - =、等

4.比較演算子

同じ変数の型の比較演算子、直接比較のために、変数の異なる種類の、最初のタイプの変換、を比較した場合。

場合は文字列の比較、プレス辞書式は、各比較の結果を知るためのビット単位の比較しました。

<=、> =、>、<、===（合同）

  • 等しい完全===に異なるタイプが直接falseを返す場合、型比較を決定する前に：。

論理演算子

論理演算子が動作するための基礎としてブール変数であり、変数の他のタイプは、特定の変換規則の前に導入されたブール変数テキストに変換されなければなりません。

&&、|| ,!

6.三項演算子

表达式 ? 值1 : 值2：; falseを返します値2がJavaで表示されますが、それでも特別な注意が、まず、式の値が真であるかどうかをtrueに返り値を決定します。これは、速記判決文です。

2.1.6フロー制御文

Javaのに似たフロー制御文が、受け入れられているswitch文のデータ型に注意を払います。

  1. ... ELSE ... if文

  2. switchステートメント

    • Javaでは、switch文は、バイト、int型、短い、CHAR、唯一の6つのデータタイプの列挙（1.5開始）と文字列（1.7スタートを）受け入れます。

    • JavaScriptでは、文を切り替える任意のプリミティブデータ型を受け取ります。

  3. while文

  4. 声明では、一方で...ん...

  5. for文

2.1.7特別な構文

ここでの違いJavaScriptとJava構文について話をします。

  1. JavaScriptは、文はセミコロンである必要がない;だけで1行の文はセミコロンを追加することができない場合は、最後に;が、順番にセミコロンを省略しないように最善と考える標準化します。

  2. あなたは、変数を宣言する際にJavaScriptは、あなたが使用することはできませんvarキーワードを、単に時間変数法の機能に違いがあることを知らせます。

    • 変数を宣言するVARを使用します。ローカル変数を宣言します。

    • 変数を宣言するVARを使用しないでください（推奨されません）：グローバル変数を宣言します。

    しかし、それはあっても、常にvarキーワードを使用して、in vitroでのメソッド宣言のすべての限り、変数を宣言するVARを使用することをお勧めします、スコープは、すべてのJSコードです。

次の図を印刷するには、JavaScriptの乗算テーブルを使用します。

乗算テーブルのデモ

 <html>
    <head>
        <title>九九乘法表</title>

        <style>
            td {
                border: 1px solid;
            }
        </style>

        <script>
            document.write("<table align='center'>");

            for (var i = 1; i <= 9; ++i) {
                document.write("<tr>");
                for (var j = 1; j <= i; ++j) {
                    document.write("<td>");

                    // 输出 1*1=1
                    document.write(i + "*" + j + "=" + (i * j) + "&nbsp;&nbsp;&nbsp;");

                    document.write("</td>");
                }
                document.write("</tr>");
            }

            document.write("</table>");
        </script>
    </head>

    <body>

    </body>
</html>

2.2基本的なオブジェクト

2.2.1機能：関数オブジェクト

1.作成します。

  1. 推奨function 方法名称(element0, element1,...) { 方法体 }

    // 由于所有函数声明都是使用 var 关键字
// 因此这里可以省略 var 关键字，当然也可以使用 var
function fun1(a, b) {
    // 方法体
}

  2. var 方法名 = function(element0, element1,...) { 方法体 }

    var fun2 = function() {
    // 方法体
}

  3. （一般的ではない、あなたが理解することができます）var fun = new Function(形式参数列表, 方法体);

2.一般的なプロパティ

  • 長さの数を表すパラメータ

3.特長

  1. （変数の宣言の唯一のこの種のため、varキーワード）、また、メソッドに渡されたパラメータが型を宣言するためにvarキーワードを使用することはできませんタイプを返しませんでした。

  2. メソッドはオブジェクトで同じメソッドの名前を定義し、新しいメソッドが古いメソッドをオーバーライドします（つまり、オーバーロードは存在しません）。

  3. JavaScriptでは、唯一の方法の名前が関連して引数リストには無関係されてメソッドを呼び出します。

  4. メソッド宣言では、隠された組み込みオブジェクト（配列）引数は、JavaScriptの方法は、異常な柔軟性を使用することができる実際のパラメータ、の全てをカプセル化があります。

以下のようなコードを参照してください。

function addAll() {
    var sum = 0;
    // 算出所有传入参数的和
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

var sum = addAll(1, 2, 3);
alert(sum);

図に示す実行結果：

機能のデモ

2.2.2配列：オブジェクトの配列

1.作成します。

  1. var 数组名 = new Array(element0, element1,...)

  2. var 数组名 = new Array(size)

  3. var 数组名 = [element0, element1,...]

  4. var 数组名 = new Array()

var arr1 = new Array(1, 2, 3);
var arr2 = new Array(5);
var arr3 = [1, 2, 3, 4];
var arr4 = new Array();     // 创建一个空的数组

// 需要注意的是，如果我们希望创建初始只含一个元素的数组
var arrOneEle = [4];    // 这是对的，只含一个元素4
// var arrError = new Array(4);  错误的写法，这样是创建长度为4的数组

2.特長

  1. 配列は要素の複数のタイプを持つことができます。

  2. 可変長配列（配列の長さは、自動的にJavaのようなコレクションを成長します）。

参照は、コードのセットを、次のとおりです。

var arr = [1, "string", true];

// 依次输出1，string 和 true
document.write(arr[0] + "<br/>");
document.write(arr[1] + "<br/>");
document.write(arr[2] + "<br/>");

// 虽然数组初始长度是3，我们也可以直接使用arr[5]
arr[5] = "auto";
// 能够正确地输出 atuo
document.write(arr[5] + "<br/>");

// 因为arr[4]没有定义，所以会输出 underfined
document.write(arr[4] + "<br/>");

次のようにショットを実行します。

使用ARRの例

3.一般的な方法

  1. join(分隔符)：指定されたスプライスデリミタの配列の要素および（セパレータとして区切り文字を指定しない場合、デフォルトのコンマ「」）文字列を返します

  2. push(元素)：配列尾部に要素を追加します

2.2.3日付：Dateオブジェクト

Javaで同様のオブジェクトの日

1.作成します。

  1. var date = new Date();

2.一般的な方法

  1. toLocalString()：ローカルコンピュータの時刻の文字列形式に現在の日付を返します。

  2. getTime()：Dateオブジェクトは、1970年1月1日違いで0:00現在の時刻とミリ秒を返します。

学習します

数学

正規表現

グローバル

ブーリアン

数

弦

3. GOOD

BOM（BrowserObjectModel）、ブラウザのオブジェクトモデルは、ブラウザは、成分をカプセル化されます。

どのようなブラウザを構成します

  1. Nevigatorオブジェクト：ブラウザ自体（重要ではありません）

  2. ウィンドウオブジェクト：全体的に対応するHTMLタブページ

    ウィンドウオブジェクトでは、ブラウザのように、次のオブジェクト：

    1. Locationオブジェクト：オブジェクトのアドレスバー

    2. 履歴オブジェクト：オブジェクトの歴史

    3. Screenオブジェクト：表示オブジェクト、コンピュータ全体の画面（重要ではありません）

上記の目的のウィンドウオブジェクトは、ページの本文を含んでいないことに留意されたいです。実際には、ページの本文のこの部分はに、それだけでは、あまりにも重要であるため、DOMでこのクラスのドキュメントオブジェクト。

BOMオブジェクト図：

GOOD

3.1ウィンドウオブジェクト

オブジェクトを作成せずにウィンドウが、あなたは直接キーワード[ウィンドウ]を呼び出すことができます

使用window中的方法时，window引用可以省略，也就是可以直接通过方法名进行调用，例如alert()方法就是window中的方法，这是，实际上是当前标签页的window对象调用了这些方法，类似与 Java 中的 this。

1.常用方法

  1. 与弹出提示窗有关的方法

    1. alert()：显示带有一段消息和一个确认按钮的警告框。

    2. confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框。

    confirm方法的返回值为boolean类型。如果用户点击确认则返回true，用户点击取消则返回false。

    confirm的示例代码：

    var hasConfirm = confirm(这是confirm，确认对话框);

// 根据用户点击不同按钮会有不同的弹窗
if (hasConfirm) {
    alert("点击了确认");
} else {
    alert("点击了取消");
}
    1. prompt(string)：显示可提示用户输入的对话框。

    可以向prompt方法传入string类型的参数（其实在js中其他类型的变量也会被转换成string），这个传入的string就是出现输入框时会出现的提示字符。

    prompt方法的返回值是一个string类型的变量，是用户在输入框中输入的值。

    prompt示例代码：

    var inputString = prompt("可以在该对话框进行输入");

// 这里会弹出用户刚刚输入的值
alert(inputString);

  2. 与窗口的打开和关闭有关的方法

    1. open("url")：在新窗口中打开指定url，如果没有指定url则会打开一个空白页。返回值是打开的新窗口的window对象。

    2. window.close()：关闭调用这个close方法的window对象，如果直接使用close方法，其实是用当前页面的window对象调用了close方法，也就是关闭当前页面。

  3. 与定时器有关的方法

    1. setTimeout("js代码", number)：一次性定时器，在指定number（会自动转换为整数）的毫秒后调用一次传入的js代码，之后不再起作用。

    setTimeout方法的返回值是这个定时器的id，id是一个number类型的变量。

    setTimeout方法示例：

    function fun() {
    alert("时间到了");
}

// 下面三个语句是等价的
setTimeout(fun, 2000);
setTimeout("fun();", 2000);
setTimeout("alert('时间到了');", 2000); // 注意，在这里我们在双引号中需要使用引号时使用了单引号，否则要对内部的双引号进行转义

    1. setInterval("js代码", number)：循环定时器，每隔指定number（会自动转换为整数）的毫秒就调用传入的js代码。用法和setTimeout方法类似。

    2. clearTimeout(id)：撤销指定id的定时器（其实定时器id就是一个number类型的变量），其调用后撤销对应id的定时器。

2.常用属性

  1. 获取其它BOM对象的属性

    1. history：获取history对象

    2. location

    3. Navigator

    4. Screen

  2. 获取DOM对象

    1. document：所以，我们使用使用DOM的document.方法时，实际上是先用当前标签页的window获取了DOM对象，再通过DOM对象调用方法。

3.2 Location对象

我们可以通过window.location或location来获取一个location对象。

1.常用方法

  1. reload()：重载当前文档，即刷新当前页面。

    在页面上实现一个刷新按钮：

    <body>
// 这里直接将按钮和js代码耦合了
<input type='button' id='button' value='刷新' onclick='reload();' />
<body>

2.常用属性

  1. href：浏览器地址，要改变Location的地址（即要将当前标签页前往另一个网址），地址前面要加【http】或【https】协议。

3.3 History对象

History 对象包含用户在当前标签页中访问过的 URL。

和Location对象类似，我们可以通过window.history或history来获取一个history对象。

1.常用方法

  1. back()：加载 history 列表中的上一个 URL。

  2. forward()：加载 history 列表中的下一个 URL。

  3. go(number)：加载 history 列表中的某个具体页面，具体情况根据 number 的值决定。

    对于go方法中，我们希望传入的 number 参数是一个整数，如果是一个正数，则是前进正数个历史纪录；如果是一个负数，则后退其绝对值个历史纪录。例如，-5为后退5个历史纪录。

    也就是说，history.go(-1)和history.back()是等价的；同样的，history.go(1)和history.forward()是等价的。

2.常用方法

  1. length：返回当前标签页的历史 URL数目。

4. DOM

当网页被加载时，浏览器会创建页面的文档对象模型 DOM（Document Object Model）。

DOM（Document Object Model），文档对象模型，将标记语言文档（即html文档）封装成一个对象。

DOM 是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准。

W3C DOM 标准被分为三个不同的部分：

  1. 核心 DOM：针对任何结构化文档的标准模型

    • Document：文档对象

    • Element：元素对象（也就是 HTML 中的标签）

    • Text：文本对象（HTML 表单中的文本输入域，如 text 类型的 input）

    • Comment：注释对象（就是 HTML 中的注释）

    • Attribute：属性对象（每个标签对应的每个属性都是一个属性对象）

    • Node：节点对象，上述5个对象的父对象

  2. HTML DOM：针对 HTML 文档的标准模型

  3. XML DOM：针对 XML 文档的标准模型

HTML 的 DOM 模型将被构造为对象的树：

DOMツリー

上述的树形图并不用强行记忆，如果我们拥有一个良好的 html 编码规范的话，我们可以发现上面树形结构和 html 中的缩进格式是相对应的。

通过使用 DOM，JavaScript 拥有以下能力，可以用于创建一个动态的 HTML：

  • 改变页面中所有的 HTML 元素

  • 改变页面中所有的 HTML 属性

  • 改变页面中所有的 CSS 样式

  • 对页面中所有事件做出反应

4.1 核心 DOM

HTML DOM 对原生的核心 DOM 修改比较多而 XML DOM 对其修改比较少。因此我们在学习核心 DOM 时可以查找 XML DOM 的资料。

1.Document 对象

Document 对象的位置在前文 BOM 对象的布局管理中出现过，其实就是标签页中 html 起作用的那块主体部分。

对于 HTML，我们可以使用 window 对象来获取 document 对象，window.document和document是等价的。

1. 常用方法

  1. 获取 Element 对象

    1. getElementById(id)：根据元素 id 来获取特定元素，id 属性值一般唯一。

    2. getElementByNmae("name")：根据元素名称来获取符合名称的元素对象。

      因为元素的 name 可能重复，所以 getElementByName 方法返回值是一个元素数组。

    3. getElementByClassName("class")：根据元素的 class 来获取该类型的元素对象。

      和 getElementByName 方法类似；因为元素的 class 可能重复，所以 getElementByClassName 方法返回值是一个元素数组。

    4. getElementByTagName("element")：根据元素的种类来获取该类型的元素对象。例如getElementByTagName("div")就是获取所有 div 标签元素的集合。

      显然，一个页面中可以出现很多个同一种类的元素，所以 getElementByTagName 方法的返回值也是一个元素数组。

2.创建其它 DOM 对象

在学习以下方法之前，我们要知道核心 DOM 总共有哪些对象；共6个对象，Element、Comment、Text、Document和Node，这在本章节开头有介绍。

  1. createAttribute(name)：创建指定名称的属性节点，并返回新的元素对象 Attribute。

  2. createComment()：创建注释节点

  3. createElement()：创建一个新的元素对象

  4. createTextNode(value)：创建文本节点

4.1.1 Element 对象

获取/创建

通过前文介绍的方法，使用 document 来获取和创建。

常用方法

  1. setAttribute("属性名", "属性值")：设该元素特定属性的属性值

  2. removeAttribute("属性名")：删除该元素的特定属性

    例如:

    <body>
    <a>测试用标签</a>
</body>

<script>
// 1. 获取前面的超链接标签
//  因为只有一个，所以可以直接指定为数组中元素索引0的元素
var element_a = document.getElementByTagName("a")[0];
// 2. 设置超链接的目标地址
element_a.setAttribute("href", "https://www.baidu.com");
// 3. 移除超链接的目标地址
element_a.removeAttribute("href");
</script>

4.1.2 Node 对象

所有的 DOM 对象都可以当作一个 Node 对象使用，它们构成了一个 DOM 树。

1.常用方法

对 DOM 树进行 CRUD 操作

  1. appendChild()：在当前节点的子节点列表的结尾添加新的子节点

  2. removeChild(子节点对象)：删除（并返回）当前节点的指定子节点，没有给定节点无法执行。

  3. replaceChild()：用新节点替换一个子节点

<body>
    <!-- 定义一个存在子节点的标签元素 -->
    <div id='parent'>
        父标签
        <div id='child'>子标签</div>
    </div>
    <!-- 将超链接href 像下面一样定义可以让查连接被点击后不进行跳转 -->
    <a href='javascript:void(0)' id='delete'>删除子节点</a>
    <!-- 用于新增子节点的按钮 -->
    <input type='button' id='add' value='新增子节点' />

    <script>
    // 1. 获取超链接
    var e1 = document.getElementById('delete');
    var e2 = document.getElementById('add');

    var div_parent = document.getElementById("parent");
    var div_child = document.getElementById("chile");

    // 2. 绑定删除子节点事件
    e1.onclick = function() {
        // 移除div_parent的子节点div_child
        div_parent.removeChild(div_child);
    }

    // 3. 绑定新增子节点事件
    e2.onclick = function() {
        // 创建一个新的div节点       
        var newDiv = document.createElement("div");
        // 为新节点设置id
        newDiv.setAttribute("id", "second_child");
        // 将新节点设置为parent节点的子节点
        div_parent.appendChild(newDiv);
    }
    </script>
</body>

2.常用属性

  1. parentNode：当前节点的父节点

4.2 HTML DOM

HTML DOM 是关于如何获取、修改、添加和删除 HTML 元素的标准。

1.对页面元素进行操作

  1. 获取页面标签（元素）对象 element

    • document.getElementByID("元素ID")

      注意：因为html中代码是顺序执行的，所以上述代码需要书写在对应id的元素定义之后（否则元素还没有加载，也就无法获取id）。

  2. 操作Element对象

    1. 修改属性值：element.attr（修改class时，使用element.className这个属性）
    <img id='imgID' src='img.old.gif' />
// 修改id为imgID的图片对象的图片路径
var img = document.getElementByID("imgID");
light.src = "img/new.gif";
    1. 修改标签体内容（围堵标签的标签体）：element.innerHTML
    <h1 id='h1ID'>这是旧的标题</h1>
// 修改标签体内容
var title = doucument.getElementByID("h1ID");
title.innerHTML = "这是新的标题";

    1. 修改样式（也可以使用<style标签>）

      1. 使用元素的style属性来控制：element.style.attr

      2. 使用<style>标签定义好样式，再通过修改元素的className属性来设置其class属性。

5. 事件相关

5.1 事件的概念

事件：某些组件被执行了某些操作后，出发了某些代码的执行

- 事件：某些操作，如单击、双击等。

- 事件源：组件；如按钮、文本框。

- 监听器：代码。

- 注册监听：将事件、事件源和监听器绑定。当事件源上发生指定事件时触发对应的触发器。

5.2 常见的事件

1.点击事件

  1. onclick：单击事件

  2. onblclick：双击事件

2.焦点事件

  1. onblur：フォーカスを失った（通常はフォームのチェック）

  2. ONFOCUS：要素がフォーカスを取得

  • 機能：操作の後に実行されるコードコンポーネント

3.ロードイベント

  1. onloadイベント：ページや画像の読み込みが完了しました

    あなたは使用することができますwindow.onloadブラウザがロードされていることを示すためにイベントを。（さえJSコードのボタンと結合した場合にこのように、コードが最初に書き込まJSであってもよいです）

    我々は、すべてのイベントに使用することができますwindow.onload = function() {事件}書くためにこの方法を

4.マウスイベント

  1. れるonmousedown：マウスボタンが押されました

    イベントオブジェクトを渡して、メソッドを定義するときにすることができます。私たちは、ボタンがクリックされたevent.buttonを確認を使用することができます。

    event.buttonをするために、0,1,2は左、真ん中、右を表します。

    doucument.getElementById("button").onmousedown = function(event) {
    alert(event.button);
}

  2. onMouseUpの：マウスボタンが解放されます

  3. れるonmousemove：マウスを移動させ、

  4. onmouseover属性：要素の上にマウス

  5. れるonmouseout：離れた要素からマウス

5.キーボードイベント

  1. onkeydownを：キーボードのキーが押されました

    そして、により、同様れるonmousedown event.keyCodeキーが押されたかを決定します。

  2. onkeyupの：キーボードのキーが解放されます

  3. onkeypressでは：キーボードのキーが押され、その後解放されます

6.選択し、[変更

  1. onchange：コンテンツのドメインが変更されました

  2. ONSELECT：テキストが選択されています

7.フォームイベント

  1. onSubmit：ボタンがクリックされていることを確認（提出のフォームを防ぐために使用することができます）

    フォームの送信を防止するための方法の二種類：

    <script>
// 校验表单的函数
function checkForm() {
    // 写入自己的判断语句

    // 返回值应该为 boolean 类型变量，此处暂定返回false
    return false;
}

// 1. 使用onsubmit属性
window.onload = function() {
    document.getElementById("form").onsubmit = checkForm;
}

</script>

<!-- 2. 设置onclick -->
<!-- 这里只是为了说明：onclick方法后的js语句要特别注意 -->
<form id='form' onclick='return checkForm();'>
<!-- 表单语句... -->
</form>

  2. onreset：リセットボタンがクリックされました

バインディングのイベント

  1. 指定された直接htmlタグの属性のイベント、属性値は、実際のjsコードの文字列です。

    /* 设置imgID图片，在被点击时执行相应的js代码：弹出一个窗口提醒 */

/*-------------------------------------------------------------*/
// 直接在属性值指定js代码
<img id='imgID' src='img/old.gif' onclick='alert("我被点击了");'>

/*-------------------------------------------------------------*/
// 属性值指定js函数，间接调用js代码
// 注意，因为html代码是顺序执行的，所以函数要在调用函数之前定义
<script>
    function fun() {
        alert("我被点击了");
    }
</script>

<img id='imgID' src='img/old.gif' onclick='fun()'>

    この方法は単純であるが、HTMLタグJSコードと一緒に結合することができるが、膨張とその後の維持に資するものです。

  2. オブジェクト属性に指定されたイベントによって得られたJS要素は、機能に結合イベントの対応するプロパティを備えています。

    // 在js代码之前就需要事先定义好图片元素
<img id='light' src='img/light.gif'>

<script>
// 获取图片对象（假设是一个灯泡的图片）
var light = document.getElementByID("light");

// 初始情况下灯泡是关着的
var flag = false;

// 这样每次点击图片都会有不同的事件
function fun() {
    if (flag) {
        alert("开灯");
    } else {
        alert("关灯");
    }
    flag = !flag;
}

// 绑定事件
light.onClick = fun;
</script>

おすすめ

転載: www.cnblogs.com/Bylight/p/11279977.html
おすすめ
Apache Doris バージョン 2.0.10 が正式にリリースされました。
Open Source Daily | 大手モデルが戦争に突入、大手モデルのユニコーンが身売りしていることが明らかに; 最大のオープンソース AI コミュニティが GPU の共有に 1,000 万ドルを提供すると示唆
ランキング
ジャンゴ使用KindEditorアップロード写真
FirstOrDefault VS C＃の検索
SQL UNIONルール
VS Code は HTML スタートアップを実装し、ホット アップデート サービスを提供します
Linux プログラミング: 1. コルーチンの設計原則
目标检测的“尽头”竟是语言建模？Hinton团队提出Pix2Seq：性能优于DETR
CTFdインストールの新バージョン以降の操作および保守について話します
構造体へのポインタ出力4人の学生学生ID名前性別年齢を使用することにより
1.3.2リリース、連続ファイル同期ツールをSyncthing
PyQt5 インストールチュートリアル
アーカイブ
もっと
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)

コードワールド

© 2018 codetd.com