1.4.1 我们为什么需要JavaScript
如果将一个网页类比为一个人,HTML构建了其骨架,CSS为其着装打扮,而JavaScript则为其赋予灵魂。不夸张地说,JavaScript就是网页应用的灵魂。通过前面的学习,我们知道,HTML和CSS的主要作用是对网页的渲染进行布局和调整。要使得网页拥有强大的功能并且可以与用户进行复杂的交互,都需要使用JavaScript来完成。
首先,JavaScript能够动态改变HTML组件的内容。创建一个名为js.html的文件,在其中编写如下示例代码:
【代码片段1-13 源码见附件代码/第1章/4.js.html】
上面的代码中使用到了几个核心的知识点,在HTML标签中可以直接内嵌CSS样式表,为其设置style属性即可,内嵌的样式表要比外联的样式表优先级更高。button标签是HTML中定义按钮的标签,其中onclick属性可以设置一段JavaScript代码,当用户单击按钮组件会调用这段代码,如以上代码所示,当用户单击按钮时,我们让其执行了clickFunc函数。clickFunc函数定义在script标签中,其实现了简单的计数功能,document对象是当前的文档对象,调用其getElementById方法可以通过元素标签的id属性的值来获取对应的元素,调用innerText可以对元素标签内的文本进行设置。运行代码,可以看到网页上渲染了一个标题和按钮,通过单击按钮,标题上显示的数字会进行累加,如图1-14所示。
图1-14 使用JavaScript实现计数器
使用JavaScript也方便对标签元素的属性进行设置和修改,例如在页面中添加一个图片元素,通过单击按钮来设置其显示和隐藏状态。
【代码片段1-14 源码见附件代码/第1章/4.js.html】
HTML代码:
JavaScript代码:
可以看到,使用JavaScript获取标签的属性非常简单,直接使用点语法即可。同理,我们也可以通过这种方式来灵活地控制网页上元素的样式,只需要修改元素的style属性即可。运行上面的代码,在网页中单击按钮,可以看到图片元素会交替显示与隐藏。
使用JavaScript很容易对HTML文档中的元素进行增删,有时一个非常简单的HTML文档能够实现非常复杂的页面,其实都是通过JavaScript来动态渲染的。