JavaEE学习日志(四十一): JavaScript基础

最新推荐文章于 2026-01-21 13:27:36 发布

原创最新推荐文章于 2026-01-21 13:27:36 发布 · 421 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaEE学习日志

前端

本文深入探讨JavaScript的基础语法、数据类型、全局函数、运算符、布尔类型运算、语句及函数，详细介绍其在网页开发中的嵌入方式及关键应用。

JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

JavaEE学习日志（四十一）

JavaScript

JavaScript

JavaScript概述

注意：JavaScript与Java无关
在这里插入图片描述
作用：使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

JavaScript嵌入方式

嵌入方式一：在页面中使用标签<script>JS的代码</script>
最好添加属性：type="text/javascript"

嵌入方式二：在页面中使用标签<script>，但JS代码定义在另一个文件中，由当前HTML引入
文件本质上是文本文件，后缀名为.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			alert("欢迎登陆1");
		</script>
		<script src="js/a.js" type="text/javascript"></script>
	</body>
</html>

在这里插入图片描述

注意：

如果在script标签，使用src引入一个文件之后，标签中的js代码全部作废。如：alert("欢迎登陆3");将不会执行

<script src="js/a.js" type="text/javascript">
			alert("欢迎登陆3");
</script>

2.script标签在HTML中出现的位置：理论上script标签可以出现在页面上的任意位置。在不影响js功能的前提下，标签出现的位置越晚越好

JavaScript基本语法

S语法规则：

JS严格区分大小写
语句需要使用分号结尾
命名规则：按照Java的标识符
不能使用JS中关键字命名

JS是弱类型语言，Java是强制类型语言
弱类型：定义变量时，不需要明确类型
关键字：var 变量名=值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num = 1;
			alert(num);
			num = "abc";
			alert(num);
			num=5.6;
			alert(num);
		</script>
	</body>
</html>

JavaScript数据类型

数据类型：

数字类型 number
布尔类型 boolean
字符串类型 string
未初始化 undefined
引用类型 object

JS关键字 typeof 显示出变量类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num = 1;
			alert(typeof num);//number
			var num = 15.444;
			alert(typeof num);//number
			var num = true;//boolean
			alert(typeof num);
			var num = 'a';//string，可以使用'',也可以使用""
			alert(typeof num);
			var num2;
			alert(num2);//undefined,不被允许
			var date = new Date();
			alert(typeof date)//object
			var c = null;
			alert(typeof c);//object,这是一个bug
		</script>
	</body>
</html>

JavaScript全局函数

直接写函数名调用即可
字符串转成数字
返回结果number类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * 函数，全局性函数
			 * 直接写函数名调用即可
			 * 字符串转成数字
			 * parseInt("字符串") 返回结果number类型
			 */
			var num = parseInt("123");
			alert(num+1);
		</script>
	</body>
</html>

JavaScript运算符

JS运算符，和Java中运算符基本一致
主要区别：比较运算符

== 比较符号两边的数据是否相等
=== 比较符号两边的数据是否相等，同时比较数据类型

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * JS运算符，和Java中运算符基本一致
			 */
			var num = 5;
			alert(num+"5");// + 字符串连接
			alert(num-"3");//变量转成数字，再计算
			alert(num*"3");//变量转成数字，再计算
			
			var num2 = "a";
			alert(num2-1);//NaN
			
			alert(5/2);//2.5
			/*
			 * 比较运算符
			 * ==	比较符号两边的数据是否相等
			 * ===	比较符号两边的数据是否相等，同时比较数据类型
			 */
			alert(5=="5");//true
			alert(5==="5");//false
			
			
		</script>
	</body>
</html>

JavaScript布尔类型运算

布尔类型运算

数字类型：非0，就是true
字符串类型：非""，就是true，长度>0就是true
引用类型：一定是true
null，undefine：false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var b = -1;
			if(b){
				alert("真的");
			}else{
				alert("假的");
			}
		</script>
	</body>
</html>

JavaScript语句

JS中语句，包含，循环，判断，选择：
和Java中语句基本一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * JS中语句，包含，循环，判断，选择
			 * 和Java中语句基本一致
			 */
			for(var i=0;i<3;i++){
				alert("hello");
			}
		</script>
	</body>
</html>

JavaScript函数

JS中的函数：就是方法
定义函数，关键字function
格式：

function 函数名(参数){}

参数列表：定义变量var，不要写（默认就是var）
返回值：写了return就返回，不写就不返回

注意：

匿名函数的定义方式：function(){}
JS中函数，没有重载的概念，如果写了重载，则后一个函数会覆盖前一个。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function sum(a,b){
				alert(a+b);
			}
			sum(3,2);
			
			function sum2(a,b){
				return a+b;
			}
			var b = sum2(3,3);
			alert(b);
			/*
			 * JS中的函数，定义方式，匿名函数
			 * 定义方式：function(){}
			 */
			var fn = function(a,b){
				alert(a+b);
			}
			fn(1,2);
		</script>
	</body>
</html>

标签

#javascript #js #基础 #前端 #html