2020 August 06 Web开发

JS基础(一)-JS简介、数据类型

JS简介

什么是JavaScript?
1. JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)
2. 解释型语言：
  1. 程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言，即：不需要编译的语言
  2. C、C++、Java等很多语言需要编译成二进制，形成可执行文件，才能去执行
  3. 为什么JavaScript不需要编译就能够执行呢？
    1. 与浏览器的工作原理有关
    2. 因为浏览器有个JavaScript Interpreter(解析者) JavaScript解析器，专门负责解析、执行JavaScript的代码
3. 编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件
浏览器的工作原理
1. 浏览器由下面7个部分组成如下图：
  1. User Interface：用户界面，包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面显示窗口之外的其他部分
  2. Browser engine：浏览器引擎,可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心
  3. Rendering engine：渲染引擎,用来显示请求的内容,解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎，即将HTML、CSS代码显示在屏幕上
  4. Networking 网络，负责发送网络请求
  5. JavaScript Interpreter(解析者) :JavaScript解析器，负责执行JavaScript的代码
    1. JavaScript解释器能够解释并执行嵌入在网页中的JavaScript（又称ECMAScript）代码。为了安全起见，浏览器引擎或渲染引擎可能会禁用某些JavaScript功能，如弹出窗口的打开。
  6. UI Backend： UI后端，用来绘制类似组合框和弹出窗口
  7. Data Persistence(持久化)：数据持久化，浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用
JavaScript作用
1. HTML 提供网页上显示的内容（结构）
2. CSS 美化网页（样式）
3. JavaScript 控制网页行为（行为）
JavaScript发展史
1. JavaScript起源于（网景）Netscape公司的LiveScript语言
2. 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
3. 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题，网景公司录用Brendan Eich(布兰登·艾奇)，他在 10 天内开发出 LiveScript 语言
4. 在 Netscape Navigator 2.0 即将正式发布前，Netscape 将LiveScript 更名为 JavaScript，目的是为了蹭Java的热度
5. 所以Java和 JavaScript之间没有任何关系
JavaScript组成: 由三部分组成
1. ECMAScript：JavaScript的语法标准
  1. ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
  2. ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
  3. JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
2. DOM(Document Object Model)：JavaScript操作网页上的元素(标签)的API
3. BOM(Browser Object Model)：JavaScript操作浏览器的部分功能的API
  1. 比如浏览器的前进、后退按钮、刷新等浏览器功能
  2. 要搞清楚浏览器的功能跟网页的区别

JavaScript书写格式

和CSS一样, JavaScript也有三种书写格式:行内式、内嵌式、外链式
和CSS一样, JavaScript三种书写格式推荐使用外链式, 遵守结构、样式、行为分离
代码举例：
1. 行内式格式(不推荐)
```
 <div onclick="alert('hello world');">我是div</div>
```
2. 内嵌式格式
```
 </body>
 ... ...
 <script type="text/javascript">
        alert("hello world");
 </script>
 </body>
```
  1. 内嵌式注意点
    1. 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
    2. HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
    3. 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
      <head> <script> // 等到界面上所有的内容都加载完毕再执行 window.onload window.onload = function(){ //必须有这句话 var oDiv = document.querySelector("div"); var text = oDiv.innerText; alert(text); } </script> </head>
3. 外链式格式
```
 <script type="text/javascript" src="01-js书写格式.js"></script>
```
  1. 外链式注意点
    1. 外链式的script代码块中不能编写js代码, 即便写了也不会执行
      <script type="text/javascript" src="01-js书写格式.js"> alert("hello world"); // 不会被执行 </script>
    2. 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度

JS中的常见输出日志方式

在JS中，打印日志输出，通常有以下几种方法：
1. 在控制台中显示内容
  1. 在浏览器的F12下，点击console可以查看日志
```
 console.log("hello world3");
 console.error("错误信息");
 console.warn("警告信息");
```
2. 在浏览器弹窗中显示内容
  1. 下面都可以弹出日志内容
```
 alert("hello world");
 prompt("请输入内容：");
 confirm("你好吗?");
```
3. 在页面中显示内容
  1. 直接将日志输出在网页页面中显示
```
 document.write("hello world2");
```

JS注意点

JS中严格区分大小写

 alert("hello world"); // 正确 
 Alert("hello world"); // 错误

每一条JS语句以分号(;)结尾
1. 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
2. 并且有些时候浏览器会加错分号，所以在开发中分号必须写
JS中会忽略多个空格和换行
```
 alert
 (
 "hello world"
 ); 
```

注释

JavaScript中的注释和C语言一模一样(格式、特点), 也分为单行注释和多行注释

JS的数据类型

常量

整型常量:二进制、十进制、八进制、十六进制
实型常量:小数
字符串常量:使用单引号(')或双引号(")括起来的一个或几个字符
布尔值:布尔常量只有两种状态：true或false

特殊字符常量

 \n 换行,相当于敲一下回车。
 \t 跳到下一个tab位置,相当于按一下键盘上的tab键。 \b 退格,相当于按一下backspace。
 \r 回车。
 \f 换页,光标移到到下页开头。
 \\ 输出\字符,也就是在屏幕上显示一个\字符。
 \' 输出'字符,也就是在屏幕上显示一个'字符。
 \" 输出"字符,也就是在屏幕上显示一个"字符。

自定义常量
1. ES6中新增，自定义常量:const 常量名称 = 常量取值;
```
 // 定义一个常量：ES6语法
 const num = 666;
```

变量

定义变量
1. 定义变量(声明变量), 任何变量在使用之前，必须先进行定义
2. 定义变量的目：在内存中分配一块存储空间给变量，方便以后存储数据。
3. 如果定义了多个变量，就会为这多个变量分别分配不同的存储空间。
4. 定义变量的常用格式：
  1. 格式1: var 变量名称 ;
  2. 格式2: var 变量名称,变量名称;
5. 注意：
  1. 和C语言不同的是, C语言再定义变量时需要通过数据类型指定变量的类型
  2. 而JavaScript在定义变量时不需要通过数据类型指定变量的类型
  3. 变量的类型会在赋值时自动确定

使用变量

变量初始化

用变量就是往变量里面存点东西或者取出变量中存储的内容;
变量初始化:变量第一次赋值，可以称为“初始化”

 //先定义,后初始化
 var num;
 num = 10;
 //定义的同时进行初始化
 var num = 10;
 //其它表现形式
 // 部分初始化
 var a, b, c = 10;
 // 完全初始化
 var a , b, c;
 a = b = c = 10;

变量默认值
1. C语言中变量没有初始化保存的都是垃圾数据
2. JavaScript中变量没有初始化保存的是undefined
```
 var num;
 console.log(num); // undefined
 // 如果变量没有初始化, 里面存储的是undefined
```

注意点：
1. 在JavaScript中如果定义了同名变量，那么后面定义的变量会覆盖先定义的变量

ES6的变量定义

格式
1. ES6之前：var 变量名称;
2. ES6之后：let 变量名称;

如果用ES6语法定义变量，则不允许定义同名的变量

 // ES6之前会覆盖，不报错
 var xxx = 444;
 var xxx = 666;
 console.log(xxx);
        
 // ES6之后不允许覆盖，会报错
 let xxg = 222;
 // let xxg = 333;
 console.log(xxg);

关键字和保留字

关键字

JavaScript关键字的概念和C语言一样, 都是指被赋予特殊含义的单词

关键字严格区分大小写, var和Var前者是关键字, 后者不是

 break     do	      instanceof  typeof   case
 else	    new        var         catch    finally
 return	    void       continue    for      switch
 while     default    if          throw    delete
 in        try        function    this     with
 debugger  false	   true        null

保留字

JavaScript预留的关键字，他们虽然现在没有作为关键字，但在以后的升级版本中有可能作为关键字

 class   enum    extends  super   const   export
 import  implements  let private public  yield
 interface   package protected static

标识符
1. JavaScript标识符的概念和C语言一样, 都是指程序员在程序中自己起的名称
2. JavaScript标识符命名规则的概念和C语言一样

JS中的数据类型

静态数据与动态数据
1. 静态数据
  1. 静态数据是指一些永久性的数据，一般存储在硬盘中。硬盘的存储空间一般都比较大，现在普通计算机的硬盘都有500G左右，因此硬盘中可以存放一些比较大的文件
  2. 存储的时长：计算机关闭之后再开启，这些数据依旧还在，只要你不主动删掉或者硬盘没坏，这些数据永远都在
  3. 哪些是静态数据：静态数据一般是以文件的形式存储在硬盘上，比如文档、照片、视频等。
2. 动态的数据
  1. 动态数据指在程序运行过程中，动态产生的临时数据，一般存储在内存中。内存的存储空间一般都比较小，现在普通计算机的内存只有8G左右，因此要谨慎使用内存，不要占用太多的内存空间
  2. 存储的时长：计算机关闭之后，这些临时数据就会被清除
  3. 哪些是动态数据：当运行某个程序（软件）时，整个程序就会被加载到内存中，在程序运行过程中，会产生各种各样的临时数据，这些临时数据都是存储在内存中的。当程序停止运行或者计算机被强制关闭时，这个程序产生的所有临时数据都会被清除。
3. 既然硬盘的存储空间这么大，为何不把所有的应用程序加载到硬盘中去执行呢？
  1. 主要原因就是内存的访问速度比硬盘快N倍
4. 数据转换
  1. 静态数据和动态数据的相互转换：从磁盘加载到内存
  2. 动态数据和静态数据的相互转换：从内存保存到磁盘
5. 数据的计量单位
  1. 不管是静态还是动态数据，都是0和1组成的，数据越大，包含的0和1就越多
JavaScript数据类型概述
1. 程序员最关心的是内存中的动态数据, 因为我们写的程序就是在内存中的
2. 程序在运行过程中会产生各种各样的临时数据, 为了方便数据的运算和操作, JavaScript对这些数据进行了分类, 提供了丰富的数据类型
3. 在JS中一共有六种数据类型
  1. Number 数值(基本数据类型)
  2. String 字符串(基本数据类型)
  3. Boolean 布尔(基本数据类型)
  4. Undefined 未定义(基本数据类型)
  5. Null 空值(基本数据类型)
  6. Object 对象(引用数据类型)
4. 如何查看数据类型?
  1. 使用typeof操作符可以用来检查数据类型。
  2. 使用格式：typeof 数据，例如 typeof 123; typeof num;
  3. typeof操作符会将检查的结果以字符串的形式返回给我们
    var value= 10; // 此时将value的数据类型number以字符串返回给我们, 存入到res变量中 var res = typeof value; // 此时检查res的数据类型为string, 证明typeof返回给我们的是一个字符串 console.log(typeof res); // string

字符串类型

String用于表示一个字符序列，即字符串
字符串需要使用 ’或“ 括起来

Number类型

在JS中所有的数值都是Number类型(整数和小数)

由于内存的限制，ECMAScript 并不能保存世界上所有的数值

 //最大值：Number.MAX_VALUE
 console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308s
 //最小值：Number.MIN_VALUE
 console.log(Number.MIN_VALUE);  // 5e-324
 //无穷大：Infinity, 如果超过了最大值就会返回该值
 console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
 //无穷小：-Infinity, 如果超过了最小值就会返回该值
 console.log(typeof Infinity); // number
 console.log(typeof -Infinity); // number
 //NaN 非法数字（Not A Number）,JS中当对数值进行计算时没有结果返回，则返回NaN
 var num3 = NaN;
 console.log(typeof num3); // number
    

Number类型注意点
1. JS中整数的运算可以保证精确的结果
```
 var sum1 = 10 + 20;
 console.log(sum1); // 30
```
2. 在JS中浮点数的运算可能得到一个不精确的结果
```
 var sum1 = 10.1 + 21.1;
 console.log(sum1); // 31.200000000000003
```

Boolean 布尔值

布尔型也被称为逻辑值类型或者真假值类型
布尔型只能够取真（true）和假（false）两种数值
虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
1. 任何非零数值都是true, 包括正负无穷大, 只有0和NaN是false
2. 任何非空字符串都是true, 只有空字符串是false
3. 任何对象都是true, 只有null和undefined是false
4. 即非0即真

Null和Undefined

Undefined这是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined
```
 var num;
 console.log(num);  //结果是undefined
```
undefined是Undefined类型的字面量
1. undefined、10、”abc”一样是一个常量
2. Undefined、Number、Boolean一样是一个数据类型
3. 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。
```
 var value1 = undefined;
 console.log(typeof value); //结果是Undefined
        
 var value2;
 console.log(typeof  value2); //结果是Undefined
```
Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null
从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true
```
 var test1 = null;
 var test2 = undefined;
 console.log(test1 == test2);
 console.log(test1 === test2);
```
注意：
1. Null、Undefined是数据类型
2. null、undefined是值