### JavaScript的效果演示
利用一个点灯的程序来介绍今天的内容
代码5.1： 点灯程序
### JavaScript的起源
在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的简单软件。而在JavaScript出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。
JavaScript是Netscape Navigator公司和Sun公司合作开发的，这个语言刚发布时，Netscape Navigator（网景）主宰浏览器的市场。微软用IE浏览器和网景竞争，面对竞争，网景和Sun联合了ECMA（欧洲计算机制造商协会）对JavaScript进行了标准化，所以ECMAScript就是JavaScript的另一个名字。（后来网景浏览器市场被微软抢占了，那就是另外一个故事了。）
这里需要注意的是，JavaScript和Java是两种完全不一样的语言，JavaScript比Java简单很多。
### JavaScript的三种引入方式
比较差的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<script>
//JavaScript就放在这里
</script>
</head>
<body>
</body>
</html>
比较好的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
最好的引入方式，这种方式可以让浏览器更快地加载页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
</head>
<body>
<!--这里是HTML元素-->
<script src="file.js"></script>
</body>
</html>
### JavaScript的语法
（这里我不会讲，因为我介绍完语法之后，这节课就没了，所以我会直接放一些简单的小例子，因为JavaScript的语法和C语言的差不多）
### DOM元素
（这个概念昨天我们上课已经讲过了，这里我也不再重复讲）
### JavaScript五个常用DOM方法
-
getElementById
-
getElementByTagName
-
getElementsByClassName
-
getAttribute
-
setAttribute
其中获取元素的方法有三种
-
getElementById
-
getElementsByTagName
-
getElementsByClassName
代码5.2 演示getElementById
代码5.3 演示getElementByTagName（返回的是一个数组）
代码5.4 演示getElementsByClassName (返回的是一个数组)
getAttribute与之前的那三个函数不同，它不属于document对象，所以不能通过document对象调用。它只能通过元素节点对象调用。它需要结合document对象使用。
代码5.5 演示getAttribute
setAttribute是用来修改属性节点的。它也是通过元素节点调用的。
代码5.6 演示setAttribute
### JavaScript的应用案例：图片库（从简单到复杂）
代码5.7.1 规划布局一
在原有情况的基础上，希望点击链接时，我们不是跳转到其他页面，而是图片会轮流出现。
代码5.7.2 规划布局二，添加一个空白图片的框
想要把空白图片替换为其他图片，我们可以用到setAttribute来改变src的值，
我们给这个函数取名为ShowPic，函数的参数我们记为whichpic
即 function ShowPic(whichpic)
whichpic代表着一个元素节点，具体地说，那时一个指向某个图片的<a>元素，我们需要分解出图片的文件路径，可以通过whichpic元素上调用getAttribute得到，只要把“href”传递给getAttribute就可以了
即 whichpic.getAttribute("href")，然后我们把这个路径存入变量source
let source = whichpic.getAttribute("href")
接下来，我们还需要获取“空白图片”，这可以用getElementById
document.getElementById("placeholder")
这段代码有点长，我们也拿一个变量来保存它
let place = document.getElementById("placeholder")
现在，我们已经声明并赋值了两个变量：source和place。它们可以让代码更加简单易读。
我们将使用setAttribute对place元素的src属性进行刷新。
还记得吗？这个方法有两个参数，一个是属性名，一个是属性的值。具体到这个例子，因为我们将要改变的属性是src，所以属性名是src，属性值则是我们被我们保存到了source里面。
于是代码应该为place.setAttribute("src", source);
整体下来函数应该为：
function showPic(whichpic) {
let source = whichpic.getAttribute("href");
let place = document.getElementById("placeholder");
place.setAttribute("src", source);
}
代码5.7.3 规划布局三，把函数应用到代码中
在点击这个函数的同时，我们还会跳转到其他的页面。那么我们能不能不跳转到其他界面呢？
onclick其实是一个事件函数，当它返回true时，链接才会跳转，返回false时，链接不会跳转。
可以做一个实验：
代码5.7.4 一个小实验。
于是我们可以得到5.7.5 给onclick添加return false之后实现的图片轮换效果
### 今天的作业：给自己原来的网站添加图片库效果。