1.4.1　为什么需要JavaScript

如果将一个网页类比为一个人，HTML构建了其骨架，CSS为其着装打扮，而JavaScript则为其赋予了灵魂。不夸张地说，JavaScript就是网页应用的灵魂。通过前面的学习，我们知道，HTML和CSS的主要作用是对网页的渲染进行布局和调整，要使得网页拥有强大的功能并且可以与用户进行复杂的交互，都需要使用JavaScript来完成。

首先，JavaScript能够动态改变HTML组件的内容。创建一个名为js.html的文件，在其中编写如下示例代码：

上面的代码中使用到了几个核心的知识点，在HTML标签中可以直接内嵌CSS样式表，为其设置style属性即可，内嵌的样式表要比外联的样式表优先级更高。button标签是HTML中定义按钮的标签，其中onclick属性可以设置一段JavaScript代码，当用户单击按钮组件时会调用这段代码。如以上代码所示，当用户单击按钮时，我们让其执行了clickFunc函数。clickFunc函数定义在script标签中，其实现了简单的计数功能，document对象是当前的文档对象，调用其getElementById方法可以通过元素标签的id属性的值来获取对应元素，调用innerText可以对元素标签内的文本进行设置。运行代码，可以看到网页上渲染了一个标题和按钮，通过单击按钮，标题上显示的数字会进行累加，如图1-14所示。

使用JavaScript也可以方便地对标签元素的属性进行设置和修改。例如，我们在页面中再添加一个图片元素，通过单击按钮来设置其显示和隐藏状态：

图1-14　使用JavaScript实现计数器

HTML标签：

JavaScript代码：

可以看到，使用JavaScript获取标签的属性非常简单，直接使用点语法即可。同理，我们也可以通过这种方式来灵活地控制网页上元素的样式，只需要修改元素的style属性即可。运行上面的代码，在网页中单击按钮，可以看到图片元素会交替地进行显示与隐藏。

使用JavaScript也可以非常容易地对HTML文档中的元素进行增删，有时一个非常简单的HTML文档能够实现非常复杂的页面，其实都是通过JavaScript来动态渲染的。