• 【JavaWeb】第三章 JavaScript基础

    文章目录

    1、JavaScript介绍

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

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

    在这里插入图片描述

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

    Java中：
int i = 12;

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    JavaScript的特点：

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

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

    2.1 第一种方式

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

    DOCTYPE html>
<html lang="en>

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

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    运行效果：
    在这里插入图片描述

    2.2 第二种方式

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

    //当前工程下定义1.js文件

alert("Hello,JavaScript!")

    • 1
    • 2
    • 3
    DOCTYPE html>
<html lang="en>

	"UTF-8">
	<title>Hello,JS!title>
	<script type="text/javascript" src="1.js">script>
	
head>
<body>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    运行效果：
    在这里插入图片描述
    注意：

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

    错误写法：
-------------------

<script type="text/javascript" src="1.js">
	alert("hello again");
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    正确写法，使用两对script标签：
-------------------

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
	alert("Hello again");
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行效果：
    在这里插入图片描述
    点击OK
    在这里插入图片描述

    3、JS的变量和数据类型

    JavaScript中变量的定义格式：

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

    JavaScript的变量类型包括：

    • 数值类型：number，包括了Java中的byte、short、int、long、float、double
    • 字符串类型：string
    • 对象类型：object
    • 布尔类型：boolean
    • 函数类型：function
    <script type="text/javascript">
	vari;
	i=12;
	//typeof()是JS语言提供的一个函数
	alert(typeof(i));//number
	i="abc"
	alert(typeof(i));//string
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    JavaScript里的特殊值：

    • undefined：未定义，所有js变量未赋予初始值的时候，默认值都是undefined
    • null：空值
    • NAN：全称，Not a Number，非数值，非数字
    <script type="text/javascript">
	var a = 12;
	var b = "abc";
	alert(a * b);//NAN
</script>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    4、JS关系运算符

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

    • 等于：== 简单的做字面值的比较
    • 全等于：===除了做字面值的比较之外，还会比较两个变量的数据类型
    <script type="text/javascript">
	var a = "12";
	var b = 12;
	alert(a == b); //true
	alert(a === b); //false
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    5、JS逻辑运算符

    且：&&

    • 当表达式全为真的时候，返回最后一个表达式的值
    • 当表达式中，有一个为假的时候，返回第一个为假的表达式的值
    <script type="text/javascript>
	var a = "abc";
	var b = true;
	var c = null;
	var d = false;
	alert(a && b); //true
	alert(b && a);//abc
	alert(c && a);//null
	alert(a && d && c);//false
</script>

//注意null别带引号，"null"是字符串，为真，true和false更别带了

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    或：||

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

    取反：！

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

    <script type="text/javascript">
	var x = null;
	if (x) {
		alert("null为真");
	}else{
		alert("null为假");
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

    6、数组

    JS中数组的定义格式：

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

    • 1
    • 2

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

    <script type="text/javascript">
	var arr = [];
	alert(arr.length);//0
	
	arr[0]=12;//java中这样操作报错
	alert(arr[0]);
	alert(arr.length);//1
	
	arr[2] = "abc";
	alert(arr.length);//3，并不是2
	alert(arr[1]);//undefined
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    JS数组的遍历：

    <script type="text/javascript">
	for (var i = 0;i<arr.length;i++){
		alert(arr[i]);
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5

    7、JS函数的定义

    第一种定义方式

    //格式

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

    //举例：

    <script type="text/javascript">
	function fun(){
		alert("无参函数fun执行");
	}
	//调用
	fun();

	//定义有参JS函数，不用指定类型，
	//不用加var
	function fun2(a,b){
		alert(a+b);
	}
	fun2(1,2);
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

    <script type="text/javascript">
	function sum(num1,num2){
		var result = num1 + num2;
		return result;
	}
	alert(sum(100,200));
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    第二种定义方式

    //格式

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

    • 1
    • 2
    • 3

    //举例

    <script type="text/javascript">
	var sum = function(num1,num2){
		var result = num1 + num2;
		return result;
	}
	alert(sum(100,200));
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    注意：

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

    8、JS函数的隐形参数arguments

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

    用法：

    <script type="text/javascript">
	function fun(){
		alert(arguments.length);
		
		alert("无参excute");
		
		//操作类似数组
		for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
	}
	fun(1,2,3,"a");
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    举例：

    //需求：
//计算任意数量的参数相加，并返回结果

<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>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

    <script type="text/javascript">

	function sum(num1,num2){
		var result = 0;
		for(var i=0;i<arguments.length;i++){
			if(typeof(arguments[i]) == "number"){
				result +=arguments[i];
			}
		}
		return result;
	}
	alert(sum(1,2,3));//6
	alert(sum(1,2,3,4,5,"abc"));//15
</script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    9、JS中的自定义对象

    Object形式的自定义对象

    对象的定义：

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

//定义一个属性
变量名.属性名 = 值；

    • 1
    • 2
    • 3
    • 4
    • 5

    对象的访问：

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

    • 1
    • 2

    举例：

    <script type="text/javascript">
	var obj = new Object();
	alert(typeof(obj));
	obj.name = "9527";
	obj.age = 22;
	obj.fun = function(){
		alert("姓名："+this.name+",年龄："+this.age);
	}
	alert(obj.age);
	obj.fun();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    运行效果：
    在这里插入图片描述

    花括号形式的自定义对象

    对象的定义：

    //空对象
var 变量名 = {};

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    对象的访问：

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

    • 1
    • 2

    举例：

    <script type="text/javascript">
	var obj = {
		name:"9527",
		age:22,
		fun:function(){
			alert("姓名："+this.name+"，年龄："+this.age);
		}
	};
	alert(obj.name);
	obj.fun();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    运行结果：
    在这里插入图片描述

  • 相关阅读:
    二分查找java
    Java 21 新功能展示（含示例）
    神经网络怎么看训练效果,神经网络常用训练方法
    安卓系统框架和Framework概述
    IT入门知识第七部分《移动开发》（7/10）
    【团队协作】都2022年了，前后端合作开发还不使用Apifox？
    Ollama部署大模型并安装WebUi
    C++ Reference: Standard C++ Library reference: C Library: cstdio: fgets
    aspnetcore使用websocket实时更新商品信息
    个人网站接入Google Ads的一点心得
  • 原文地址：https://blog.csdn.net/llg___/article/details/127683968