此页面上有脚本错误。虽然它是写给网站编辑,您可以在下面查看部分内容。

这篇翻译不完整。请帮忙从英语翻译这篇文章

{{LearnSidebar}}
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

这个任务要求你使用前面所学的知识完成一个故事生成器。玩的愉快!

前提: 请确保在尝试本次作业前,您已经学完了本次模块中所涉及的所有文章。
目的: 测试您对JavaScript基础知识的综合掌握,比如变量、数字、字符串和数组。

最开始进行的操作

开始本次测试,您需要:

注意: 作为其他选择,您可以利用类似 JSBin 或 Thimble 网站来完成作业. 您可以把 HTML, CSS 及 JavaScript 的代码复制到这些在线编辑器. 如果您所使用的在线编辑器没有独立的JavaScript版面,您可以随意在HTML页面中添加<script> 元素。

项目概括

我们给你提供了一些HTML/CSS/JS代码;你需要再添加一些JS代码(也就是如下的操作)来完成这个项目:

  • 当用户按下“Generate random story”按钮时,生成一则笑话。
  • 当且仅当在按钮被按下前用户在“Enter custom name”中输入了其名字的情况下,将默认的名字变成用户的名字。
  • 当用户在按下生成按钮之前点击了UK radio按钮时,将默认的US重量和温度单位换成英式的。
  • 如果用户再次按下生成按钮,则随即生成另一则笑话(如果用户愿意的话,他可以一直按生成按钮)

下面的截图是项目完成之后的输出界面:

为了给你一点灵感, 可以看看这个已经完成了的实例 (可别偷看源代码!)

步骤

下面介绍你要做的事情。

基本步骤:

  1. 在index.html的目录下新建一个文件,命名为main.js。
  2. 通过添加<script>标签,将外部的 JavaScript 文件应用到你的 HTML 中。

初始化变量和函数:

  1. 从原始的文件中,复制“1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS”标题下的所有代码,并粘贴到你本地的 main.js 文件中。然后你就有了三个变量,分别代表着,"Enter custom name" 文本框(customName),  "Generate random story" 按钮 (randomize), 和 HTML body 底部的{{htmlelement("p")}} 元素(生成的故事将会复制到这个 story 变量中)。另外,你还会得到一个叫做randomValueFromArray()函数,这个函数需要一个数组作为参数,然后随机返回数组中的一个元素。
  2. 现在看看原始文件中的第二部分 — "2. RAW TEXT STRINGS"。这一部分包含了一些字符串,这些字符串会输入进我们的项目。你需要将这些包含进 main.js 文件中的变量中去。
    1. 在 storyText 变量中保存第一个长长的字符串。
    2. 在 insertX 数组中保存第一组字符串(包含三个字符串)。
    3. 在 insertY 数组中保存第二组字符串(包含三个字符串)。
    4. 在 insertZ 数组中保存第三组字符串(包含三个字符串)。

加上事件处理器并且将函数补充完整:

  1. 现在回到原始文件。
  2. 复制"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION"标题下面的代码并粘贴到你本地的 main.js 文件中。这样就:
    • 给 randomize 变量增加了一个“点击”时间监听器。也就是说,当按钮白点击时,result( ) 函数就会运行。
    • 给你的代码加上了一个部分完成的 result( ) 函数定义。剩下的任务就是完成函数里面的代码,让它正常工作。

result()函数补充完整:

  1. 声明一个叫做 newStory 的变量,并将它的值设置为storyText。这样,每次按下按钮之后,函数运行的时候就会生成一个新的随即笑话。如果我们直接改变 storyText 的话,我们永远只能够生成一个新的故事。
  2. 声明三个变量: xItem, yItem, 和 zItem,并且另他们的值等于randomValueFromArray(insertX),randomValueFromArray(insertY)和randomValueFromArray(insertZ)。
  3. 接下来我们需要将 storyText 中的placeholder — :insertx:, :inserty:, and :insertz: — 置换成 xItem, yItem, and zItem 中保存的字符串。你可以使用字符串中专门的函数方法 — 每一次都使 newStory 变成执行了该方法后的值。这样每一次按下按钮后,这些placeholder就会变成随机产生的字符串。在给你一点提示,这种方法每次只会置换它找到的第一个 placeholder,因此你需要执行三次这个方法。
  4. 在第一个 if 代码块中增加另一个字符串置换操作,将 ‘Bob’ 变用户输入的用户名。
  5. 在第二个 if 代码块中,我们要检查 UK 是否被勾选。如果被勾选,我们需要将重量和温度从美式单位 weight and temperature 的值转化为英式单位 stones and centigrade 下的值。
    1. 查找 pounds 和 stone,farenheit 和 centigrade 的转换等式。
    2. 在定义了变量 weight 的那一行代码中, 将 pounds 下的94通过一个计算表达式转化为 stone 下的值。并且将单位' stone'添加到通过 Math.round() 函数获得整数后面。
    3. 在定义了变量 temperature 的那一行代码中, 将 farenheit 下的94通过一个计算表达式转化为 centigrade 下的值。并且将单位' centigrade'添加到通过 Math.round() 函数获得整数后面。
    4. 就在上面的变量定义下,增加两个字符串置换操作,将 '94 farenheit' 置换成为变量 temperature 的值,将 '300 pounds' 置换成为变量 weight 的值。
  6. 最后,在函数的倒数第二行,将变量 newStory 的值赋值给变量 story.textContent。

提示

  • 你除了将 JavaScript 添加进你的HTML 中,你完全不需要编辑 HTML 。
  • 如果你不确定 JavaScript 是否添加到了你的 HTML 中,试试暂时删除 main.js 文件中的所有东西,而加上一点点非常简单的但是会有非常明显的影响的 JavaScript 语句,然后保存文件并刷新浏览器。下面的例子会让页面背景转化为红色,如果你的 JavaScript 被加载到了 HTML 中去的话。
  • document.querySelector('html').style.backgroundColor = 'red';
  • Math.round() 是 JavaScript 中的内建函数,用来生成最接近一个计算式的整数。

任务

如果这个任务是你的课程的一部分,你可以让你的老师或者指导者评分。如果你是在自学,你也可以在 Learning Area Discourse thread 或者 #mdn IRC channel on Mozilla IRC 中获得帮助。Try the exercise first — there is nothing to be gained by cheating!你要自己完成这个任务,作弊不会给你带来收获。

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

文档标签和贡献者

 此页面的贡献者: ideal.Li, Zeng, FatCatRe
 最后编辑者: ideal.Li,