前言
这一周我们学习了有关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的用处十分广泛,我们还可以运用这个来写更多的小程序。下一周我们讲讲如何利用这个写一个背单词小程序。