根据MDN网站学习记录笔记

---

一、项目目标

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

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

二、项目流程

1. 初始化变量和函数

• 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:是占位符

2. 放置事件处理器并补全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 元素之前，则代码将出错。

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

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

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

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

2. 外部：

<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 变量

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

• 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();