javascript基础语法整理--附带js小游戏

30分钟带你过一遍js基本语法。前端学习必不可少的脚本语言javascript，js的基础语法，原生js是之后学习的基础。
后期会继续修改

js简单语法实例

基本输入输出

<script type="text/javascript">
			var a = prompt("输入name:");
			alert("你好"+a);
			// 使用 window.alert() 弹出警告框。
			window.alert(3+8);
		    // 使用 document.write() 方法将内容写到 HTML 文档中。
			document.write("<h3 id='a1'>张忠浩</h3>");
		    // 使用 innerHTML 写入到 HTML 元素。
			document.getElementById('a1').innerHTML = 'zzh';
		    // 使用 console.log() 写入到浏览器的控制台。
			a = 1
			b = 2
			console.log(a+b,16+'dd')
</script>

注释–和c一样，//单行注释。/ 多行注释 /

js变量

//1，变量必须字母开头
//2，也可以使用$和_开头，不过不推荐
//3，大小写敏感

//变量声明使用var，没有赋值的变量默认是undefined，
var name；
//也可以直接赋值
var name = 'zzh'；
//也可以一条语句多个变量
var a,b,c=1;
//它不必像c一样声明变量类型，它会根据负值自行判断
//全局变量--函数外声明的变量
//局部变量--函数内使用var声明的变量

基本数据类型，你可以使用var 变量名 = new+数据类型的形式进行变量声明

<!-- 基本数据类型
			数字 number
			字符串 string
			布尔值 boolean
			特殊：null ， undefined
			复合数据类型 object
			数组 array 本质就是对象-->

字符串

/*
				字符串
				var str = new String('123');
				new 可以省略
				var str = '123'; 常用
				
				length属性，返回字符个数
				charAt(索引值)方法，索引字符  ==  str[索引值]
				
				注：字符串一旦被创建就无法改变,如需修改，就重新创建
				字符串拼接  '字符串1'+'字符串2'
				
				charCodeAt(下标)方法 返回指定位置的字符的 ascall码值
				fromCharCode(数字)方法 返回ascall码对应字符
				
				str1.concat(str2) 字符串拼接
				
				
				字符串查找
					indexOf(子串，开始查找位置)  返回第一次位置 or 0
					lastindexOf() 返回最后一次位置 or 0
					search(子串/正则)
					replace(子串/正则,替换值)
					subString(start,end)字符串提取
					split(分隔符，新数组长度)
					toLowerCase()
					toUpperCase()
			*/

简单条件语句和简单函数，判断闰年，和大多数语言一样return返回值并退出函数
它有和c一样的switch语句

<script type="text/javascript">
		var a = Number(prompt("输入年份："));
		function leapyear(year) {
			if(year % 400 == 0 || year % 100 != 0 && year %4 == 0){
				return true;
			}
			return false;
		}
		window.alert(leapyear(a));
</script>

数组和简单for循环
他有和c一样的do while语句

<script type="text/javascript">
			//用 new 运算符创时数组
			var arr = new Array(1,2,3,4,5);
			//数组长度为10的数组
			var arr1 = new Array(10);
			//省略new运算符创建数组
			var arr2 = Array(1,2,3,4,5,6);
			//常量创建数组
			var arr3 = [1,2,3];
			// <!-- //数组可以索引 -->
			document.write('索引：'+arr[4]+'<br/>');
			// <!-- //数组的属性 -->
			console.log('数组长度：'+arr.length);
			
			//数组的遍历
			var arr4 = [];
			for(var i = 0;i<=10;i++){
				arr4[i] = i*i;
			}
			console.log(arr4);
			for(var i in arr4){
				document.write(arr4[i]+',');
			}
			//随机数 Math.random(),随机0~1的任意数
</script>

二维数组及其遍历

<script type="text/javascript">
			// 5*5的二维数组,输出左下角
			/*
				1 ,2 ,3 ,4 ,5
				6 ,7 ,8 ,9 ,10
				11,12,13,14,15
				16,17,18,19,20
				21,22,23,24,25
			*/
		   var arr = [[],[],[],[],[]];
			for(var i = 0;i<5;i++){
				for(var j = 1; j<6;j++){
					arr[i].push(j+i*5);
				}
			}
			
			var k = 0;
			for(var i = 0;i<5;i++){
				for(var j in arr[i]){
					if(k++>i){
						break;
					}
					document.write(arr[i][j]+','); 
				}
				k = 0;
				document.write('<br />');
			}
			
</script>

break退出上层循环，continue直接进行下一次循环
数组排序和循环嵌套

<script type="text/javascript">
			/*
			系统排序
			reverse()方法  逆向排序
			sort()方法 升序排序 默认是字符串比较而非数字大小比较
			
			冒泡排序
			
			选择排序
			*/
			
			//冒泡
			//升序冒泡
			var arr = [12,4,77,90,56,43,19,8];
			var c = 0;
			function mp(arr){
				for(var i = 0;i<arr.length-1;i++){
					for(var j = 0;j<arr.length-i-1;j++){
						if(arr[j]>arr[j+1]){
							c = arr[j];
							arr[j] = arr[j+1];
							arr[j+1] = c;
						}
					}
				}
				return arr;
			}
			console.log(mp(arr));
			
			//选择排序
			function choice(arr){
				for(var i = 0;i<arr.length-1;i++){
					for(var j = i+1;j<=arr.length-1;j++){
						if(arr[i]>arr[j]){
							c = arr[i];
							arr[i] = arr[j];
							arr[j] = c;
						}
					}
				}
				return arr;
			}			
			console.log(choice([23,44,65,4,70,9,17,39]))
			document.write(arr)
</script>

数组操作和基本数据结构实现–栈和队列

<script type="text/javascript">
			/*栈:同一个口进,同一个口出.
				先进后出
				
				push方法，参数为在数组末尾添加的元素，元素个数任意
				该方法的返回值是，添加完元素后数组的长度
				
				pop方法移除数组末尾的最后一个元素
				该方法的返回值是，取出的元素
			*/
		   
		   /*
			 队列
			 从一头进另一头出，先进先出。
			 
			 进：push
			 
			 出：shift方法
				无参数
			  从数组头部取下一个元素，
			 该方法的返回值是，取出的元素。
			 
			 unshift方法
				参数任意
				从数组头部插入元素
				该方法的返回值是，插入元素后数组的长度
			*/
			
			/*
			
			
			数组的其他方法
			数组1.concat(数组2)方法，
				将两个数组合并为新数组，原数组不会改变
				返回新数组
			
			slice(start,end)方法
				左闭右开
				数组的切片，获得数组指定区域的内容，
				原数组不改变，并且返回新数组
			
			splice
				改变原数组
				删除，插入，替换
				参数1：开始下标
				参数2：截取的长度
				参数3：在开始位置插入的元素，个数任意
			
			
			join('拼接符')方法
				使用拼接符号将数组的元素拼接为字符串
				
			*/
			
</script>

构造函数

<script type="text/javascript">
			//构造函数,函数名首字母最好大写,区别于普通函数
			//不就是类嘛
			function Star(name,age){
				this.name = name;
				this.age = age;
				this.go = function(){
					return "let us go!!";
				};
			};
			//new一个对象
			var a = new Star("zzh",20);
			console.log(typeof a);
			console.log(typeof Star);
			console.log("name:"+a.name+"\nage:"+a.age+"\n"+a.go());
			//对象遍历
			//只获得键
			for(var i in a){
				console.log(i);
			}
			//获得值
			for(var i in a){
				console.log(a[i]);
			}
			
</script>

事件驱动函数
常见事件列表

事件	描述
onchange	htnl元素改变
onclick	用户点击事件
onmouseover	移动鼠标
onmouseout	移开鼠标
onkeydown	按下键盘
onload	页面加载完成

<script type="text/javascript">
			window.onload = function(){
				
				var obtn = document.getElementById('btn');
				var otxt = document.getElementById('txt');
				obtn.onclick = function(){
					otxt.value = '';
				}
			}
			
			
</script>

简单递归调用

<script type="text/javascript">
			
			function digui(n){
				if(n == 1){
					return 1;
				}
				return digui(n-1) + n;
			}
			alert(digui(100));
</script>

错误和抛出

<script type="text/javascript">
			try{
				var a = prompt("输入:");
				if(a=="zzh"){
					throw "输出错误！"
				}
				if(a=="123"){
					throw "未知错误！！"
				}
			}
			catch{
				console.log("hello");
				throw "hahaha!"
			}
</script>

严格模式

<script type="text/javascript">
			/* 
					ECMA 标准 ECMAjavascript
					
					ECMA5
					ECMA6
					声明:'use strict'
					
					在严格模式下，数组可以使用indexOf()方法
					forEach(function(item,index,array){
						
					})方法  遍历数组
					arr.forEach(alert)
					map(function(item,index,array){
						return item+2;
					})映射方法
					reduce(function(pre,next,index,array){
						
					})归并方法
					filter(function(item,index,array){
						return item>92;
					})过滤方法
			*/
</script>

js运算

关系运算符-- !,!, >,<,>=,<=,,=.主要区别和===

<script type="text/javascript">
			var x = 3;
			//==相当于隐式转换两者类型并判断,只有值判断相等
			console.log(x=='3');
			//===精准判断,值和类型都相同
			console.log(x==='3',x===3);
			console.log(null == undefined);
			console.log("" == 0);
			//null == undefined
			//NaN与任何内容不相同,NaN != NaN
			//"" == 0 == false
			console.log(isNaN(Number("10a")));//判断是否为非数字
</script>

算数运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取模
++	自增
–	自减

赋值运算符

运算符	例子
=	x=y
+=	x+=y
-=	x-=y
/=	x/=y
%=	x%=y

无论整形或者浮点都是Number类型，数字+字符串=字符串
强制类型转换

		<script type="text/javascript">
			//该方法不会影响到原来的变量，它会将转换的结果返回
			//注意：null和undefined两个值没有toString()方法
			var a=123;
			console.log(a.toString()); 
			//调用String()函数，并将转换的数据作为参数传给函数
			//使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined就不调用toString()，
			//它会将null直接转换为“null”
              var  a=123;
             console.log(a=String(a));
			 
			//使用Number()函数
//如果是纯数字的字符串，则直接转换为数字，如果字符串中有非数字的内容，则转换为NaN,
//如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
              var  a="123";
              a=Number(a);
              console.log(typeof(a)); 
			  //parseInt() parseFloat() 专门用来对付字符串
			//如果对非string使用parseInt()或parseFloat()它会先将其转换为string，然后再操作
			var  a = "123px";
			a=parseInt(a);
			console.log(typeof(a));  
			console.log(a);        
			var b=true;
			b=parseInt(b);
			console.log(typeof(b));
			console.log(b); 
			//除了0、NaN、空串、null、undefined其余都是true。对象也会转换为true
			var a= 123;
			a=Boolean(a);
			console.log(typeof a); 
			console.log(a);
		</script>

位运算

<script type="text/javascript">
			// 位非运算,加一取反
			var a = 11;
			console.log(~a);
			//位与运算,一与一为一,其他为0
			var a = 5;
			var b = 6;
			console.log(a&b);
			//位或运算,有一为一
			var a = 7;
			var b = 22;
			console.log(a|b);
			//异或运算,相同为0,不同为1
			//可以用作密码加密
			a = 87655653;
			b = 212312334;
			var c = a^b;
			console.log(c,c^b);
			//左右移位,最小右移为0
			var n = 10;
			console.log(8<<2);
			console.log(8>>2);
			console.log(1<<n);//计算2的n次幂,快速
</script>

js动画基础

小方块移动，点击它就暂停。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#div0{
					position: absolute;
					left: 0;
					width:100px;
					height:100px;
					background:red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var div0 = document.getElementById("div0");
				div0.addEventListener("click",click)
				setInterval(hello,10);
				var left = 0;
				var bool = true;
				var add = 2;
				function click(e){
					bool=!bool;
				}
				function hello(){
					if (!bool){
						return 1;
					}
					left+=add;
					div0.style.left = left+"px";
					console.log(parseInt(div0.style.left),typeof parseInt(div0.style.left));
					if(parseInt(div0.style.left) >=600 || parseInt(div0.style.left) <=0){
						add=-add;
					}
				}
			};
		</script>
	</head>
	<body>
		<div id="div0"></div>
	</body>
</html>

js贪吃蛇小游戏,wsad–上下左右

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>snake</title>
	</head>
	<body style="text-align: center;margin: 200px;background-color: aliceblue;">
		<canvas id="cnv" width="400px" height="400px" style="background-color: antiquewhite;"></canvas>
		<script type="text/javascript">
			//变量声明
			var box = document.getElementById("cnv").getContext("2d");
			var snake;
			var direction;
			var n;
			var food;
			
			//绘制地图
			function draw(point,color){
				box.fillStyle = color;
				box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
			}
			(function(){ready();}());
			function ready(){
				for(var i=0;i<400;i++){
					draw(i,"#313131");
				}
				snake=[66,65,64];
				direction=1;
				food=344;
				draw(food,"yellow");
				draw(66,"#00b7ee");
				draw(65,"#00b7ee");
				draw(64,"#00b7ee");
			}
			//核心算法
			function run(){
				document.getElementById("butn").setAttribute("disabled",true);
				snake.unshift(n=snake[0]+direction);
				if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||(direction==1&&n%20==0)){
					ready();
					document.getElementById("butn").removeAttribute("disabled");
					return alert("game over");
				}
				draw(n,"#00b7ee");
				if(n==food){
					while(snake.indexOf(food=~~(Math.random()*400))>0);
					draw(food,"yellow");
				}
				else{
					draw(snake.pop(),"#313131");
				}
				
				setTimeout(arguments.callee,200);
			}
			//键盘事件
			document.onkeydown=function(e){
				if (direction==1||direction==-1){
					if(e.keyCode==38||e.keyCode==87){
						direction=-20;
					}
						
					if(e.keyCode==40||e.keyCode==83){
						direction=20;
					}
				}
				if(direction==20||direction==-20){
					if(e.keyCode==39||e.keyCode==68){
						direction=1;
					}
					if(e.keyCode==37||e.keyCode==65){
						direction=-1;
					}
				}
			}
		</script>
		<div>
			<button id="butn" type="button" onclick="run()">开始游戏</button>
		</div>
	</body>
</html>

转载：https://blog.csdn.net/weixin_44072077/article/details/102471028