JavaScipt學習（一）

寫給你聽發表於2020-11-14
Java

有關連結：

demo例項，js自定義按鍵，實現GIF動圖的移動：https://blog.csdn.net/weixin_45216092/article/details/102576681；
.NET 5.0 正式版釋出了：https://blog.csdn.net/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>

此程式碼新增了容器牆壁（黑框）與移動邏輯，未加入圖片碰撞邊界邏輯

相關文章