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

前提: 请确保在尝试本次作业前,您已经学完了本次模块中所涉及的所有文章。
目的: 测试您对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 底部的<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. 接下来我们需要将 newStory 中的placeholder — :insertx:, :inserty:, and :insertz: — 置换成 xItem, yItem, 和 zItem 中保存的字符串。你可以使用字符串中专门的函数方法——每一次都使 newStory 变成执行了该方法后的值。这样每一次按下按钮后,这些placeholder就会变成随机产生的字符串。在给你一点提示,这种方法每次只会置换它找到的第一个 placeholder,因此你需要执行三次这个方法。
  4. 在第一个 if 代码块中增加另一个字符串置换操作,用变量 name 替换 newStory 字符串中的名称'Bob'。在这个代码块中,我们可以写“如果已经在 customName 文本输入中输入了值,将故事中的Bob替换为该自定义名称。”
  5. 在第二个 if 代码块中,我们要检查 UK radio button是否被勾选。如果是这样,我们需要将故事中的重量和温度值从磅(pound)和华氏度(Fahrenheit)转换为英石(stone)和摄氏度(centigrade)。
    1. 查找 pounds 和 stone,farenheit 和 centigrade 的转换等式。
    2. 在定义了变量 weight 的那一行代码中, 将 pounds 下的94通过一个计算表达式转化为 stones下的值。并且将单位 '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 中的内建函数,用来生成最接近一个计算式的整数。
  • 有三种需要被替换的字符串实例。您可以多次重复 replace() 方法,或者您可以使用正则表达式。例如,var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like'); 会将“love”的所有实例替换为“like”。记住,字符串是不可变的!

任务

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

 

在本单元中

 

文档标签和贡献者

最后编辑者: scsc4212,