菜鸟上路之前端知识整理笔记（7）

之前给大家推荐过一本书《Head First HTML与CSS》,今天我们来看看同系列的另外一本入门的经典书籍《Head First html5 Programming》

下面会有一部分知识点出自这本书中，在此声明，其次强烈推荐刚入门的前端菜鸟详细阅读此书。

一、JavaScript基础

1、DOM（Document Object Model ）文档对象模型：

html中的每一个元素，浏览器都回场检一个表示给元素的对象，然后把所有元素都放到一个类似“树”的结构中，我们把这整个“树结构”称之为文档对象模型。

JS是通过DOM与页面交互。

2、API（Application Programming Interface）应用编程接口：

API是一组定义、程序及协议的集合，通过 API 接口实现计算机软件之间的相互通信，在web里面，API提供了一组对象、方法和属性，可以用来访问这些技术的所有功能。

通过API可以访问音频、视频、使用画布完成2D绘图、访问本地储存，还可以使用构建应用所需的很多其他优秀技术。而想要使用所有这些API，都需要用到JS。

web页面已经变成了一种成熟的应用，不仅有行为，可以动态更新，还可以与用户交互。构建这种页面需要一些编程，包括JS。

3、编写正式的JS：

接下来要做的就是将下面的代码完整的写一遍，找一下感觉，当然刚开始学里面肯定会有很多不理解的地方。

下面是对这段代码的逐行逐句的注释。

---

var drink="Energy Drink";

//声明一个变量，并将它赋值为“Energy Drink”。

var lyrics="";

//声明另一个变量，把他赋值为一个空串。

var cans=99;

//再声明一个变量，赋为一个数值为99.

while (cans>0){

/*

这是一个whlie循环，它指出，只要cans的数目大于0，就反复做大于号之间的工作。

没有cans时（cans为0）则停止循环。

*/

lyrics=lyrics+cans+"cans of"+drink+"on the wall
";

//使用字符串链接操作符“+”，把下一行歌词增加到变量lyrics。用
换行符结束这一行。

lyrics=lyrics+cans+"cans of"+drink+"
";

//在做同样的工作。

lyrics=lyrics+"take one down,pass it around,
";

//增加下一句，同样用字符串链接。

if (cans>1){

/*

如果还剩下饮料罐（也就是说，cans大于1）

*/

lyrics=lyrics+(cans-1)+"cans of"+drink+"on the wall
";

//增加最后一行。

}

else {

lyrics=lyrics+"no more cans of"+drink+"on the wall
";

//否则不再有剩余的饮料罐。

//所以在歌词的后面增加“no more cans”。

}

cans=cans-1

//将剩余的cans数目-1.

}

document.write(lyrics);

//*我们已经把这首歌的每一行都保存到了变量lyrics中，所以现在可以告诉web页面将歌词写出来，

这说明这个字符串会增加到页面，使你能看到这首歌。*//

---

（上面这些代码写好之后保存好，下面还会用到）

4、运行测试：

将上面写好的js代码嵌入到html里面。

再到浏览器里面打开看看效果。

这是运行这个代码的结果，这个代码会为墙上的99瓶罐装啤酒创建完整的歌词。

个人公众号：萝卜炖肉 感谢关注。