03_08_JavaWeb||day09_javaScript基础【重点掌握】||day09_1_JavaScript基础【重点掌握】

时间：2023-02-26 19:00:30


今日内容

  1. JavaScript基础
  • (建议写到body的最后面，防止先加载后获取导致获取不到)

1.1 JavaScript：

1.1.1 概念：一门客户端脚本语言

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

1.1.2 功能【重点】：（HTML：完成页面元素的展示，CSS：完成页面样式的控制和布局的）

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

1.1.3 JavaScript发展史：

  • ++以前网不好，注册一个表单就会浪费一天的时间，来进行后端的校验，所以就发明了一种客户端脚本语言–>在浏览器可以直接执行，不需要和服务器之间交互就可以来控制HTML的元素–>验证数据完整了再将数据发送给服务器++
  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C–，后来更名为：ScriptEase
  2. 1995年，++Netscape(网景)公司++，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，++微软++抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，++制定出客户端脚本语言的标准++：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
  • 所以：JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)【注】

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

1.1.4.1 基本语法【*】：

  1. 与html结合方式
  1. 内部JS：(可以写到任意位置，一般写到一个特定的位置：比如标签中)
  • ++定义
  • 案例：99乘法表
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            td{
                border: 1px solid;
            }
        </style>

        <script>

            document.write("<table  align='center'>");

            for(var i = 1; i <= 9; i++){
                document.write("<tr>");
                for(var j = 1; j <= i; j++){
                    document.write("<td>");
                    document.write(i + "*" + j + "=" + (i * j) + "    ");
                    document.write("</td>");
                }
                //document.write("<br>");
                document.write("</tr>");
            }


            //完成表格嵌套
            document.write("</table>");
        </script>
    </head>
    <body>

    </body>
    </html>
  • 实现效果：

1.1.4.2 基本对象：

  1. Function：函数(方法)对象
  1. 创建：
  1. 第一种方式【忘掉吧】
  • var fun = new Function(形式参数列表,方法体);
  1. 第二种方式【常用】
function 方法名称(形式参数列表){
    方法体
}
  • 例：
function fun1(a, b) {
    alert(a + b);
}
fun1(3, 4);
  1. 第三种方式
var 方法名 = function(形式参数列表){
     方法体
 }
  • 例：
var fun2 = function(a, b) {
     alert(a + b);
 }
 fun2(3, 4);
  1. 属性：
    length:代表形参的个数
  2. 特点：
  1. 方法定义时，形参的类型不用写,返回值类型也不写。【*】
var fun2 = function(a, b) {
        alert(a + b);
    }
  1. 方法是一个对象，如果定义名称相同的方法，会覆盖【*】
  • java中定义相同方法的话，必须要以重载的形式
var fun2 = function(a, b) {
        alert(a + b);
    }

    var fun2 = function(a, b) {
        alert(a - b);
    }

    fun2(2, 3); //结果为-1，不会报错
  1. 在JS中，方法的调用只与方法的名称有关，和参数列表无关【重要】
function fun1(a, b) {
        alert(a);
        alert(b);
    }
    //第三个参数被一个隐藏的对象接收了看下面
    fun1(3, 4, 5);  //3, 4, 空
    fun1(3);    //3, undefined
    fun1();
  1. 在方法声明中有一个隐藏的++内置对象++（数组），arguments,封装所有的实际参数【常用】
  • 案例：求任意个数的和
function add() {
        var sum = 0;
        for(var i = 0; i < arguments.length; i++){
            sum += arguments[i];
        }
        return sum;
    }

    sum =add(3, 4, 6, 7);   //可以写任意个
    alert(sum);
  1. 调用：
  • 方法名称(实际参数列表);
  1. Array:数组对象
  1. 创建：
  1. var arr = new Array(元素列表);
  2. var arr = new Array(默认长度);
  • 传入的是数组的长度，而不是值
  1. var arr = new Array(); //为空
  2. var arr = [元素列表];
var arr1 = new Array(1, 2, 3);
    var arr2 = new Array(5);//传入的是数组的长度，而不是值
    var arr3 = [4, 5, 6];

    document.write(arr1 + "<br>");//1,2,3
    document.write(arr2 + "<br>");//,,,,
    document.write(arr3 + "<br>");//4,5,6
  1. 方法
  • join(参数):++将数组中的元素按照指定的分隔符拼接为字符串++（不写就是默认，）
  • 案例：将默认的，号改为#来分隔
var arr1 = new Array(1, "abc", true);
    document.write(arr1.join("#") + "<br>");
    //结果：
        1#abc#true
  • push():++向数组的末尾添加一个或更多元素，并返回新的长度++。(相当于java里面的add方法)
  • 案例：将原有数组后面添加一个数字11
var arr1 = new Array(1, "abc", true);
    arr1.push("456")
    document.write(arr1);
    //结果：
        1,abc,true,456
  1. 属性
  • length:数组的长度
  1. 特点：
  1. JS中，数组元素的类型可变的。
var arr1 = new Array(1, "abc", true);
    document.write(arr1+"<br>");    //1,abc,true
    document.write(arr1[2]);    //true
  1. JS中，数组长度可变的。
  • 数组定义3个，多添加了就会自动扩容为4个长度
  • 扩容的数据类型是：undefined
var arr1 = new Array(1, "abc", true);
    document.write(arr1[4]);    //undifined
    arr1[10] = "hehe";
    document.write(arr1[10]);   //hehe
  1. Boolean
  2. Date：日期对象
  1. 创建：
var date = new Date();
  • 例：
var date = new Date();
    document.write(date);
    //结果：
    Fri Apr 03 2020 14:34:54 GMT+0800 (中国标准时间)
  1. 方法：
  • toLocaleString()：++返回当前date对象对应的时间本地字符串格式++
var date = new Date();
    document.write(date.toLocaleString);
    //结果：
    2020/4/3 下午2:36:40
  • getTime():++获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差++
  • 后期会作为时间戳来使用
var date = new Date();
    document.write(date.getTime());
    //结果：
    1585895928968
  1. Math：数学对象
  1. 创建：
  • 特点：Math对象不用创建，直接使用。
  • Math.方法名();
  1. 方法：
  • random():返回 0 ~ 1 之间的随机数。 含0不含1
  • ceil(x)：对数进行上舍入。
  • floor(x)：对数进行下舍入。
  • round(x)：把数四舍五入为最接近的整数。
  • 案例：随机1~100的整数
  • 1.random产生随机数
  • 2.乘以100
  • 3.向下取整(去掉小数)
  • 4.加1
var end = Math.floor(Math.random() * 100) + 1;
    document.write(end);
  1. 属性：
  • PI
document.write(Math.PI);
  1. Number
  2. String
  3. RegExp：正则表达式对象
  1. ++正则表达式：定义字符串的组成规则。【注意：在前端校验常用】++
  1. 单个字符:[]
  • 如： [a] [ab] [a-zA-Z0-9_]
  • 第三个表示：a-z或者A-Z或者0-9或者_的一个单个字符
  • 特殊符号代表特殊含义的单个字符【因为商品表示太麻烦】:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
  1. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
  • {m,n}:表示 m<= 数量 <= n
  • m如果缺省： {,n}:最多n次
  • n如果缺省：{m,} 最少m次
  1. 开始结束符号
  • ^:开始
  • $:结束
  1. ++正则对象：++
  1. 创建
  1. var reg = new RegExp(“正则表达式”);
  • 注：在字符串里\会有转义的意思，要取消
注写\w的时候写成\\w（取消转义表示）
    var reg1 = new RegExp("^\\w{6,20}$");
  1. var reg = /正则表达式/;
  • 不是字符串
  1. 方法
  1. test(参数):++验证指定的字符串是否符合正则定义的规范++
  • 案例：规定字符串长度为6~12
<script>
        //第一种创建方式
        var reg1 = new RegExp("^\\w{6,20}$");
        //第二种创建方式
        var reg2 = /^\w{6,20}/;

        var num = "asdfaifahfaubfi";
        var flag = reg1.test(num);//flase
        document.write(flag);

        var num1 = "addfged";
        var flag1 = reg2.test(num1);//true
        document.write(flag1);
    </script>
  1. Global
  1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用【重点】 
方法名();
  1. 方法：
  • encodeURI():url编码
  • 中文部分
  • decodeURI():url解码
  • encodeURIComponent():url编码,编码的字符更多
  • url中：和//都进行了编码
  • decodeURIComponent():url解码
  • 上面四个出现的原因：【了解】
  1. 浏览器中做数据的传输的时候
  2. 通过一些传输协议（比如：http协议）
  3. 不能传输中文数据的，要想发送中文数据
  4. 就需要对中文进行转码的操作（url编码）
  • 案例：葛晓伟的转换
var str = "葛晓伟";
    //编码
    var encode = encodeURI(str);
    document.write(encode); //%E8%91%9B%E6%99%93%E4%BC%9F
    //解码
    var decode = decodeURI(encode);
    document.write(decode);//葛晓伟
  • parseInt():将字符串转为数字
  • 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
  • 案例：转换"123abc"数字部分后加一，在算"abc123"加一的结果
var num = parseInt("123abc");
    var add = num + 1;
    document.write(add);    //124
    var num1 = parseInt("abc123");
    var add1 = num1 + 1;
    document.write(add1);    //NAN(不是数字的数字类型)
  • isNaN():判断一个值是否是NaN（主要用于它自己）
  • ++NaN六亲不认，连自己都不认。NaN参与的==比较全为false++
var a = NAN;
    document.write(a == NAN);   //false
    document.write(isNaN(a));   //true
  • eval（):将JavaScript 字符串解析为JS代码，并把它作为脚本代码来执行。
  • 案例：将"alert(123);"字符串解析为JS并输出
var jscode = "alert(123);";
    eval（jscode);   //123
  1. URL编码
  • 前提知识：gbk一个中文两个字节，utf-8一个中文三个字节
  • BOM
  • JavaScript高级中讲解
  • DOM
  • JavaScript高级中讲解


标签：

相关文章