翻译正在进行中。

本节是一个小测验,要求你运用所学知识制作一个笑话生成器。祝玩的愉快!

预备知识: 请读完本章所有小节的内容后再开始这个测验。
目标: 测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。

起点

测验开始之前,你需要:

  • 下载 HTML 文件,将其命名为 index.html 并存在本地一个新文件夹中。这个 HTML 文档中还包含一些 CSS。
  • 新建一个浏览器标签页并打开这个文本文件。稍后会用到。

注: 你还可以用类似 JSBin 或 Thimble 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面,可以随时在 HTML 页面中添加 <script> 元素。

项目简介

我们提供了一些原始的 HTML / CSS,以及若干字符串和 JavaScript 函数,还需要你来编写一些 JavaScript 代码让项目运行起来:

  • 点击“随机生成笑话”按钮时生成一则笑话。
  • 若“生成”按钮按下之前,你在“输入自定义的名字”文字框中输入了一个自定义名字,那么生成的笑话中原有的名字(李雷 / Bob)将被取代。
  • 通过选择国家名称的收音机按钮来确定界面语言以及笑话中温度和重量的制式。
  • 点一次按钮,生成一个新故事。点一次生成一个……

可以尝试操作一下:(别偷看源代码哦!)

译注: 我汉化了一下程序界面,还加入了更换语言时实时匹配界面语言的功能。在 ui.js 里。有兴趣可以在本节结束后回来 看看。(没兴趣就跳过吧 :)
Roy-Tian.

步骤

以下是你的工作。

基础设置:

  1. index.html 所在的目录下新建一个 main.js 文件。
  2. 在 HTML 文件中添加 <script> 标签来引用外部 JavaScript 文件。

初始化变量和函数:

  1. 将刚下载的文本文件中的“1. 定义变量和函数”标题项下所有代码复制粘贴至 main.js 中。此时你就有了三个变量(customName 是对“输入自定义的名字”文本框的引用,randomize 是对“随机生成笑话”按钮的引用,story 是对 HTML 底部的、准备存放笑话的 <p> 元素的引用)和一个函数(randomValueFromArray() 取一个数组作参数,随机返回数组中的一个元素)。
  2. 然后是文本文件的第二节——"2. 纯文本字符串"。这里包含了一些字符串,这些字符串是项目的输入信息。你应该在 main.js 文件中用变量来保存它们。
    1. storyText 变量保存第一个长字符串。
    2. insertX 数组保存第一组三个字符串。
    3. insertY 数组保存第二组三个字符串。
    4. insertZ 数组保存第三组三个字符串。

放置事件处理器并补全:

  1. 返回刚才的文本文件。
  2. 将“3. 事件监听器和未完成的函数定义”标题项下的代码复制粘贴至 main.js 文件。这将:
    • randomize 变量增加一个点击事件的监听器。于是当所引用的按钮被点击时,result() 函数就会运行。
    • 为代码添加一个未完成的 result() 函数定义。本测验剩下的工作就是完成这个函数,让程序正常运行起来。

补全 result() 函数:

  1. 声明 newStory 变量,并将其值设置为 storyText(选中“中国”时为 storyTextZh)。有必要声明新变量,只有这样才能在每次按下按钮后,函数运行时生成一个新的随机笑话。如果直接操作 storyTextstoryTextZh,则只能生成一次新故事。
  2. 声明三个变量: xItemyItem 和 zItem,并且令他们的值分别等于randomValueFromArray(insertX)randomValueFromArray(insertY)randomValueFromArray(insertZ)(选中“中国”时三个参数变为insertAinsertBinsertC)。
  3. 接下来将 newStory 中的占位符(:insertx::inserty::insertz: )替换为 xItemyItem 和 zItem(选中“中国”变化同上)。你可以使用字符串中专门的函数方法——每一次都使 newStory 变成执行了该方法后的值。这样每一次按下按钮后,这些placeholder就会变成随机产生的字符串。在给你一点提示,这种方法每次只会置换它找到的第一个 placeholder,因此你需要执行三次这个方法。
  4. 在第一个 if 代码块中增加另一个字符串置换操作,用变量 name 替换 newStory 字符串中的名称'Bob'。在这个代码块中,我们可以写“如果已经在 customName 文本输入中输入了值,将故事中的Bob替换为该自定义名称。”
  5. 在第二个 if 代码块中,我们要检查 UK radio button是否被勾选。如果是这样,我们需要将故事中的重量和温度值从磅(pound)和华氏度(Fahrenheit)转换为英石(stone)和摄氏度(centigrade)。
    1. 查找 pounds 和 stone,fahrenheit 和 centigrade 的转换等式。
    2. 在定义了变量 weight 的那一行代码中, 将 pounds 下的94通过一个计算表达式转化为 stones下的值。并且将单位 'stone' 连接到整个 Math.round() 调用结果的末尾。
    3. 在定义了变量 temperature 的那一行代码中, 将 fahrenheit 下的94通过一个计算表达式转化为 centigrade 下的值。并且将单位' centigrade' 连接到整个 Math.round() 调用结果的末尾。
    4. 就在上面的变量定义下,增加两个字符串置换操作,将 '94 fahrenheit' 置换成为变量 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!你要自己完成这个任务,作弊不会给你带来收获。

 

在本单元中

 

文档标签和贡献者

最后编辑者: Roy-Tian,