【JavaWeb】第三章 JavaScript基础

比眉伴天荒 2023-10-08 17:09 19阅读 0赞

#### 文章目录 ####

*  1、JavaScript介绍
 *  2、JavaScript和HTML代码的结合方式
 *   *  2.1 第一种方式
     *  2.2 第二种方式
 *  3、JS的变量和数据类型
 *  4、JS关系运算符
 *  5、JS逻辑运算符
 *  6、数组
 *  7、JS函数的定义
 *  8、JS函数的隐形参数arguments
 *  9、JS中的自定义对象

--------------------

## 1、JavaScript介绍 ##

JavaScript（JS）语言诞生主要是为了完成页面数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品，最早取名LiveScript，为了吸引更多的Java程序员，更名JavaScript。**因此Java和JavaScript没关系。**

![在这里插入图片描述][24f0503f4d6b4d1aac75497120da249f.png]

> JS是弱类型，即类型可变。Java是强类型，即定义变量的时候，类型已确定，而且不可变。

Java中：
    int i = 12;
    
    ---------------------
    JavaScript中：
    var i;
    i = 12; 数值型
    i = "abc" 字符串型

> JavaScript的特点：

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

## 2、JavaScript和HTML代码的结合方式 ##

### 2.1 第一种方式 ###

在head标签中或者body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
    <html lang="en>
    <head>
    	<meta charset="UTF-8">
    	<title>Hello,JS!</title>
    	<script type="text/javascript">
    		//alert是JS语言提供的一个警告框函数
    		//可以接收任意类型的参数，传参就是警告框的提示信息
    		alert("Hello,JavaScript！");
    	</script>
    	
    </head>
    <body>
    </body>
    
    </html>

运行效果：  
![在这里插入图片描述][d6d1e76e79f94f308648622eb6f6c9c2.png]

### 2.2 第二种方式 ###

使用script引入单独的JavaScript代码文件，类似CSS，达到复用的效果。script标签的src属性，可以指定外部js文件的路径。

//当前工程下定义1.js文件
    
    alert("Hello,JavaScript!")

<!DOCTYPE html>
    <html lang="en>
    <head>
    	<meta charset="UTF-8">
    	<title>Hello,JS!</title>
    	<script type="text/javascript" src="1.js"></script>
    	
    </head>
    <body>
    </body>
    
    </html>

运行效果：  
![在这里插入图片描述][e939f6497fae4762835765aeada35bb4.png]  
**`注意：`**

不能在一对script标签中同时使用这两种方式：

错误写法：
    -------------------
    
    <script type="text/javascript" src="1.js">
    	alert("hello again");
    </script>

正确写法，使用两对script标签：
    -------------------
    
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
    	alert("Hello again");
    </script>

运行效果：  
![在这里插入图片描述][22760addb5b3403394ffb421ef450d99.png]  
点击OK  
![在这里插入图片描述][05dd5edbfe634f1ca495e5cdd5d06c0a.png]

## 3、JS的变量和数据类型 ##

**JavaScript中变量的定义格式：**

*  var 变量名;
 *  var 变量名 = 值；

**JavaScript的变量类型包括：**

*  数值类型：number，包括了Java中的byte、short、int、long、float、double
 *  字符串类型：string
 *  对象类型：object
 *  布尔类型：boolean
 *  函数类型：function

**JavaScript里的特殊值**：

*  undefined：未定义，所有js变量未赋予初始值的时候，默认值都是undefined
 *  null：空值
 *  NAN：全称，Not a Number，非数值，非数字

![在这里插入图片描述][a50393af790741729a3ff82445894b3c.png]

## 4、JS关系运算符 ##

除了Java中的> < >=等等，JS中需要区分的有等于和全等于：

*  等于：== 简单的做字面值的比较
 *  全等于：===除了做字面值的比较之外，还会比较两个变量的数据类型

## 5、JS逻辑运算符 ##

> **且：&&**

*  当表达式全为真的时候，返回最后一个表达式的值
 *  当表达式中，有一个为假的时候，返回第一个为假的表达式的值

> **或：||**

*  当表达式全为假时，返回最后一个表达式的值
 *  当表达式中，有一个为真时，返回第一个为真的表达式的值

> **取反：！**

**不同于Java，在JavaScript语言中，所有的变量都可以做为一个boolean类型的变量去使用。** `且0、null、undefined、""（空串）都认为是false，`其余为真。

![在这里插入图片描述][2e02f03af58f401bb469a2544aa96d3c.png]  
`注意区分，JS中的""和” “，前者为假，但加了空格以后为真！！！`

## 6、数组 ##

JS中数组的定义格式：

var 数组名 = [];//空数组
    var 数组名 = [1,"abc",true];

JavaScript中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

JS数组的遍历：

## 7、JS函数的定义 ##

> **第一种定义方式**

//格式
    
    function 函数名(形参列表){
        
    	函数体；
    }

不同于Java，JS函数的形参列表不用指定数据类型，也不用加var，直接写变量名就好。

//举例：

//定义有返回值的JS函数

> **第二种定义方式**

//格式
    
    var 函数名 = function(形参列表){
        函数体；}

//举例

**注意：**

`在Java中方法可以重载，但在JS中函数的重载会直接覆盖掉上一次的定义`

## 8、JS函数的隐形参数arguments ##

在function函数中不需要定义，但却可以直接用来获取所有参数的变量，称之为隐形参数。类似于Java中的可变长参数：public void fun (Object…args);可变长参数是一个数组。**JS中的隐形参数也跟Java中的可变长参数一样，操作类似数组。**

**用法：**

**举例：**

//需求：
    //计算任意数量的参数相加，并返回结果
    
    <script type="text/javascript">
    
    	function sum(num1,num2){
        
    		var result = 0;
    		for(var i=0;i<arguments.length;i++){
        
    			result +=arguments[i];
    		}
    		return result;
    	}
    	alert(sum(1,2,3));//6
    	alert(sum(1,2,3,4,5,"abc"));//15abc
    </script>

运行结果：  
![在这里插入图片描述][6358643fada4430492cdf7e9f7d54501.png]  
有”字符串“时，加号也是做了一个拼接。这个bug可加一个if分支修复：

## 9、JS中的自定义对象 ##

> **Object形式的自定义对象**

对象的定义：

//定义一个对象实例，空对象
    var 变量名 = new Object();
    
    //定义一个属性
    变量名.属性名 = 值；

对象的访问：

变量名.属性/函数名();

举例：

运行效果：  
![在这里插入图片描述][2e1e91be1f5446b6a03aa57538e24b83.png]

> **花括号形式的自定义对象**

对象的定义：

//空对象
    var 变量名 = {
        };
    
    //定义一个属性，多个属性用逗号分开
    var 变量名 = {
        
    	属性名：值，
    	属性名：值，
    	属性名：值，
    	函数名：function(){
        } //定义一个函数
    }；

对象的访问：

变量名.属性/函数名();

举例：

运行结果：  
![在这里插入图片描述][977f743db14240d493ac400c80ed3cc3.png]

[24f0503f4d6b4d1aac75497120da249f.png]: https://img-blog.csdnimg.cn/24f0503f4d6b4d1aac75497120da249f.png
[d6d1e76e79f94f308648622eb6f6c9c2.png]: https://img-blog.csdnimg.cn/d6d1e76e79f94f308648622eb6f6c9c2.png
[e939f6497fae4762835765aeada35bb4.png]: https://img-blog.csdnimg.cn/e939f6497fae4762835765aeada35bb4.png
[22760addb5b3403394ffb421ef450d99.png]: https://img-blog.csdnimg.cn/22760addb5b3403394ffb421ef450d99.png
[05dd5edbfe634f1ca495e5cdd5d06c0a.png]: https://img-blog.csdnimg.cn/05dd5edbfe634f1ca495e5cdd5d06c0a.png
[a50393af790741729a3ff82445894b3c.png]: https://img-blog.csdnimg.cn/a50393af790741729a3ff82445894b3c.png
[2e02f03af58f401bb469a2544aa96d3c.png]: https://img-blog.csdnimg.cn/2e02f03af58f401bb469a2544aa96d3c.png
[6358643fada4430492cdf7e9f7d54501.png]: https://img-blog.csdnimg.cn/6358643fada4430492cdf7e9f7d54501.png
[2e1e91be1f5446b6a03aa57538e24b83.png]: https://img-blog.csdnimg.cn/2e1e91be1f5446b6a03aa57538e24b83.png
[977f743db14240d493ac400c80ed3cc3.png]: https://img-blog.csdnimg.cn/977f743db14240d493ac400c80ed3cc3.png