Skip to content

Z
zetcode-zh

OpenDocCN / zetcode-zh
10 个月 前同步成功

通知 2
Star 157
Fork 40
Z
zetcode-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 dfaf7d21 编写于 作者: W wizardforcel
浏览文件
操作

2020-06-18 10:57:20

上级 8e14b151
隐藏空白更改
内联 并排
Showing with 56 addition and 56 deletion
docs/js/60.md
浏览文件 @ dfaf7d21
......@@ -285,7 +285,7 @@ request('http://localhost:3004/data?_start=4&_end=8', (err, resp, body) => {
```
该程序从 JSON Server 获取数据，数据从索引 4（不包括索引）开始，到索引 8（不包括索引）结束。
该程序从 JSONServer 获取数据，数据从索引 4（不包括索引）开始，到索引 8（不包括索引）结束。
```js
$ node get_data.js
......
docs/js/80.md
浏览文件 @ dfaf7d21
......@@ -27,7 +27,7 @@ $ npm install axios
```
此外，我们安装了`axios`模块，这是一个基于 Promise 的 JavaScript HTTP 客户端。
此外，我们安装了`axios`模块，这是一个基于`Promise`的 JavaScript HTTP 客户端。
```js
$ cat package.json
......@@ -382,6 +382,6 @@ $ node full_text_search.js
搜索查询返回了这三个用户。
在本教程中，我们介绍了 JSON Server JavaScript 库。
在本教程中，我们介绍了 JSONServer JavaScript 库。
您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)，[笑话教程](/javascript/jest/)， [faker.js 教程](/javascript/fakerjs/)， [Document.querySelector（）教程](/javascript/queryselector/)，[从 JavaScript 中的 URL 读取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 贪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自动完成教程](/articles/jqueryautocomplete/)或 [Node Sass 教程](/javascript/nodesass/)。
\ No newline at end of file
您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)，[笑话教程](/javascript/jest/)， [faker.js 教程](/javascript/fakerjs/)， [`Document.querySelector()`教程](/javascript/queryselector/)，[从 JavaScript 中的 URL 读取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 贪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自动完成教程](/articles/jqueryautocomplete/)或 [Node Sass 教程](/javascript/nodesass/)。
\ No newline at end of file
docs/js/81.md
浏览文件 @ dfaf7d21
......@@ -2,17 +2,17 @@
> 原文： [http://zetcode.com/javascript/snake/](http://zetcode.com/javascript/snake/)
JavaScript 贪食蛇教程展示了如何在 JavaScript 中创建 Snake 游戏。 这些图像和源可从作者的 Github [JavaScript-Snake-Game](https://github.com/janbodnar/JavaScript-Snake-Game) 存储库中获得。
JavaScript 贪食蛇教程展示了如何在 JavaScript 中创建贪食蛇游戏。 这些图像和源可从作者的 Github [JavaScript-Snake-Game](https://github.com/janbodnar/JavaScript-Snake-Game) 存储库中获得。
## Snake 游戏
## 贪食蛇游戏
Snake 是一款较老的经典视频游戏，最早于 70 年代后期创建。 后来它被带到 PC 上。 在这个游戏中，玩家控制蛇。 目的是尽可能多地吃苹果。 蛇每次吃一个苹果，它的身体就会长大。 蛇必须避开墙壁和自己的身体。 该游戏有时称为 Nibbles 。
贪食蛇是一款较老的经典视频游戏，最早于 70 年代后期创建。 后来它被带到 PC 上。 在这个游戏中，玩家控制蛇。 目的是尽可能多地吃苹果。 蛇每次吃一个苹果，它的身体就会长大。 蛇必须避开墙壁和自己的身体。 该游戏有时称为 Nibbles。
## HTML5 画布
HTML5 canvas 元素提供了一个与分辨率有关的位图区域，该区域可用于动态绘制图形，游戏图形，艺术作品或其他可视图像。 简单来说，canvas 是 HTML5 中的新元素，它使您可以使用 JavaScript 绘制图形。 Canvas 无需将插件插入 Flash，Silverlight 或 Java，即可将动画带入网页。
HTML5 `canvas`元素提供了一个与分辨率有关的位图区域，该区域可用于动态绘制图形，游戏图形，艺术作品或其他可视图像。 简单来说，`canvas`是 HTML5 中的新元素，它使您可以使用 JavaScript 绘制图形。 `Canvas`无需将插件插入 Flash，Silverlight 或 Java，即可将动画带入网页。
## JavaScript Snake 代码示例
## JavaScript 贪食蛇代码示例
蛇的每个关节的大小为 10 像素。 蛇由光标键控制。 最初，蛇具有三个关节。 如果游戏结束，则画布中间会显示“游戏结束”消息。
......@@ -285,7 +285,7 @@ onkeydown = function(e) {
```
这是 JavaScript Snake 的源代码。
这是 JavaScript 贪食蛇的源代码。
```js
const DOT_SIZE = 10;
......@@ -297,7 +297,7 @@ const C_WIDTH = 300;
```
`DOT_SIZE`是苹果的大小和蛇的点。 `ALL_DOTS`常数定义画布上可能的最大点数（900 = 300 * 300/10 * 10）。 `MAX_RAND`常数用于计算苹果的随机位置。 `DELAY`常数确定游戏的速度。 `C_HEIGHT`和`C_WIDTH`常数存储画布的大小。
`DOT_SIZE`是苹果的大小和蛇的点。 `ALL_DOTS`常数定义画布上可能的最大点数（`900 = 300 * 300 / 10 * 10`）。 `MAX_RAND`常数用于计算苹果的随机位置。 `DELAY`常数确定游戏的速度。 `C_HEIGHT`和`C_WIDTH`常数存储画布的大小。
```js
const LEFT_KEY = 37;
......@@ -315,7 +315,7 @@ var y = new Array(ALL_DOTS);
```
这两个数组存储蛇的所有关节的 x 和 y 坐标。
这两个数组存储蛇的所有关节的`x`和`y`坐标。
```js
function init() {
......@@ -396,7 +396,7 @@ for (var z = dots; z > 0; z--) {
```
for 循环将蛇的关节向上移动。
`for`循环将蛇的关节向上移动。
```js
if (leftDirection) {
......@@ -450,7 +450,7 @@ function locateApple() {
```
`locateApple()`随机选择苹果对象的 x 和 y 坐标。 `apple_x`和`apple_y`是苹果图像左上点的坐标。
`locateApple()`随机选择苹果对象的`x`和`y`坐标。 `apple_x`和`apple_y`是苹果图像左上点的坐标。
```js
function gameCycle() {
......@@ -479,10 +479,10 @@ if ((key == LEFT_KEY) && (!rightDirection)) {
```
如果单击左光标键，则将`leftDirection`变量设置为 true。 `move()`函数中使用此变量来更改蛇对象的坐标。 还要注意，当蛇向右行驶时，我们不能立即向左转。
如果单击左光标键，则将`leftDirection`变量设置为`true`。 `move()`函数中使用此变量来更改蛇对象的坐标。 还要注意，当蛇向右行驶时，我们不能立即向左转。
![Snake game](img/f37cb101a513120e8d0efe3596c09057.jpg)
Figure: Snake gmae
这是 JavaScript Snake 游戏。
\ No newline at end of file
这是 JavaScript 贪食蛇游戏。
\ No newline at end of file
docs/js/82.md
浏览文件 @ dfaf7d21
......@@ -12,7 +12,7 @@ JavaScript 构建器模式教程展示了如何使用构建器模式在 JavaScri
## 构建器模式示例
以下示例将 Builder 模式与`TaskBuilder`结合使用。
以下示例将构建器模式与`TaskBuilder`结合使用。
`task_creator.js`
......@@ -97,6 +97,6 @@ console.log(task);
我们使用`TaskBuilder`创建任务。
在本教程中，我们介绍了 JavaScript 中的 Builder 模式。
在本教程中，我们介绍了 JavaScript 中的构建器模式。
列出[所有 JavaScript 教程](/all/#js)。
\ No newline at end of file
docs/js/83.md
浏览文件 @ dfaf7d21
......@@ -242,7 +242,7 @@ for (let i = 0; i < len; i++) {
```
在这里，我们使用类似于 C 的 for 循环遍历数组。
在这里，我们使用类似于 C 的`for`循环遍历数组。
```js
var i = 0;
......@@ -366,7 +366,7 @@ persons.sort((a, b) => a.age - b.age);
```
我们通过 age 属性对一系列人对象进行排序。
我们通过`age`属性对一系列人对象进行排序。
```js
persons.sort((a, b) => {
......@@ -497,7 +497,7 @@ const res = nums.filter(e => e > 0);
```
`filter()`方法采用谓词方法作为参数。 谓词返回 true 以保留元素，否则返回 false。
`filter()`方法采用谓词方法作为参数。 谓词返回`true`以保留元素，否则返回`false`。
```js
$ nodejs filter_array.js
......
docs/js/84.md
浏览文件 @ dfaf7d21
......@@ -2,13 +2,13 @@
> 原文： [http://zetcode.com/javascript/xmlhttprequest/](http://zetcode.com/javascript/xmlhttprequest/)
`XMLHttpRequest`教程展示了如何使用 XMLHttpRequest 在 JavaScript 中发出 HTTP 请求。
`XMLHttpRequest`教程展示了如何使用`XMLHttpRequest`在 JavaScript 中发出 HTTP 请求。
## `XMLHttpRequest`
XMLHttpRequest 是内置的浏览器对象，它允许使用 JavaScript 发出 HTTP 请求。 XMLHttpRequest API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。
`XMLHttpRequest`是内置的浏览器对象，它允许使用 JavaScript 发出 HTTP 请求。 `XMLHttpRequest` API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。
结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 XMLHttpRequest 在 AJAX 编程中大量使用。 XMLHttpRequest 以两种操作模式工作：同步和异步。 尽管它的名字，XMLHttpRequest 可以对任何数据进行操作，而不仅限于 XML。
结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 `XMLHttpRequest`在 AJAX 编程中大量使用。 `XMLHttpRequest`以两种操作模式工作：同步和异步。 尽管它的名字，`XMLHttpRequest`可以对任何数据进行操作，而不仅限于 XML。
## `XMLHttpRequest`示例
......@@ -136,6 +136,6 @@ Unix time: ${data.milliseconds_since_epoch}`
该代码已加载到 HTML 页面。 在浏览器中加载页面之后，我们转到浏览器控制台，该控制台在开发人员工具中可用。
在本教程中，我们使用 XMLHttpRequest 在 JavaScript 中创建了 HTTP 请求。
在本教程中，我们使用`XMLHttpRequest`在 JavaScript 中创建了 HTTP 请求。
您可能也对以下相关教程感兴趣： [JavaScript queryselector 教程](/javascript/queryselector/)， [JavaScript Lodash 教程](/javascript/lodash/)， [Ramda 教程](/javascript/ramda/)或列出[所有 JavaScript 教程](/all/#js)。
\ No newline at end of file
您可能也对以下相关教程感兴趣： [JavaScript `queryselector`教程](/javascript/queryselector/)， [JavaScript Lodash 教程](/javascript/lodash/)， [Ramda 教程](/javascript/ramda/)或列出[所有 JavaScript 教程](/all/#js)。
\ No newline at end of file
docs/js/85.md
浏览文件 @ dfaf7d21
# 从 JavaScript 中的 URL 读取 JSON
# 在 JavaScript 中从 URL 读取 JSON
> 原文： [http://zetcode.com/articles/javascriptjsonurl/](http://zetcode.com/articles/javascriptjsonurl/)
在 JavaScript 教程的“从 URL 读取 JSON”中，我们从提供的 URL 中读取 JSON 格式的数据。 我们使用 JQuery，Fetch API 和 XMLHttpRequest。
在 JavaScript 教程的“从 URL 读取 JSON”中，我们从提供的 URL 中读取 JSON 格式的数据。 我们使用 JQuery，Fetch API 和`XMLHttpRequest`。
统一资源定位符（URL）是对 Web 资源的引用，该资源指定了它在计算机网络上的位置以及用于检索它的机制。 网络资源是可以通过网络获取的任何数据，例如 HTML 文档，PDF 文件，PNG 图像，JSON 数据或纯文本。
......@@ -116,11 +116,11 @@ fetch('http://time.jsontest.com')
该示例使用 Fetch API 读取 JSON 数据，并将返回的数据打印到控制台。 要查看输出，我们需要激活浏览器的开发者控制台。
`fetch()`方法采用一个强制性参数，即我们要获取的资源的路径。 它返回一个解析为请求响应的 promise。
`fetch()`方法采用一个强制性参数，即我们要获取的资源的路径。 它返回一个解析为请求响应的`promise`。
## 使用`XMLHttpRequest`读取 JSON
XMLHttpRequest API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。 结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 `XMLHttpRequest`在 AJAX 编程中大量使用。
`XMLHttpRequest` API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。 结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 `XMLHttpRequest`在 AJAX 编程中大量使用。
```js
<script>
......@@ -209,6 +209,6 @@ xhr.send();
`send()`方法发送请求； 默认情况下，该请求是异步的。
在本教程中，我们已经使用 JQuery，Fetch API 和 XMLHttpRequest 在 JavaScript 中读取了 JSON 数据。
在本教程中，我们已经使用 JQuery，Fetch API 和`XMLHttpRequest`在 JavaScript 中读取了 JSON 数据。
您可能也对以下相关教程感兴趣： [JQuery 教程](/web/jquery/)， [JavaScript Mustache 教程](/javascript/mustache/)， [JavaScript 中的 JSON 数组循环](/javascript/jsonforeach/)， [jQuery 自动完成教程](/articles/jqueryautocomplete/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 。
\ No newline at end of file
docs/js/86.md
浏览文件 @ dfaf7d21
......@@ -2,7 +2,7 @@
> 原文： [http://zetcode.com/javascript/jsonforeach/](http://zetcode.com/javascript/jsonforeach/)
JSON forEach 教程展示了如何在 JavaScript 中循环遍历 JSON 数组。 在本教程中，我们使用 JSON 服务器来处理测试数据。
JSON `forEach`教程展示了如何在 JavaScript 中循环遍历 JSON 数组。 在本教程中，我们使用 JSON 服务器来处理测试数据。
json 服务器是一个 JavaScript 库，用于创建测试 REST API。
......@@ -160,6 +160,6 @@ email lucyb56@gmail.com main.js:12:13
这是浏览器控制台中的输出。
在本教程中，我们展示了如何使用 forEach 遍历 JSON 数组。
在本教程中，我们展示了如何使用`forEach`遍历 JSON 数组。
您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)， [faker.js 教程](/javascript/fakerjs/)或[从中读取 JSON JavaScript](/articles/javascriptjsonurl/) 中的 URL。
\ No newline at end of file
您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)， [faker.js 教程](/javascript/fakerjs/)或[在 JavaScript 中从 URL 读取 JSON](/articles/javascriptjsonurl/)。
\ No newline at end of file
docs/js/87.md
浏览文件 @ dfaf7d21
......@@ -181,17 +181,17 @@ jQuery 选择器用于选择 HTML 文档中满足某些条件的元素。 条件
以下是可用选择器的部分列表：
* $（“ *”）-选择所有元素
* $（“# first”）—用`id="first`选择元素
* $（“。intro”）—选择带有`class="intro"`的所有元素
* $（“ div”）-选择所有`<div>`元素
* $（“ h2，div，p”）-选择所有`<h2&gt;, &lt;div&gt;, &lt;p>`元素
* $（“ li：first”）—选择第一个`<li>`元素
* $（“ li：last”）—选择最后一个`<li>`元素
* $（“ li：even”）—选择所有偶数`<li>`元素
* $（“ li：odd”）-选择所有奇数`<li>`元素
* $（“：empty”）-选择所有为空的元素
* $（“：focus”）-选择当前具有焦点的元素
* `$("*")` - 选择所有元素
* `$("#first")` — 用`id="first`选择元素
* `$(".intro")` — 选择带有`class="intro"`的所有元素
* `$("div")` - 选择所有`<div>`元素
* `$("h2, div, p")` - 选择所有`<h2>, <div>, <p>`元素
* `$("li:first")` — 选择第一个`<li>`元素
* `$("li:last")` — 选择最后一个`<li>`元素
* `$("li:even")` — 选择所有偶数`<li>`元素
* `$("li:odd")` - 选择所有奇数`<li>`元素
* `$(":empty")` - 选择所有为空的元素
* `$(":focus")` - 选择当前具有焦点的元素
在下面的示例中，我们将使用`:root`选择器，该选择器选择`<html>`标签。
......@@ -283,7 +283,7 @@ $("#mylist").css("border", "1px dotted blue");
```
`$("#mylist")`选择器选择 ID 等于“ mylist”的标签。 使用`css()`方法，我们可以修改标签的外观。
`$("#mylist")`选择器选择 ID 等于`mylist`的标签。 使用`css()`方法，我们可以修改标签的外观。
```js
$("li:odd").css("background-color", "gray");
......@@ -428,7 +428,7 @@ $("h3").text(cont);
```
在示例中，我们将事件处理程序绑定到按钮元素上的 click 事件。
在示例中，我们将事件处理程序绑定到按钮元素上的`click`事件。
```js
<button id="btn">Toggle</button>
......@@ -454,7 +454,7 @@ $("h3").text(cont);
## 鼠标移动事件
当鼠标指针移至文档区域上方时，将触发鼠标移动事件。 事件处理程序函数接收一个事件对象，其中包含与事件类型有关的数据。 在我们的例子中，它将包含鼠标指针的 x 和 y 坐标。
当鼠标指针移至文档区域上方时，将触发鼠标移动事件。 事件处理程序函数接收一个事件对象，其中包含与事件类型有关的数据。 在我们的例子中，它将包含鼠标指针的`x`和`y`坐标。
`mouse_move_event.html`
......@@ -495,7 +495,7 @@ $("h3").text(cont);
```
如果我们将鼠标指针放在`<div>`元素的区域上，则该示例显示它的 x 和 y 坐标。
如果我们将鼠标指针放在`<div>`元素的区域上，则该示例显示它的`x`和`y`坐标。
```js
<div class="mypanel"></div>
......@@ -521,7 +521,7 @@ $(".mypanel").mousemove(function(e) {
```
我们将事件处理程序绑定到鼠标移动事件。 在事件处理程序内部，我们使用`pageX`和`pageY`属性确定 x 和 y 坐标，并使用`text()`方法更新日志记录元素。 `mousemove()`方法是`on("mousemove", handler)`方法的快捷方式。
我们将事件处理程序绑定到鼠标移动事件。 在事件处理程序内部，我们使用`pageX`和`pageY`属性确定`x`和`y`坐标，并使用`text()`方法更新日志记录元素。 `mousemove()`方法是`on("mousemove", handler)`方法的快捷方式。
![Mouse move event](img/123e354f7ef6befeb7000499da46b45f.jpg)
......@@ -599,7 +599,7 @@ Figure: Mouse move event
```
类选择器`$(".mybtn")`选择所有三个按钮。 我们将 click 事件处理程序附加到按钮上。 我们使用`$(this)`构造引用事件源，并使用`text()`方法确定事件的标签。 按钮的名称用于构建消息，该消息显示在下面的`<div>`元素中。
类选择器`$(".mybtn")`选择所有三个按钮。 我们将`click`事件处理程序附加到按钮上。 我们使用`$(this)`构造引用事件源，并使用`text()`方法确定事件的标签。 按钮的名称用于构建消息，该消息显示在下面的`<div>`元素中。
![Event source](img/5106ab7c78d46520d40700c076f35e67.jpg)
......@@ -999,7 +999,7 @@ $(function () {
```
`$.get()`方法的第一个参数是将请求发送到的 URL 字符串。 第二个参数是一个回调函数，如果请求成功，则执行该函数。 在回调函数内部，我们将返回的数据设置为 logging 元素。
`$.get()`方法的第一个参数是将请求发送到的 URL 字符串。 第二个参数是一个回调函数，如果请求成功，则执行该函数。 在回调函数内部，我们将返回的数据设置为日记记录元素。
`MyServlet.java`
......
docs/js/88.md
浏览文件 @ dfaf7d21
......@@ -6,11 +6,11 @@ Google 图表教程是 Google 图表库的入门教程。 它显示了如何使
Google 图表是一种交互式 Web 服务，可根据用户提供的信息创建图形图表。 用户使用嵌入在网页中的 JavaScript 提供数据和格式； 作为响应，服务发送图表图像。 该库提供了大量现成的图表类型。
图表具有一些默认外观，我们可以更改图表的外观。 图表具有高度的交互性，并公开事件，使我们可以将它们连接起来以创建复杂的结构。 图表使用 HTML5 / SVG 技术呈现，以提供跨浏览器和跨平台的兼容性（包括 iPhone，iPad 和 Android）。
图表具有一些默认外观，我们可以更改图表的外观。 图表具有高度的交互性，并公开事件，使我们可以将它们连接起来以创建复杂的结构。 图表使用 HTML5/SVG 技术呈现，以提供跨浏览器和跨平台的兼容性（包括 iPhone，iPad 和 Android）。
## `DataTable`
图表填充有`DataTable`类。 它是一个二维的可变值表。 它具有用于排序，修改和过滤数据的方法。 可以直接从网页，数据库或任何支持 Chart Tools 数据源协议的数据提供者中填充它。
图表填充有`DataTable`类。 它是一个二维的可变值表。 它具有用于排序，修改和过滤数据的方法。 可以直接从网页，数据库或任何支持图表工具数据源协议的数据提供者中填充它。
## 散点图
......@@ -81,14 +81,14 @@ google.charts.load('current', {'packages':['corechart']});
```
第一步，我们加载 Visualization API 和`corechart`包。
第一步，我们加载 可视化 API 和`corechart`包。
```js
google.charts.setOnLoadCallback(drawChart);
```
我们设置了在加载 Google Visualization API 时运行的回调。
我们设置了在加载 Google 可视化 API 时运行的回调。
```js
function drawChart() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或