JavaScript 03-09日结

灰太狼 2023-07-13 03:32 47阅读 0赞

# JavaScript的基本介绍 #

#### \- JavaScript是什么？ ####

JavaScript 是互联网上最流行的脚本语言，是一种轻量级、弱类型的脚本语言。

#### \- JavaScript 有什么作用？ ####

实现页面的交互 :

*  用户操作的交互
 *  数据的交互

#### \- JavaScript 三大组成部分 ####

1. ECMAScript（核心）
        - JavaScript 的语法（描述了该语言的语法和基本对象）
    2. BOM(Browser Object Model)（文档对象模型）
        - 一套完整的操作浏览器的属性和方法（描述了处理网页内容的方法和接口）
    3. DOM(Document Object Model)（浏览器对象模型）
        - 一套完整的操作页面元素的属性和方法（描述了与浏览器进行交互的方法和接口）

#### \- JavaScript的引入方式 ####

JavaScript的语法与css语法类似,都分为3种：

1.  行内式  
    JavaScript的行内式,也是在标签内部直接定义JavaScript代码  
    这种语法不推荐使用（书写不方便,而且不利于重复使用，一般做调试使用）

<div style="color: red;" onclick="alert('我是div标签的弹窗')">我是div标签</div>

1.  内部式  
    JavaScript的内部式,在 head标签的最后,或者body标签的最后,来定义一个script标签,在标签内部来定义JavaScript代码
2.  外部式  
    JavaScript的外部式,是通过一个带有 src 属性的script标签,来导入外部的js文件。

**注意：在内部式和外部式中，script标签,理论上,可以写在任意位置,但是一般放在 body内部的最下方，也就是所有的html标签的内容的最后，因为牵扯到代码的执行顺序。  
注意：定义了src的script,其标签内容中,定义的JavaScript程序,就不会执行了，因为给一个script标签,添加src属性,就变成导入外部式的script,script标签内部的JavaScript代码就不会执行，只会执行外部js文件中的内容。**

#### \- 特殊的Html标签 ####

超链接标签<a>是一个特殊的标签，特殊在如果要执行JavaScript程序超链接标签，href的属性值必须定义为 JavaScript:; 才会执行。

定义超链接的跳转，应该是在href属性中来定义跳转页面的url地址。现在,在JavaScript中,要定义 href 属性 为 JavaScript:; ，然后通过JavaScript的语法形式来定义跳转页面。如果是在href中,定义跳转地址,那么很多JavaScript程序就无法执行了。通过 JavaScript来定义跳转, 可以实现JavaScript的一些功能。  
写法：

<a href="JavaScript:;" id="a1">百度</a>
    <script> a1.onclick = function(){ // 之后要讲的超链接的跳转方式 // 通过JavaScript来控制跳转地址等 // 现在不用管,后面会详细讲 var a = 3; if(a == 1){ window.location.href = 'https://www.baidu.com'; }else if(a == 2){ window.location.href = 'https://www.sohu.com'; }else if(a == 3){ window.location.href = 'https://www.qq.com'; } } </script>

#### \- JavaScript 注释 ####

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。  
在JavaScript中,注释分为两种 ：单行注释和多行注释。  
单行注释：

// 两个斜杠叫单行注释 
    在单行注释中,换行,就结束注释效果

多行注释：

多行注释以 /* 开始，以 */ 结尾。
    /* 多行注释 多行注释内,可以换行,会继续执行注释效果 快捷键还是 ctrl + / */

# JavaScript 变量 #

#### \- 变量的定义 ####

**官方定义：**  
存储在内存之中的、带有名称的数据信息，其中存储的数据在执行过程中是可以改变的。  
实际上就是存储数据的容器。

#### \- JavaScript 变量名称的命名规范 ####

规则（必须遵守的）：

变量名称的内容,只能是数字,字母(大小写都可以),下划线 _  ,美元符号 $
    不能以数字开头 一般是以字母或者下划线开头
    名称也可以 $ 开头
    严格区分大小写
    不要使用保留词和关键词

规范（建议遵守的 — 程序员的潜规则）：

不要使用中文
    见名知意 -- 看见变量名称,就知道存储的是什么数据
    驼峰命名法 -- 多个单词组成的变量名称,每个单词的首字符大写
                 UserName  UserPwd 
    小驼峰 -- 第二个单词开始,首字符大写
                 userName  userPwd
    英文太差的,查有道词典
    再不行,偶尔可以使用拼音
    但是绝对不能使用 拼音缩写

# JavaScript 数据类型 #

JavaScript中,对于变量可以存储的数据,有分类：

基本数据类型 / 标准数据类型
    	布尔类型 , 数值类型 , 字符串类型 , undefined , null
    引用数据类型 / 复杂数据类型 / 地址数据类型
    	数组 ,  对象 ,  函数

#### \- 布尔类型 ####

在 JavaScript中,表示布尔类型的英文 是 Boolean / bool 。  
在Html中,有布尔属性 ，属性值就是属性本身。  
在Html5中,布尔属性,不推荐写属性值，例如：

在计算机语言中,布尔值,表示 真 / 假 这样的两个数值：

表示 真 / 正确 的数值是 true 
    表示 假 / 错误 的数值是 false

布尔值,往往是比较或者判断的结果，也可以对变量直接进行赋值,赋值的内容是 true 或者 false，但是在使用时,**一定要小写**。

#### \- 字符串类型 ####

所谓的字符串类型,就是由字符,数字,符号等,组成的一串数据类型。  
JavaScript中 使用 String / str 表示字符串类型。  
字符串类型 的数据,必须使用 **单引号** 或者 **双引号** 来进行包裹。  
在JavaScript中,单引号,双引号,没有区别,用哪个都行，但是**必须成对使用，必须是英文格式的符号** 。  
**特殊情况1：**  
如果一个数字,也被 引号包裹,那么这个数字,也是字符串类型。

var b = 123;    // 变量b中存储的是 数值 123
    var c = "123";  // 变量c中存储的是 字符串 123

**特殊情况2：**  
引号的嵌套 : 双引号中只能嵌套单引号，不能嵌套双引号；单引号中只能嵌套双引号，不能嵌套单引号。如果是多层嵌套,我们之后会介绍模板字符串。

var d  = "邹烨说:'张老师,能不能开个车提提神',说我:'不能~~~!!!' ";
    var e  = '邹烨说:"张老师,能不能开个车提提神",说我:"不能~~~!!!" ';

**特殊情况3:**  
字符串的拼接：将两个字符串,拼接为一个字符串，称为字符串的拼接。在JavaScript中，字符串的拼接，使用 + 加号来表示。

var str1 = '赵志江说:"张老师帅呆了!!" ';
    var str2 = '李鹏接着说:"你说的没错~~~" ';
    // 将两个字符串的内容，拼接为一个字符串，赋值给变量存储
    // 可以多个字符串，多次拼接
    var str3 = str1 + str2 + '<br>' + str1 + str2  ;
    console.log(str3);
    // 在页面中输出要执行换行效果，拼接上换行标签即可
    // 换行标签页必须是字符串形式
    // console.log() 控制台输出,不支持 标签效果
    document.write( str3 );

#### \- 数值类型 ####

JavaScript中，数值类型包括 **整数**，**小数**，**NaN** 3种数值形式。

##### 整数：integer / int #####

在计算机程序中,常用的整数类型有：

二进制 : 0 , 1
    八进制 : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7
    十进制 : 0 - 9
    十六进制 : 0 - 9 a - f

各种进制的整数值,在JavaScript中如何存储？

1.  如果变量中要存储的整数是**二进制数值**，需要在二进制数值前添加 **0B 或者 0b**（零b 或者 零B）。

var a = 0b11111001;
    console.log(a);                     // 默认将存储数值,转化为十进制输出
    console.log( a.toString(2) );       // 默认将存储数值,转化为十进制输出

1.  如果变量中要存储的整数是**八进制数值**，在存储数值之前添加 **0** 。

var b = 0371;
    console.log(b);              // 默认将存储数值,转化为十进制输出
    console.log( b.toString(8) );// 默认将存储数值,转化为十进制输出

1.  如果变量中要存储的整数是**十进制数值**，**正常输入**就可以。
2.  如果变量中要存储的整数是**十六进制数值**，输入数值前，加 **0x 或者 0X**（零x 或者 零X）。

var d = 0xf9;
    console.log(d)                // 默认将存储数值,转化为十进制输出
    console.log( d.toString(16) );// 默认将存储数值,转化为十进制输出

**注意：JavaScript中，整数（不使用指数或科学计数法）会被精确到 15 位。  
存储时,是按照各进制数值存储,输出时,默认都是按照十进制数值输出。  
如果需要按照原始进制数值输出，变量名称.toString(进制)，S必须大写，将数值转化为字符串形式输出。**

##### 浮点数：float #####

1.  有效数字 / 有效数值
    
    在数学中，小数的小数位数，可以是无穷位。在JavaScript中，对于浮点数的总位数有规定：  
    一个浮点数,有效数字/有效数值,最多 17 位。所谓的有效数字，指的是左起非零的数值。  
    整数部分，小数部分，一共是17位，直接截取有效部分，而不是四舍五入。
2.  科学计数法
    
    科学记数法是一种记数的方法。把一个数表示成a与10的n次幂相乘的形式（1≤|a|<10，n为整数），这种记数法叫做科学记数法。

例：

数值 e 数值
    2 e 3   2 乘以 10的3次方 2 * (10*10*10)
    // 2 e -3  2 乘以 10的-3次方 2 / (10*10*10)

**关键：使用科学技术法表示的数值，即使是一个整数，计算机中也是按照浮点数来分类的。2e3表示的是 2000，是一个整数，但是计算机程序仍然会将这个整数当做浮点数来处理。**

1.  浮点数的误差 — 浮点数的 精度丢失 / 精度溢出
    
    在计算机程序中，浮点数的存储内容，不是准确值，而是近似值。在计算机中，就会造成浮点数执行时计算的误差，也称作精度丢失/精度溢出。但是这种情况不是任何时候都会体现出来，这样的错误,在特殊情况下会体现出来。  
    解决方案：是用高精度浮点来执行计算 float类型 转 double 类型

例：

console.log( 0.1*0.1 );
    console.log( 0.1*0.2 );
    console.log( 0.1*0.3 );
    console.log( 0.1*0.4 );
    console.log( 0.1*0.5 );
    console.log( 0.1*0.6 );
    console.log( 0.1*0.7 );
    console.log( 0.1*0.8 );
    console.log( 0.1*0.9 );

经典面试题:：
    写出以下程序的执行结果？
    console.log( 0.1 + 0.2 == 0.3 )
    console.log( 0.2 + 0.2 == 0.4 )
    console.log( 0.3 + 0.3 == 0.6 )
    == 两个等号 表示 判断 两侧的内容是否相等。
    答：这是错误的语法形式，我在实际项目中，根本不会这么写。浮点数因为存储方式的问题，直接执行运算或者比较,
    会造成精度溢出或者精度丢失的现象，造成执行的误差。我会将浮点数转化为 高精度浮点数，在进行运算，会避免这样
    的问题发生。

#### \- Undefined 和 Null ####

undefined 和 null 是JavaScript中的两种数据类型。

undefined 表示没有数值 --- 应该有数值,但是现在没有数值
    null      	表示数值为空 --- 表示有数值,但是数值是"空"

可以直接给变量,赋值 undefined 和 null。  
**注意,也是必须小写**

// 定义int1 但是没有赋值数值
            var int1 ;
            // 输出时,int 应该有数值,但是现在没有数值
            // 输出的结果就是 undefined
            console.log(int1);  
    
            // 定义一个变量,并且赋值null
            var int2 = null;
            console.log( int2 );
    
            var int3 = undefined;
            console.log( int3 );

**总结:**

true , false , undefined , null , NaN 
    在JavaScript中,表示的是一种数值
    赋值时,必须严格遵守 大小写规范
    并且,不能带 引号 , 如果有引号,就是字符串,就不是原有的数值了