根据MDN网站学习记录笔记

笑话生成器

一、项目目标
二、项目流程
三、效果展示
四、总结
- 4.1 向html中添加JavaScript的方法
- 4.2 变量
- 4.3 有用的字符串方法
- - indexOf()
  - slice()
  - toLowerCase()和toUpperCase()
  - replace()
- 4.4 有用的数组方法
- - split()
  - push() 和 pop()

一、项目目标

主要针对js部分进行设计，html和css部分遵照MDN给出的示例未作改动

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

二、项目流程

初始化变量和函数

customName 是对“输入自定义的名字”文本框的引用，randomize 是对“随机生成笑话”按钮的引用，story 是对 HTML 底部的、准备存放笑话的 <p> 元素的引用）；函数randomValueFromArray() ，取一个数组作参数，随机返回数组中的一个元素

const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');function randomValueFromArray(array) {return array[Math.floor(Math.random() * array.length)];
}

用合适的变量来保存文本字符串

let storyText = '今天气温 34 摄氏度，:inserta:出去遛弯。当走到:insertb:门前时，突然就:insertc:。人们都惊呆了，李雷全程目睹但并没有慌，因为:inserta:是一个 130 公斤的胖子，天气又辣么热.';
let insertX = ['怪兽威利','大老爹','圣诞老人'];
let insertY = ['肯德基','迪士尼乐园','白宫'];
let insertZ = ['自燃了','在人行道化成了一坨泥','变成一条鼻涕虫爬走了'];

其中:inserta:是占位符

放置事件处理器并补全result()函数

// 事件监听器
randomize.addEventListener('click', result);function result() {let newStory = storyText;
// 随机返回数组中的元素let xItem = randomValueFromArray(insertX);let yItem = randomValueFromArray(insertY);let zItem = randomValueFromArray(insertZ);
//  用正则匹配，用随机元素替换掉占位符 newStory = newStory.replace(/:inserta:/, xItem);newStory = newStory.replace(/:inserta:/, xItem);newStory = newStory.replace(/:insertb:/, zItem);newStory = newStory.replace(/:insertc:/, yItem);
// 如果customName中有值就替换掉默认的李雷if(customName.value !== '') {let name = customName.value;newStory = newStory.replace('李雷', name);}
// american若被选中，进行单位转换然后替换文本if(document.getElementById("american").checked) {let weight = Math.round(140 * 2.20462) + '磅';let temperature = Math.round(35 * 9/5 + 32) + '华氏度';newStory = newStory.replace('34 摄氏度',temperature);newStory = newStory.replace('130 公斤',weight);}
//   将 story.textContent（程序中显示笑话结果的段落） 赋值为 newStory。story.textContent = newStory;story.style.visibility = 'visible';
}

三、效果展示

四、总结

4.1 向html中添加JavaScript的方法

HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。

内部：在 </head> 标签结束前插入以下代码

<script>// 在此编写 JavaScript 代码</script>

内部示例用事件监听器避免js加载于HTML渲染完成前

document.addEventListener("DOMContentLoaded", function() {. . .
});

外部：

<script src="script.js" async></script>

外部示例用async“异步”属性或者defer避免js加载于HTML渲染完成前。

async ：浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。脚本的运行次序就无法控制。
defer ：脚本将按照在页面中出现的顺序加载和运行。

<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>

4.2 变量

注意要声明变量：用var或者let，但最好用let。
注意变量的命名规则：不要用下划线和数字开头，避免用保留字给变量命名。
数字与字符的转换：

Number()可以把传递给它的任何东西转换成一个数字。
每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串。

let myString = '123';
let myNum = Number(myString);
typeof myNum;

let myNum = 123;
let myString = myNum.toString();
typeof myString;

4.3 有用的字符串方法

indexOf()

在字符串中查找子字符串并提取，可以用来过滤字符串。

browserType.indexOf('zilla'); //2
browserType.indexOf('vanilla'); //-1

第一行结果是2，因为子字符串“zilla”从“mozilla”内的位置2开始。
第二行得到 -1 的结果：当在主字符串中找不到子字符串时将返回 -1。

slice()

slice()可以用来提取字符串中的子字符串，在已知开始的位置和想要结束的字符时。

browserType.slice(0,3);
browserType.slice(2);

第一行返回：“moz”；
第二行返回“zilla”，因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。

toLowerCase()和toUpperCase()

实现大小写转换

let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

replace()

替换字符串中的某部分，需要两个参数 - 要被替换下的字符串和要被替换上的字符串。

browserType = browserType.replace('moz','van');

4.4 有用的数组方法

split()

实现字符串和数组之间的转换。需要一个参数-要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(',');
myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle']

用join()方法将数组变成字符串

let myNewString = myArray.join(',');
myNewString = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

数组转换为字符串的另一种方法是使用 toString() 方法

let dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

push() 和 pop()

添加和删除数组元素。

push()你需要添加一个或多个要添加到数组末尾的元素
从数组中删除最后一个元素的话直接使用 pop()

var newLength = myArray.push('Bristol');
myArray.pop();

unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同。只是它们分别作用于数组的开始，而不是结尾。

myArray.unshift('Edinburgh');
let removedItem = myArray.shift();

【JavaScript】笑话生成器相关推荐

使用 Flutter 制作一个简单的笑话生成器应用程序
在本教程中,我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序对于这个项目,我们将从 RESTful API 获取数据 API的链接: 随机笑话对于这个项目,我不会关注应用程序 ...
html+css+JavaScript的简单笑话生成器
** 在JavaScript MDN上面看到的一个挺简单的小案例注意:尽量不要把js文件放到head里面,会监听不到事件 ** // html<body><div><l ...
JavaScript：生成器函数
在介绍生成器函数之前先了解一下ES6的一个关键字,名为yield yield关键字,可以让代码在其出现的地方暂停执行,它只能在生成器函数内部使用. 生成器函数生成器函数的语法比较简单在普通函数声明的 ...
JavaScript 密码生成器
// 随机生成密码函数 // length:长度 // lower:包含小写 // upper:包含大写 // number:包括数字 // symbol:包括符号 function generate ...
JavaScript PopUp生成器
目录介绍使用程序弹出窗口(PopUp )如何工作一些例子渐隐,样式和退出键关闭将随机图像显示为Splash 结论下载源代码363.5 KB 自己尝试介绍这只是非正式的脚本展示,并非详 ...
JavaScript:表格生成器
样式: <style>tr,td,table,thead,tbody {margin: 0;padding: 0;}table {width: 300px;text-align: cent ...
深入理解ES6之迭代器与生成器
迭代器迭代器 iterator,在 Javascript 中,迭代器是一个对象(也可称作为迭代器对象),它提供了一个 next() 方法,用来返回迭代序列中的下一项. next 方法的定义,next ...
谁也别拦我！今天我要曝光JavaScript 资源大全中文版！
JavaScript 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...
JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）
JavaScript资源大全中文版(Awesome最新版) 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行器 QA 工具基于 Node 的 CMS 框架 ...

【JavaScript】笑话生成器