[パート IV | JavaScript の基礎] 1: JS の概要、変数、入出力

| 概要

| JS記述位置

| 入力出力

| 変数

命名規則

基本的な使い方

ステートメントプロンプトを入力して変数に情報を割り当てます。

| 概要

JavaScriptには「Java」とありますが、Javaとは全く別の言語であり、型も異なります（JSはスクリプト言語、Javaはコンパイル言語）

しかし、ほとんどの場所で文法的には似ています。結局のところ、これはバックエンド開発者向けに書かれたあまり専門的ではなく、欠陥がある可能性のあるメモなので、Java についてはデフォルトで誰もが知っています。

Java について詳しくない場合は、ここに来て調べてください。

https://blog.csdn.net/m0_57265007/category_12003054.html https://blog.csdn.net/m0_57265007/category_12003054.html

もちろん、Java を知らなくても問題ありません。この記事で基本的なことはほとんど紹介されています。ただし、ゼロベースではなく、ある程度のプログラミングの基礎を持った学生が学習するのに適しています。

次に、始めましょう...

JSの役割

動作原理

JavaScript の構成 (第 4 部、つまりこの部分は JS 構文を学習します。第 5 部は後で JS WebAPI を学習します)

| JS記述位置

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌JS（一打开就弹出窗口） -->
    <script>
        alert('Hello JavaScript!')
    </script>
    <!-- 外部JS文件 -->
    <script src="js/1.外部js.js"></script>
</head>
<body>
    <!-- 行内式JS（点击按钮弹出窗口） -->
    <input type="button" name="button" value="Click" onclick="alert('Hello JavaScript!')"/>
</body>
</html>

| 入力出力

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('请输入信息');
        prompt('请输入您的岁数：');
        console.log('控制台语句');
    </script>
</head>
<body>
</body>
</html>

| 変数

命名規則

基本的な使い方

声明

割り当て

初期化

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        alert('num的数值是：'+num);
    </script>
</head>
<body>
    
</body>
</html>

ステートメントプロンプトを入力して変数に情報を割り当てます。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // var num = 10;
        // alert('num的数值是：'+num);

        var name = prompt('请输入您的名字：');
        alert('您好，'+name);
    </script>
</head>
<body>
    
</body>
</html>

特別な状況の例

| データ型

特殊なJSデータ型

変数は値を格納する場所であり、名前とデータ型があります。変数のデータ型によって、それらの値を表すビットがコンピューターのメモリにどのように格納されるかが決まります。JavaScript は、弱く型指定された動的言語です。つまり、変数の型を事前に宣言する必要はなく、プログラムの実行中に型が自動的に決定されます。
JavaScript には動的型付けがあり、これは同じ変数を異なる型で使用できることも意味します。

JavaScript データ型: 単純なデータ型 (数値、文字列、ブール値、未定義、Null)。

複合データ型 (オブジェクト)

単純なデータ型の概要

単純なデータ型数値

JavaScript の数値型は、整数値と小数点 (浮動小数点数) の両方を格納するために使用できます。
ベースをどう表現するか？JSの8進数の前に0を追加し、16進数の前に0xを追加します
JS 数値の最大値: Number.MAX_VALUE、この値: 1.7976931348623157e+308、最小値: Number.MIN_VALUE、この値: 5e-32
3 つの特別な値: Infinity (無限大)、-Infinity (無限に小さい)、NaN (非数値)
この関数はNumber がすべて非数値 NaN であると判断します isNaN(x)

単純なデータ型文字列

一重引用符または二重引用符を使用して囲みます。HTML タグの属性では二重引用符が使用されるため、JS では括弧の最外層として一重引用符を使用することをお勧めします。
JS では、二重引用符を一重引用符でネストしたり、一重引用符を二重引用符でネストしたりできます。

エスケープ:

文字列の長さを取得します: XXX.length 例: var strLength = str.length;
文字列の結合: 文字列 +任意の型= 結合後の新しい文字列「任意の型」が他のデータ型の場合、引用符は必要ありません

単純なデータ型ブール、未定義、Null

ブール値: 0/1 false/true を指定できます

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var boolNum = true;
        alert('Boolean true + 1 = ' + (boolNum+1));

        var num;
        alert('num = ' + num);

        var num2 = null;
        alert('num2 = ' + num2);
    </script>
</head>
<body>
    
</body>
</html>