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

狂野小白兔

已于 2022-05-20 09:36:48 修改

阅读量139

点赞数

分类专栏：笔记文章标签：后端 javascript 前端 java

于 2020-04-22 09:20:53 首次发布

本文链接：https://blog.csdn.net/qq_40572023/article/details/105674156

版权

笔记专栏收录该内容

159 篇文章 3 订阅

订阅专栏

今日内容

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

1.1 JavaScript：

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

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

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

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

1.1.3 JavaScript发展史：

++以前网不好，注册一个表单就会浪费一天的时间，来进行后端的校验，所以就发明了一种客户端脚本语言–>在浏览器可以直接执行，不需要和服务器之间交互就可以来控制HTML的元素–>验证数据完整了再将数据发送给服务器++

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C–，后来更名为：ScriptEase
1995年，++Netscape(网景)公司++，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，++微软++抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，++制定出客户端脚本语言的标准++：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

所以：JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)【注】

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

1.1.4.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) + "&nbsp&nbsp&nbsp&nbsp");
                    document.write("</td>");
                }
                //document.write("<br>");
                document.write("</tr>");
            }
    
    
            //完成表格嵌套
            document.write("</table>");
        </script>
    </head>
    <body>
    
    </body>
    </html>

实现效果：

1.1.4.2 基本对象：

Function：函数(方法)对象

创建：

第一种方式【忘掉吧】
- var fun = new Function(形式参数列表,方法体);

第二种方式【常用】

function 方法名称(形式参数列表){
    方法体
}

例：

function fun1(a, b) {
    alert(a + b);
}
fun1(3, 4);

第三种方式

 var 方法名 = function(形式参数列表){
     方法体
 }

例：

 var fun2 = function(a, b) {
     alert(a + b);
 }
 fun2(3, 4);

属性：
length:代表形参的个数

特点：

方法定义时，形参的类型不用写,返回值类型也不写。【*】

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

方法是一个对象，如果定义名称相同的方法，会覆盖【*】

java中定义相同方法的话，必须要以重载的形式

    var fun2 = function(a, b) {
        alert(a + b);
    }
    
    var fun2 = function(a, b) {
        alert(a - b);
    }
    
    fun2(2, 3); //结果为-1，不会报错

在JS中，方法的调用只与方法的名称有关，和参数列表无关【重要】

    function fun1(a, b) {
        alert(a);
        alert(b);
    }
    //第三个参数被一个隐藏的对象接收了看下面
    fun1(3, 4, 5);  //3, 4, 空
    fun1(3);    //3, undefined
    fun1();

在方法声明中有一个隐藏的++内置对象++（数组），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);

调用：
- 方法名称(实际参数列表);

Array:数组对象

创建：

var arr = new Array(元素列表);
var arr = new Array(默认长度);
- 传入的是数组的长度，而不是值
var arr = new Array(); //为空
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

方法
- 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
```
属性
- length:数组的长度

特点：

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

    var arr1 = new Array(1, "abc", true);
    document.write(arr1+"<br>");    //1,abc,true
    document.write(arr1[2]);    //true

JS中，数组长度可变的。

数组定义3个，多添加了就会自动扩容为4个长度
扩容的数据类型是：undefined

    var arr1 = new Array(1, "abc", true);
    document.write(arr1[4]);    //undifined
    arr1[10] = "hehe";
    document.write(arr1[10]);   //hehe

Boolean

Date：日期对象

创建：

    var date = new Date();

例：

    var date = new Date();
    document.write(date);
    //结果：
    Fri Apr 03 2020 14:34:54 GMT+0800 (中国标准时间)

方法：
- 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
```

Math：数学对象
1. 创建：
  - 特点：Math对象不用创建，直接使用。
  - Math.方法名();
2. 方法：
  - 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);
```
3. 属性：
  - PI
```
    document.write(Math.PI);
```
Number
String
RegExp：正则表达式对象
1. ++正则表达式：定义字符串的组成规则。【注意：在前端校验常用】++
  1. 单个字符:[]
    - 如： [a] [ab] [a-zA-Z0-9_]
      - 第三个表示：a-z或者A-Z或者0-9或者_的一个单个字符
      - 特殊符号代表特殊含义的单个字符【因为商品表示太麻烦】:
        \d:单个数字字符 [0-9] \w:单个单词字符[a-zA-Z0-9_]
  2. 量词符号：
```
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
```
    - {m,n}:表示 m<= 数量 <= n
      - m如果缺省： {,n}:最多n次
      - n如果缺省：{m,} 最少m次
  3. 开始结束符号
    - ^:开始
    - $:结束
2. ++正则对象：++
  1. 创建
    1. var reg = new RegExp(“正则表达式”);
      - 注：在字符串里\会有转义的意思，要取消
```
    注写\w的时候写成\\w（取消转义表示）
    var reg1 = new RegExp("^\\w{6,20}$");
```
    2. var reg = /正则表达式/;
      - 不是字符串
  2. 方法
    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>
```
Global
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用【重点】
```
    方法名();
```
2. 方法：
  - 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
```
3. URL编码
  - 前提知识：gbk一个中文两个字节，utf-8一个中文三个字节

BOM
- JavaScript高级中讲解
DOM
- - JavaScript高级中讲解

狂野小白兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
03_08_JavaWeb||day09_javaScript基础【重点掌握】||day09_1_JavaScript基础【重点掌握】

今日内容JavaScript基础(建议写到body的最后面，防止先加载后获取导致获取不到)1.1 JavaScript：1.1.1 概念：一门客户端脚本语言运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎脚本语言：不需要编译，直接就可以被浏览器解析执行了1.1.2 功能【重点】：（HTML：完成页面元素的展示，CSS：完成页面样式的控制和布局的）...
复制链接

扫一扫