JavaScript编程（上篇）

程序员文章站 2022-03-09 08:40:30

...

1. 概述

1.1 JavaScript的作用

作用：实现与用户交互，提升网页的功能，提高用户体验

1.2 JavaScript与Java的区别

特点	Java	JavaScript
面向对象	完全面向对象（继承、封装、多态）	基于对象，不完全面向对象
运行方式	编译型，生成中间文件字节码	解释型语言，不生成中间文件，直接运行浏览器即可
跨平台	安装虚拟机可以跨平台	运行在浏览器，只要有浏览器就可以执行
大小写	区分大小写	区分大小写
数据类型	强类型（声明变量前必须要先明确数据类型）	弱类型，定义字符串，可以赋值一个整数

2. JavaScript的基础语法

2.1 JavaScript的语法组成

组成部分	作用
ECMA Script	一种脚本语言规范，JavaScript的核心语法基础，定义JS中的基本语法
BOM	Browser Object Model 浏览器对象模型：操作浏览器的各种对象
DOM	Document Object Model 文档对象模型：用于操作网页中各种标签元素

2.2 JavaScript的编写方式

编写在html中的head标签内的<script>标签内。
- 格式：
```
<script type="text/javascript">
    //执行语句
</script>
```
- 优点：结构简单。
- 缺点：代码耦合度高， js代码与html代码混合在一起；复用性差。

引入外部的js文件。

格式：

<script type="text/javascript" src="js文件.js"></script>

注意事项

一个

2.3 JavaScript的注释

语言	注释语法
HTML	`<!-- 注释 -->`
CSS	`/\* 注释 \*/`
JavaScript	`// 单行注释` `/\* 多行注释 \*/`

2.4 变量

2.4.1 变量的定义

格式：
```
var 变量名 = 数据;
```

2.4.2 变量定义的特点

JS是弱类型语言，不同的数据类型之间可以相互赋值；
var关键字可以省略，但是省略的时候会出现局部变量和全局变量的区分，建议还是写上；
变量可以重复定义，后定义的同名变量会直接覆盖前面的同名变量，前后定义赋予的值甚至可以是不同类型；
变量定义的作用范围不受大括号限制，但是函数内定义的局部变量还是只能是在函数内才起作用；
一个变量存储的的数据可以随时发生变化。
一个变量的数据类型是取决当前存储的数据。

2.5 数据类型

2.5.1 五种原始数据类型

关键字	说明
number	数值型：包括整数和浮点数
boolean	布尔类型：true/false
string	字符串类型：包含字符和字符串
null	只有一个值的类型是 Null，它只有一个专用值 null ，表示引用数据类型变量值的占位符
undefined	未定义的类型

何为未定义类型？

未定义类型指只声明变量而没有给变量赋值。

2.5.2 引用数据类型

关键字	说明
object	对象类型：JS内置对象或自定义对象

2.5.3 typeof操作符

作用：判断指定的变量数据类型

格式：typeof(变量名) 或 typeof 变量名

typeof(变量名) 
/*或*/
typeof 变量名

注意事项

typeof运算符对null值会返回Object，原因是JavaScript初期犯的错误被沿用下来。null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">

        var a = 10;
        document.write("a=" + a + " 数据类型：" + (typeof  a) + "<br/>");
        var b = 3.1415;
        document.write("b=" + b + " 数据类型：" + (typeof  b) + "<br/>");
        var c = null;
        document.write("c=" + c + " 数据类型：" + (typeof  c) + "<br/>");
        var d = 'd';
        document.write("d=" + d + " 数据类型：" + (typeof  d) + "<br/>");
        var e = "abcde";
        document.write("e=" + e + " 数据类型：" + (typeof  e) + "<br/>");
        var f = true;
        document.write("f=" + f + " 数据类型：" + (typeof  f) + "<br/>");
        var g;
        document.write("g=" + g + " 数据类型：" + (typeof  f) + "<br/>");
        var h = {
            name:"笨蛋",//注意赋值是用：而不是用=	两个变量之间是用，分隔
            age:18
        };
        document.write("h的类型：" + typeof(h) + "<br/>");
        document.write("h的名字：" + h.name + "<br/>");

    </script>
</head>
<body>

</body>
</html>

2.5.4 字符串转换成数字类型

从网页中获取的数据都是String类型，为了数据比较，有时需要转为数据类型

转换函数	作用
parseInt()	将一个字符串转成整数，如果一个字符串包含非数字字符，那么parseInt函数会从首字母开始取数字字符，一旦发现非数字字符，马上停止获取内容。
parseFloat()	将一个字符串转成小数，转换原理同上。
isNaN()	转换前判断被转换的字符串是否是一个数字，非数字返回true

注意事项

使用parseInt()和parseFloat()时，字符串的首字母需要是数字字符，否则转换的结果是NaN.

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串转换成数字类型</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //var age = "a10b12"; //转换后的结果为NaN
        var age = "10b12";  //转换的结果为10
        age = parseInt(age);
        document.write("age = " + age + "<br/>");

        var price = "49.99b66.6";  //转换的结果为49.99
        document.write("price不是数字？" + isNaN(price) + "<br/>");

        price = parseFloat(price);
        document.write("price = " + price + "<br/>");


        var num = "60";
        document.write("num不是数字？" + isNaN(num) + "<br/>");

    </script>
</head>
<body>
    
</body>
</html>

2.6 常用运算符

2.6.1 算术运算符

运算符	描述
+	加
-	减
**	乘
/	除
%	取余
++	自增
–	自减

注意事项

任何类型的数据都可以使用算数运算符参与运算；
任何类类型的数据都可以与boolean类型数据运算

2.6.2 赋值运算符

运算符	例子	描述
=	x = y	赋值
+=	x += y	加等
-=	x -= y	减等
*=	x *= y	乘等
/=	x /= y	除等
%=	x %= y	余等

2.6.3 比较运算符

运算符	描述
==	等于
===	值及类型均相等（恒等于）
!=	不等于
!==	值与类型均不等（不恒等于）
>	大于
<	小于
>=	大于或等于
<=	小于或等于

注意事项

数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较(隐含字符串转为数字)
**==与===的区别： **
- == 比较的是两个数据的值是否一致
- === 比较的是两个数据的值与类型是否一致

2.6.4 逻辑运算符

运算符	描述
&&	和
\|\|	或
!	非

注意：js中没有单与/单或

2.6.5 三目运算符

格式和用法与Java的三元运算符一致。

2.7 在浏览器中调试js

可以右键-检查或右键-审查元素调试，也可以直接f12

2.7.1 语法错误

网页中有部分内容没输出/丢失内容☞直接查看后台的错误信息

JavaScript编程（上篇）

2.7.2 debug调试

输出的内容不吻合预期

JavaScript编程（上篇）

使用步骤：f12后设置断点（单击代码），设置监视值，然后按全部执行按钮（此时是个暂停符号），再刷新网页，此时页面会执行到断点代码后会暂停，再按下一步观看效果（反正能使用下一步即可）

2.8 流程控制语句

顺序，分支，循环

2.8.1 if判断

if 语句：

在一个指定的条件成立时执行代码。

if(条件表达式) {
	//代码块;
}

if…else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if(条件表达式) {
	//代码块;
}
else {
	//代码块;
}

if…else if…else 语句

使用这个语句可以选择执行若干块代码中的一个。

if (条件表达式) {
	//代码块;
}
else if(条件表达式) {
	//代码块;
}
else {
	//代码块;
}

注意事项

条件判断可以使用非逻辑运算符

数据类型	为真	为假
number	非0	0
string	非空串	空串
undefined	/	假
NaN(Not a Number)	/	假
object	非null	null

2.8.2 swtich多分支

语法一：case后使用变量，与Java相同

switch(变量名) {
  case 常量值:
     break;
  case 常量值：
     break;
  default:
      break;
}

语法二：case后使用表达式

switch(true) {  //变量名要根据表达式可能的结果进行定义，如果表达式的结果分为true和false两种，可以用true代替
  case 表达式:     
	break;
  case 表达式:
	break;
  default:
    break;
}

案例代码

需求：通过prompt输入的分数，如果90-100之间，输出优秀。80-90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断分数</title>
    <style type="text/css"></style>
    <script type="text/javascript">

        //使用prompt方法淡出输入框
        var score = window.prompt("请输入你的分数");

        switch (true){
            case score>=90&&score<=100:
                document.write("你的成绩优秀");
                break;
            case score>=80&&score<=89:
                document.write("你的成绩良好");
                break;
            case score>=60&&score<=79:
                document.write("你的成绩及格");
                break;
            case score>=0&&score<=59:
                document.write("你不及格");
                break;
            default:
                document.write("你输入的分数有误");
                break;
        }

    </script>
</head>
<body>

</body>
</html>

2.8.3 循环

2.8.3.1 while语句：

当指定的条件为 true 时循环执行代码

while (条件表达式) {
    需要执行的代码;
}

2.8.3.2 do-while语句：

最少执行1次循环

do {
    需要执行的代码;
}
while (条件表达式)

2.8.3.3 for 语句

循环指定次数

for (var i=0; i<10; i++) {
	需要执行的代码;
}

break和continue的区别：

break: 跳出整个循环
continue：跳出本次循环

2.8.3.4 案例代码

需求：根据输入的数字显示乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style type="text/css">
        table{
            /*边框设置为细线模式*/
            border-collapse: collapse;
        }
        td{
            padding:5px;
        }
        td:hover{
            color: blue;
            background-color: violet;
        }
    </style>
    <script type="text/javascript">
        var num = window.prompt("请输入一个数字");
        //创建表格，获取效果
        document.write("<table border='1px'>");
        //外循环控制行
        for(var i = 1; i <= num; i++) {
            document.write("<tr>");
            //内循环控制输出内容
            for(var j = 1; j <= i; j++){
                document.write("<td>");
                document.write(j + "x" + i + "=" + (j*i));
                document.write("</td>");
            }
            document.write("</tr>")
        }
        document.write("</table>")
    </script>
</head>
<body>

</body>
</html>

2.9 函数（重点）

2.9.1 概述

被调用时可以重复使用的代码块，类似Java里的方法
定义方法有两种：命名函数和匿名函数

2.9.2 命名函数

格式：

function 函数名(参数列表) {
    函数体代码；
    [return 返回值]
}

示例：定义一个函数实现加法功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两个数相加的函数</title>
</head>
<body>
<script type="text/javascript">
    //函数的定义
    function add(m,n) {
        return m+n;
    }

    //函数的调用
    document.write("两个数的和：" + add(5,3));
</script>
</body>
</html>

注意事项

形参的类型：在函数定义的时候不能指定形参类型，因为是可变类型
函数的返回值：不需要对返回值类型进行声明。如果一个函数中需要返回值，直接使用return返回，如果没有返回值，不写return。
关于函数的重载：在JS中没有函数的重载，同名的函数会覆盖原来的函数，调用的时候，只会调用最后1次定义的函数，而且实参的个数与形参数的个数没有关系。
在JavaScript中的任意的函数内部都隐式的维护了一个arguments对象（数组），调用函数的时候实参是先传递给了arguments对象，然后再arguments对象分配形参的。
使用arguments对象时，不使用形参也一样可获取到用户传递的数据，但建议写上形参，以便于提示该函数需要传参，以及传入多少什么类型的参数。

2.9.3 匿名函数

格式：

var 变量名 = function(参数列表) {
	函数体;
}
//调用
变量名("数据");

2.9.4 函数变量的作用域

2.9.4.1 局部变量

在函数内定义的变量，该变量在定义时必须不能省略var。
作用域仅在该函数中

2.9.4.2 全局变量

如果变量在定义的时候省略var值，那么该变量是全局变量，可作用于其他语句
但注意：如果全局变量是在函数内定义，那么函数要被调用之后该变量才会被创建

2.10 补充常用的函数（后续会系统地讲）

alert(“提示信息”)

作用：弹出一个警示框
document.write(“输出文字”)

作用：在页面中输出文字
window.prompt(“提示信息”,“默认值”)

作用：弹出一个输入框，默认值可以省略
window.setInterval(“需要调用的函数名()”,相隔的毫秒数)

作用：定时器，每隔一定的时间调用一次函数

2.11 实现轮播图

需求：每隔2秒切换一张图片的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //设置定时器
        window.setInterval("changeImage()",2000);
        var num =1;	//在调用函数的时候0.jpg已经显示，如果num=0，那么在执行下面函数时，0.jpg会再次显示2秒
        //设置寻找图片的函数
        function changeImage() {
            var img = document.getElementById("img");//img对象就相当于img标签
            if (num < 5) {
                img.src = "img/" + num + ".jpg";
                num++;
            }else {
                num = 0;
                changeImage();
            }
        }
    </script>
</head>
<body>
    <img src="img/0.jpg" id="img" width="600px" height="400px"/>
</body>
</html>

3. JavaScript的事件

3.1 概念

事件是可以被 JavaScript 侦测到的行为。当发生指定到事情到时候，会触发相应的处理方式。

注意：事件通常要与函数配合使用，当事件发生时函数才会执行

3.2 事件的注册方式

3.2.1 html元素内部注册

在html标签中写事件，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"></style>
    <script type="text/javascript">

        function setName(){
            window.prompt("请输入姓名");
        }

    </script>
</head>
<body>
    <!--html元素内部注册-->
    <input type="button"  value="按钮" onclick="setName()" />
</body>
</html>

耦合度高，但使用较简单

3.2.2 使用js代码注册

在script标签中编写，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件2</title>
    <style type="text/css"></style>
</head>
<body>
<input type="button" value="按钮" id="bt"/>
</body>
<script type="text/javascript">
    //找到按钮
    var button = document.getElementById("bt");
    //注册事件(使用匿名函数)
    button.onclick = function () {
        window.prompt("请输入姓名");
    }
</script>
</html>

但是这种写法

改进方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件2</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //加载完页面后再函数
        window.onload = function () {
            //找到按钮
            var button = document.getElementById("bt");
            //注册事件(使用匿名函数)
            button.onclick = function () {
                window.prompt("请输入姓名");
            }
        }

    </script>
</head>
<body>
<input type="button" value="按钮" id="bt"/>
</body>

</html>

3.3 常用的事件

属性	描述
onblur	元素失去焦点
onchange	主要用于下拉框的内容改变, select
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onsubmit	提交按钮被点击

注意事项

使用事件调用函数的格式有两种：

第一种：

/*1、在html标签中设置事件*/
onclick="函数名()"
/*2、然后在<script>标签中添加函数*/

第二种：

/*1、给html元素增加id属性*/
/*2、在<script>标签中根据id属性找到该元素*/
var button = document.getElementsById("元素ID值")
/*然后用该元素对象添加函数*/
button.onclick = function() {
    //函数体
}

onsubmit的用法比较特殊（重要）
- 一个表单提交的时候会出发onsubmit事件。如果出发的事件返回的是true，那么表单允许提交；返回false则不允许表单提交；
- 使用onsubmit必须有返回值，所以onsubmit事件调用的函数要return。如果是在html标签中设置onsubmit事件，必须写成onsubmit="return 函数名()"

3.4 示例案例代码

需求：

```
点按钮弹出一个信息框
```

双击图片，图片变成另一张。

文本框得到焦点，中间的文字消失。

下拉框内容发生变化的时候，得到当前选中的值，弹出信息框

页面加载完毕的时候弹出信息框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件练习</title>
    <script type="text/javascript">

        //点按钮弹出一个信息框
        function testClick() {
            alert("不要点嘛，讨厌~");
        }

        //双击更换图片
        var num = 1;
        function changeImage(img) {
            if (num < 3) {
                num = parseInt(num) + 1;
                img.setAttribute("src", "img/"+ num + ".jpg");
            } else {
                num = 0;
                img.setAttribute("src", "img/"+ num + ".jpg");
            }
        }

        function clearText(input) {
            input.setAttribute("value",""); //也可以直接给value赋值：input.value = "";
        }
        function setData(input) {
            input.setAttribute("value","请输入用户名...");
        }

        //下拉框内容发生变化，得到当前选中的值并弹出信息框
        function changeTest(select) {
            /*var str = select.value;
            alert("你选择的是" + str);*/
            /*
            上述方法仅能输出value值，如果要输入选项内容可以用下面的方法
             */
            var index = document.getElementById("se").selectedIndex;    //获取当前选择中的选项的索引值
            var content = document.getElementById("se").options[index].innerHTML;    //根据索引值获得当前选项的标签文本，也可以用innerText
            alert("你选择的是" + content);
        }

        function ready() {
            alert("页面已经加载完成");
        }
    </script>
</head>
<body onload="ready()">
<input type="button" value="点我啊" onclick="testClick()"/><br/><br/>
<!-- this代表了当前的标签对象 -->
<img src="img/1.jpg" width="350px" ondblclick="changeImage(this)"/><br/><br/>

<input type="text" value="请输入用户名..." onfocus="clearText(this)" onblur="setData(this)"/><hr/>

省份：
<select id="se" onchange="changeTest(this)">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gd">广东</option>
    <option value="hn">湖南</option>
</select> <br/>

<br/>
</body>
</html>

该案例涉及到的方法：

selectedIndex：获得指定选择框当前选中的选项的索引值；
options[index]：根据选项索引值获得对应的选项对象（注意有s）；

4. JavaScript的内置对象

4.1 数组对象

数组在JS中是一个类，通过构造方法创建对象。

4.1.1 创建数组的方式

创建数组的方式	说明
new Array()	无参的构造方法，指定数组的长度
[元素1,元素2…]	使用中括号的方式创建数组

还有两种不常用

4.1.2 JS中数组的特点

数组中的每个元素的类型是可以不同的。
数组的长度可以动态变化
数组中包含大量的方法，类似于Java中的集合，而Java中的数组没有方法。

4.1.3 常用方法

方法名	功能
concat()	连接两个或更多的数组，并返回结果
reverse()	将数组进行反转
join(separator)	与split()功能相反，指定数组元素之间的分隔符，然后把数组的每一个元素与分隔符拼装一个字符串返回
sort()	对字符串数组进行排序如果要对数字进行排序，要指定比较器函数。 sort(function(m,n)) 数字两两比较 1) 如果m大于n，则返回正整数 2) 如果m小于n，则返回负整数 3) 如果m等于n，则返回0

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <style type="text/css"></style>
    <script type="text/javascript">

        var arr1 = [1,2,3,4,5];

        var arr2 = [6,7,8,9,10];

        //合并数组的元素
        var arr3 = arr1.concat(arr2);

        //翻转数组的元素
        arr3.reverse();

        //查看数组的元素
        var joinArr = arr3.join(",");
        document.write("arr3："+ joinArr+"<br/>");


        var arr4 = [89,56,29,47,123];
        //比较的函数
        function compareNum(num1,num2){
            return num1-num2;
        }

        //排序
        arr4.sort(compareNum);
        document.write("arr4升序后："+arr4.join(",") +"<br/>");
    </script>
</head>
<body>

</body>
</html>

4.2 日期对象

4.2.1 日期对象的创建

作用：Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注：Date 对象会自动把当前日期和时间保存为其初始值。

4.2.2 日期对象的方法

使用Date对象调用方法

方法名	作用
getFullYear()	从 Date 对象以四位数字返回年份。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。类似于Java中的System.currentTimeMillis()
toLocaleString()	返回本地格式的字符串

上一篇： MySQL表的增删改查二

下一篇：使用Spring Cache设置缓存条件操作

JavaScript编程（上篇）

1. 概述

1.1 JavaScript的作用

1.2 JavaScript与Java的区别

2. JavaScript的基础语法

2.1 JavaScript的语法组成

2.2 JavaScript的编写方式

编写在html中的head标签内的<script>标签内。

引入外部的js文件。

2.3 JavaScript的注释

2.4 变量

2.4.1 变量的定义

2.4.2 变量定义的特点

2.5 数据类型

2.5.1 五种原始数据类型

2.5.2 引用数据类型

2.5.3 typeof操作符

注意事项

示例代码

2.5.4 字符串转换成数字类型

注意事项

示例代码

2.6 常用运算符

2.6.1 算术运算符

注意事项

2.6.2 赋值运算符

2.6.3 比较运算符

注意事项

2.6.4 逻辑运算符

2.6.5 三目运算符

2.7 在浏览器中调试js

2.7.1 语法错误

2.7.2 debug调试

2.8 流程控制语句

2.8.1 if判断

if 语句：

if…else 语句

if…else if…else 语句

注意事项

2.8.2 swtich多分支

语法一：case后使用变量，与Java相同

语法二：case后使用表达式

案例代码

2.8.3 循环

2.8.3.1 while语句：

2.8.3.2 do-while语句：

2.8.3.3 for 语句

break和continue的区别：

2.8.3.4 案例代码

2.9 函数（重点）

2.9.1 概述

2.9.2 命名函数

注意事项

2.9.3 匿名函数

2.9.4 函数变量的作用域

2.9.4.1 局部变量

2.9.4.2 全局变量

2.10 补充常用的函数（后续会系统地讲）

2.11 实现轮播图

3. JavaScript的事件

3.1 概念

3.2 事件的注册方式

3.2.1 html元素内部注册

3.2.2 使用js代码注册

改进方案

3.3 常用的事件

注意事项

3.4 示例案例代码

该案例涉及到的方法：

4. JavaScript的内置对象

4.1 数组对象

4.1.1 创建数组的方式

4.1.2 JS中数组的特点

4.1.3 常用方法

示例代码

4.2 日期对象

4.2.1 日期对象的创建

创建 Date 对象的语法：

4.2.2 日期对象的方法

Javascript中for循环语句的几种写法总结对比

编写在html中的`head`标签内的`<script>`标签内。