使用JavaScript和{X} - sitePoint控製網頁

鑰匙要點

• 作者使用遠程控制HTML演示文稿的示例演示瞭如何使用Android設備將遠程說明發送到實時網頁。 >
使用的技術堆棧包括{x} app，node.js，express，socket.io，deck.js和heroku。 JavaScript庫
• > socket.io，啟用服務器和客戶端之間的實時通信，這對於對來自Android設備的信號的實時響應至關重要。 具有JavaScript API的On {X}應用程序允許控制Android設備，並響應諸如傳入的文本消息，GPS位置，電池壽命等事件。這是在發掘時用於發送服務器請求的。
>
• 作者警告說，該方法不安全，並建議為任何通用的任何東西添加一層安全性。
>
>我丟了手機。我把它留在購物中心的沙發上，然後回來發現它消失了。有人通過可怕的偷竊藝術被送給了新手機。我通過網絡將JavaScript代碼遠程發送到我的手機，該網絡每當我發短信時都會向我發送設備的坐標。我將其跟踪到一家Sizzler餐廳，直到他們關閉電話，然後它永遠消失了。我給自己買了一部新手機，但在一個功能強大的應用程序中看到了新的潛力，直到那時{x}}。 與我丟失的手機的恐怖故事相比，在本文中，我將分享該應用程序的不同用途。我想向您展示如何使用Android設備將遠程說明發送到實時網頁。我將使用遙控器控制HTML演示文稿的示例，但是可以擴展這些概念以執行許多有趣的事情。
• 我們將使用以下技術：

一個Android設備

> on {x}

express

• > socket.io
• deck.js
• > Heroku
如果您沒有Android手機，請不用擔心！從理論上講，您可以使用任何其他設備可以使HTTP調用以相同的節點/socket.io sorcery的工作方式使用。本文假設讀者對node.js和javascript有一些了解，但是提供了源代碼供您參考。
• 什麼是socket.io？
• >在我們走得太遠之前，我將解釋socket.io的作用，因為它將顯示在接下來的幾個代碼片段中。 socket.io是一個JavaScript庫，可在服務器和客戶端之間實時通信。它允許您在服務器和客戶端上定義事件。例如，io.sockets.emit（'eventThathathappened'）創建了一個新事件，應用程序可以對此做出反應。為了對事件做出反應，只需設置這樣的事件處理程序 - socket.on（'eventThathApped'，function（）{}）。

>聊天程序是一個常見的示例socket.io應用程序。該服務器聽取來自任何客戶端的傳入消息，並在運行聊天應用程序的所有客戶端上立即顯示它們。我們將使用它在頁面啟動時立即從Android設備中響應信號。

設置服務器
>該演示的目錄結構如下圖所示。所有服務器端代碼都存儲在主JavaScript文件index.js中。前端HTML，CSS和JS存儲在公共文件夾中。

>

package.json文件定義了有關節點應用程序的依賴項和其他元信息。該文件的內容如下所示。請注意，依賴項中需要Express和socket.io模塊。

>

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

由於此演示旨在託管在Heroku上，因此我們需要一個procfile，其內容如下所示（非常簡單！）。

> 網絡：節點索引

節點服務器

in index.js的以下行用於導入socket.io並設置服務器的端口。

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

為了使socket.io在Heroku上工作，我發現我必須添加這些額外的行來配置Xhr-Polling而不是依靠Websocket（您可能不需要這些對於環境）。這些行告訴服務器等待10秒鐘，然後再回答空的響應，如果它對GET或POST請求沒有特定響應。

>

io <span>= require("socket.io").listen(server),
</span>port <span>= process.env.PORT || 5000;</span>

控制演示幻燈片

此演示使用Deck.js，但只要它具有JS調用以在幻燈片之間移動，就可以隨意替換任何其他HTML演示模板。對於deck.js，只需下載並將其解壓縮到公共文件夾。

io<span>.configure(function () {
</span>  io<span>.set("transports", ["xhr-polling"]);
</span>  io<span>.set("polling duration", 10);
</span><span>});</span>

>

>節點服務器中最重要的路由是郵政請求，它允許我們與演示幻燈片進行交互。該路線如下所示。

>

>先前的代碼調用io.sockets.emit（'nudgeleft'）或io.sockets.emit（'nudgeright'），具體取決於隨請求發送的JSON數據。這裡要提出的關鍵點是路線對JSON做出響應。如果您不這樣做，您的請求將超時，因為它們將坐著，等待服務器的響應。此時，您可以在本地運行服務器，或將其推到Heroku進行部署。

>配置socket.io

app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});</span>

>其他JavaScript已添加到public/js/magic.js中的演示文稿中，如下所示：

第一行連接到我們的socket.io服務器window.location.hostname。出於此演示的目的，我們將保持簡單，並將所有內容都放在一個域上。兩個事件處理人員會收聽任何要求向左或向右推動幻燈片的請求。如果注意到這些，我們會運行Deck.js的前期或下一個功能以移動幻燈片。

on {x}秘密醬

> on {x}是一個Android應用程序，它允許您通過JavaScript API來控制Android設備，並響應傳入的文本消息，GPS位置，電池壽命等事件。在此演示中，我們將使用它在發行時發送這些服務器請求。

開始{x}

>

>將應用程序下載到您的設備：https：//www.onx.ms/#！ downloadapppage。
>在下載時，請訪問桌面瀏覽器上的https://www.onx.ms，然後使用您的Facebook帳戶登錄{x}（不用擔心，這只是用於在設備和設備之間同步代碼在{x}）上。
>您將被帶到{x}的儀表板。您可以轉到食譜以探索已經有興趣的令人興奮的代碼段，但是我們將直接研究本教程的自定義代碼。
3. 單擊頁面左上角的寫代碼鏈接以提出代碼編輯器。
讓該窗口打開，我們將在其中添加一些代碼。 >
>在{x}
5. 上進行編碼
>如上所述，{x}具有JavaScript API，可讓您在Android設備上調用並檢測許多事件。對於此演示，我們主要關注device.gestures.on方法。

>要做的第一件事是在{x}上打開代碼編輯器返回該窗口，您會看到“規則名稱：”，將其重命名為更友好的東西，例如“ Nudge演示控制”。我的ON {X}代碼如下所示。請注意，您將需要用自己的服務器替換http://androidremotecontrol.herokuapp.com。

device.gestures.on組件用於設置事件處理程序。任何時候{x}檢測剩下的輕推，調用了裸體處理程序。我們有一系列代碼，基本上在手機上顯示了手機的通知。您不需要這個，但我使用它進行測試以確保檢測到輕推。該行的代碼如下所示。

接下來，我們在{x}的device.ajax方法上使用將JSON數據發送到服務器。請注意，數據類型被明確定義為JSON。沒有這個數據，數據無法正確發送。

>

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

>當前，Onsuccess回調函數僅用於記錄HTTP響應成功。這將映射到響應。如果您覺得如此傾向，則可以在此成功呼叫中添加更多信息，以在{x}上提供更多數據。同樣，OnError回調用於記錄發生的任何錯誤。

>

接下來，我們以900,000毫秒的方式打開對這些手勢的檢測。當您首先啟用設備上的代碼時，這將運行。您可能希望此代碼運行超過900,000毫秒。我當前親自設置的方式是，每次設備的屏幕啟動時都會對其進行打開。因此，如果您想控制幻燈片，只需打開屏幕，您就有900秒的時間要瘋狂。根據我在開發過程中發現的內容，您必須為此功能提供時間限制。如果您找到另一種方法，請在評論中告訴我。我很想更新它。

>更新代碼以匹配您的服務器地址，並且已經準備就緒，請單擊“保存並發送到電話”以通過網絡將其發送到手機。從那裡開始，通過演示文稿打開您的URL，打開Android設備的屏幕，然後嘗試左右輕拍。如果一切順利，您會看到幻燈片來回切換！

>在{x} logs

上查看

>如果您想在{x}上查看日誌文件，則可以在Android手機上打開應用程序，選擇添加的規則，然後選擇“查看日誌”。另外，當您登錄您的規則頁面，選擇規則並單擊“日誌”選項卡時，您可以在{x}網站上的網站上看到它們。

。

安全性呢？

此方法在任何方面都不安全。如果其他任何人都算出您的演示文稿地址以及您要發送的帖子請求，他們可以輕鬆地將幻燈片從世界各地的任何地方切換。為此，您想到了與socket.io和{x}有關的任何其他想法，請記住，您需要在某個地方添加一層安全性，以使其在某個地方過於通用。

>

結論

這個演示背後的想法是表明，使用JavaScript，socket.io和一個漂亮的Android應用程序，您可以使用手機以多種方式來影響網頁。閃爍的演示幻燈片左右只是開始。您可以根據位置，是否正在運行應用程序，電池用完了，可以更改網頁顯示的內容。 D很高興聽到它。出去並編碼一些內容！

代碼

>該演示的所有代碼都已啟動，並在GitHub上可用。我的跑步版本也可以在Heroku上找到。

>

經常詢問有關使用JavaScript控製網頁的問題（常見問題解答）

> JavaScript在控製網頁中的作用是什麼？這是一種編程語言，可讓您在網頁上實現複雜的功能。當網頁是靜態的，即顯示靜態信息時，可以使用JavaScript使頁面更具互動性。它可以響應用戶操作，創建動態內容，控制多媒體，動畫圖像等等。 JavaScript在用戶的計算機上運行，​​使頁面加載更快並減少服務器上的負載。

>

>我如何在網頁中使用JavaScript？

javascript可以直接使用HTML嵌入HTML中<script>標籤或使用<script>標籤中的SRC屬性在外部鏈接。該腳本可以放置在HTML文檔的頭部或身體部分中，但通常建議將腳本放在身體部分的底部，以防止阻止頁面的渲染。 <ancy> <p >有什麼例子控製網頁的JavaScript？ <h3 >JavaScript可以以多種方式控製網頁。例如，它可以更改HTML元素的內容和样式，在將其提交給服務器之前驗證形式的數據，操縱Cookie，創建彈出窗口等等。 JavaScript也可以用於創建複雜的應用程序，例如在線遊戲，交互式地圖和2D/3D圖形。創建動態和交互式網頁。 HTML用於網頁的結構，用於樣式的CSS和功能的JavaScript。 JavaScript可以在HTML文檔中訪問和更改所有元素和屬性。它還可以在網頁中更改所有CSS樣式。 </script>

>我可以在沒有事先編程知識的情況下學習JavaScript嗎？

是的，您可以在沒有事先編程知識的情況下學習JavaScript。但是，對HTML和CSS與JavaScript合作以創建交互式網頁時，對HTML和CSS有一個基本的了解是有益的。在線有許多可用的資源，包括教程，視頻和交互式編碼平台，可以幫助您從頭開始學習JavaScript。

>

> JavaScript僅用於Web開發？

對於Web開發，其使用不限於此。它也可以用於使用Node.js的服務器端編程，用於使用React Native和Ionic等框架的移動應用程序開發，以及使用Electron等框架創建桌面應用程序。

> javascript？

JavaScript是安全的，但是像其他任何編程語言一樣，如果不正確使用，則可以利用它。遵循最佳實踐以防止潛在的安全問題，這一點很重要。其中包括驗證和消毒用戶輸入，避免使用est（）使用（）以及定期更新和檢查您的代碼是否漏洞。

可以使用JavaScript來創建動畫嗎？用於在網頁上創建動畫。隨著時間的流逝，它可以更改HTML元素的CSS屬性，從而創造動畫的效果。 JavaScript還提供了requestAnimationFrame方法，該方法是專門設計用於創建光滑，瀏覽器優化的動畫的。

什麼是文檔對像模型（DOM）？ HTML和XML文檔的編程接口。它代表文檔的結構，並允許像JavaScript這樣的編程語言操縱文檔的內容，結構和样式。

>

> JavaScript如何處理錯誤？

JavaScript使用組合處理錯誤嘗試，捕捉並最終陳述。 Try Block包含可能會出現錯誤的代碼，Catch Block處理錯誤，最後塊包含執行的代碼，無論是否丟棄錯誤。

以上是使用JavaScript和{X} - sitePoint控製網頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！