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

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

起点

测验开始之前,你需要:

  • 下载 HTML 文件,将其命名为 index.html 并存在本地一个新文件夹中。这个 HTML 文档中还包含一些 CSS。
  • 下载 ui.js 并与 index.html 保存在同一个文件夹中,该文件用于响应用户界面语言,本文不展开介绍。
  • 新建一个浏览器标签页并打开这个文本文件。稍后会用到。

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

项目简介

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

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

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

译注: 我汉化了一下程序界面,还加入了更换语言时实时匹配界面语言的功能。点击在线试用。有兴趣还可以在本节结束后回来 看看代码。(没兴趣就跳过吧 :)
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. 因为要同时考虑中文和英文的结果,所以我们的 result() 函数比英文版复杂一些。整体结构分三段,首先声明了 newStoryxItemyItemzItemname 变量供稍后使用,然后是一个 if...else 结构,测试是否选定“中文”的收音机按钮(接下来的 1 - 5 步我们只考虑 else 块中的情况,即选中“US”或“UK”的情况),最后是第 6 步。
  2. newStory 的值设置为 storyText。声明新变量有必要的,只有这样才能在每次按下按钮后、在函数运行时生成一个新的随机笑话。如果直接操作 storyText 则只能生成一次新故事。
  3. xItemyItem 和 zItem 分别设置为 randomValueFromArray(insertX)randomValueFromArray(insertY)randomValueFromArray(insertZ)
  4. 接下来将 newStory 中的占位符(:insertx::inserty::insertz: )替换为 xItemyItem 和 zItem。有专用的字符串方法可供使用,并用该方法的返回值为 newStory 赋值。每当按下按钮时,这些占位符都会替换为随机的笑话字符串。再给你一点提示,我们所说的这种方法每次只会将所找到的首个子字符串进行替换,因此该方法对某个占位符需要执行两次。
  5. 在第一个 if 块中再次调用这个字符串替换方法,以使 newStory 字符串中的名字“Bob”替换为变量 name 的值 。这里我们说:“如果 customName 中有值,就把故事里的 Bob 替换成它。”
  6. 在第二个 if 块中检查 uk 收音机按钮是否被选中。如果选中,就要将故事中的重量和温度值从磅(pound)和华氏度(Fahrenheit)转换为英石(stone)和摄氏度(centigrade),具体事项如下:
    1. 确定英美单位的转换公式。
    2. 定义变量 weighttemperature 的行中,分别将美制单位按公式转化为英制,用 Math.round() 对计算结果取整。然后将英式单位连接到末尾。
    3. 就在上述两个变量的定义下方增加两个字符串置换操作,将“94 fahrenheit”替换为 temperature 的值,将“300 pounds”替换为 weight 的值。
  7. 最后,在函数倒数第二行,将 story.textContent(程序中显示笑话结果的段落) 赋值为 newStory

提示

  • 除了在 HTML 文件中引入这个 JavaScript 文件之外,完全不需要编辑 HTML。
  • 如果你不确定当前 JavaScript 是否正确添加到了你的 HTML 中,可以尝试暂时删除 JavaScript 文件的所有内容,然后加上一些简单但效果显著的 JavaScript 代码,保存文件并刷新浏览器。下面的示例会让 <html> 背景变为红色,如果 JavaScript 成功加载,那么整个浏览器窗口将变红:
  • 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”。记住,字符串本身是不可修改的!

测验

如果你是在课堂上进行这个测验,你可以把作品交给导师或教授去打分了。如果你是在自学,也可以在 本节测验的讨论页 或者 Mozilla 聊天室 #mdn 频道取得帮助。要自己先尝试,作弊是不会有收获的!

 

本章目录