JavaScript基础（ECMAScript）学习

r囧r小猫 2023-10-07 10:01 7阅读 0赞

#### 文章目录 ####

*   *  1.JavaScript概念
     *  2.JavaScript的功能
     *  3.JavaScript发展史
     *  4.JavaScript = ECMAScript + BOM+DOM
     *  5.ECMAScript：客户端脚本语言的标准
     *   *  5.1基本语法
         *   *  5.1.1与HTML结合的方式
             *  5.1.2注释
             *  5.1.3数据类型
             *  5.1.4 变量
             *  5.1.5 运算符
             *  5.1.6 自动类型转换
             *  5.1.7 流程控制语句
             *  5.1.8 JS特殊语法
             *  5.1.9 九九乘法表设计练习
         *  5.2 基本对象
         *   *  5.2.1 Function：函数（方法）对象
             *  5.2.2 Array：数组对象
             *  5.2.3 Boolean
             *  5.2.4 Date ： 日期对象
             *  5.2.5 数学对象
             *  5.2.6 Number
             *  5.2.7 String
             *  5.2.8 RegExp:正则表达式对象
             *  5.2.9 lobal：全局对象

### 1.JavaScript概念 ###

JavaScript是一门客户端脚本语言

*  运行在客户端浏览器，每一个浏览器都有JavaScript解释引擎
 *  脚本语言：不需要编译，直接就可以被浏览器解析执行

### 2.JavaScript的功能 ###

*  可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些 动态元素，增强用户体验

### 3.JavaScript发展史 ###

*  1992年，Nombase 公司，开发出第一门客户端脚本语言，专门用于表单的校验，可以防止用户非法数据的提交，增强用户的体验。命名为：C – ，但这门语言当时并没有多少人使用。后来更名为：ScriptEase。
 *  1995年，Netscape (网景)公司，借鉴了 C-- 语言的思想，开发了一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家，修改 LiveScript，命名为 JavaScript。
 *  1996年，微软抄袭 JavaScript 开发出 JScript 语言。
 *  1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

### 4.JavaScript = ECMAScript + BOM+DOM ###

### 5.ECMAScript：客户端脚本语言的标准 ###

#### 5.1基本语法 ####

##### 5.1.1与HTML结合的方式 #####

*  内部js：在 html 中定义 ，标签体内容就是 js 代码
 *  外部js:在外部写js文件，html页面通过script的src属性引入路径

##### 5.1.2注释 #####

1.单行注释：

//单行注释

2.多行注释：

/*
    	多行注释内容 
    */

##### 5.1.3数据类型 #####

1.原始数据类型

*  number:数字。（整数/小数/NAN（一个不是数字的 数字类型））

// 整数
    var num1 = 1;
    // 小数
    var num2 = 1.5;
    // NaN
    var num3 = NaN;

*  String：字符串 “abc” , ‘abc’

var str1 = "abc";
    var str2 = 'def';

*  boolean: true or false

var flag1 = true;
    var flag2 = false;

*  null:一个对象为空的占位符

var obj = null;

*  undefined：未定义。如果一个变量没有给定初始值，则会默认赋值为undefined

var obj1 = undefined;
    // 等效于下面这条语句
    var obj2;

**注意：null == undefined 会返回 true，因为它们是类似的值；但 null === undefined 会返回false，因为它们是不同类型的值。**

document.write((undefined == null)+"<br>");// true
    document.write((undefined === null)+"<br>");// flase

2.引用数据类型：变量

##### 5.1.4 变量 #####

*  变量：一小块存储数据的内存空间
 *  Java是强类型语言，JavaScript语言是弱类型语言
 *  语法：

var 变量名 = 变量值;

*  typeof 运算符：获取变量的类型

typeof(变量名)

**注意：null 获取变量的类型是 object**

##### 5.1.5 运算符 #####

1.一元运算符：只有一个运算数的运算符

*  \++ ， - - ， + （正号）， -（负号）

var b = +"123";
    alert(typeof(b));//b是number类型，进行了强制类型转换

2.算术运算符

*  \+， - ， \* ， / ， %

3.赋值运算符

*  = ，+= ，-=

4.比较运算符

*  < ， > ，>= ， <= ， == ， ===（全等于）

5.逻辑运算符

*  && , || , !

6.三元运算符

*  ？ ：

variablename=(condition)?value1:value2;

**判断 condition 的值，如果是 true 则取值 value1，如果是 false 则取值 value2**

##### 5.1.6 自动类型转换 #####

在 JS 中，如果运算数不是运算符所要求的类型，那么 JS 引擎会自动的将运算数进行类型转换。

1.string 转 number

如果字面值是数字，按照字面值转换。如果字面值不是数字，则转为NaN

var a = +"123";
    var b = +"abc";
    document.write(a+"<br>");// 123
    document.write(b+"<br>");// NaN

2.boolean 转 number

true 转为 1，false 转为 0

var flag1 = +true;
    var flag2 = +false;
    document.write(flag1+"<br>");// 1
    document.write(flag2+"<br>");// 0

3.null 转 number

var obj1 = +null;
    document.write(obj1+"<br>");// 0

4.undefined 转 number

var obj2 = +undefined;
    document.write(obj2+"<br>");// NaN

5.其他类型转 boolean：  
1.number： 0 或 NaN 为 false，其他为 true  
2.string：除了空字符串(“”)，其他都是 true  
3.null & undefined：都是 false  
4.对象：所有对象都为 true

##### 5.1.7 流程控制语句 #####

1.if…else…  
2.switch（在 JS 中,switch 语句可以接受任意的原始数据类型）  
3.while  
4.do…while  
5.for

##### 5.1.8 JS特殊语法 #####

1.语句以;结尾，如果一行只有一条语句;可以不写，但是不推荐  
2.变量的定义使用var关键字，也可以不用

*  用：定义的是局部变量
 *  不用：定义的是全局变量

##### 5.1.9 九九乘法表设计练习 #####

1.效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]  
2.代码实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{
          
                margin: auto;
            }
            td{
          
                border: 1px solid;
            }
        </style>
        <script>
            document.write("<table>");
            for (var i = 1; i <= 9; i++) {
          
                document.write("<tr>");
                for (var j = 1; j <= i ; j++) {
          
                    document.write("<td>");
                    document.write(j+"*"+i+"="+i*j+"   ");
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
        </script>
    </head>
    <body>
        
    </body>
    </html>

#### 5.2 基本对象 ####

##### 5.2.1 Function：函数（方法）对象 #####

1.创建：

*  构造函数定义（不推荐使用）

var myFunction = new Function("a","b","return a*b");
    var x = myFunction(2,4);

*  函数表达式定义

var myFunction = function (a,b) {
        
        return a*b;
    };
    var x = myFunction(2,4);

*  函数声明定义

function myFuction(a,b) {
        
    	return a*b;
    }
    var x = myFuction(2,4);

2.方法

3.属性：  
**arguments.length：返回形参的个数**

4.特点

*  函数定义时，形参的类型和返回值类型都可以不写
 *  定义名称、参数相同的函数，会覆盖前面那个函数

function myFuction(a,b) {
        
        return a;
    }
    function myFuction(a,b) {
        
        return a*b;
    }
    document.write(myFuction(3,4));// 12

*  函数的调用只与函数的名称有关，实参和形参不一样也能执行

function myFuction(a,b) {
        
        return a;
    }
    var w = myFuction();// undefined
    var x = myFuction(2);// 2
    var y= myFuction(2,3);// 2
    var z = myFuction(2,3,4);// 2

*  在函数声明中有一个隐藏的内置对象（数组）arguments，封装所有的实际参数。（求任意个数数的和）

// 求任意个数的数的和
    function add() {
        
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
        
            sum += arguments[i];
        }
        return sum;
    }
    document.write(add(2,4,7));// 13

##### 5.2.2 Array：数组对象 #####

1.创建  
**Array内部只有一个数字表示默认长度，如Array(2)**  
**内部两个数字，表示数组内容，如Array（1,2）**

*  常规方式

// 不指定数组长度
    var arr1 = new Array();
    arr1[0] = 1;
    arr1[1] = 2;
    // 指定数组长度
    var arr1 = new Array(2);
    arr1[0] = 1;
    arr1[1] = 2;

*  简洁方式

var arr3 = new Array(1,2);

*  字面方式

var arr4 = [1,2];

2.方法

*  join(参数)：将数组中的元素按照指定的分隔符拼接为字符串，默认为逗号，可传入参数作为分隔符。

var arr = new Array(1,2,3);
    document.write(arr.join());// 1,2,3

*  push()：向数组的末尾添加一个或更多元素，并返回新的长度。

var arr = new Array(1,2,3);
    arr.push(4,5,6);
    document.write(arr);// 1,2,3,4,5,6

3.属性

*  length：数组的长度

4.特点

*  JS 中，数组元素的类型可变的。

var arr = [1,"abc",true];

*  JS 中，数组长度可变的。

var arr = new Array(2);
    arr[0] = 1;
    arr[1] = 2;
    arr[10] = 3;
    document.write(arr.length);// 11

##### 5.2.3 Boolean #####

##### 5.2.4 Date ： 日期对象 #####

1.创建

var date = new Date();

2.方法

*  toLocaleString()：返回当前date对象对应的时间本地字符串格式

var date = new Date();
    document.write(date.toLocaleString());// 2020/2/26 下午6:11:45

*  getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。

var date = new Date();
    document.write(date.getTime()+"<br>")// 1565456951248

##### 5.2.5 数学对象 #####

1.创建

*  Math对象不用创建，直接使用。

2.方法

*  random()：返回 0 ~ 1 之间的随机数。 （含0不含1）

document.write(Math.random());

*  round(x)：把数四舍五入为最接近的整数

document.write(Math.round(3.14));// 3
    document.write(Math.round(-3.14));// -3

*  ceil(x)：对数进行上舍入。即大于该数的最小整数。

document.write(Math.ceil(3.14));// 4
    document.write(Math.ceil(-3.14));// -3

*  floor(x)：对数进行下舍入。即小于该数的最大整数。

document.write(Math.floor(3.14));// 3
    document.write(Math.floor(-3.14));// -4

3.属性

document.write(Math.PI);// 3.141592653589793

**取1-100之间算计整数**

var number = Math.floor((Math.random()*100))+1;
    document.write(number);

##### 5.2.6 Number #####

##### 5.2.7 String #####

##### 5.2.8 RegExp:正则表达式对象 #####

1.正则表达式的概念

*  定义字符串的组成规则

2.正则表达式的使用

*  单个字符  
    1.\[abc\]：查找方括号之间的任何字符。  
    2.\[0-9\]：查找任何从 0 至 9 的数字。  
    3.\[a-z\]：查找任何从小写 a 到小写 z 的字符。  
    4.\[A-Z\]：查找任何从大写 A 到大写 Z 的字符。  
    5.\\d：单个数字字符 0-9  
    6.\\w：用于查找单词字符。（单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 \_ (下划线) 字符。）
 *  量词符号
    
    \{m,n\}：表示 m <= 数量 <= n  
    m 如果缺省：\{,n\}：最多n次  
    n 如果缺省：\{m,\}：最少m次
 *  开始结束符号
    
    1.^：开始  
    2.$：结束

3.正则表达式对象的创建

var reg = new RegExp("正则表达式");
    // 或更简单的方法
    var reg = /正则表达式/;

4.正则表达式对象的方法

*  test(参数)：验证指定的字符串是否符合正则定义的规范

5.正则表达式练习

// 要求用户名为 6-10 个单词字符
    var reg = /^\w{6,10}$/;
    var username1 = "ZhangSan";
    var username2 = "LiSi";
    var username3 = "WangWu123";
    var username4 = "小明12345";
    document.write(reg.test(username1)+"<br>");// true
    document.write(reg.test(username2)+"<br>");// false
    document.write(reg.test(username3)+"<br>");// true
    document.write(reg.test(username4)+"<br>");// false

##### 5.2.9 lobal：全局对象 #####

1.特点

*  Global 中封装的方法不需要对象就可以直接调用。

2.方法

*  URL 编码的概念
    
    在浏览器中访问，做数据传输时需要通过 HTTP 协议，而协议不支持中文数据，所以中文数据要发送到服务端，就需要先进行转码，转码通常采用 URL 编码。
    
    注意：如果采用 GBK 编码，那么 1 个汉字转成 2 个字节；
    
    如果采用 UTF-8 编码，那么 1 个汉字转成 3 个字节
    
    1 个字节对应 1 个 % 加 两个十六进制数
 *  encodeURI()：URL 编码

var encode = encodeURI("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
    document.write(encode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

*  decodeURI()：URL 解码

var decode = decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
    document.write(decode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=数据结构

*  encodeURIComponent()：URL 编码，编码的字符更多

var encode = encodeURIComponent("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
    document.write(encode);

结果

https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

*  decodeURIComponent()：URL 解码，解码的字符更多

var decode = decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
    document.write(decode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=数据结构

*  parseInt()：将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）

var str1 = "123"
    var str2 = "12a3";
    var str3 = "a123";
    document.write(parseInt(str1)+"<br>");// 123
    document.write(parseInt(str2)+"<br>");// 12
    document.write(parseInt(str3)+"<br>");// NaN

*  isNaN()：判断一个值是否是 NaN

var a = NaN;
    // NaN 参与的 == 比较全部是 false
    document.write(a == NaN);// false
    document.write(isNaN(a));// true

*  eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。

var jscode = "alert(123)";
    eval(jscode);// 执行 alert(123)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227160208753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz,size_16,color_FFFFFF,t_70