JS基础内容

1.感受javascript


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<script>
			document.write("大明湖畔，白玉京留");
			document.write("我是一个段落标签
");
		script>
	body>
	<script>
		alert("我是一个弹窗");
	script>
html>

2.标签中应用


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		
		 <p onclick="alert('你点我干什么？')">你点我一下看看效果p>
	body>
html>

3.内部JS


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<p>我是一个段落标签1p>
		<p>我是一个段落标签2p>
	body>
	
	<script>
		var pEles=document.getElementsByTagName("p");
		
		pEles[0].addEventListener("click",function(){
			this.style.color="red";
		})
	script>
html>

4.外部JS文件


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="js/myJavaScript.js">script>
	head>
	<body>
		<p>我是一个段落标签p>
	body>
html>

5.标签中弹出欢迎你


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<button onclick="alert('欢迎你')">点我一下button>
	body>
html>

6.内部JS中弹出欢迎你


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<button onclick="alert('欢迎你')">点我一下button>
	body>
html>

7.外部JS弹出欢迎你


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="js/welcome.js">script>
	head>
	<body>
	body>
html>

8.JS变量


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
		//先声明变量，再赋值，JS中所有变量声明关键字为var
		var num1;
		var result;
		
		num1=10;
		result='qwert';
		
		//操作数据：通过操作变量来操作数据
		//document.write():将内容输出在页面中
		document.write(num1);
		document.write("
"+result);
		
		//console.log():将内容输出在控制台，一般用来调试程序
		console.log(num1);
		console.log(result);
		
		//声明变量和赋值一起写
		var result2 = ture;
		console.log(result2);
		
		//不变声明变量直接赋值，这种方式容易出现问题，所以轻易不要使用
		result3 = 'hello java';
		consloe.log(result3);
		script>
	body>
html>

9.JS数据类型


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			var num1;
			console.log(typeof num1);//undefined
			
			var num2 = true;
			console.log(typeof num2);//boolean
			
			num2 = "hello js";
			console.log(typeof num2);//string
			
			num2 = 100;
			console.log(typeof num2);//number
			
			
		script>
	body>
html>

10.JS运算符


DOCTYPE html>

11.键盘输入数据


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			//prompt():从页面中输入数据，得到的数据类型是string类型，你不输入数据，直接点击确定按钮，得到的内容是空内容，类型还是string，如果你点击取消按钮，得到数据是null，数据类型是object
 
			// var age =prompt();
			//弹出输入框，输入框有提示信息
			// var age = prompt("请输入你的年龄：");
			//弹出输入框，输入框有提示信息和默认值
			var age = prompt("请输入你的年龄：");
			console.log(age);
			console.log(typeof age);
		script>
	body>
html>

12.单分支if选择结构


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			var jsScore = 90;
			if(jsScore>80){
				console.log("奖励100元");
			}
			
			
			var year =2020;
			if(year%4==0&&year%100!=0||year%400==0){
				console.log("闰年");
			}
		script>
	body>
html>

13.双分支if选择结构


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			var jsScore = 9;
			if(jsScore>80){
				console.log("奖励100元");
				}else{
					console.log("发蹲马步10分钟");
			}
			
			console.log("程序执行完毕");
		script>
	body>
html>

14.多分支if选择结构


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			var jsScore = prompt("请输入你的js成绩：");
			if(jsScore>90){
				console.log("优秀");
			}else if(jsScore>80){
				console.log("良好");
			}else if(jsScore>60){
				console.log("中等");
			}else{
				console.log("差");
			}
			console.log("程序执行完毕");
		script>
	body>
html>

15.嵌套if选择结构


DOCTYPE html>

16.switch选择结构


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			var mingCi = 1;
			switch(mingCi){
				case 1:
				console.log("奖励100元");
				//break;
				case 2:
				console.log("奖励50元");
				break;
				case 3:
				console.log("奖励30元");
				break;
				case 4:
				console.log("及奖励10元");
				break;
			}
			console.log("程序执行完毕");
		script>
	body>
html>

17.switch选择结构的case穿透现象的使用


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
					//根据月份输出季节
					var month = 12;
		
					switch (month) {
						case 12:
						case 1:
						case 2:
							console.log("冬季")
							break;
						case 3:
						case 4:
						case 5:
							console.log("春季")
							break;
						case 6:
						case 7:
						case 8:
							console.log("夏季")
							break;
						case 9:
						case 10:
						case 11:
							console.log("秋季")
							break;
						default:
							console.log("月份输入有误");
							break;
					}
				script>
	body>
html>

18.JS中的日期时间获取


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			//创建日期时间对象
			var date = new Date();
			console.log(date);
			
			//获取年
			var year = date.getFullYear();
			console.log(year);
			
			console.log(date.getMonth()+1);
			console.log(date.getDate());
			console.log(date.getDay());
			
		script>
	body>
html>

相关阅读:
1.3寸OLED 12864 sh1106带中文字库液晶屏介绍
 PAT乙级-B1011 A+B 和 C（15）
推荐5个神仙软件，个个让你爱不释手
 C# Windows多串口绑定
 夯实c语言基础
 C++ Reference: Standard C++ Library reference: C Library: cmath: asin
自学的一些面试题-html
webrtc一对一视频通话功能实现
 输入spark-shell后毫无反应直接跳出命令行
 java入门-----基本语法之语句的使用
原文地址：https://blog.csdn.net/m0_58295980/article/details/126897412