HTML第五周学习周记

---

前言

这一周我们学习了有关Javascript的内容

---

一、Javascript是什么？

JavaScript 是 Web 的编程语言，所有现代的 HTML 页面都使用 JavaScript。

二、我们可以用Javascript来做什么？

1.使用函数来构造对象

我们可以在Javascript函数语句中定义自己的对象名称参数，然后利用语句将他们合并输出，例子如下：

<script>
		var bmw = {
		    firstName: "百公里加速：4.4 ~ 4.6s",
		    secondName : "发动机1.5T/231马力",
			thirdName : "插电式混合动力",
			fourthName : "6挡手自一体",
		    id : 5566,
		    fullName : function() 
			{
		       return this.firstName + " " + this.secondName+" "+this.thirdName+" "+this.fourthName +" " +this.id;
		    }			
		};
		</script> 

在上述例子中我们定义了“bmw”的六个参数，前五个是我们想要表达的东西，第六个fullName则是调用了一个方法，就是把前五个参数一起输出来。结果如下图所示：

2.结合按钮，先隐藏内容，在用户点击之后输出

我们接着上一个例子继续把我们的程序给改进一下，此时我们要求把这些参数先隐藏，然后在用户触发某一个事件后再让它展示出来，这里我们用点击按钮作为触发事件。
我们先写一个方法来对此响应

<script>
		function myFunction(){
			document.getElementById("demo").innerHTML=bmw.fullName();
		}
		</script>

这个方法的意思就是会把demo里面的东西替换成我们bmw里面的fullName，然后我们再写一个段落和按钮来调用这个方法：

<p id="demo">查看宝马i8参数</p>
	<button type="button" onclick="myFunction()">点击这里</button>

这样我们就大功告成了，我们来看一下运行的效果：

点击之后

3.实现图片的来回切换

这里我们同样先写一个方法：

<script>
			function myFunction()
			{
				var el=document.getElementById("image")
				if (el.src.match("backgroud1"))
				{
				el.src="images/backgroud2.jpg";
				}else{
			    el=document.getElementById("image").src="images/backgroud1.jpg";
				}
			}
		</script>

这里我们是新定义了一个变量el然后用了if else语句来做一个判断以便实现图像的来回切换，然后再和上面一个例子同理，写一个按钮和一张初始图片就可以了。

---

总结

Javascript的用处十分广泛，我们还可以运用这个来写更多的小程序。下一周我们讲讲如何利用这个写一个背单词小程序。