Java Web学习之JavaScript_ECMAScript学习

Posted 2021-07-12 听路走歌

JavaScript基础--ECMAScript

JavaScript=ECMAScript+BOM+DOM

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

1，概念：JavaScript是一门客户端脚本语言
              *运行在客户端浏览器中，每一个客户端浏览器都有javascript的解析引擎
              *脚本语言：不需要编译，直接可以在浏览器中解析运行
              *功能：可以增强用户和html页面的交互过程，可以控制html元素让页面有一些动态效果 ，增强用户的体验。

基本语法：

   1，与html的结合方式
        内部JS：
                   定义<script>,标签体内容就是js代码
        外部JS：
                    定义<script>,通过src属性引入外部js文件
        注意：
        1，<script>可以定义在html的任何位置，但是定义的位置会影响执行顺序
        2，<script>可以定义多个

  2，注释
        1，单行注释：//注释内容
        2，多行注释：/*注释内容*/

  3，数据类型
        1，原始数据类型（就是基本数据类型）
              number：数字（整数/小数/NaN）
              string：字符串
              boolean：false/true
              null：一个对象为空的占位符
              undefined：未定义（如果一个变量没有给初始化值，默认为undefined）
        2，引用数据类型：对象

   4，变量
        变量：一小块存储数据的内存空间
        强类型语言：开辟变量存储空间时，定义了空间存储的数据类型，只能存储固定类型的数据。
        弱类型语言：开辟变量空间时，不定义空间将来的存储数据类型，可以存放任意类型数据。
        java语言是强类型语言，javascript是弱类型语言
        语法：
               var 变量名 = 初始化值；
        确定数据类型：typeof（使用javaScript，不需要指明数据类型）

  

   5，运算符
        1，一元运算符：只有一个运算数的运算符
            如：++，--（自增、自减），+（正号）    
           ++（--）在前，先自增（自减）， 再运算
            ++（--）在后，先运算，再自增（自减）

             +（-）正负号：
              注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
         其他类型转number：
            string转number：按照字面值转换，如果字面值不是数字，
则转为NaN（不是数字的数字）
            boolean转number；true转为1，dalse转为0

        2，算术运算符：
             如：+、-、*、/、%。。。
        3，赋值运算符
             如：=、+=、-=。。。。
        4，比较运算符
             如：> < >= <=  ==   ===(全等于）
                     比较方式：
                    1，类型相同，直接比较
                              字符串比较：按照字典顺序比较：按位逐一比较，直到得出大小为止
                    2，类型不同，先进行类型转换再比较
                  ===：全等于，在比较之前先判断类型，如果类型不一致则直接返回false
        5，逻辑运算符
             如：&&  ||  ！
           ！中  注意：其他类型转boolean：
            1，number转：0或者NaN为假，其他为真
            如：
                 var num = 3；
                 document.write(!flag) flase

            2，null&undefined转：都是false
            3，string转：除了空字符串（“”），其他都为true
            4，对象转：所有对象都是true

        6，三元运算符
             如： ？ ：表达式
             var a =3;
                  var b =4;
                    var c = a > b ? 1:0;
            语法：
            表达式？值1：值2；
            判断表达式的值，如果为true则取值1，如果为false则取值2

    6，流程控制语句：基本和java一致，不过多介绍
            1，if...else...
             2,switch
                            在JS中，switch语句可以接收任意类型
            3,while
            4,do....while
            5,for

      7，JS特殊语法：
            1,语句以；分号结尾，如果只有一条语句则可以省略（不建议）
                       
            2,变量的定义使用var关键字，也可以不用（这一条可以忽略，了解即可）
                        用:定义的变量为局部变量
                        不用：定义的变量为全局变量（不建议使用）

  基本对象

   1，Function：函数对象
             1，创建（三种方式）
                   1，var fun = new Function(形式参数列表，方法体）；(不符合定义方法逻辑，不建议)
                   2，function 方法名称（形式参数列表）{   (最常见的定义方法）
                                       方法体
                              }
                   3，var 方法名 = function（形式参数列表）{}
             2，方法
             3，属性： length：代表形参的个数
             4，特点：
                   1，方法定义时，形参参数类型不用写（即var省略）,返回值类型也不需要写
                   2,方法是一个对象，如果定义名称相同的方法会被覆盖
                   3，在JS中，方法的调用只与方法的名称有关，和参数列表无关
                   4，在方法声明中有一个隐藏的内置对象argements，封装所有的实际参数
                   5，调用： 方法名称（实际参数列表）
           
    2，Boolean
    3，Date：
           1，创建：var date = new Date();
           2,方法:
                      toLocalString() 返回当前date对象对应的时间本地字符串格式
                      getTime() 获取毫秒值。返回当前日期对象描述的时间到1970年1月1零点日的毫秒值差

    4，Math：数学对象，该对象不需要创建，直接使用即可Math.+方法名
              方法    ： 
                     random() 返回0-1之间的随机数(包含0，不包含1)
                     ceil（）对数进行向上取整
                     floor（）对数进行向下取整
                     round（）把数四舍五入为最接近的整数
                     属性 ： PI (圆周率）
                  
    5，Number
    6，String
    7，RegExp：正则表达式对象
            1，正则表达式：定义字符串的组成规则
                 1，单个字符：[]
                   如：[a] [ab] [a-zA-Z0-9]
                  特殊符号代表特殊含义的单个字符
                   \\d:单个数字字符[0-9]
                  \\w:单个单词字符[a-zA-Z]
                2,量词符号：
                  ？：表示出现0次或者1次
                  *：表示出现0次或者多次
                  +：表示出现1次或者多次
                  {m，n}：表示m<= 数量<=n
                  如果m缺省，表示最多n次：{，n}
                  如果n缺省，表示最少m次：{m，}
          2，正则表达式对象    
              1，创建：
                1，var reg = new RegExp（"正则表达式"）
                2，var reg =/正则表达式/;
              2,方法：
                1，test（参数）：验证指定的字符串是否符合正则定义的规范
                  例子：
                 

var reg = new RegExp("^\\\\w{6,12}$");
var username = "zhansan";
//验证：
var flag = reg.test(username);
alert(flag);

    8，Global
                 1，特点：全局变量，封装的方法不需要调用就可以直接调用。  方法名（）；    
                 2，方法：
                       encodeURI（）：url编码
                       decodeURI（）：url解码

                       encodeURIComponent（）：url编码,编码的字符更多
                       decodeURIComponent（）：url解码
                      URL编码：
                       如：传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2（一串16进制）
                       parseInt（）：将字符串转为数字。注意：判断每一个字符是否为数字直到不是数字为止，将前边部分转为number类型
    代码例子：
               

 var str = "传智播客";
 var encode = encodeURI(str);
 document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A
 var s = decodeURI(encode);
 document.write(s+"<br>");

 var str = "传智播客";
 var encode1 =encodeURIComponent(str);
 document.write(encode1+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
 var s1 = decodeURIComponent(encode);
 document.write(s1+"<br>");

   9，Array
             Array:数组对象
                   1，var arr = new Array(元素列表)；
                   2，var arr = new Array(默认长度)；//表示数组长度
                   3，var arr = [元素列表]；
                  方法：
                    join（参数）：将数组中的元素按照指定的分隔符拼接为字符串
                    push() 向数组的末尾添加一个或者多个元素，并返回新的长度

                  特点：
                    1，JS中，数组元素的类型是可变的
                    2，JS中，数组长度是可变的