JavaScript学习（一）

最新推荐文章于 2022-10-16 16:09:37 发布

写给你听

最新推荐文章于 2022-10-16 16:09:37 发布

阅读量309

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/wire133/article/details/109694489

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了JavaScript学习的目标，通过推箱子游戏来熟悉语言逻辑和关键词。重点讨论了var和let的区别，强调了let的块级作用域和防止变量提升的优点。此外，还讲解了键盘事件绑定，特别是如何处理不同浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有关链接：

demo实例，js自定义按键，实现GIF动图的移动：https://blog.youkuaiyun.com/weixin_45216092/article/details/102576681；
.NET 5.0 正式版发布了：https://blog.youkuaiyun.com/kebi007/article/details/109616747；

JavaScipt推箱子游戏：https://www.cnblogs.com/vivenZ/p/6818785.html；

12分钟学会JavaScript：https://www.bilibili.com/video/BV1PE411E7v7；

keycode展示大全：https://www.cnblogs.com/daysme/p/6272570.html；

目标：以推箱子游戏为范例进行学习，认识JS相关关键词和运算符号，实操基础上熟悉语言逻辑

JavaScript关键词var（variable变量）百度诠释：

var a=10; //正确

a=10; //正确

在javascript中，以上两种方法都是定义变量的正确方法。

对待这两种定义方法要区分以下两种情况：

⒈在一个过程级中（即位于function的定义范围内，无论是函数，还是类）的任何地方，包括在一个区块里（for,while,if……），定义变量时，使用var定义，则此变量只在这个过程级内起作用，反之为全局变量。

⒉在过程级外定义变量时，无论是否忽略var，都将定义一个全局变量。

从这点看来，JS和其他语言有不一样的地方，变量的范围不以“{}”作为边界，而是以"function(){}"为边界，而且在过程内可以很轻松的定义全局变量。如果不注意这个问题的话，是很容易产生不可预知的错误的。

对于使用var，我的建议是要养成好的使用习惯：

⒈在程序的开头，统一定义全局变量；

⒉所有的变量在定义时都要加上var；

⒊尽量不要在不同的过程中使用相同的变量名。

var和let区别：

1：作用域不一样，var是函数作用域，而let是块作用域，也就是说，在函数内声明了var，整个函7a64e59b9ee7ad9431333431346462数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，在其外面是不可被访问的，所以let用在for (let i; i < n; i++)是一种很推荐的写法

2. let不能在定义之前访问该变量，但是var是可以得。也就是说，let必须是先定义，再使用，而var先使用后声明也行，只不过直接使用但是没有却没有定义的时候，其值为undefined，这块要注意，这一块很容易出问题，这也是个人认为的let比var更好的地方，至于为啥会有这种区别呢，实际上var有一个变量提升的过程。也就是说，当这个函数的作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认会初始化一个undefined。

3. let不能被重新定义，但是var是可以的。这个呢，我个人认为，从规范化的角度来说，是更推荐的，比如说，你在前面声明了一个变量，后来写代码，因为忘了之前的代码逻辑，又声明了一个同名的变量，如果这俩变量逻辑不一样，并且后面都要用的话，很容易出问题，且不容易维护。

总之呢，let从规范化的角度来说，要比var要进步了很大一步。所以一般情况下的话，推荐用let，const。

（不管你写的var、let，最终都会被解释器翻译为int或string或char或float或double类型，js中，强行你必须使用不定义的变量）

参考：https://zhidao.baidu.com/question/329685205173520085.html

学习进程

（一）keyboard event（键盘绑定事件）

对应keycode（键盘码）：

代码学习案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>KeyBoardEvent Demo</title>
</head>

<body>
<div id="div2"> <img id="img1" src="QQ图片20201102074416.jpg"/> </div>
<script type="text/javascript">
document.onkeydown=function(e){
	var keyNum=window.event ? e.keyCode :e.which;	
	if(keyNum==13)
    console.log('您按下了回车');
    if(keyNum==32)
    console.log('您按下了空格');
	}
</script>
</body>
</html>

记事本输入代码，保存为.html后缀文件，以Chrome为浏览器，F12快捷键打开Chrome的Console，鼠标放在html网页本体上，按下回车和回车，检查代码正确性。

三元运算符认识：

以var keyNum=window.event ? e.keyCode :e.which;

//Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替
//IE用event.keCode方法获取当前被按下的键盘按键值，
//而NetScape/FireFox/Opera用的则是event.which

替换成if else语句：

注意这里是判定window.event是否存在，存在的话，那就取得e.keyCode的value，不存在的话，则去取得e.which的value，它们取得的keyNum是一个int型变量，这么做的原因是为了适应浏览器的兼容。往上document.οnkeydοwn=function(e)，这个方法是从document.onkeydown开始的，等于号之后的内容是规定发生document.onkeydown事件后进行的动作document.onkeydown,翻译一下就是：当你的焦点在HTML整个DOC上的时候，如果发生了onkeydown事件，就是你按了一个键，则会触发你大括号里面的内容，而第一个判定逻辑是对传入的参数e进行判断，传入的e因为可能不同浏览器，所以写了个小逻辑为了正确的获取你按下的keycode，获得之后存储在你预先定义的keyNum里面，然后再开始对keyNum进行判断，当你按下W的时候，也就是keyNum=87的时候，会执行这个if语句为true的逻辑，这里你写了内容，那就是console（‘您按下了W‘）。上下左右绑定成WSAD以后，对代码进行完善：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>KeyBoardEvent Demo</title>
<style>
#You {
	width: 100px;
	height: 100px;
	position: absolute;
}
#container {
	width: 1520px;
	height: 500px;
	border: 2px solid black;
}
</style>
</head>

<body>
<div id="container"> <img id="You" src="jian ao.jpg"/> </div>

<script type="text/javascript">
document.onkeydown=function(e){
	var keyNum=window.event? e.keyCode :e.which;	
	if(keyNum==87){
    console.log('您按下了W');
	var character=document.getElementById("You");
	character.style.top=character.offsetTop-100+"px";
	}
    if(keyNum==83){
    console.log('您按下了S');
	var character=document.getElementById("You");
	character.style.top=character.offsetTop+100+"px";	
	}
	if(keyNum==65){
    console.log('您按下了A');
	var character=document.getElementById("You");
	character.style.left=character.offsetLeft-100+"px";
	
	}
	if(keyNum==68){
    console.log('您按下了D');
	var character=document.getElementById("You");
	character.style.left=character.offsetLeft+100+"px";
	
	}
}
</script>
</body>
</html>

此代码添加了容器墙壁（黑框）与移动逻辑，未加入图片碰撞边界逻辑