使用JavaScript和{X} - sitePoint控制网页-js教程-PHP中文网

钥匙要点

>节点服务器中最重要的路由是邮政请求，它允许我们与演示幻灯片进行交互。该路线如下所示。

结论

代码

是的，您可以在没有事先编程知识的情况下学习JavaScript。但是，对HTML和CSS与JavaScript合作以创建交互式网页时，对HTML和CSS有一个基本的了解是有益的。在线有许多可用的资源，包括教程，视频和交互式编码平台，可以帮助您从头开始学习JavaScript。

> javascript？

可以使用JavaScript来创建动画吗？用于在网页上创建动画。随着时间的流逝，它可以更改HTML元素的CSS属性，从而创造动画的效果。 JavaScript还提供了requestAnimationFrame方法，该方法是专门设计用于创建光滑，浏览器优化的动画的。

首页

web前端

js教程

使用JavaScript和{X} - sitePoint控制网页

Joseph Gordon-Levitt

Feb 22, 2025 am 09:20 AM

使用JavaScript和{X} - sitePoint控制网页

钥匙要点

作者使用远程控制HTML演示文稿的示例演示了如何使用Android设备将远程说明发送到实时网页。>
> socket.io，启用服务器和客户端之间的实时通信，这对于对来自Android设备的信号的实时响应至关重要。具有JavaScript API的On {X}应用程序允许控制Android设备，并响应诸如传入的文本消息，GPS位置，电池寿命等事件。这是在发掘时用于发送服务器请求的。
作者警告说，该方法不安全，并建议为任何通用的任何东西添加一层安全性。
我们将使用以下技术：

一个Android设备

> on {x}

express

> socket.io
deck.js
> Heroku
什么是socket.io？
>在我们走得太远之前，我将解释socket.io的作用，因为它将显示在接下来的几个代码片段中。 socket.io是一个JavaScript库，可在服务器和客户端之间实时通信。它允许您在服务器和客户端上定义事件。例如，io.sockets.emit（'eventThathathappened'）创建了一个新事件，应用程序可以对此做出反应。为了对事件做出反应，只需设置这样的事件处理程序 - socket.on（'eventThathApped'，function（）{}）。

>聊天程序是一个常见的示例socket.io应用程序。该服务器听取来自任何客户端的传入消息，并在运行聊天应用程序的所有客户端上立即显示它们。我们将使用它在页面启动时立即从Android设备中响应信号。

<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}

>

单击页面左上角的写代码链接以提出代码编辑器。

>在{x}

上进行编码

>如上所述，{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吗？