花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

JavaScript 学习笔记（一）

作者：花生_TL007 | 2024-05-31 14:24:09

踩

JavaScript 学习笔记（一）

一、JavaScript概述

JavaScript是基于对象【面向对象】和事件驱动的脚本语言，主要应用在客户端。
　　JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要浏览器来解析执行JavaScript代码。

1.1 特点

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

1.2 JavaScript与Java不同

JS是Netscape公司的产品，前身是LiveScript。Java是Sun公司的产品，现在是Oracle公司的产品。 JScript微软 w3c ECMA组织 ECMAScrip jQuery
JS是基于对象【面向对象】，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 JS代码有误，浏览器一般不会提示错误。
JS是弱类型，Java是强类型。

二、JS和HTML代码的结合方式

需要在html文件中使用到JS代码时，有两种结合方式：内部结合和外部结合。JS代码可以定义在html文件的任意位置，但是官方建议和CSS文件一样定义在head标签中。

2.1 内部结合

JS的内部结合需要使用到script标签来实现，语法如下

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script type="text/javascript">
        // 书写js代码
        alert("Hello World!!");
    </script>
</head>
1
2
3
4
5
6
7
8

2.2 外部结合

JS外部结合的使用和CSS外部样式的使用很类似，需要将所有的JS代码定义在一个扩展名为.js的文件中，然后引入到html文件中即可。语法如下

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script type="text/javascript" src="路径"></script>
</head>
1
2
3
4
5

三、JS中的注释

JavaScript是一门编程语言，任何一门编程语言都会具备如下的特点：

注释
关键字、标识符
常量、变量、运算符
语句、判断、循环、switch
函数方法
数组

我们学习JS主要就是学JS和Java的不同之处。
Java中一句话结束，使用 ; 号表示
JS中一句话结束，也使用;号表示，但是可以省略
注释主要是对代码进行解释说明的。JS中的注释有两种，和Java中的注释基本一致。

3.1 单行注释

//  注释内容
1

3.2 多行注释

/*  
	注释内容
	注释内容
	注释内容
*/ 
1
2
3
4
5

四、JS中的关键字和标识符

关键字：被JS赋予了特定含义的单词或者字母的组合。
var if switch do while for continue break等。

标识符：开发者根据自己的业务需求定义的标识符号，这些符号可以由：字母、数字、下划线和 $ 符号组成，不能以数字开头，不能是关键字。

标识符应用于：变量名、方法名、数组名….

五、JS中的常量和数据类型

Java中的常量分类：整数、小数、字符、布尔值、null、字符串。
Java中的数据类型：
整数：byte short int long
小数：float double
字符：char ‘值’
布尔：boolean
字符串：String “值”
数组类型、类类型、枚举类型、接口类型、注解类型。

5.1 Js中的常量分类

数值：整数和小数
字符串：在js中使用单引号或者双引号引用起来的全部都是字符串
布尔：true false
在js中所有非零值都可以理解成true，零，null、undefined等可以理解成false。
null：null
undefined：undefined

5.2 JS中的数据类型

数值型：number
字符串：string
布尔：boolean
对象类型：Object

在JS中也有二进制、八进制、十进制、十六进制。运算规则和Java一致。

六、JS中的变量

变量：表示的是一个独立的内存空间，可以用于保存常量数据。
Java中变量的定义格式

数据类型 变量名;
数据类型 变量名 = 值;
1
2

6.2 JS中变量的定义格式

var 变量名;
var 变量名 = 初始值;
1
2

注意

JS中定义的变量空间，在没有赋值之前，这些空间中是没有数据类型的。定义的空间可以保存任何类型的数据。保存什么类型的数据，变量空间就是什么类型的空间。

代码演示

<script type="text/javascript">
    //JS中的变量 typeof()方法用于测试数据类型
    var x = 123;
    alert(x);
    alert(typeof (x));
    x = "abc";
    alert(x);
    alert(typeof (x));
</script>
1
2
3
4
5
6
7
8
9

七、JS中的运算符

Java中的运算符，在JS中一样可以使用，但是在运算的结果上有部分存在差异，主要就是要留意JS中的运算和Java中运算结果的区别。

7.1 算数运算

JS中算数运算的运算符和Java中的完全一致，运算结果部分稍有不同。
JS中的算数运算的结果，和生活中的算数运算的结果完全相同。

+ - * / % ++ --

代码演示

<script type="text/javascript">
    /*
        结果为4321,在js中只有数值类型，没有整数和小数之分。
        不同于Java中相同数据类型的数据运算后还是当前类型。
    */
    var x = 4321 / 1000 * 1000;
    // alert(x);

    var a = 23;
    // 字符串和其他数据使用+号运算，结果拼接成一个新的更长的字符串。
    var b = "100" + 23;
    alert(b);
    var c = "100" - 23;
    alert(c);
   
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

字符串和其他数据使用+号外的其他运算符进行运算

如果字符串可以转换为number类型，则转换为number类型后再进行运算。
如果字符串不能转换为number类型，则得到一个NaN【非数字】结果。

7.2 赋值运算

JS中赋值运算的运算符和Java中的完全一致，运算结果也全部相同。

= += -= *= /=

代码演示

<script type="text/javascript">
    var a = 10;
    var b = 20;
    alert( a += b );
    alert( a -= b );
    alert( a *= b );
    alert( a /= b );
</script>
1
2
3
4
5
6
7
8

7.3 比较运算

JS中赋值运算的运算符和Java中的基本一致，结果都是boolean值，运算结果稍有不同。

> >= < <= != == ===[绝对等恒等]

代码演示

<script type="text/javascript">
    var x = 10;
    var y = 20;
    alert( x = y );

    // 判断左右两边数据是否相等
    alert( x == y );
    // 先将字符串转换为number类型在进行比较
    alert( x == "20" );
    // 两侧的数据和数据类型必须都相同，结果为true
    alert( x === "20" );
</script>
1
2
3
4
5
6
7
8
9
10
11
12

7.4 逻辑运算

JS中逻辑运算的运算符和Java中的稍有不同，只有&& || !，运算结果相同，运算方式有区别。

在js中
　　遇到所有的零 null undefined 结果都是false
　　遇到所有的非零非null 非undefined 结果都是true

7.4.1 && 逻辑与运算【一假即假】

如果运算符两侧给出的最终结果是true或false，则运算过程和结果同Java中的一致。
如果运算符两侧给出的最终结果不是true或false时
　　当左侧的结果为false时【零 | null | undefined】，则直接返回左侧的结果
　　当左侧的结果为true时【非零 | 非null | 非undefined】，则直接返回右侧的结果

7.4.2 || 逻辑或运算【一真即真】

如果运算符两侧给出的最终结果是true或false，则运算过程和结果同Java中的一致。
如果运算符两侧给出的最终结果不是true或false时
　　当左侧的结果为false时【零|null|undefined】，则直接返回又侧的结果
　　当左侧的结果为true时【非零|非null|非undefined】，则直接返回左侧的结果

代码演示

<script type="text/javascript">
    alert(1 < 2 && 3 < 4);
    alert(3 && 4);

    alert(1 < 2 || 3 > 4);
    alert(null || 0);

    alert(!-1);
</script>
1
2
3
4
5
6
7
8
9

7.5 三元运算

JS中三元运算的运算符以及运算的结果和Java中的完全一致。


    表达式结果:
        true: 执行结果1
        false:执行结果2

表达式 ? 结果1 : 结果2;
1
2
3
4
5
6

代码演示

<script type="text/javascript">
    alert(3 > 4 ? "abc" : "ABC");
    alert(3 ? "abc" : "ABC");
</script>
1
2
3
4

八、JS 语句

JS中的语句和Java中的语句一样，都是用于控制程序的执行流程：
　　判断语句、分支语句、循环语句。

8.1. 判断语句

8.1.1 if 判断语句，用于单个条件的判断

if(判断条件) {
   条件成立后执行的代码；
}
1
2
3

练习：判断一个整数的奇偶性

<script type="text/javascript">
    var x = 9;
    if ( x % 2 == 0 ) {
        alert("偶数！");
    }
    if( x % 2 == 1 ) {
        alert("奇数！");
    }
</script>
1
2
3
4
5
6
7
8
9

8.1.2 if-else 语句，用于互斥条件的判断

if(判断条件) {
    判断条件成立执行的代码;
}else{
    判断条件不成立执行的代码;
}
1
2
3
4
5

练习：判断一个整数的奇偶性

<script type="text/javascript">
    var x = 10;
    // 常规写法
    if ( x % 2 == 0 ) {
        alert("偶数！");
    }else{
        alert("奇数！");
    }
    // 优秀写法
    if( x % 2 ) {
        alert("奇数！")
    }else{
        alert("偶数！")
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

8.1.3 if-elseif 语句，用于多个条件的判断

if(判断条件1){
    判断条件1成立执行的代码;
}else if(判断条件2){
    判断条件2成立执行的代码;
}else if(判断条件3){
    判断条件3成立执行的代码;
}
 ...
else {
    所有条件都不成立执行的代码;
}
1
2
3
4
5
6
7
8
9
10
11

练习：判断两个整数的大小关系

<script type="text/javascript">
    var a = 10;
    var b = 20;
    if( a > b ) {
        alert(a + "大")
    } else if( a < b ) {
        alert(b + "大")
    }else{
        alert("一样大")
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

注意

当判断语句的{}中只要一条语句时，可以省略{}，但是不建议。
判断语句的判断条件也遵守零 null undefined 为false的结果。

8.2. 分支语句

switch 分支语句的语法以及执行流程和Java中基本一致。

switch(表达式){// 表达式必须可以计算出一个结果
    case 常量1:
        JS语句;
        break;
    case 常量1:
        JS语句;
        break;
    case 常量1:
        JS语句;
        break;
    case 常量1:
        JS语句;
        break;
    default:
        JS语句;
        break;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

练习：通过月份计算当月多少天（默认2月28天）

<script type="text/javascript">
    var month = 10;
    switch (month) {
        case 1:case 3:case 5:case 7:case 8:case 10:case 12:
            alert(month + "月，31天");
            break;
        case 4:case 6:case 9:case 11:
            alert(month + "月，30天");
            break;
        case 2:
            alert(month + "月，28天");
            break;
        default:
            alert("没有" + month + "月份");
            break;
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8.3 循环语句

循环语句的主要作用是让某些代码在满足条件的情况下多次的执行。
在循环语句中同样可以使用break 和 continue关键字来控制循环的执行流程。

break：结束当前循环。
continue：跳过当次循环。

8.3.1 while循环

while循环语法

while(循环条件){
    JS循环语句;      
}
1
2
3

while循环流程

先执行循环条件，条件为true则执行循环语句，当循环语句执行结束之后，继续执行循环条件。直到循环条件为false时，结束循环语句。

练习：计算1-10的和

<script type="text/javascript">
    var sum = 0;
    var i = 1;
    while ( i <= 10 ) {
        sum += i;
        i++;
    }
    alert(sum);
</script>
1
2
3
4
5
6
7
8
9

8.3.2 do-while循环

do-while循环语法

do{
    JS循环语句;
}while(循环条件);
1
2
3

do-while循环流程

先执行do循环语句，然后执行条件判断。条件结果为true时，继续执行循环语句。直到循环条件为false时，结束do-while语句。
　　while语句先判断后执行。
　　do-while语句先执行后判断，不管条件是否满足，至少执行一次循环语句。

练习：计算1-10的和

<script type="text/javascript">
    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    } while (i <= 10);
    alert(sum);
</script>
1
2
3
4
5
6
7
8
9

8.3.3 for循环

for循环语法

for(初始化变量;循环条件;变量迭代){
    JS循环语句;
}
1
2
3

for循环流程

先执行初始化变量，然后执行循环条件，结果为true执行循环语句，循环语句结束后执行变量迭代，然后继续执行循环条件，直到循环条件结果为false时，结束。

练习：统计1-100之间能够被3和7整除的数字个数

<script type="text/javascript">
    var count = 0;
    for( var i = 1; i <= 100; i++ ) {
        if( i % 3 == 0 && i % 7 == 0 ) {
            count++;
        }
    }
    alert(count);
</script>
1
2
3
4
5
6
7
8
9

8.3.4 嵌套循环

嵌套循环没有固定的语法结构，表示在一个循环的循环体中包含另一个循环语句。

循环嵌套的执行顺序

外层循环执行一次，内层循环要从头到尾执行一遍，内循环没有执行完时，表示外循环的循环体没有结束。因此不能进入下次外层循环。只有内层循环彻底执行结束，才表示外层循环的一次结束。

代码演示

<script type="text/javascript">
    // document对象通过write()方法可以将数据写到html页面
    for ( var i = 1; i <= 3; i++ ) {
        //alert("做" + i + "天和尚");
        document.write("做" + i + "天和尚<br/>");
        for ( var j = 1; j <= 3; j++ ) {
            //alert("撞" + j + "次钟！");
            document.write("&nbsp;&nbsp;&nbsp;撞" + j + "次钟！<br/>");
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

练习：打印9*9乘法表

<style >
    td {
        padding: 8px;
    }
</style>
<script type="text/javascript">
    // 写出表格开始标签
    document.write("<table>");
    for( var i = 1; i <= 9; i++ ) {
        // 写出表格行开始标签
        document.write("<tr>");
        for ( var j = 1; j <= i; j++ ) {
            // 写出单元格开始结束标签和单元格内容
            document.write( "<td>" + j + " * " + i + " = " + i * j  + "</td>");
        }
        // 写出表格行结束标签
        document.write("</tr>");
    }
    // 写出表格结束标签
    document.write("</table>");
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

九、JS中的函数

函数也叫方法，和Java中方法的概念以及作用是相同，表示一段被独立封装的代码。每个函数都会有一个固定的作用，需要使用时调用即可。是提高代码复用性的重要手段之一。
Java中的方法定义和调用格式

// 方法的定义格式
public [static] 返回值类型 methodName(形参) { 
    方法体;
}
// 方法的调用格式
methodName(实参);
1
2
3
4
5
6

9.1 函数的第一种定义格式

9.1.1 函数定义格式

function functionName(形参){
    函数体;
}
1
2
3

9.1.2 调用格式

functionName(实参);
1

9.1.3 无参无返回值函数演示

<script type="text/javascript">
    // 定义函数
    function demo() {
    alert("demo run...");
    }
    // 调用函数
    demo(); 
</script>
1
2
3
4
5
6
7
8

9.1.4 有返回值函数演示

如果函数执行结束之后需要返回结果，在函数体中直接使用return关键字返回结果即可，JS中的函数没有返回值类型的限制。

<script type="text/javascript">
    // 定义函数
    function demo() {
    return "demo run...";
    }
    // 调用函数
    var value = demo();
    alert(value);
</script>
1
2
3
4
5
6
7
8
9

9.1.5 有参数函数演示

如果函数需要接收参数，形参列表中只需要声明变量名即可，不需要使用var关键字。

<script type="text/javascript">
    // 定义函数
    function demo( a,b ) {
    alert(a + b);
    }
    // 调用函数
    demo( 1,2 );    
</script>
1
2
3
4
5
6
7
8

9.1.6 函数的细节

在JS中函数没有重载的概念，如果在 js 中出现了多个同名的函数，那么后面的函数会把前面的函数覆盖掉。
在JS中如果函数需要接收参数，但是调用函数时没有传递参数，这时变量的结果全部都是undefined。
JS中函数不管是否有形参，在调用的时候，都可以给其传递实参。而如果有形参，调用时也可以传递多余形参个数的实参数据。原因是：
　　在JS中的函数中有一个内置的arguments参数用于接收传递的所有数据，这个参数本身是一个数组对象。
　　后期使用JS中的函数时，需要接收参数，就在函数上定义变量，如果不需要就不定义，很少使用arguments数组操作。

9.2 函数的第二种定义格式

var functionName = new Function("形参","函数体代码;");
1

代码演示

<script type="text/javascript">
    // 定义函数
    var demo = new Function("x,y", "return x + y;");
    // 调用函数
    var value = demo(1, 2);
    alert(value);

    // 上述定义函数的方式等价于下面
    function demo2( x,y ) {
        return x + y;
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

9.3 函数的第三种定义格式

第三种函数定义的方式称为匿名函数。匿名函数的调用方式有两种：

给匿名函数赋值函数名，然后通过函数名调用
匿名函数最常用的场景，通过事件触发运行匿名函数

function(){
    函数体;
};
1
2
3

9.3.1 给匿名函数赋值调用

<script type="text/javascript">
    // 定义匿名函数
    var demo = function() {
        alert("匿名函数");
    };
    // 调用匿名函数
    demo();
</script>
1
2
3
4
5
6
7
8

9.3.2 匿名函数事件触发调用

<script type="text/javascript">
    /*
        window是JS中已经存在的一个对象，可以直接调用
        onload是window对象中的一个加载事件，在html页面加载完成后会自动执行
    */
    window.onload = function(){
    alert("html页面已经加载完成！！");
}
</script>
1
2
3
4
5
6
7
8
9

十、JS中的数组

JS中的数组：可以保存多个不同类型的数据，同时长度不固定，可以把其理解成Java中的ArrayList。
　　不管在Java中还是在JS中，数组的下标都是从0开始，并且都通过index属性记录数组长度。

Java中的数组：可以保存多个类型相同的数据，并且数组的长度也是固定的。
Java中数组定义格式

数据类型 arrayName = new 数据类型[长度]；
数据类型 arrayName = new 数据类型[]{值，值，值};
数据类型 arrayName = {值，值，值};
1
2
3

Java中数组使用格式

arrayName[index];
1

10.1 数组的第一种定义格式

数组定义格式

var arrayName = [值,值,值...];
1

数组使用格式

arrayName[index];
1

代码演示

<script type="text/javascript">
    // 定义数组
    var arr = [123,"abc",true];
    // 将数组中的数据打印到html页面中
    document.write(arr[0] + "<br/>")
    document.write(arr[1] + "<br/>")
    document.write(arr[2] + "<br/>")
    document.write(arr[3] + "<br/>")
    // 给数组指定下标赋值
    arr[6] = "bjpwowernode";
    document.write("<hr/>")
    // 遍历数组
    for( var i = 0; i < arr.length; i++ ) {
        document.write(arr[i] + "<br/>")
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

10.2 数组的第二种定义格式

数组的第二种定义格式需要使用到JS中的数组对象Array。
和第一种方式定义的数组在使用上一样的，都是通过arrayName[index]进行操作。

数组定义格式

创建数组对象默认数组长度为0

var arrName  = new Array();
1

创建数组对象并且给数组赋值

var arrName = new Array(值,值,值...);
1

创建数组对象

传递1个值且是整数时表示数组的长度
传递1个值且是小数时程序报错
传递1个值且不是数值表示给数组赋1个值

var arrName = new Array(值);
1

10.3 for…in 语句

for ... in 声明用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
将JS中的for…in语句当做Java中的高级for循环理解即可。

遍历表示数组的下标，不是数组中的数据！！！

语法格式

// x变量用于记录数组下标
for( x in arrayName ) {
    // 通过数组名结合下标操作数组元素即可
    arrayName[x];
}
1
2
3
4
5

代码演示

<script type="text/javascript">
    // 定义数组
    var arr = [123,"abc",true];
    // 循环遍历数组
    for( x in arr ) {
        document.write(arr[x] + "<br/>");
    }
</script>
1
2
3
4
5
6
7
8

10.4 数组练习

需求：定义功能实现数组的打印、求和、求最值、排序。

<script type="text/javascript">
    // 定义数组
    var arr = [3, 1, 4, 6, 5, 2, 9, 7, 8, 0];
    // 定义功能打印数组
    function printArray( arr ) {
        for( var i = 0; i < arr.length; i++ ) {
            if( i != arr.length - 1 ) {
                document.write(arr[i] + " , ")
            }else{
                document.write(arr[i])
            }
        }
    }
    // 定义功能，数组求和
    function getArraySum( arr ) {
        // 定义遍历 保存最终和值
        var sum = 0;
        for( var i = 0; i < arr.length; i++ ) {
            sum += arr[i];
        }
        // 返回和值
        return sum;
    }
    // 定义功能求组求最大值
    function gatArrayMaxValue( arr ) {
        // 定义变量 保存最大值
        var max = arr[0];
        for( var i = 0; i < arr.length; i++ ) {
            // 判断大小关系
            if( max < arr[i] ) {
                max = arr[i];
            }
        }
        // 返回最大值
        return max;
    }
    // 定义功能，数组排序
    function sort(arr) {
        for( var i = 0 ; i < arr.length - 1; i++ ) {
            for( var j = i + 1; j < arr.length; j++ ) {
                // 比较大小关系
                if( arr[i] > arr[j]) {
                    var temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                }
            }
        }
    }
    // 调用打印数组方法
    printArray(arr);
    document.write("<hr/>");
    // 调用数组求和方法
    var arraySum = getArraySum(arr);
    document.write(arraySum);
    document.write("<hr/>");
    // 调用数组求最大值方法
    var arrayMaxValue = gatArrayMaxValue( arr );
    document.write(arrayMaxValue);
    document.write("<hr/>");
    // 调用数组排序功能
    sort(arr);
    printArray(arr);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

10.5 Array对象的常用方法

数组对象中有很多定义好的方法，可以用于直接操作数组。

方法	描述
`toString()`	把数组转换为字符串，并返回结果。
`join()`	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
`push()`	向数组的末尾添加一个或更多元素，并返回新的长度。
`unshift()`	向数组的开头添加一个或更多元素，并返回新的长度。
`pop()`	删除并返回数组的最后一个元素。
`shift()`	删除并返回数组的第一个元素。
`splice()`	删除元素，并向数组添加新元素。
`reverse()`	颠倒数组中元素的顺序。
`concat()`	方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。（连接两个或更多的数组，并返回结果。）
`sort()`	方法用于对数组的元素进行排序。对数组的引用。请注意，数组在原数组上进行排序，不生成副本。（对数组的元素进行排序。）

代码演示

<script type="text/javascript">
    // 创建数组对象
    var arr = [2, 4, 3, 1, 6, 8, 9, 7, 5];

    // join()方法打印数组,默认使用,号分隔
    document.write(arr.join());
    document.write("<br/>");

    // join()方法打印数组,使用指定符号分隔
    document.write(arr.join("."));
    document.write("<br/>");

    // 给数组拼接数据 返回新的数组
    var concatArray = arr.concat(11,22);
    document.write(concatArray.join());
    document.write("<br/>");

    // 创建一个新的数组，然后拼接到arr数组中
    var arr1 = [11,22,33,44,55];
    var concatArray1 = arr.concat(arr1);
    document.write(concatArray1.join());
    document.write("<br/>");

    // 反转数组中的数据
    document.write(arr.reverse());
    document.write("<br/>");

    // 数组自然排序
    arr.sort();
    document.write(arr.join());
    document.write("<br/>");

    // 数组降序排序 定义方法，指定排序规则
    function desc(a,b) {
        return b - a;
    }
    // 调用排序方法 指定排序规则
    arr.sort(desc);
    document.write(arr.join());
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

十一、JS中的消息框

在这里插入图片描述

11.1 警告框

警告框主要用于在页面上弹出警示的信息。通过alert()函数实现。
在这里插入图片描述

11.2 确认框

在这里插入图片描述

代码演示

<script type="text/javascript">
    // 声明变量 保存用户的选择结果
    var boo = confirm("您确定吗?");
    if( boo ) {
        document.write("用户选择的确定！")
    } else {
        document.write("用户选择的取消！")
    }
</script>
1
2
3
4
5
6
7
8
9

11.3 提示框

在这里插入图片描述

代码演示

<script type="text/javascript">
    var value = prompt("请输入数据:","");
    document.write(value);
</script>
1
2
3
4

十二、JS中的对象

JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。但是在JavaScript中已经存在一些内置好的对象。

对象只是一种特殊的数据。对象拥有属性和方法。

JS中常用的对象：Date对象、String对象、Math对象和Java中的基本一致。通过API查询对象的方法的使用。

12.1 String对象

字符串是 JavaScript 的一种基本的数据类型。String 类定义了大量操作字符串的方法。

String 对象的 length 属性声明了该字符串中的字符数。

需要注意的是，JavaScript 的字符串是不可变的，String 类定义的方法都不能改变字符串的内容。

常用方法

方法	描述
`charAt(index)`	返回指定位置的字符。
`indexOf(substring)`	返回指定子字符串的位置。如果没找到，则返回-1。
`lastIndexOf(substring)`	返回指定子字符串的最后一个位置。如果没找到，则返回-1。
`replace(oldString, newString)`	用新字符串替换旧字符串。
`toLowerCase()`	把字符串转换为小写。
`toUpperCase()`	把字符串转换为大写。
`split(separator)`	把字符串分割为字符串数组。
`trim()`	去除字符串两端的空格。
`substring(startIndex, endIndex)`	从起始下标截取到结束下标但不包含结束下标
`substr(startIndex,length)`	从起始下标截取 length 个长度

代码演示

<script type="text/javascript">
     // 定义字符串
     var str = "动力节点";
    // big() 用大号字体显示字符串。 small() 使用小字号来显示字符串。
    document.write(str.big());
    document.write(str.small());
    // fontcolor() 使用指定的颜色来显示字符串。
    document.write(str.fontcolor("red"));
    alert(str.fontcolor("red"));
    // fontsize() 使用指定的尺寸来显示字符串。
    document.write(str.fontsize("25px"));
    alert(str.fontsize("25px"));
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

12.2 Date对象

Date 对象用于处理日期和时间，是 JavaScript 的一种内部数据类型。

Date 对象没有可以直接读写的属性，所有对日期和时间值的访问都是通过其方法执行的。

12.2.1 常用方法

方法	描述
`getDate()`	获取日期（1-31）
`getDay()`	获取星期几（0-6，0表示星期天）
`getFullYear()`	获取四位数的年份
`getHours()`	获取小时数（0-23）
`getMilliseconds()`	获取毫秒数（0-999）
`getMinutes()`	获取分钟数（0-59）
`getMonth()`	获取月份（0-11，0表示一月）
`getSeconds()`	获取秒数（0-59）
`getTime()`	获取日期的毫秒数
`setTime()`	设置日期的毫秒数
`toDateString()`	将日期转换为字符串（如：“Mon May 10 2021”）
`toISOString()`	将日期转换为ISO格式的字符串（如：“2021-05-10T05:52:16.139Z”）
`toLocaleDateString()`	将日期转换为本地格式的字符串（如：“2021/5/10”）
`toLocaleTimeString()`	将时间转换为本地格式的字符串（如：“上午5:54:16”）
`toTimeString()`	将时间转换为字符串（如：“05:54:16 GMT+0800 (中国标准时间)”）
`toString()`	将日期转换为字符串如：“Mon May 10 2021 05:54:16 GMT+0800 (中国标准时间)”
`UTC()`	返回从1970年1月1日00:00:00的UTC时间开始之间的毫秒数
`valueOf()`	返回一个表示该日期对象的原始值的数字

12.2.2 setInterval方法

在这里插入图片描述

代码演示

<script type="text/javascript">
    // 创建Date对象
    var date = new Date();
    document.write(date + "<br/>");
    // toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
    document.write(date.toLocaleString() + "<br/>");
    // getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
    document.write(date.getDate() + "<br/>");
    // getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
    document.write(date.getDay() + "<br/>");
    // getMonth() 从 Date 对象返回月份 (0 ~ 11)
    document.write(date.getMonth() + "<br/>");
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

12.3 Math 对象

在JavaScript中，Math对象是一个内置的全局对象，没有构造函数 Math()，提供了一系列的数学计算方法和常量，可以直接使用而不需要实例化。

以下是Math对象常用的属性和方法：

常用属性/方法	描述
`Math.PI`	圆周率常量，即3.141592653589793。
`Math.abs(x)`	返回x的绝对值。
`Math.ceil(x)`	返回不小于x的最小整数。
`Math.floor(x)`	返回不大于x的最大整数。
`Math.round(x)`	四舍五入取整。
`Math.min(x1, x2, ..., xn)`	返回参数列表中的最小值。
`Math.max(x1, x2, ..., xn)`	返回参数列表中的最大值。
`Math.random()`	返回一个0到1之间（不包括1）的随机数。
`Math.pow(x, y)`	返回x的y次幂。

需要注意的是，Math对象的所有方法都是静态方法，即不需要实例化就可以直接调用，例如：

var x = Math.abs(-5); // x的值为5
var y = Math.random(); // y的值为0到1之间的随机数
1
2

除了上述常用的方法和属性以外，Math对象还提供了一些其他的方法和常量，可以根据需要去了解和使用。

12.4 Object 对象

Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
Object类包括哪些属性？
　　prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
　　constructor属性
Object类包括哪些函数？
　　 toString()
　　valueOf()
　　 toLocaleString()
在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
　　换句话说，自己定义的类中也有prototype属性。
在JS当中怎么定义类？怎么new对象？
　　定义类的语法：
　　　　第一种方式：
　　　　　　function 类名(形参){}
　　　　第二种方式：
　　　　　　类名 = function(形参){}
　　　　创建对象的语法：
　　　　　　new 构造方法名(实参); // 构造方法名和类名一致。

	function sayHello(){
	
	}
	sayHello();	// 把sayHello当做一个普通的函数来调用.
	
	 var obj = new sayHello();	// 这种方式就表示把sayHello当做一个类来创建对象.
	 // obj是一个引用,保存内存地址指向堆中的对象.

		   Product = function(pno,pname,price){
			   // 属性
			   this.pno = pno;
			   this.pname = pname;
			   this.price = price;
			   // 函数
			   this.getPrice = function(){
				   return this.price;
			   }
		   }
		   
		   var xigua = new Product(111, "西瓜", 4.0);
		   var pri = xigua.getPrice();
		   alert(pri); // 4.0
		   
		   // 可以通过prototype这个属性来给类动态扩展属性以及函数
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // 调用后期扩展的getPname()函数
		   var pname = xigua.getPname();
		   alert(pname)

			// 给String扩展一个函数
		   String.prototype.suiyi = function(){
			   alert("这是给String类型扩展的一个函数，叫做suiyi");
		   }
		   
		   "abc".suiyi();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

十三、JS中的全局函数

在JS中，每个对象有自己特有的函数，属于当前对象的函数只能有当前的对象调用，其他的对象是无法调用的。

而在JS中还有一些特殊的函数，这些函数不属于任何对象，也不需要通过对象来调用。我们把这些函数称为全局函数，通过函数名直接调用即可。

代码演示

<script type="text/javascript">
    // 创建URL
    var url = "http://www.bjpowernode.com?username=张三&password=123";
    document.write(url + "<br/>")
    // encodeURI() 把字符串编码为 URI。
    var en_url = encodeURI(url);
    document.write(en_url + "<br/>")
    // decodeURI() 解码某个编码的 URI。
    var de_url = decodeURI(en_url);
    document.write(de_url + "<br/>");
    // eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 ajax
    var str = "alert('abc')";
    // alert(str);
    eval(str);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

十四、自定义对象

JavaScript 是面向对象的编程语言 (OOP)。OOP语言使我们有能力自定义对象和变量类型。

14.1 自定义空成员对象(理解为Java中的类)

定义对象(类)语法

在JS中对象就是函数函数就是对象

function ObjectName(){}
1

创建类对象语法

var 对象名 = new 自定义对象名();// 理解为类名 
1

对象使用格式

通过对象名可以给当前对象添加变量和函数，且是当前对象特有的

对象名.变量名 = 值;
对象名.函数名 = function(形参) {
    方法体;
}
1
2
3
4

代码演示

<script type="text/javascript">
    // 自定义Person函数，理解为Java中的类
    function Person() {}

    // 创建对象
    var p = new Person();

    // 给p对象添加变量
    p.name = "张三";
    p.age = 23;
    alert(p.name + "..." + p.age);

    // 给p对象添加函数
    p.setName = function (name) {
        this.name = name;
    }
    p.getName = function () {
        return this.name;
    }
    // 调用对象的所属函数
    p.setName("李四");
    alert(p.getName());
    alert(p);

    // 重新创建Person对象
    var p1 = new Person();
    // alter(p1.name); name变量属于p对象特有
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

14.2 自定义全局成员对象(理解为Java中的类)

定义对象(类)语法

形参：相当于类中的成员变量，被所有对象共享
函数名定义的函数相当于类中的成员函数，被所有对象共享
同时也可以在创建对象后，给对象动态增加特有的成员变量和函数

function ObjectName(形参){ 
    this.函数名 = function(){
        函数体;
    }
}
1
2
3
4
5

代码演示

<script type="text/javascript">
    // 自定义Dog类
    function Dog( name,color ) {
        this.name = name;
        this.color = color;

        this.getName = function () {
            return this.name;
        }
        this.getColor = function() {
            return this.color;
        }
    }
    // 创建Dog对象
    var dog1 = new Dog("小白","白色");
    var dog2 = new Dog("小黑","黑色");
    // 调用对象成员
    document.write( dog1.getName() + "..." + dog1.getColor() + "<br/>");
    document.write( dog2.getName() + "..." + dog2.getColor() + "<br/>");
    // 给dog1设置特有成员变量和函数
    dog1.age = 2;
    dog1.run = function () {
        document.write(dog1.age + "岁的小白在跑...." )
    }
    dog1.run();

    // dog2对象无法使用dog1对象的特有成员
    // dog2.run();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

14.3 匿名对象

<script>
	var obj = {
		name : "张三",
		age : 18,
		say: function() {
			document.write(obj.name + "..." + obj.age);
		}
	}; // {}表示对象的意思
	obj.say();
</script>
1
2
3
4
5
6
7
8
9
10

十五、void运算符

void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果。

javascript:void(0)
1

其中javascript:作用是告诉浏览器后面是一段JS代码。
void() 这个小括号当中必须有表达式，填什么都行。
以下程序的javascript:是不能省略的。

<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/652797