那麼，在面對這樣的問題時，任何自尊心的極客都會做什麼？當然，他們寫了一個2D，側滾動平台遊戲！
在這個兩部分的系列中，您將學習足夠的HTML，CSS和JavaScript，使您能夠構建自己的JavaScript平台遊戲。我在示例中使用了原型JavaScript庫，僅僅是因為這是我所知道的 - 其他許多可用的JavaScript庫很可能具有等效的功能。
>在獲得有趣的東西之前，我們需要瀏覽一些高級JavaScript技術，這將使我們能夠欺騙您的瀏覽器，以為它是一個8位遊戲機。
鑰匙要點
>讓我們看一些構建新類的JS代碼，然後創建一個新對象：
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);實例化對象的新版本並將其稱為walk函數，則我們的koopa對象現在將位於坐標點（20，30）。以這種方式聲明類有點麻煩 - 我們必須創建一個類，然後更新原型。值得慶幸的是，原型（庫）已將其封裝到一個名為Class.Create的方便函數中。以上代碼變為以下內容：
與類繼承一起工作var WalkingSprite = Class.create({ <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
initialize: function(element, x, y) { <br>
this.element = element; <br>
this.x = x; <br>
this.y = y; <br>
}, <br>
<br>
walk: function(steps) { <br>
this.x += steps; <br>
} <br>
}); <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);不幸的是，JavaScript本身不支持繼承。那麼，為什麼我浪費了最後一段告訴您的呢？好吧，有了一些騙局，我們可以模仿JavaScript中的類繼承。 因為JavaScript中的所有內容（包括我們類中的功能）都是變量，因此我們可以將它們的值分配給其他變量。因此，如果我們考慮一秒鐘的繼承是什麼，那麼我們要做的就是模仿它，就是將屬性和功能從父類複製為子類。如果我們想從上面創建的班級繼承，我們可以做到這一點：>
>運行代碼，您將擁有一個新類，該類具有兩個屬性和一個函數的父，以及一個新功能：跳躍。唯一的事情是，這樣的編碼並不能真正擴展； 如果您在父級中添加鴨子功能怎麼辦？您將不得不參加每個孩子課程並添加功能簽名。再次，救援原型！我們以前了解到的班級創建函數可以將另一個類作為其第一個參數。該提供的類將成為父母，它將動態地找到我們所有的屬性和功能，並自動將其註入子類。因此以上將變為：
>正如預期的那樣，新類具有父類的所有相同屬性！那麼，添加和覆蓋屬性和功能呢？我們在上面說明瞭如何手動執行此操作，但是原型允許我們使用類定義新功能。
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);>在這裡，我們已經覆蓋了步行功能並添加了跳躍功能。等等 - 將卡車向上返回 - $超級可變從哪裡彈出？好問題！使用繼承時，運行父類的函數版本有時很有用。在這種情況下，我們通過將輸入變量加倍並將此新值傳遞給父類，使角色步行最初的要求是最初要求的兩倍。如果您將$ super聲明為函數簽名的第一個參數，則原型將在$ super變量中提供父類版本。這使您可以輕鬆地從覆蓋版本中調用函數的父版本。您會注意到新的跳躍功能沒有$ SUPER變量；我們不使用它，因此我們不需要提供它。如果我們確實需要它，我們可以將其添加為功能簽名的第一個參數。
>現在，我們已經寫了JavaScript類，如果我們可以通過給出特定的類名稱來告訴HTML元素成為Walkingsprite對象，那不是很酷嗎？在JavaScript 1.6中，您可以使用document.getElementByClassName函數輕鬆地找到所有具有特定類名稱的DOM元素。但是，大多數瀏覽器尚不支持1.6版。幸運的是，原型為我們提供了$$函數 - 將其傳遞給CSS選擇器，它將返回所有匹配元素的數組。
查看以下代碼：
>var WalkingSprite = Class.create({ <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
initialize: function(element, x, y) { <br>
this.element = element; <br>
this.x = x; <br>
this.y = y; <br>
}, <br>
<br>
walk: function(steps) { <br>
this.x += steps; <br>
} <br>
}); <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);首先，我們創建Walkingsprite類，然後創建使用Walkingsprite類作為父母的Koopasprite類。接下來，我們通過選擇具有類名稱為“ koopa”的文檔中的所有元素來創建一個koopasprite對象。
>>現在，我們有了一系列的koopasprite對象，並引用了相應的dom元素（稍後會很重要）。我們在這裡所做的是的基礎JavaScript
。現在，我們已經動態地找到了我們感興趣的HTML元素，我們可以綁定事件（例如OnClick和Onfocus），將它們重新列為或使它們消失！>由於我們沒有編寫文本驅動的冒險遊戲，因此我們將需要一種使角色動畫的方法。這超出了它們在屏幕上移動，稍後將覆蓋。如果我們能使角色看起來像是走路，跳躍或躲避，那也將是一件好事。為此，我們將調用一個舊的CSS技巧：背景位置黑客。
這個想法很簡單：我們構建了構成動畫框架的圖像的色帶，然後通過將它們左右移動來循環它們，然後將它們左右移動。這是一個示例背景圖像：
如您所見，我們在一個圖像中有12幀，每個圖像相距48個像素。如果我們有一個馬里奧級別的div，則某些不同框架的CSS可能看起來像：
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);>您可能在創建無閃爍的翻車之前就已經看到了這種技術。回到過去，您將使用一小部分JavaScript創建圖像翻轉效果，該javaScript在發射時更改圖像標籤的SRC值。然而，您第一次這樣做時，瀏覽器仍然需要從服務器下載圖像，這通常會引起閃爍。可以預緊圖像，但這一切都有些笨拙。上級CSS技術使設計人員可以將所有翻轉狀態加載到一個圖像中，並使用：懸停偽級創建單獨的CSS規則以移動背景，從而在沒有JavaScript的情況下進行平滑的過渡。
不過，在我們的遊戲引擎中，我們將使用JavaScript更改背景圖像的位置。要在JS中設置背景位置，您可以操縱元素的樣式。 backgroundPosition屬性。以下代碼創建了一個名為Mariosprite的新類，該類別為Parent Walkingsprite類添加了渲染函數。此新功能隨著時間延遲而反複調用，並將使用兩個幀進行動畫行走：
var WalkingSprite = Class.create({ <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
initialize: function(element, x, y) { <br>
this.element = element; <br>
this.x = x; <br>
this.y = y; <br>
}, <br>
<br>
walk: function(steps) { <br>
this.x += steps; <br>
} <br>
}); <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);使用計時器
毫秒。我們將使用setInterval函數來實現後者：
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
// Create the child class <br>
JumpingAndWalkingSprite = WalkingSprite; <br>
JumpingAndWalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
walk: WalkingSprite.prototype.walk <br>
jump: function() { <br>
y += 20; <br>
} <br>
}>事件偵聽。
有兩種不同的事件模型，具體取決於您擁有的瀏覽器的風味（驚喜，驚喜），儘管原型在封裝了兩者的細微差別方面也做得非常出色，但值得知道知道引擎蓋下發生了什麼。
如果您已經使用網絡玩了一段時間，則可能會使用諸如OnMouseover或OnClick之類的屬性熟悉內聯事件處理。該技術等同於在CSS中使用樣式屬性 - 這是邪惡的，不要做。值得慶幸的是，有幾種方法可以將事件動態綁定到JavaScript中的元素。考慮以下代碼：
>
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);> MouseOver和Mouseout之類的事件非常簡單，但是鍵盤事件更為複雜，因為我們需要知道按下哪個鍵。在這種情況下，我們必須從JavaScript事件對象獲取信息；事件對像要麼傳遞到回調函數中，要么如果您在IE Land中，則在窗口對像中創建一個全局事件對象：window.event，它具有我們需要的信息。
這是一個示例：
var WalkingSprite = Class.create({ <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
initialize: function(element, x, y) { <br>
this.element = element; <br>
this.x = x; <br>
this.y = y; <br>
}, <br>
<br>
walk: function(steps) { <br>
this.x += steps; <br>
} <br>
}); <br>
<br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
this.x = x; <br>
this.y = y; <br>
this.element = element; <br>
} <br>
<br>
WalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
element: null, <br>
<br>
walk: function(direction) { <br>
this.x += direction; <br>
} <br>
} <br>
<br>
// Create the child class <br>
JumpingAndWalkingSprite = WalkingSprite; <br>
JumpingAndWalkingSprite.prototype = { <br>
x: 0, <br>
y: 0, <br>
walk: WalkingSprite.prototype.walk <br>
jump: function() { <br>
y += 20; <br>
} <br>
}var JumpingAndWalkingSprite = Class.create(WalkingSprite); <br> <br> mario = new JumpingAndWalkingSprite(null, 10, 10); <br> mario.walk(10): <br> alert(mario.x + "," + mario.y); <br> mario.jump(); <br> alert(mario.x + "," + mario.y); <br>
同時，請查看將上述理論付諸實踐的演示（提示：按箭頭鍵，看看會發生什麼）。您可以下載本文的代碼存檔 - 查看是否可以自己擴展，因為您需要了解本系列第二篇文章的情況。直到下一次……
>關於JavaScript的娛樂和利潤
的經常詢問問題網站與JavaScript進行刮擦涉及使用Node.js和諸如PuppeTeer和Cheerio之類的工具。這些工具使您可以自動訪問網頁，與其元素進行交互並提取所需數據的過程。這對於從不提供API或自動化重複任務的網站收集信息可能很有用。
>>有幾種保護您的網站免受基於JavaScript的攻擊的方法。最有效的方法之一是輸入驗證，您可以在其中檢查和對網站的所有用戶輸入進行消毒。另一種方法是輸出編碼，您可以在網站上牢固地顯示任何用戶提供的數據。您還可以使用僅HTTP的cookie來防止跨站點腳本（XSS）攻擊。
What is penetration testing and how can JavaScript assist in it?
>我如何學習道德黑客的JavaScript？
JavaScript是唯一用於倫理hacking的語言嗎？
不，javascript，javaScript不是唯一在倫理hackakic中使用的語言。 python，Ruby和PHP等其他語言也常用。 However, JavaScript is particularly useful for web-based attacks due to its ubiquity on the web.What are some common JavaScript libraries used in ethical hacking?
>
我可以使用JavaScript使用JavaScript無需任何事先編程經驗嗎？>>
>> ，儘管可能會學習JavaScript並將其用於無需任何事先的編程經驗，而沒有任何事先的編程經驗，它可以進行任何概念，因此可以概念地理解。這將使您更容易理解不同的攻擊如何工作以及如何有效使用JavaScript。以上是黑客javascript以獲取樂趣和利潤：第一部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
