JavaScript 基础知识

/*
第一章:JavaScript简介
JavaScript简介:
	一种嵌入到HTML中的编程语言,或称为脚本语言,由浏览器边解释边执行,所以它是一种解释性语言
	作用是控制网页的行为.
	因为有了JS,使得用户可以和页面进行交互(如鼠标操作)
JS的引入方式:
	在HTML中引入js一般有三种方式:
		外部JS
			把html文件和js文件分开放在不同的文件夹中,在html文档中通过<script>标签来引用
			这是最常用的引入方式,有利于提升网站性能和可维护性
			既可以在head中引入,也可以在body中引入
			用<script src="js文件路径"></script> src(source源)属性指示js文件的路径
			示例:02外部引入js示例.html
		内部JS
			指的是在html文档中直接编写js代码,放在标签内部
			<script>js代码</script>
			示例:03内部引用js文件.html
		元素事件JS
			在元素的属性中直接编写js代码或者调用函数
			示例:04元素属性js示例.html
			示例:05在元素事件中调用函数.html
			
第二章:语法基础
	常量和变量
		变量
			每一个语句后加分号(;)
			变量指的是在程序运行过程中,其值可以改变的量
			变量的命名规则:
				1.由字母、数字、下划线、$组成
				2.不能以数字开头
				3.不能使用关键字和保留字
				4.建议采用有意义的名称
				5.区分大小写
				6.建议使用驼峰命名
			变量的使用
				变量的声明: var 变量名
				变量的使用: 变量名 = 值;
				也可以申明并使用: var name = "飞哥";
				同时申明多个变量: var a=10,b=20,c=30;
		常量
			这是一种特殊的变量,一个不能改变的量
			一般使用全部大写的形式,如 var DEBUG = 1;
			
	数据类型
		基本数据类型
			数字
				int 
				float 
			字符串
				用引号括起来的字符
				注意单双引号的混用,和python类似,好像不支持3引号
			布尔值
				true
				false
			未定义值
				undefined 一个变量用var申明了,但是没有对这个变量进行赋值
			空值
				null 表示系统没有为这个变量分配内存空间
		引用数据类型
			对象
				数组
				
	运算符
		算术运算符
			+,-,*,/,%,
			++:自增
				++i
					先自增,再使用变量i;
				i++
					先使用变量i,再自增;
			--:自减
			加法运算的数据类型转换:
				数字+数字=数字
				字符串+字符串=字符串
				数字+字符串=字符串
		赋值运算符
			=
			+=,-=,*=,/=,%=
		比较运算符
			>,<,>=,<=,==,!=
		逻辑运算符
			&&:and 
				短路运算:若果第一个操作数为false,不再计算第二个,直接返回false
			||:or 
				短路运算:若果第一个操作数为true,不再计算第二个,直接返回true
			! :not 
		条件运算符(三元运算符)
			var a=条件? 表达式1 : 表达式2;
			如果条件为true,a=表达式1;
			否则:a=表达式2;
			
	表达式与语句
		将表示操作数的变量或者常量用运算符连接起来的式子称为表达式
		语句指的是单独的一句,使用分号(;)作为结束符
		
	类型装换
		隐式类型转换
			由JavaScript解释器自动进行的类型转换,如数字和字符串相加的结果是字符串
		显式类型转换
			使用代码强制进行类型转换
				1.将字符串转换为数字
					Number():可以将任何数字型字符串转化为数字
						如果传给Number的参数含有非数字字符,返回NaN(not a number)
					parseInt():提取首字母是数字的任意字符串中的整数
						如果传给parseInt的参数首字符不是数字,返回NaN(not a number)
						但是parseInt('-123')是例外,返回负数-123
					parseFloat():提取首字母是数字的任意字符串中的浮点数
						同上
				2.数字转换为字符串
					直接和字符串做+
					toString()
						示例:
							var a = 100;
							var b = a.toString()+1000;
							console.log(b)
	转义字符
		和python类似  使用反斜杠("\")
	注释:
		单行注释://单行注释
		多行注释:斜杠*多行注释*斜杠
第三章:流程控制
	3种流程控制方式:
	顺序结构
		从上到下依次执行
	选择结构
		单向选择
			if...
				if (条件表达式) {
					条件为真时执行的语句块
				}
				条件为假时跳过大括号中的内容,向下执行
		双向选择
			if...else...:可使用三目运算符改写 var a= 条件表达式? 表达式1:表达式2
				if (条件表达式) {
					条件为真时执行的语句块
				}else{
					条件为假时执行的语句
				}
		多向选择
			if...else if...else:
				if (条件表达式1){
					语句块
				}else if(条件2){
					语句块
				}else{
					语句块
				}
			嵌套if语句:
				if (条件1){
					if (条件2){
						语句块
					}esle{
						语句块
					}
				}esle{
					if(条件3){
						
					}else{
						
					}
				}
		switch结构:
			stitch (判断值){
				case 取值1:
				语句块;break;
				case 取值2:
				语句块2;break;
				case 取值3:
				语句块3,break;
				...
				dedault://默认情况
				语句块N;
			}
	循环结构
		while:
			while语句:当条件成立时,循环
				while (条件){
					循环体
				}	
			do...while语句:先执行依次do的操作,在判断条件是否满足,也就是说不管条件是否满足都先执行一次do中的内容
				do{
					
				}while (条件);
		for:
			for (初始化表达式;条件表达式;循环后操作){
				循环体
			}
			
第四章 初识函数
	定义函数:
		function 函数名(形参表){
			函数体
			return 返回值;//有返回值的函数
		}
	调用函数:
		直接调用:函数名(实参表)
		在表达式中调用
			var a = funcName()+100;
		在超链接中调用
			指的是在a标签的href属性中用"javascript:函数名"的形式来调用函数,当用户点击超链接时,就会执行函数
		在事件中调用
			如在按钮的onclick="函数名()"调用
	全局变量和局部变量:
		全局变量:在主程序中定义,在全局作用域内有效
		局部变量:在函数内部定义,只能在函数内部使用
	函数嵌套
		在函数的内部定义子函数
	内置函数
		isFinite():判断某一个数是否是一个有限数值
		isNaN():判断是否是数字
		escape():对字符串进行编码
		unescape():对字符串进行编码
		eval():把一个字符串当表达式计算
第五章 字符串对象
	对象
		自定义对象
		内置对象
			字符串对象(String)
			数组对象(Array)
			日期对象(Date)
			数值对象(Math)
	字符串
		获取字符串长度:字符串名.length
		大小写转换:
			字符串名.toLowerCase()
			字符串名.toUpperCase()
		获取某一个字符:
			字符串名.charAt(n)  获取字符串中的第n个字符,n从0开始;
		截取字符串:
			str.substring(start,end);包含start,不包含end;
		替换:
			str.replace(原字符串,新字符串)	只替换一次
			str.replace(正则表达式,新字符串)  会替换所有
		分割字符串:
			str.split("分隔符") 结果是一个数组
				str.split(" ") 用空格作为分隔符
				str.split("")  可以用来分割字符串的每一个字符
		查找字符串的位置
			str.indexOf(指定字符串) 如果指定字符串在str中,则返回首次出现的位置,否则返回-1
			str.lastIndexOf(指定字符串) 最后一次出现的位置
			match()
			search()
第六章 数组对象
	简单来说一个数组可以用来保存多个值,js中的数组类似于python中的list,可以保存不同数据类型的多个值,但习惯上保存同一种类型的数据
	数组的创建
		var 数组名=new Array(元素1,元素2....元素n);
		字面量形式: var 数组名=[元素1,元素2....元素n];
		创建一个空数组: var arr=[]
	数组元素的获取:
		下标获取:数组名[index]
	元素赋值:
		arr[index] = item;  
		注意:python中对不存在的下标赋值会报错,js可以,如
			var arr=['html','css','js'];
			arr[3]='JQuery';
			这是因为尝试获取为赋值的下标元素会得到结果:undefined
	数组的基本属性和方法
		长度:
			arr.length:
				这个属性用于获取数组的长度,空数组的长度为0
				length属性常和for循环结合使用,遍历数组
					如:
						for (i=0;i<arr.length;i++){
							console.log(arr[i])
						}
		切片:
			arr.slice(start,[end])
				不能指定步长
		增删元素:
			头部增删:
				arr.unshift(元素1,元素2,....) //可以多个添加
					返回值是一个数字
				arr.shift()
					不带参数,删除第一个元素
					返回被删除的对象
			尾部添加:
				arr.push(元素1,元素2); //可以多个添加
				arr.pop();
					不带参数,删除最后一个元素
					返回被删除的对象
		排序:
			arr.sort(函数名);
				函数名指的是用于排序的函数的名称.
		反序:
			arr.reverse();
		将数组元素连接成字符串:
			arr.join("连接符");
				无缝连接:参数设置为""(空字符串);
				str.split和arr.join的作用相反;
			将一个字符串中的分隔符换掉可以使用:
				str.split('*').join("|")
第七章 时间对象
	语法
		var 日期对象名=new Date();
	获取时间:
		getFullYear():获取年份
		getMonth():月份
			0表示1月
		getDate():天
		getHours():小时
		getMinutes():分
		getSeconds():秒
	设置时间:
		setFullYear():获取年份
			时间对象.setFullYear(year,[month,day]);//可以一次性设置年月日
		setMonth():月份
			时间对象.setMonth(month,[day]);//可以一次性设置月日
		setDate():天
			时间对象.setMonth(day);
		setHours():小时
			时间对象.setHours(hour,[minute,second,millisec]);
		setMinutes():分
			时间对象.setHours(minute,[second,millisec]);
		setSeconds():秒
			时间对象.setHours(second,[millisec]);
	获取星期:
		时间对象.getDay();返回的是一个数字;0表示星期天;
第八章数学对象
	类似于python的math模块
	语法
		Math.属性
			PI:π
				弧度:
					角度数*Math.PI/180
			LN2:2的自然对数
			LN10:10的自然对数
			LOG2E:以2位底的e的对数
			LOG10E:以10位底的e的对数
			SORT2:2的平方根
			SORT1_2:2的平方根的倒数
		Math.方法()
			max()
			min()
			sin(x)
			cos(x)
			tan(x)
			asin(x)
			acos(x)
			atan(x)
			atan2(x)
			floor(x)
			ceil(x)
			random()
				生成[0,1)
				某个范围类的随机数
					0~m:
						Math.random()*m;
					n~m+n:
						Math.random()*m+n;
					-n~m-n:
						Math.random()*m-n;
					-m~0:
						Math.random()*m-m;
				某个范围的整数:
					0~m之间:
						Math.floor(Math.random()*(m+1))
					1~m之间:
						Math.floor(Math.random()*m)+1
					n~m之间:
						Math.floor(Math.random()*(m-n+1))+n
			abs()
			sqrt()
			log()
			pow()
			exp()
*/		
	

02外部引入js示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在head中引入外部js文件 -->
		<script src ="index.js"></script>
	</head>
	<body>
		<!-- 在body中引入外部js文件 -->
		<script src ="index.js"></script>
	</body>
</html>

03内部引用js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在head中引入 -->
		<script type="text/javascript">
			...
		</script>
	</head>
	<body>
		<!-- 在body中引入 -->
		<script>]
			...
		</script>
	</body>
</html>

04元素属性js示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="#" id="" value="按钮" onclick="alert('这是一个弹出警告消息")" />
	</body>
</html>

05在元素事件中调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function alertMes()
			{
				alert("这是一个函数调用的结果") \\弹出一个对话框
			}
		</script>
	</head>
	<body>
		<input type="button" name="#" id="" value="按钮" onclick="alertMes()" />
	</body>
</html>

06一个简单的js程序

<!-- 页面打开时,页面关闭时弹出对话框 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				alert("欢迎光临我的主页");
			}
			window.onbeforeunload=function(event){
				var e=event || window.event;
				e.returnValue="记得下次再来哦";
			}
		</script>
	</head>
	<body>
	</body>
</html>

07自增自减举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var a = 1,b=100;
				b += a++;
				alert("a=:"+a+"\n"+"b=:"+b);
				var c = 0,d=100;
				d -= ++c;
				document.write("c="+c+"<br />"+"d="+d)

				var j=1,k=2,l;
				l = --k;
				k = j--;
				console.log('j='+j+'\n'+'k='+k+'\n'+'l='+l)
			// 注意console.log/document.write/alert换行方式的不同
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

08switch语句的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var day=0;
			var week
			switch (day){
				case 1:
				week='星期一';break;
				case 2:
				week="星期二";break;
				case 3:
				week="星期三";break;
				case 4:
				week="星期四";break;
				case 5:
				week="星期五";break;
				case 6:
				week="星期六";break;
				default:
				week="星期日";break;
			}
			document.write("今天是"+week);
			// 如果删掉case 3的break,结果会是星期四
			
		</script>
	</head>
	<body>
	</body>
</html>

09一到一百累加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// while版本
			/*var total = 0;
			var i = 1;while (i<=100){
				total += i++;	
			}*/
			
			// do...while版本
			// var total = 0;
			// var i = 0;
			// do{
			// 	total += i++
			// }while(i<=100)
			
			// for 循环版本
			var total = 0;
			for(var i=1;i<=100;i++){
				total += i;
			}
			document.write("1-100累加求和的结果是:"+total)
		</script>
	</head>
	<body>
	</body>
</html>

10死循环的整蛊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			while(true){
				alert('我是你爸爸的儿子!')
			}//不停地弹出对话框!!!
		</script>
	</head>
	<body>
	</body>
</html>

11判断一个数是整数还是小数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var n = 100.01;
			if (parseInt(n+"") == parseFloat(n+"")){
				document.write("这是一个整数");
			}else{
				document.write("这是一个小数");
			}
		</script>
	</head>
	<body>
	</body>
</html>

12水仙花数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//定义一个空字符串,用来保存水仙花数
			var s = '';
			for (var i=100;i<=1000;i++){
				var ge = i%10;
				var shi = (i/10)%10;
				shi = parseInt(shi);
				var bai = i / 100;
				bai = parseInt(bai);
				if (ge*ge*ge+shi*shi*shi+bai*bai*bai == i){
					s+= i+","
				}
			}document.write("水仙花数有:"+s)
		</script>
	</head>
	<body>
	</body>
</html>

13作业菱形图案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload=function(){
				// 上三角部分
				for (var i=0;i<4;i++){
					for (var k = 4-i;k>1;k--){
						document.write('-')
					}
					for (var j=0;j<2*i+1;j++){
						document.write('*')
					}
				document.write('<br />')
				}
				// 下三角部分
				for (var i=3;i>0;i--){
					for (var k=0;k<4-i;k++){
						document.write('-');
					}
					for (var j = 2*i-1 ;j>0;j--){
						document.write('*')
					}
				document.write('<br />')
				}
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

14作业99乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				for(var i=1;i<10;i++){
					for (var j=1;j<i+1;j++){
						document.write(i+'*'+j+"="+(i*j)+"  ")
					}
					document.write("<br />")
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

15在超链接中调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function expressMes(){
				alert("他/她:我爱HTML.\n我:我爱你!")
			}
		</script>
	</head>
	<body>
		<a href="javascript:expressMes()">表白</a>
	</body>
</html>

16函数嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		window.onload=function(){
			
			// 嵌套函数求阶乘
			function fact(a){
				// 子函数求平方
				function multi(x){
					return x*x;
				}
			var m =1;
			for (var i=1;i<=multi(a);i++){
				m=m*i;
			}
			return m
			}
			// 调用函数
			var res = fact(10)
			document.write(res)
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

17判断闰年

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				function isleapYear(year){
					if (((year % 4 == 0) && (year % 100 != 0 )) || (year % 400 ==0)){
						return year+"是闰年";
					}else{
						return year+"不是闰年";
					}
				}
				document.write(isleapYear(2021));
				}
		</script>
	</head>
	<body>
	</body>
</html>

18数组赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr=[];
			arr[1] = 1;
			console.log(arr)
			console.log(arr[0])
			console.log(arr[1])
			for (var i=0;i<10;i++){
				arr[i] = i;
			}
			console.log(arr.slice(1));//省略了end
			console.log(arr.slice(3,8));
			console.log(arr.slice(2,8,3)); //不能指定步长
			num = arr.unshift('头部1','head1')  //函数的返回值是一个数字,代表长度
			console.log(arr)
			console.log(num)
			obj = arr.shift() //返回一个对象,即被删除的对象
			console.log(obj)
		</script>
	</head>
	<body>
	</body>
</html>

19数组排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function up(a,b){
				return a-b;
			}
			function down(a,b){
				return b-a;
			}
			var arr=[23,54,13,87,2,5,90,132];
			arr.sort(up);
			document.write('升序:'+arr.join(",")+"<br/>")
			arr.sort(down);
			document.write('降序:'+arr.join(",")+"<br/>")
		</script>
	</head>
	<body>
	</body>
</html>

20数组和字符串的转换操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var s='养马初级中学';
			var s2 = s.split("").join("><");
			var arr = s2.split("");
			arr.unshift('<');
			arr.push(">");
			var res = arr.join("");
			document.write(res);
		</script>
	</head>
	<body>
	</body>
</html>

21统计单词个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var s = 'Rome was not built in a day';
				var arr=s.split(" ");
				len = arr.length
				document.write("单词的个数为:"+len);
			}
		</script>
	</head>
	<body>
	</body>
</html>

22时间对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var now=new Date();
			document.write(now);
			year = now.getFullYear();
			mon = now.getMonth()+1;
			day = now.getDate();
			console.log(year);
			console.log(mon);
			console.log(day);
			week = now.getDay();
			console.log(week);
		</script>
	</head>
	<body>
	</body>
</html>

23随机验证码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str='abcdefghijklmnopqrstuvwxyz';
			str+=str.toUpperCase();
			str+='1234567890';
			var arr=str.split("");

			for(var j=0;j<10;j++){
				var res = '';
				for (var i=0;i<4;i++){
					var index = Math.floor(Math.random()*arr.length);
					res += arr[index];
				}
				document.write(res);
				document.write("<br />");
				}
		</script>
	</head>
	<body>
	</body>
</html>

---

生命不息,拉屎不止