一、JavaScript简介

JavaScript介绍

JavaScript诞生于1995年，它的出现主要用于处理网页中的前端验证。
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
JavaScript是由网景公司发明，起初叫LiveScript，后来由SUN公司的介入更名为JavaScript
一位内当时存在了JScript和JavaScript，所以为了确保不同的浏览器上运行的JavaScript标准一致，所以共同定制了JS的标准命名ECMAScript.

JavaScript发展时间表

年份	事件
1995年	网景公司开发了JavaScript
1996年	微软发布了和JavaScript兼容的JScript
1997年	ECMAScript第1版（ECMA-262）
1998年	ECMAScript第2版
1998年	DOM Leval1的制定
1999年	ECMAScript第3版
2000年	DOM Level2 的制定
2002年	ISO/IEC 16262:2002的确立
2004年	DOM Leveal3的制定
2005年	新型语言AJAX登场
2009年	ECMAScript第5版
2009年	新型语言HTML5登场

注意：ECMAscript是一个标准，而这个标准需要由各个厂商去实现的

JavaScript引擎

首先，浏览器分为渲染引擎和JavaScript引擎
渲染引擎
- 用来解析HTML和CSS，称为内核，例如chrome浏览器的blink等
JS引擎
- 称为JavaScript解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的v8
浏览器本身不会执行JS代码，而是通过JavaScript引擎（解释器）来执行JavaScript代码，JavaScript引擎执行代码的时候会逐行解释每一句源码，然后转换为机器语言，然后交由计算机执行，所以 JavaScript语言归为脚本语言。

JavaScript组成

JavaSCript由JavaScript语法(ECMAScript)和页面文档对象模型(DOM)和浏览器对象模型(BOM)组成
ECMAScript
- ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScritp，但实际上后两者是ECMAScript语言的实现和扩展,ECMAScript规定了JavaScript的编程语法和核心知识
DOM - 文档对象模型
- 文档对象模型（Document Object Model简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作。
BOM - 浏览器对象模型
- 浏览器对象模型（Browser Object Model，简称BOM）是指浏览器对象模型，它提供了独立内容的、可以与浏览器窗口i进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转等。

二、JavaScript的HelloWorld

工具：WebStorm

新建一个HTML5文件

在骨架body标签里面，写入script标签，写入JavaScript代码

浏览器弹出窗口，并显示HelloWorld，测试成功

三、JavaScript基础

1、JavaScript编写的位置

JavaScript编写位置分为3中，分别为行内式、内嵌式、和外部式
行内式
- ```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我试试" onclick="alert('我是行内式')">
</body>
</html>
```
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用

内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert('Hello World');
</script>

</body>
</html>

可以将多行JS代码写到 script 标签中

外部JS文件
- ```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./js/index.js"></script>
</body>
</html>
```
- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情

2、JavaScript的注释

JavaScript的注释分为单行注释和多行注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 使用注释可以提高代码的阅读性
    // 我是单行注释

    /*
    我是多注释
     */
</script>

</body>
</html>

3、JavaScript的输入输出语句

方法
alert(content)	浏览器弹出警示框
console.log(content)	浏览器控制台打印输出信息
prompt(content)	浏览器弹出输入框，用户可以输入信息

alert()函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert('我是alert弹出的信息');
</script>

</body>
</html>

console.log()函数的使用

浏览器按f12可以呼出控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    console.log('我是console.log()输出的信息');
</script>

</body>
</html>

prompt()函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    prompt('我是prompt提示的信息');
</script>

</body>
</html>

4、JavaScript的变量、字面量、常量

字面量
- 字面量表示的就是一个值，它所表示的意思就是它的字面意思 ,比如：1、2、3 ，1就是1,2就是2 数字
变量
- 变量可以存储字面量, 一个变量可以存储任意类型的字面量
常量
- 不可变的量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 声明变量
    /*
     var一般用来声明全局变量
     let用来声明局部变量，式块级变量【如果有些名词不懂学完后在回来看
        let是es6中新增命令，也是用来声明变量的

      两者区别：
      let和var的区别体现在作用域上
        var的作用域被规定为一个函数作用域
        而let则被规定为块作用域，块作用域要比函数作用域小一些
        但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。
        es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效
        et声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，
        所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值
     */
    var name; // 声明了一个名称为name的变量
    let age; // 声明了一个名称为age的变量

    // 给变量赋值
    name = 'guan';
    age = 16;

    // 变量的初始化：声明一个变量并赋值称为变量的初始化
    var score = 99;

    // 更新变量
    score = 60;

    console.log(score); // 60

    // 同时生命多个变量
    var i = 10, i1 = 20, i3 = 30;

    // 只声明变量不赋值，会报undefined
    let d;
    console.log('输出d：',d);


    /*
    常量：不可以修改的字面量，常量只能进行一次赋值
       声明常量：const 常量名称 = 常量的值;
     */
    // 声明常量
    const  SIZE =  3;
    console.log(SIZE);
</script>

</body>
</html>

变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

5、JavaScript的数据类型

为什么需要数据类型
- 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
- 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。
变量的数据类型
- 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定.
- ```
var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串   
```
- 在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型.
- ```
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串 
```
- 数据类型的分类
  - 简单数据类型（Number,String,Boolean,Undefined,Null）
  - 复杂数据类型（object)

简单数据类型

数据类型	说明	默认值
Number	数字型，包含整形值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1、0	false
String	字符串类型，如“content”，字符串都带引号	""
Undefined	var a;声明了对象但是没有给值	undefined
Null	var a = null; 声明了变量a为空值	null

Number数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /*
         数据类型 - 数值
         在JS中，所有数值包含整数浮点数（小数）都属于number类型

         在JS中可以确保大部分的整数运算得到一个精确的结果
         在JS中，小数运算有可能得到一个不精确的结果
         所以在JS中不要做对精度要求高的运算，尤其涉及到钱的

         当数值超过一定范围后，会使用Infinity来表示，Infinity表示正无穷

         NaN也是一个特殊数字，表示Not a Number 非法数字 ; 例：let num = 10 - 'ws';

         在ES2020最新标准中，提供了一个新数字类型：bigint，表示大整数[新特性],只能跟自己的数据类型运算
     */
    let num1 = 18;

    let num2 = 3.5;

    let num3 = 100.2321321312312312312312312312312312321321 + 300; // 如果数值太大，数据就不一定精确了

    let num4 = 0.1 + 0.3;


    // typeof 运算符 它用来检查一个值的类型
    console.log(typeof num1);  // 检查数值的时候，会返回一个number
    console.log(typeof num2);
    console.log(num3);
    console.log(num4);

    /* 定义其他进制的数字
     二进制：0b开头
     八进制：0o开头
     十六进制：0X开头
     */
    // 定义二进制变量
    let er = 0b10;

    // 定义八进制变量
    let eight = 0o7;

    // 定义bigData数据类型 数值+n
    let bigData = 100n;


    /*
      数字型三个特殊值

         Infinity ，代表无穷大，大于任何数值

         -Infinity ，代表无穷小，小于任何数值

         NaN ，Not a number，代表一个非数值
     */

    console.log('无穷大：',Infinity);
    console.log('无穷小：',-Infinity);
    console.log(NaN);

    /*
    JavaScript中数值的最大和最小值

     最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

     最小值：Number.MIN_VALUE，这个值为：5e-32
     */
    console.log('最大值：',Number.MAX_VALUE);
    console.log('最小值：',Number.MIN_VALUE);

    let number = 13;

    let name = '刘德华';
    /*
    isNaN(x)
        用来判断一个变量是否为非数字的类型，返回 true 或者 false
        x是数字，返回false
        x不是数字，返回true
     */
    console.log(isNaN(number)); //false
    console.log(isNaN(name));  // true
</script>

</body>
</html>

结果

Boolean布尔类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /*
         布尔值(boolean)：true false
             用来做逻辑判断的
             布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
    		 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
             使用typeof检查一个布尔值返回一个boolean
     */

    let bool = true;
    let bool2 = false;

    console.log(bool, typeof bool,Number(bool));
    console.log(bool2, Number(bool2));
</script>
</body>
</html>

Undefined和NULL类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /*'
    空值和未定义：
        null通常用来表示一个空的对象，一个不存在的东西
        null类型只有一个值，就是null

     一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

     */
    // 声明一个空对象
    let a = null;
    console.log(typeof a); // object
    
    var v;
    console.log(v); // undefined
</script>
</body>
</html>

字符串类型string

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /*
        数据类型：（指的类型）
            1、字符串（string）:js字符串需要使用单引号或者双引号引起来
                [双引号单引号都可以，但是不能混合使用][引号不能跨行使用][同类型的引号不能嵌套]
                js中使用\反斜杠作为转义字符
                let str = ' I\'m Java ' ;
                \n 换行 \t制表符[缩进的意思]


     */
    // 定义字符串变量
    let str = "this is string";
    let str1 = 'this is content';

    console.log(str);
    console.log(str1);

    document.write("我准备换行了<br>换行了");
    console.log("我要换行了\n 换行了");


    /* 模板字符串 通过斜引号，他会保留字符串格式[新特性]老版本不支持
           特点：
               1、可以换行，并保留字符串中的格式
               2、在模板字符串中可以直接嵌入变量
                   使用变量的语法：${变量名称}
    */
    let data = 1321;
    let str3 = `this is
    ss
    ${data}
    content`;

    alert(str3);

    /*
    字符串拼接
    多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
    拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
     */
    console.log('Hello' + ' World')
    console.log('100' + 100);

</script>
</body>
</html>