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

﹏ヽ暗。殇╰゛Y 2024-03-23 23:19 62阅读 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>
    		
    		<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>