1.6.3　JavaScript

JavaScript（简称JS）是一种具有函数优先的轻量级、解释型的编程语言。它是因为开发Web页面的脚本语言而出名的，但是也被用到了很多非浏览器环境中，JavaScript是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式的编程风格。简单来说，JavaScript是能被浏览器解释并执行的一种编程语言。

JavaScript可以在HTML文件中编写，但在企业开发中也是采用HTML和JavaScript代码分离。为了更好地理解JavaScript的代码编写方式，我们在qd文件夹中新建index.js文件，qd文件夹的目录结构如图1-6所示。

图1-6　qd文件夹的目录结构

首先打开index.html文件，在HTML代码中引入JS文件，并为button标签添加事件触发，详细代码如下：

从上述代码看到，script标签是在HTML代码中引入JS文件，使得JS文件的JavaScript代码能在HTML代码中生效。button标签添加了onclick属性，该属性是JS的事件触发的，当用户单击“提交”按钮的时候，浏览器将会触发事件onclick所绑定的getInfo()函数。

JavaScript除了事件触发onclick之外，还提供了其他的事件触发，如表1-2所示。

表1-2　JavaScript的事件触发

我们回看index.html的button标签，由于该标签的事件触发onclick绑定了getInfo()函数，因此下一步在index.js中定义getInfo()函数，该函数的代码如下：

上述代码的document.getElementById是获取id="message"的标签（input标签）的属性value的属性值，JavaScript的document对象简称为DOM对象，它可以定位某个HTML标签并进行操作，从而实现网页的动态效果。document对象定义了7个对象方法，每个对象方法的详细说明如表1-3所示。

表1-3　document对象方法

在实际开发中，我们经常使用getElementById、getElementsByName和getElementsByTagName方法来定位HTML标签，然后对已定位的HTML标签进行操作，由于标签的操作方法较多，本书便不再详细讲述了，有兴趣的读者可自行搜索相关资料。

最后保存index.js文件的JavaScript代码，在浏览器中打开index.html文件，在网页的文本框输入内容并单击“提交”按钮，如图1-7所示。

图1-7　网页效果