JavaScript

JavaScriptの概要

Java Script、略してJSは、主にブラウザで実行されるスクリプト言語です。ページコンテンツの読み取りと変更、ユーザーアクションへの応答、ネットワークリクエストの送信、動的なインタラクション効果の実現が可能です。

最新のJava Scriptはサーバーやその他のランタイム環境でも実行できますが、この章では主にブラウザ内のJava Scriptについて説明します。

Java ScriptとJava Scriptの違い

Java ScriptとJavaは名前が似ていますが、異なるプログラミング言語です。

比較	Java	JavaScript
タイプ·システム	静的型、変数型は通常コンパイル時に決定される	動的型付け：変数は異なる型の値を保持できる
通常の運用方法	バイトコードにコンパイルした后、で実行	Java Scriptエンジンによる解析、コンパイル、実行
主な用途	バックエンド、デスクトップ、Androidなど	Webページのインタラクション、フロントエンド開発、サーバーサイド開発など
オブジェクト指向のアプローチ	クラスベース。	プロトタイプメカニズムをベースに、`class`構文もサポート

Javaはサンが開発し、後にオラクルがメンテナンスし、Java ScriptはNetscapeが開発した。

Java Scriptの構成

ブラウザでのJava Script 開発には、通常次の部分が含まれます。

ECMAScript：Java Scriptのコア構文、型、演算子、オブジェクト、ステートメントなどを指定します。
DOM：Document Object Modelは、HTML 文書を操作するためのDocument Object Modelです。
BOM：ブラウザオブジェクトモデルは、ブラウザウィンドウ、アドレス、履歴、タイマーなどを操作するために使用されます。
イベント：ブラウザはクリック、入力、ロードなどのアクションが発生するとイベントをトリガーし、Java Scriptはハンドラを登録できます。

Java Scriptの使い方

内部スクリプト

HTMLページの<script>タグに少量のJava Scriptを書くことができます。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>内部脚本</title>
    <script>
        console.log("页面脚本开始执行");
    </script>
</head>
<body>
    页面内容
</body>
</html>

外部スクリプト

コードが多い場合は、独立した.jsファイルとして保存し、src属性を使用してインポートします。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>外部脚本</title>
    <script src="js文件地址"></script>
</head>
<body>
    页面内容
</body>
</html>

src属性を持つ<script>ラベルには、終了ラベルが必要です。

変数とデータ型

Java Scriptにはデータ型がありますが、変数自体は固定型を宣言する必要はありません。変数が保持する値が変化すると、その型も変化する可能性があり、これを動的型付けと呼びます。

一般的なデータ型

この段階の一般的なタイプは次のとおりです。

string：文字列。
number：整数と小数を含む数。
boolean：ブール値、すなわちtrueとfalse。
undefined変数は宣言されましたが、まだ割り当てられていません。
nullアクティブ設定を示すnull 値。

さらに、Java Scriptはオブジェクト型や、bigint、symbolなどの型も提供しています。

変数の定義

古いコードはしばしばvarを使用する。

var name = "张三";
var age = 20;
var sex = "男";

alert("姓名：" + name + "，年龄：" + age + "，性别：" + sex);
console.log("name 的类型：" + typeof name);
console.log("age 的类型：" + typeof age);
console.log("sex 的类型：" + typeof sex);

現代のJava Scriptはletとconstを優先します。

const name = "张三";
let age = 20;
age = 21;

const変数バインディングは再割り当てできません。
let：変数は再割り当て可能で、ブロックレベルのスコープを持ちます。

プロセス制御

分岐ステートメント

JavaScriptでよく使われる分岐文には、if、if...else、switchがあります。

const score = 85;

if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

ループ文{{るーるぶん}}

一般的なサイクルには、for、while、およびdo...whileが含まれる。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

演算子と型変换

等価比較とは

Java Scriptは==および==を提供します。

const value1 = "10";
const value2 = 10;

console.log(value1 == value2);  // true
console.log(value1 === value2); // false

==：比較前に暗黙的な型変換が可能です。
===：暗黙的な型変換は行わず、型と値の両方が等しいことを要求する。

実際の開発では、暗黙の変換による曖昧さを減らすために==と!==を優先する。

数値演算子

Javaでは2つの整数を除算すると整数除算が行われますが、Java Scriptの通常の数値はnumber型を使用します。

const value = 123;
console.log((value / 1000) * 1000); // 123

Java Scriptのnumberは浮動小数点表現を使用するため、この例では123になりますが、小数演算によっては浮動小数点精度誤差が発生する可能性があります。例えば、0.1 + 0.2の結果は0.3と厳密に等しくない。

文字列の演算

+は通常、文字列オペランドが存在する場合に文字列連結を実行します。

console.log("123" + "23"); // "12323"

-は文字列連結をサポートしていません。Java Scriptは文字列を数値に変換しようとします。

const value1 = "123";
const value2 = "23";
console.log(value1 - value2); // 100

有効な数値に変換できない場合、結果は通常NaNになります。

Boolean 変換

条件付きでは、Java Scriptは値をブール値に変換します。0、空文字列、null、undefined、NaNなどの値は偽とみなされ、その他のほとんどの値は真とみなされます。

const value1 = true;
const value2 = false;

console.log(value1 == 1);  // true，发生了类型转换
console.log(value1 === 1); // false，类型不同
console.log(value2 == 0);  // true，发生了类型转换

DOMを使用してコンテンツを出力

ページはdocumentオブジェクトを使用して操作できます。次の例では、九九乗算表を動的に生成します。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>九九乘法表</title>
</head>
<body>
    <div id="tableBox"></div>
    <script>
        let html = "<table border='1'>";

        for (let i = 1; i <= 9; i++) {
            html += "<tr>";
            for (let j = 1; j <= i; j++) {
                html += "<td>" + j + "×" + i + "=" + i * j + "</td>";
            }
            html += "</tr>";
        }

        html += "</table>";
        document.getElementById("tableBox").innerHTML = html;
    </script>
</body>
</html>

document.write()は文書にも書き込みが可能ですが、ページの読み込みが完了した後に呼び出すとページ全体が上書きされる可能性があるため、通常は指定されたDOM 要素の変更が優先されます。

JavaScriptの配列

Java Scriptの配列は可変長であり、同じ配列に異なる型の値を保持できます。

文字列の使用

const array = [10, 20, 30];

for (let i = 0; i < array.length; i++) {
    console.log("数组索引：" + i + "，数组元素：" + array[i]);
}

指定された長さの配列の作成

const array = new Array(3);
array[0] = 100;
array[1] = 200;
array[2] = 300;

new Array(3)は長さ3の空スロット配列を作成します。数値3を含む配列ではありません。

コンストラクタによる要素の初期化

const array = new Array(1000, 2000, 3000);

for (let i = 0; i < array.length; i++) {
    console.log("数组索引：" + i + "，数组元素：" + array[i]);
}

共通の配列プロパティとメソッド

length：配列の長さ.
concat()：配列を連結し、新しい配列を返します。
join()要素を指定した区切り文字で連結し、文字列を返します。
push()：配列の末尾に要素を追加します。
pop()：配列の最後の要素を削除して返します。
reverse()：現在の配列の要素の順序を反転します。

const array1 = [10, 20, 30];
const array2 = new Array(100, 200, 300);

array1.push(1);
array1.push(2);
array1.push(3);
array2.pop();

const array3 = array1.concat(array2);
console.log("数组长度：" + array3.length);

array3.reverse();
const text = array3.join("_");
console.log("数组转字符串：" + text);

JavaScript 関数

関数の宣言

function add(value1, value2) {
    return value1 + value2;
}

関数式{{かんすうしき}}

const multiply = function (value1, value2) {
    return value1 * value2;
};

矢印関数

const divide = (value1, value2) => value1 / value2;

呼び出し例：

let result = add(10, 20);
result = multiply(10, 20);
result = divide(10, 20);
console.log("结果：" + result);

関数の引数と戻り値は、構文で固定型を宣言する必要はありませんが、実行時の値は型を持ちます。

関数の動的作成

Java ScriptはFunctionコンストラクタを使用して関数を動的に作成できます。

const parameters = "name, age";
const body = "console.log('name：' + name + '，age：' + age);";
const createdFunction = new Function(parameters, body);

createdFunction("张三", 20);

このアプローチは実行時に文字列を解析する必要があり、通常の関数ほど明確ではなく、セキュリティリスクをもたらす可能性があるため、実際の開発では注意が必要です。

スクリプトの場所とページの読み込み

スクリプトがターゲット要素の前に実行された場合、関連するDOM 要素がまだ作成されていない可能性があります。一般的な解決方法は次のとおりです。

<script>を、<body>終了ラベルの前に置く。
外部スクリプトでdeferプロパティーを使用します。
DOMContentLoadedまたはloadのイベントをリッスンします。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>页面加载</title>
    <script>
        window.onload = function () {
            const input = document.getElementById("v1");
            console.log("编辑框对象：", input);
            console.log("编辑框中的数据：" + input.value);
        };
    </script>
</head>
<body>
    数据：<input id="v1" type="text" value="这是一个数据" />
</body>
</html>

元のコードから要素オブジェクトを直接エクスポートすると、オブジェクトの説明が得られます。入力ボックスの内容を読み取るには、valueプロパティへのアクセスが必要です。

Java Scriptと関数オーバーロード

Java ScriptはJavaスタイルの関数オーバーロードをサポートしない。同じスコープ内で同じ名前の関数を繰り返し宣言すると、通常は後続の定義が前の定義を上書きします。

関数内で引数の数や型に基づいて異なるロジックを実行することができますが、これは手動でディスパッチするだけで、実際の関数オーバーロードではありません。

function showInfo() {
    if (arguments.length === 0) {
        console.log("无参数调用");
    } else if (arguments.length === 1) {
        console.log("一个参数：" + arguments[0]);
    } else if (arguments.length === 2) {
        console.log("两个参数：" + arguments[0] + "，" + arguments[1]);
    }
}

showInfo(100, 200);

BOMブラウザBOMブラウザオブジェクトモデルBOMぶらうざおぶじぇくともでる

BOMは、ブラウザウィンドウと、アドレスバー、タイマー、ポップアップ、ウィンドウジャンプなどの関連機能を操作するために使用されます。ブラウザのwindowはグローバルオブジェクトであり、多くのメソッドではwindow.プレフィックスを省略できます。

タイマータイマー

setInterval()指定した時間ごとに関数を繰り返し実行します。
clearInterval()：setInterval()で作成したタイマーを停止します。
setTimeout()：指定した時間待ってから関数を1 回実行します。
clearTimeout()：未実行の遅延ミッションをキャンセルする。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>定时器</title>
    <script>
        let intervalId;
        let timeoutId;

        function updateTime() {
            const date = new Date();
            const span = document.getElementById("spanId");
            span.innerText = date.toLocaleString();
        }

        function startInterval() {
            if (intervalId === undefined) {
                intervalId = setInterval(updateTime, 1000);
            }
        }

        function stopInterval() {
            clearInterval(intervalId);
            intervalId = undefined;
        }

        function startTimeout() {
            timeoutId = setTimeout(function () {
                alert("定时任务开始执行");
            }, 3000);
        }

        function stopTimeout() {
            clearTimeout(timeoutId);
        }
    </script>
</head>
<body>
    <div style="width: 600px; height: 300px; text-align: center;">
        <span id="spanId"></span>
        <hr />
        <button onclick="startInterval()">开始更新时间</button>
        <button onclick="stopInterval()">停止更新时间</button>
        <hr />
        <button onclick="startTimeout()">启动延时任务</button>
        <button onclick="stopTimeout()">取消延时任务</button>
    </div>
</body>
</html>

関数をタイマーに渡す方が文字列を渡すよりも明確で、追加の文字列解析を避けます。

情報ウィンドウです

alert()ヒント情報を表示します。
confirm()確認ボックスが表示され、ブール値が返されます。
prompt()入力した文字列またはnullを返す入力ボックスを表示します。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>弹窗示例</title>
    <script>
        function deleteData() {
            if (confirm("是否确认执行删除操作？")) {
                console.log("执行删除功能");
            }
        }

        function calculate() {
            const number1 = prompt("请输入第一个数");
            const number2 = prompt("请输入第二个数");

            if (number1 !== null && number2 !== null) {
                console.log("结果：" + (Number(number1) + Number(number2)));
            }
        }
    </script>
</head>
<body>
    <button onclick="deleteData()">删除</button>
    <button onclick="calculate()">运算</button>
</body>
</html>

新しいウィンドウを開く

親のページ：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>父窗口</title>
    <script>
        function createWindow() {
            window.open("demo9.html", "", "width=600,height=700");
        }
    </script>
</head>
<body>
    姓名：<input type="text" id="inp_name" /><br />
    年龄：<input type="text" id="inp_age" /><br />
    <button onclick="createWindow()">选择数据</button>
</body>
</html>

子ページはwindow.openerアクセスから親ウィンドウを開くことができます。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>子窗口</title>
    <script>
        function selectData() {
            const selected = document.querySelector('input[name="select"]:checked');

            if (!selected || !window.opener) {
                return;
            }

            const row = selected.closest("tr");
            const cells = row.children;
            const name = cells[1].innerText;
            const age = cells[2].innerText;

            window.opener.document.getElementById("inp_name").value = name;
            window.opener.document.getElementById("inp_age").value = age;
        }
    </script>
</head>
<body>
    <table border="1" width="500">
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td><input type="radio" name="select" checked /></td>
            <td>刘备</td>
            <td>20</td>
        </tr>
        <tr>
            <td><input type="radio" name="select" /></td>
            <td>关羽</td>
            <td>19</td>
        </tr>
        <tr>
            <td><input type="radio" name="select" /></td>
            <td>张飞</td>
            <td>18</td>
        </tr>
    </table>
    <button onclick="selectData()">获取选择的数据</button>
</body>
</html>

ブラウザはユーザーの操作によって直接トリガーされない新しいウィンドウをブロックすることができ、クロスソースページは互いのDOMに自由にアクセスできません。

ページアドレスPage Address

window.locationは現在のページアドレスで、location.hrefを変更することでジャンプできます。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>页面跳转</title>
    <script>
        function visitAddress() {
            const address = document.getElementById("inputId").value;
            location.href = address;
        }
    </script>
</head>
<body>
    访问地址：<input type="text" id="inputId" />
    <button onclick="visitAddress()">访问</button>
</body>
</html>