之前给大家推荐过一本书《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瓶罐装啤酒创建完整的歌词。
个人公众号：萝卜炖肉 感谢关注。
网友评论