【一文】带你简单学习JavaScript【01】

最新推荐文章于 2024-06-15 09:59:21 发布

Java程序员Jesse

最新推荐文章于 2024-06-15 09:59:21 发布

阅读量188

点赞数

分类专栏： JavaScript 文章标签：学习 javascript

本文链接：https://blog.csdn.net/qq_64960245/article/details/132300661

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【一文】带你简单学习JavaScript

学习知识点：

1.JavaScript基础结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript基础结构</title>
	</head>
	<body>
		<script type="text/javascript">
			alert("Hello World")
		</script>
	</body>
</html>

2.JavaScript的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript的应用</title>
		
	</head>
	<body>
		
	</body>
	<script>
		document.write("大湖名城，创新高地");
		document.write("<h2>大湖名城，科教基地</h2>");
	</script>
</html>

3.JavaScript使用方式一：在HTML标签中使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML标签中使用</title>
	</head>
	<body>
		<!-- 
			在HTML标签中使用JavaScript有两种形式
				1）使用JavaScript:js代码
				2）结合事件属性来使用
		 -->
		<a href="javascript:alert('你点我干什么')">点我一下</a>
		<a href="javascript:alert('你点我干什么')">再点我一下</a>
		<button onclick="alert('搞什么飞机！！')">你也点我一下</button>
	</body>
</html>

4.JavaScript使用方式二：内部JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部JavaScript</title>
		<script>
			//定义一个函数
			function showInfo(){
				alert('你点我干什么');
			}
		</script>
	</head>
	<body>
		<button onclick="showInfo()">点我一下</button>
		<p ondblclick="showInfo()">你也点我一下</p>
	
	</body>
</html>

5.JavaScript使用方式三：外部JavaScript的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部JavaScript</title>
		<script src="js/myJavaScript.js"></script>
	</head>
	<body>
		<button onclick="printInfo()">点我一下</button>
	</body>
</html>

6.变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量</title>
	</head>
	<body>
	</body>
	<script>
		//声明变量
		var num;
		//给变量赋值
		num = 100;
		document.write(num+"</br>");
		//输出num的数据类型
		document.write(typeof num+"</br>");
		
		
		num="qwert"
		document.write(num+"</br>");
		document.write(typeof num+"</br>");
		
		
		//声明变量并赋值
		var num2 = "asdfg";
		document.write(num2+"</br>");
		
		
		//在js中，变量还可以不声明直接赋值
		//不建议使用这种方式因为它可能出现未知的不容易发现的错误
		name = "张三";
		document.write(name+"</br>")
	</script>
</html>

7.数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型</title>
	</head>
	<body>
	</body>
	<script>
		var num1;
		document.write("num1="+num1+"</br>");
		document.write(typeof num1+"</br>");
		
		var num2 = 100;
		document.write("num2="+num2+"</br>");
		document.write(typeof num2+"</br>")
		
		
		var num3 = 99.99;
		document.write("num3="+num3+"</br>");
		document.write(typeof num3+"</br>")
		
		
		var num4 = true;
		document.write("num4="+num4+"</br>");
		document.write(typeof num4+"</br>");
		
		//JavaScript中的字符串可以使用单引号或者双引号括起来
		var num5 = 'qwert';
		document.write("num5="+num5+"</br>");
		document.write(typeof num5+"</br>");
		
	</script>
</html>

8.赋值运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>赋值运算符</title>
	</head>
	<body>
	</body>
	<script>
		//赋值运算符: = 将=右边的数据或者表达式赋值给=左边的变量
			//表达式:数据和符号的结合
			var num1 = 100;
			var num2 = 200;
			document.write("num1="+num1+"</br>");
			document.write("num2="+num2+"</br>");
			var sum = num1+num2;
			document.write("sum="+sum+"</br>");
			
	</script>
</html>

9.算术运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
	</head>
	<body>
	</body>
	<script>
		
		// 算术运算符: + - * /（取模运算符/取余运算符）
		var num1 = 20;
		var num2 = 3;
		
		//将结果输出在控制台
		console.log("num1+num2="+(num1+num2));
		console.log("num1-num2="+(num1-num2));
		console.log("num1*num2="+(num1*num2));
		console.log("num1/num2="+(num1/num2));
		console.log("num1%num2="+(num1%num2));
		
		var a = 10;
		console.log("a="+a);//a=10
		a++;
		console.log("a="+a);//a=11
		++a;
		console.log("a="+a);//a=12
		
		var b = 10;
		console.log("b="+b);//b=10
		b--;
		console.log("b="+b);//b=9
		--b;
		console.log("b="+b);//b=8
		
		
		var c = 100;
		console.log("c="+c);//c=100
		var d = c++;
		console.log("c="+c)//c=101
		console.log("d="+d);//d=100
		
		var m =100;
		console.log("m="+m);//m=100
		var n = ++m;
		console.log("m="+m);//m=101
		console.log("n="+n);//n=101
	</script>
</html

10.比较运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
	</head>
	<body>
	</body>
	<script>
		// 比较运算符: > >= < <= == != ===(恒等于)
			//比较运算符描述的是两个数据或者表达式之间的关系
				//成立为true,不成立flase
		var num1 = 100;
		var num2 = 200;
		var num3 = 200;
		var num4 = "200";
		
		console.log("num1>num2:"+(num1>num2));//false
		console.log("num2>=num3:"+(num2>=num3));//true
		console.log("num1<num2:"+(num1<num2));//true
		console.log("num1<=num2:"+(num1<=num2));//true
		console.log("num1==num2:"+(num1==num2));//false
		console.log("num2==num3:"+(num2==num3));//true
		
		//在这里我们发现num2是数字类型，num4是字符串类型，但是num2=num4的结果为true，这是因为==只是比较变量中的值不比较数据类型
		console.log("num2==num4:"+(num2==num4));//true
		//JS中的===不仅会比较两个变量中的值，还会比较变量的数据类型，只有两者都满足才会返回true
		console.log("num2===num4:"+(num2===num4));//false
		console.log("num1!=num2:"+(num1!=num2));//true
	
	</script>
</html>

11.逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
	</head>
	<body>
	</body>
	<script>
		/*逻辑运算符:&&(与) ||(或) !(非)
		
		*/
		var b1 = true;
		var b2 = true;
		var b3 = false;
		var b4 = false;
		//&&:只有左右两边表达式同时为true,结果才为true，其他情况都是false
		console.log("true&&true:"+(b1&&b2));//true
		console.log("true&&false:"+(b1&&b3));//flase
		console.log("false&&true:"+(b3&&b2));//false
		console.log("false&&false:"+(b3&&b4));//false
		//||:只要||左右两边有一个表达式为true，结果就为true,只有当||左右两边表达式同时为false,结果才为false
		console.log("true&&true:"+(b1||b2));//true
		console.log("true&&false:"+(b1||b3));//true
		console.log("false&&true:"+(b3||b2));//true
		console.log("false&&false:"+(b3||b4));//false
		// !:取反操作，你说是true取反变成false  你说是false取反为true
		console.log("b1:"+b1);//true
		console.log("!b1:"+(!b1));//false
		console.log("!b3:"+(!b3));//true
	
	</script>
</html>

12.三目运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三目运算符</title>
	</head>
	<body>
	</body>
	<script>
			/*	
			三目运算符:也称之为条件运算符或者三元运算法
				语法结构:
					条件？表达式1:表达式2
				执行规律:
					如果条件为true，执行表达式1
					如果条件为false，执行表达式2
			*/
		//输出两个变量中的最大值
		var num1 = 100;
		var num2 = 200;
		var result = num1>num2?num1:num2;
		console.log("两个数中的最大值是:"+result);
		
	</script>
</html>

13.注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注释</title>
	</head>
	<body>
	</body>
	<script>
		
		//单行注释:只能在一行写注释 快捷键:ctrl+/
		// var num1= 100;
		
		/*
			多行注释:可以写任意行注释内容  快捷键:ctrl+shift+/
		*/
		/* var num2 = 100;
		var num3 = 200; */
	</script>
</html>

14.单分支if选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单分支if选择结构</title>
	</head>
	<body>
	</body>
	<script>
		//声明一个变量用来存储学生属性
		var score = 7;
		
		// 判断学生成绩是否及格，如果及格输出及格
		if(score>=60){
			console.log("及格");
		}
		
		console.log("好好学习,天天向上");
	</script>
</html>

15.获取键盘输入数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取键盘输入数据</title>
	</head>
	<body>
	</body>
	<script>
		/* 
		 prompt():弹出一个带有确定按钮和取消按钮的对话框，获取你输入的数据
			1)prompt()函数可以携带2个参数，第一个参数作为输入数据的提示信息，第二个参数作为默认值
			2)prompt()函数输入的数据返回给你，都是string类型
			3)如果你没有输入数据，也没有默认值，你点击确定按钮，获取的是一个空的字符串，数据类型是string
		    4)如果你没有输入数据，也没有默认值，你点击取消按钮，获取的是一个null数据，数据类型是object类型
		 */
		var score = prompt("请输入一个成绩:",120);
		console.log("你输入的成绩是:"+score);
		console.log(typeof score);

	</script>
</html>

16.双分支if选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双分支if选择结构</title>
	</head>
	<body>
	</body>
	<script>
		// 从键盘输入一个学生的成绩，判断该成绩是否及格，如果及格输出及格了，如果不及格输出不及格
		var score = prompt("请输入学生成绩:");
		
		if(score>=60){
			console.log("及格了");
		}else{
			console.log("很遗憾，不及格");
		}
		
		console.log("好好学习,天天向上");
	</script>
</html>

17.多分支if选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多分支if选择结构</title>
	</head>
	<body>
	</body>
	<script>
		/* 
		 判断成绩属于哪一个等级
		 >=95 优秀
		 >=80 良好
		 >=60 一般
		 <60 差
		 */
		var score = 83;
		if(score>=95){
			console.log("优秀");
		}else if(score>=80){
			console.log("良好");
		}else if(score>=60){
			console.log("一般");
		}else{
			console.log("差");
		}
		
		console.log("好好学习，天天向上");
	</script>
</html>

18.嵌套if选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套if选择结构</title>
	</head>
	<body>
	</body>
	<script>
		
		/* 
		 嵌套if选择结构:在一个if结构中包含另一个if结构
		 
		 需求:获取3个数中的最大值
		 */
		var num1 = 100;
		var num2 = 300;
		var num3 = 200;
		var max;
		if(num1>num2){//比较num1和num2,如果num1大于num2成立，则继续接着比较num1和num3
			if(num1>num3){
				max=num1;
			}else{
				max=num3;
			}
			
		}else{//如果num1大于num2不成立,接着比较num2和num3
			if(num2>num3){
				max=num2;
			}else{
				max=num3;
			}
		}
		
		console.log(max);
		console.log("-----------------------")
		var max = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
		console.log(max);
		
	</script>
</html>

19.switch选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>switch选择结构</title>
	</head>
	<body>
	</body>
	<script>
		/* 
		 需求：根据学生成绩名次发放奖励
			第一名奖励100元
			第二名奖励50元
			第三名奖励10元
			其他名次没有奖励
		 */
		var mingCi = 2;
		switch(mingCi){
			case 1:
			console.log("奖励100元");
			break;
			
			case 2:
			console.log("奖励50元");
			break;
			
			case 3:
			console.log("奖励10元");
			break;
			
			default:
			console.log("没有奖励");
			break;
		}
		
		console.log("good good study,day day up!!")

	</script>
</html>

20.switch选择结构练习-输出星期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输出星期</title>
	</head>
	<body>
	</body>
	<script>
		var date = new Date();
		
		//获取星期,返回的是一个number类型的值，0表示星期日，1表示星期一，2表示星期二，以此类推
		var day = date.getDay();
		console.log(day);
		
		switch(day){
			case 0:
			console.log("星期日");
			break;
			
			case 1:
			console.log("星期一");
			break;
			
			case 2:
			console.log("星期二");
			break;
			
			case 3:
			console.log("星期三");
			break;
			
			case 4:
			console.log("星期四");
			break;
			
			case 5:
			console.log("星期五");
			break;
			
			case 6:
			console.log("星期六");
			break;
		}
	
	</script>
</html>