JavaScript基本语法

最新推荐文章于 2025-05-16 17:06:24 发布

段茜琳

最新推荐文章于 2025-05-16 17:06:24 发布

阅读量249

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_45649686/article/details/113059654

笔记专栏收录该内容

88 篇文章

订阅专栏

这篇博客介绍了JavaScript的基础知识，包括它作为一门脚本语言的角色，用于网页交互和动态效果。讲解了JavaScript与HTML、CSS的关系，以及如何在HTML中内嵌和外部引用JavaScript。还详细阐述了JavaScript的基本语法，如数据类型、运算符、控制结构，并通过实例展示了对话框、变量赋值、逻辑运算等操作。此外，还涵盖了条件语句、循环结构等编程语句的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JavaScript概述

1.脚本语言，不需要编译，由某种引擎解释执行。是一门面向对象的语言。为网页添加各种动态效果。
2.作用：
（1）响应客户端鼠标和键盘事件；
（2）客户端页面表单数据验证；
（3）使用JavaScript动态的改变页面标签的样式。
3.JavaScript与html、css的关系：
（1）HTML：提供网页结构，提供网页中的内容；
（2）CSS：用来美化网页；
（3）JavaScript：可以用来控制网页内容，给网页增加动态效果。
4.脚本有两种插入方式
（1）内部

<script type="text/javascript">
			alert("aaaaa")
			var num = 10;
			alert(num);//弹出框
			
			//var res = confirm("您确定要删除吗？")//确认对话框
			//alert(res);
			
			/* var res = prompt("请输入");//输入对话框
			alert(res); */
		</script>

（2）外部

<script src="js/out.js" type="text/javascript" charset="UTF-8"></script>

alert("我是外部js文件")

5.对话框

<script type="text/javascript">
			alert("aaaaa")
			var num = 10;
			alert(num);//弹出框
			
			var res = confirm("您确定要删除吗？")//确认对话框
			alert(res);
			
			var res = prompt("请输入");//输入对话框
			alert(res);
		</script>

（1）alert() 提示对话框；
在这里插入图片描述

（2）comfirm()选择对话框；
在这里插入图片描述
选择对话框返回值

（3）prompt(,)提示输入框；

在这里插入图片描述

2.基本语法

console.log()方法是将内容打印在控制台。
1：数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型</title>
		<script type="text/javascript">
			var num = 5;
			console.log(num);//打印在控制台
			var num1 = 0.5;//数值类型：整数型、浮点型
			console.log(num1);
			var name = 'Jim';
			console.log(name);
			var name1 = "Bob";//字符串类型：可以使用""、''
			console.log(name1);
			var flag = true;//boolean型
			console.log(flag);
			var un;
			console.log(un);//undefind型 没有定义  声明了但是没有赋值
			var date = new Date();//Object对象型
			console.log(date);
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
2.算术运算符
除了“+”外，其他算术运算符均可以在计算是对字符串进行隐式转换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算</title>
		<script type="text/javascript">
			var num = 5;
			var num1 = 10;
			var a = '5';
			var b = "10";
			var c = "c";
			console.log(num+num1);//数值+数值-->加法
			console.log(num+a)//数值+字符串-->连接
			console.log(num1-num);//数值-数值-->减法
			console.log(num1-a);//数值-字符串-->对字符串进行转型，若是数值则进行减法
			console.log(num-c);//若不是数值型，返回NaN not a number
			//*、/、%、++、--均与java使用方法一致
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
3.赋值运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>赋值运算符</title>
		<script type="text/javascript">
			var a = 5;
			var b = 10;
			var c = a;
			console.log(c);
			console.log(a+=b);
			console.log(a-=b);
			console.log(a*=b);
			console.log(a/=b);
			console.log(a%=b);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
4.比较运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
		<script type="text/javascript">
			var a = 10;
			var b = "10";
			var c = 5;
			console.log(a == b);//== 等于  只比较数值
			console.log(a === b);//=== 全等，包括数值和类型
			console.log(a>c);
			console.log(a<c);
			console.log(a>=c);
			console.log(a<=c);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
5.逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
		<script type="text/javascript">
			var a = 10;
			var b = 1;
			console.log(a>b && b>0);//&&  and 与
			console.log(a>b || b<0);//|| or 或
			console.log(!(a>b));//! not 非
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
6.条件运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件运算符</title>
		<script type="text/javascript">
			console.log(10 > 5 ? 10 : 5);
			//条件运算符（三目运算） ?前条件成立执行:前的内容，否则执行:后的内容
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
7.语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语句</title>
		<script type="text/javascript">
			//条件语句
			if(10>5){
				console.log("true");
			}else{
				console.log("false");
			}
			
			//多路选择
			var a = 2;
			switch(a){
				case 1:
				console.log(1);
				break;
				case 2:
				console.log(2);
				break;
				case 3:
				console.log(3);
				break;
			}
			
			//循环语句for
			var b = 0;
			for(var i = 0;i < 10;i++){
				b += i;
			}
			console.log(b);
			
			//循环语句while
			var c = 10;
			while(c > 0){
				console.log(--c);
			}
			
			//do-while循环
			do{
				console.log(a--);
			}while(a>=0)
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述