文章来源于网上收集和自己原创，若侵害到您的权利，请您及时联系并删除~~~

JavaScript入門：
変数、定数、データ型、演算子などの基本概念。
四則演算を組み合わせることでデータ型の変換やプログラミング方法を実現します。

現実世界の物体とコンピュータの関係を体験する
データとは何かを理解し、その分類を知る
変数がデータを格納する「コンテナ」を理解する
一般的な演算子の使用法をマスターし、優先順位関係を理解する
JavaScript データ型の暗黙的な変換の特徴を理解する

1 はじめに

1.1 JavaScriptとは何ですか?

JavaScript とは何ですか?
これは、人間とコンピューターの対話を実現するためにクライアント (ブラウザー) 上で実行されるプログラミング言語です。(P4)

機能（何をするか？）

Web ページの特殊効果 (Web ページ上で対応するフィードバックを行うためにユーザーの行動を監視) MIUI 13 が起動し、すべてが接続されます
フォーム検証（フォームデータの合法性判定）百度ならわかる（baidu.com）
データインタラクション (バックグラウンドデータの取得、フロントエンドへのレンダリング) 1
サーバーサイドプログラミング (node.js)

JavaScriptの構成

ここに画像の説明を挿入します

ECMAScript: js の基本構文の核となる知識を規定します。例: 変数、分岐ステートメント、ループステートメント、オブジェクトなど。
ウェブ API :

ページ要素の移動、サイズ変更、追加、削除などの DOM 操作ドキュメント。

BOM は、ページのポップアップ、ウィンドウ幅の検出、ブラウザへのデータの保存など、ブラウザを操作します。

JavaScript の権威 Web サイト: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

まとめ：

JavaScriptとは何ですか?

JavaScriptはクライアント（ブラウザ）上で動作するプログラミング言語です。
JavaScript は何で構成されていますか?

ECMAScript (基本構文)、Web API (DOM、BOM)

経験：
切り替えボタンをクリックした場合 - インタラクティブな効果を実現する HTML+CSS+JS を体験する
ここに画像の説明を挿入します

1.2 導入方法

JavaScriptの導入方法をマスターし、まずはJavaScriptの役割を理解する
ここに画像の説明を挿入します

JavaScript プログラムは単独では実行できません。ブラウザーで JavaScript コードを実行するには、事前に HTML に埋め込む必要があります。タグを通じてscriptJavaScript コードを HTML に導入するには、次の 3 つの方法があります。

1.2.1 内部メソッド (組み込み)

scriptJavaScriptコードをタグで囲み、
htmlファイル内に直接記述し、scriptタグで囲みます
仕様：scriptタグを上に記述します
拡張子：alert('Hello, js') ページ上に警告ダイアログボックスが表示されます

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来前端技术！')
  </script>
</body>
</html>

注意

<script>これを HTML ファイルの最後近くに配置する理由は、ブラウザーがファイル内のコードの順序で HTML をロードするためです。
最初にロードされた JavaScript がその下の HTML を変更することを想定している場合、HTML がまだロードされていないために失敗する可能性があります。
したがって、通常は JavaScript コードを HTML ページの下部近くに配置することが最善の戦略となります。

1.2.2 外部フォーム（外部リンク型）

通常、JavaScript コードは .js で終わる別のファイルに記述され、scriptタグのsrc属性を通じて導入されます。

// demo.js
document.write('嗨，欢迎来前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注意注: script タグが src 属性を使用して .js ファイルを導入している場合、タグのコードは無視されます。！！次のコードに示すように:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

1.2.3 インライン

コードはタグ内に記述されます
注: これは理解のためだけですが、vue フレームワークは後でこのモードを使用します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
   
  <button onclick="alret('逗你玩儿')"></button>
</body>
</html>

まとめ

JavaScript の記述位置は 3 つありますか?

内部

外部の

業界内
予防：

書く位置はできるだけ文書の終わり</body>より前に書きます。

外部 js タグの途中にコードを書かないでください。そうしないと無視されます。

演習 1

要件: 外部および内部の両方の JavaScript 記述メソッドを使用してください。ページがポップアップ表示されます。一生懸命働く
時間: 5分
外部：

新しい js ファイルを作成します false --> 新しい my.js ファイルを作成します

alert('努力奋斗')

htmlファイルで参照されています

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<script src="../js/my.js"></script> 
</body>
</html>

内部：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     alert("努力，奋斗")
  </script>
</body>
</html>

1.3 コメントとターミネータ

コードの実行をブロックしたり、コメントを通じてコメント情報を追加したりできます。JavaScript では、次の 2 つの形式のコメント構文がサポートされています。

1.3.1 単一行コメント

// コードの 1 行をコメント化します。

関数: // 右行のコードは無視されます

ホットキー:ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎学习前端技术！');
  </script>
</body>
</html>

1.3.2 複数行のコメント

/* */複数行のコードにコメントを付けるために使用します

効果: /* と */ の間にあるものはすべて無視されます。

ホットキー:shift + alt + A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎学习前端技术！')
  </script>
</body>
</html>

1.4 ターミネーター

JavaScript では、;これはコードの終わりを表し、ほとんどの場合、省略して;復帰 (Enter) に置き換えることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

実際の開発では、多くの人が JavaScript コードを記述するときにターミネータを省略することを推奨しています。;

合意：スタイルを統一するために、終了記号はすべての文に書くか、すべての文に書かない必要があります（チームの要件に従って）。

まとめ：

JavaScript でコメントする 2 つの方法は何ですか?

一行コメント //

複数行のコメント /* */
JavaScript ターミネータに関する注意事項

ターミネータはセミコロンです。

ターミネータは省略できますか? はい

ただし、文体を統一するために、文末記号をすべての文に記述するか、またはすべての文に書かない必要があります。

1.5 入力と出力

出力と入力は、人間とコンピュータとの間の相互作用として理解することもでき、ユーザーがキーボードやマウスなどを介してコンピュータに情報を入力し、コンピュータが情報を処理して結果をユーザーに表示するプロセスです。入力と出力の。

例: キーボードの方向キーを押すと、上下キーでページをスクロールできます。上下キーを押す動作を入力と呼び、ページのスクロールを出力と呼びます。

1.5.1 出力

JavaScript はユーザー入力を受け取り、入力結果を出力できます。

alert()、document.wirte()、console.log()

数字を例にとると、alert()またはにdocument.write()任意の数字を入力すると、ポップアップウィンドウでユーザーに表示（出力）されます。

1.5.2 入力

コンテンツを入力すると、prompt()ポップアップウィンドウの形式でブラウザに表示され、通常はユーザーにコンテンツの入力を求めます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

演習 2

時間: 5 分
要件:

ブラウザにダイアログボックスが表示されます: Hello JS~alert()
ページ上に出力を印刷します: Hello JS~ document.write()
ページのコンソール出力: Hello JS~ console.log()

 document.write("你好，js")
 alert("你好,js")
 console.log("你好，js")

JavaScript コードの実行シーケンス:

HTMLドキュメントフローの順序でJavaScriptコードを実行する
alert()そして、prompt()それらはページのレンダリングをスキップして最初に実行されます（現時点では理解のために、詳細な実行プロセスは後で説明します）

1.6 リテラル

目標: リテラルとは何かを理解できるようにする
コンピューターサイエンスにおいて、リテラルとは、コンピューター内の物や物事を記述することです
。たとえば、次のようになります。

私たちの給与は 1000 です。この時点で、1000 は数値リテラルです。
「Student」文字列リテラル
次に学習する [] 配列リテラル {}、オブジェクトリテラルなどもあります。

要約:

JavaScriptとは何ですか?

JavaScript は、Web ページ上で多くのインタラクティブな効果を実現できるプログラミング言語です。
どこにJavaScriptを書けばいいのでしょうか？

内部JavaScript

内部 JavaScript – タグの上に記述されます

外部 JavaScript - ただし

2. 変数

変数はコンピュータにデータを保存するための「入れ物」であることを理解し、変数の宣言方法をマスターする

ここに画像の説明を挿入します

変数は、コンピュータでデータを保存するために使用される「入れ物」です。変数によってコンピュータは記憶を持つことができます。変数の一般的な理解は、[特定の値] (データ) を表すために [特定の記号] を使用することです。

ここに画像の説明を挿入します

注: 変数はデータそのものではなく、値を格納するための単なるコンテナーです。物を入れるために使用される段ボール箱と理解できます。

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！

  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')

  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

2.1 声明

変数を使用するには、まず変数を作成する必要があります (変数の宣言または変数の定義とも呼ばれます)。
let 变量名

変数の宣言は、宣言キーワードと変数名 (識別) の 2 つの部分で構成されます。

let はキーワードです (let:allow、permit、let、want) いわゆるキーワードは、特に変数を宣言 (定義) するためにシステムによって提供される単語です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

キーワードは、JavaScript に組み込まれているいくつかの英単語 (単語または略語) です。キーワードは、特定の意味を表します。たとえば、の意味は、let変数を宣言することです。を見た後、letこのコード行は、次のような変数を宣言することを意味していると考えることができます。let age;

letとはどちらも JavaScript で変数を宣言するためのキーワードです。変数の宣言にはvar使用することをお勧めします。let！！

2.2 割り当て

変数の宣言 (定義) は、空の「コンテナ」を作成し、代入によってこのコンテナにデータを追加することと同じです。
変数を定義した後、それを初期化する (値を割り当てる) ことができます。変数名の後に「=」を付け、その後に値を続けます。

ここに画像の説明を挿入します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

まとめ

変数の宣言にはどのようなキーワードが使用されますか?let
変数を割り当てるために使用される記号は何ですか? = 这个符号我们也称为赋值运算符
開発では、値の宣言と値の代入を同時に行うことがよくあります。let age = 18

演習 3

必要：

ユーザーが購入したアイテムの数 ( num ) を 20 個として格納する変数を宣言します
ユーザー名 ( uname ) を「Zhang San」として保存する変数を宣言します。
コンソールは 2 つの変数を順番に出力します。

 let num = 18
 let uname = '张三'
 console.log(num,uname)

2.3 変数の更新

ここに画像の説明を挿入します

2.4 複数の変数を宣言する

変数に値を割り当てた後、別の値を与えるだけで変数を更新することもできます。

let age = 18,uname = 'zhangsan'

let age = 18
let uname = 'zhangsan'

//为了更好的可读性，请一行只声明一个变量。

ケース1
要件: ブラウザにダイアログボックスが表示されます: 名前を入力してください。ページ上の出力: 入力した名前。
分析:

①：入力：ユーザー入力ボックス：prompt()
②：内部処理：データ保存
③：出力：ページ印刷、document.write()

  let a = "zhangsan"
  document.write("你输入的姓名为：",a)

ケース2
要件:
2 つの変数があります: num1 には 10 が含まれ、num2 には 20 が含まれます。

最後に、20 が含まれる num1 と、10 が含まれる num2 になります。

目的：

変数の使い方を練習する
後でバブルソートの準備をする

ここに画像の説明を挿入します

  let num =20,num3=21
  let num2 = 21
  let temp 
  temp = num1
  num1 = num2
  num2 = temp
  console.log(num1,num2)

2.5 変数の性質

メモリ: コンピュータ内でデータが保存される場所であり、空間に相当します
変数の本質: データを保存するためにプログラムによってメモリ内に適用される小さなスペースです。

ここに画像の説明を挿入します

2.6 キーワード

JavaScript は特別なキーワードを使用しletてvar変数を宣言 (定義) します。使用する場合は、次の詳細に注意する必要があります。

let使用する際の注意点は以下の通りです。

宣言と代入を同時に実行できるようにする
重複した宣言は許可されません
複数の変数を宣言して同時に値を割り当てることができます
JavaScript に組み込まれている一部のキーワードは変数名として使用できません

var使用する際の注意点は以下の通りです。

宣言と代入を同時に実行できるようにする
重複した宣言が許可される
複数の変数を宣言して同時に値を割り当てることができます

多くの場合、letとを使用することに大きな違いはありませんが、を使用するよりも厳密であるため、を使用することをお勧めします。varletvarlet

2.7 変数名の命名規則

変数名 (識別子) に関しては、従う必要がある一連のルールがあります。

文字、数字、アンダースコア、$ のみを使用でき、数字で始めることはできません。
文字は大文字と小文字が区別されます。たとえば、Age と age は異なる変数です。
JavaScript 内部で使用される単語 (キーワードまたは予約語) は許可されません
変数に特定のセマンティクスがあることを確認してください。単語を見れば意味がわかります。

仕様：

名前は意味のあるものでなければなりません
リトルキャメルケースの命名法に従ってください

最初の単語の最初の文字は小文字で、後続の各単語の最初の文字は大文字です。例: ユーザー名

注: いわゆるキーワードは、やなど、JavaScript の内部で使用される単語を指します。letまたvar、予約語は、現在 JavaScript 内で使用されていないが、将来的に使用される可能性のある単語を指します。

ここに画像の説明を挿入します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
  </script>
</body>
</html>

演習 4

要件: ユーザーが自分の名前、年齢、性別を入力し、Web ページに出力できるようにする
分析:

①：ポップアップ入力ボックス（プロンプト）：名前を入力してください（uname）：変数で保存します。
②: ポップアップ入力ボックス (プロンプト): 年齢を入力してください (年齢): 変数で保存します。
③: ポップアップ入力ボックス (プロンプト): 性別を入力してください: 変数で保存します。
④: ページは先ほどの 3 つの変数を出力 (document.write)

  let uname = prompt("请输入姓名")
  let age = prompt("请输入你的年龄")
  let gender = prompt("请输入你性别")
  document.write(uname,age,gender)

3. 定数

概念: const を使用して宣言された変数は「定数」と呼ばれます。

使用シナリオ: 変数が決して変更されない場合は、let の代わりに const を使用して変数を宣言できます。

命名規則: 変数との一貫性

const PI = 3.14

注: 定数は再割り当てできないため、宣言時に割り当て (初期化) する必要があります。

ここに画像の説明を挿入します

let — 実際に変数宣言を開発します。

var — 変数を宣言する以前の方法には多くの問題がありました。

const — let と似ていますが、変数の値は変更できません。

4. データ型

コンピューターの世界にあるものはすべてデータです。

JS の基本的なデータ型を教えてください。

基本的なデータ型
参照データ型

ここに画像の説明を挿入します

コンピュータープログラムは大量のデータを処理できますが、データ管理を容易にするために、データはさまざまな種類に分類されます。

4.1 数値型（数値）

つまり、数学で学ぶ数値には、整数、小数、正の数、負の数が含まれます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

JavaScript の数値型は数学の数値と同じで、正の数、負の数、小数などに分けられます。

注意事项

JS は弱いデータ型であり、変数がどの型に属するかは値を代入して初めて確認できます。
Java は、int a = 3 などの強力なデータ型であり、整数である必要があります。

数値には、乗算 *、除算 /、加算 +、減算 - などの多くの演算が含まれるため、算術演算子と組み合わせて使用されることがよくあります。

数学演算子は算術演算子とも呼ばれ、主に加算、減算、乗算、除算、剰余 (モジュロ) が含まれます。

+: 合計
-: 差*: 積/:
商%: モジュロ (剰余): 数値が割り切れるかどうかとして開発でよく使用されます

目標: JavaScript 算術演算子の実行の優先順位を判断できるようにする

複数の演算子を同時に使用してプログラムを作成すると、演算子は優先順位と呼ばれる特定の順序で実行されます。

JavaScriptでは優先度が高いほど早く実行され、優先度が同じ場合は左から右に実行されます。

乗算、除算、剰余は同じ優先順位です
加算と減算は同じ優先順位です
乗算、除算、剰余は加算や減算よりも優先されます。
優先度を上げるには () を使用します
概要: 掛け算と割り算、次に足し算と引き算、括弧がある場合は最初に計算~~~

演習 5

要件: ダイアログボックスに円の半径を入力し、円の面積を計算してページに表示します
。

①：面積の数学式：π*r²
②：JavaScriptに変換：variable * r * r

const PI = 3.14
let r = +prompt('请输入半径：')
let s = PI * r * r
document.write("圆的面积是",s)
console.log(PI)

NaN は計算エラーを表します。不正または未定義の数学演算の結果です

NaN は粘着性があります。NaN に対する操作はすべて NaN を返します。

console.log('老师' - 2) // NaN
console.log(NaN + 2) // NaN

4.2 文字列型（文字列）

一重引用符 ( '')、二重引用符 ( "")、またはバックティックで囲まれたデータは文字列と呼ばれます。一重引用符と二重引用符に本質的な違いはありません。一重引用符を使用することをお勧めします。

予防：

一重引用符と二重引用符をペアで使用する必要があるかどうか
一重引用符/二重引用符は相互にネストできますが、それ自体の中でネストすることはできません。
必要に応じてエスケープ文字を使用して、\一重引用符または二重引用符を出力できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

文字列の連結:

シナリオ: + 演算子は文字列を連結できます。

式：数字相加，字符相连

let uanme = '薛之谦'
let song = '认真的雪'
documeent.write(uname + song)  // 薛之谦认真的雪

4.3 テンプレート文字列

文字列と変数を連結する

利用可能になる前は、変数を結合するのが面倒でした

documeent.write('大家好，我叫'+ uname + '练习' + age + '年')

文法

` (バッククォート)
英語入力モードで、キーボードのタブキーの上のキー（1の左のキー）を押します。
コンテンツを変数に結合するときは、${ } を使用して変数をラップします。

documeent.write(`大家好，我叫${
      
      uname}练习${
      
      age}年`)

演習 6

要件: ページ上にダイアログボックスが表示され、名前と年齢を入力すると、ページに次の情報が表示されます。「皆さん、こんにちは。私の名前は xxx で、今年 xx 歳です。」

let name = prompt('请输入您的名字')
let age =  prompt('请输入您的年龄')
documeent.write(`大家好，我叫${
      
      name}，今年${
      
      age}岁了`)

4.4 ブール型(boolean)

肯定または否定を表現する場合、コンピュータは肯定的なデータを表現する場合と否定的なデータを表現する場合に使用される、trueとの2 つの固定値を持つブール型データに対応します。falsetruefalse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

4.5 未定義型（未定義）

未定義は特別な型です。未定義の値が 1 つだけあり、変数を宣言するだけです。値が割り当てられていない場合、変数のデフォルト値は未定義です。一般に、未定義を変数に [直接] 割り当てることはまれです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

注: JavaScript の変数の値によって、変数のデータ型が決まります。

仕事での使用シナリオ:

私たちの開発では、データが送信されるのを待って変数を宣言することがよくあります。
データが渡されたかどうかがわからない場合は、変数が未定義かどうかを確認することで、ユーザーがデータを渡したかどうかを判断できます。

4.6 空の型（null）

JavaScript の null は、「何もない」、「空」、または「値が不明」を表す単なる特別な値です。

let obj = null
console.log(obj) // null

nullと未定義の違いは次のとおりです。

未定義は割り当てがないことを意味します
null は値が割り当てられているが、内容が空であることを意味します

null 開発中の使用シナリオ:

公式説明: null をまだ作成されていないオブジェクトとして扱う
Vernacular: 将来的には、オブジェクトを格納する変数が存在する予定ですが、オブジェクトはまだ作成されていません。

5. 型変換

弱い型指定言語の特徴を理解し、明示的な型変換の方法をマスターする

JavaScriptではデータを数値、文字列、ブール値、未定義などの型に分けて表現しますが、実際のプログラミングでは、データ型間の変換関係が存在します。

なぜ型変換が必要なのでしょうか?
JavaScript は弱いデータ型です: JavaScript は、変数がどのデータ型に属しているのかを知りません。値が割り当てられるときだけ知っています。

落とし穴: フォームやプロンプトを使用して取得されるデータは、デフォルトでは文字列型であるため、単純な加算操作を直接実行することはできません。

注: typeof キーワードを通じてデータ型を検出します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

5.1 暗黙的な変換

特定の演算子が実行されると、システム内部で自動的にデータ型が変換されます。この変換を暗黙的変換と呼びます。
ルール：

+数値の両側の一方が文字列である限り、もう一方は文字列に変換されます。
+ 以外の算術演算子 (- * / など) は、データを数値型に変換します。

欠点:

コンバージョンのタイプは明確ではなく、経験によってのみ結論付けることができます

チップ：

+ 記号は、正の記号として解析するためにデジタル型に変換できます。
文字列にデータを追加した結果は文字列になります

ここに画像の説明を挿入します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

注: データ型の暗黙的な変換は JavaScript の機能であり、今後の研究で取り上げられますが、ここでは暗黙的な変換とは何かを理解する必要があります。

5.2 明示的な変換

暗黙的な変換のルールは明確ではなく、ほとんどが経験に基づいているため、プログラムを作成するときにシステム内の暗黙的な変換に過度に依存することは厳密に禁止されています。暗黙的な変換によって引き起こされる問題を回避するために、通常、ルートロジックではデータを明示的に変換する必要があります。

5.2.1 数値

明示的に数値型に変換するとNumber、変換が失敗した場合、結果はNaN(Not a Number)、つまり数値ではなくなります。

数値型に変換
文字列の内容に数値以外が含まれる場合、変換が失敗すると結果は NaN (数値ではない) となり、数値ではないことを意味します。
NaN も数値型データであり、非数値を表します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

5.2.2 parseInt(データ)

整数のみを保持する

5.2.3 parseFloat(データ)

小数点以下を保持できる

5.2.4 文字型への変換

文字列 (データベース)
変数.toString (ベース)

演習 7

2 つの数値を入力し、その 2 つの合計を計算してページに印刷します。

ここに画像の説明を挿入します

  let num1 = +prompt('请输入第一个数')
  let num2 =  +prompt('请输入第二个数')
  // num1 = Number(num1)
  // num2 = Number(num2)
  let sum = num1 + num2
  console.log(sum)

要約する

型変換の概念は、
あるデータ型を別の型に変換することです。JavaScript は弱いデータ型です。多くの場合、計算中にデータ型を変換する必要があります。
暗黙的な変換
システムが自動的に変換します
明示的な変換:
独自のコードを記述して、システムに変換先の型を指示します。Number
文字列の内容に数字以外が含まれる場合は、NaN が返されます。String

6. 実践事例 - ユーザー注文情報の事例

要件: ユーザーが製品価格、製品数量、配送先住所を入力すると、注文情報が自動的に印刷されます
。

①：3つのデータを入力する必要があるため、価格番号アドレスを格納するために3つの変数が必要です
②：合計金額の合計を計算する必要があります
③：ページを印刷してフォームを生成し、データを入力します。
④: テンプレート文字列を使用するのが最善であることを覚えておいてください

ここに画像の説明を挿入します

JavaScript - [第 1 週]

1 はじめに

1.1 JavaScriptとは何ですか?

1.2 導入方法

1.2.1 内部メソッド (組み込み)

1.2.2 外部フォーム（外部リンク型）

1.2.3 インライン

演習 1

1.3 コメントとターミネータ

1.3.1 単一行コメント

1.3.2 複数行のコメント

1.4 ターミネーター

1.5 入力と出力

1.5.1 出力

1.5.2 入力

演習 2

1.6 リテラル

2. 変数

2.1 声明

2.2 割り当て

演習 3

2.3 変数の更新

2.4 複数の変数を宣言する

2.5 変数の性質

2.6 キーワード

2.7 変数名の命名規則

演習 4

3. 定数

4. データ型

4.1 数値型（数値）

演習 5

4.2 文字列型（文字列）

4.3 テンプレート文字列

演習 6

4.4 ブール型(boolean)

4.5 未定義型（未定義）

4.6 空の型（null）

5. 型変換

5.1 暗黙的な変換

5.2 明示的な変換

5.2.1 数値

5.2.2 parseInt(データ)

5.2.3 parseFloat(データ)

5.2.4 文字型への変換

演習 7

6. 実践事例 - ユーザー注文情報の事例

おすすめ