- Django+Vue.js商城项目实战
- 黄永祥编著
- 683字
- 2024-12-27 21:09:03
1.6.3 JavaScript
JavaScript(简称JS)是一种具有函数优先的轻量级、解释型的编程语言。它是因为开发Web页面的脚本语言而出名的,但是也被用到了很多非浏览器环境中,JavaScript是基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式的编程风格。简单来说,JavaScript是能被浏览器解释并执行的一种编程语言。
JavaScript可以在HTML文件中编写,但在企业开发中也是采用HTML和JavaScript代码分离。为了更好地理解JavaScript的代码编写方式,我们在qd文件夹中新建index.js文件,qd文件夹的目录结构如图1-6所示。
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-P25_1131.jpg?sign=1739118326-jpacwiMv1DX1ZwbEHetWDpNnz3qriVE1-0-64443251e048c6d3018559284fbf709f)
图1-6 qd文件夹的目录结构
首先打开index.html文件,在HTML代码中引入JS文件,并为button标签添加事件触发,详细代码如下:
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-P25_13863.jpg?sign=1739118326-kHP9TXb67wArAzYrpHXM9FvdliAZTM57-0-ea4559c9b146140a71ca63fedfca4479)
从上述代码看到,script标签是在HTML代码中引入JS文件,使得JS文件的JavaScript代码能在HTML代码中生效。button标签添加了onclick属性,该属性是JS的事件触发的,当用户单击“提交”按钮的时候,浏览器将会触发事件onclick所绑定的getInfo()函数。
JavaScript除了事件触发onclick之外,还提供了其他的事件触发,如表1-2所示。
表1-2 JavaScript的事件触发
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-T25_13865.jpg?sign=1739118326-6bJb9xyBmqdyUGtKYObFWJMn7wLIoEGW-0-89667f7aff89c019380f8b17b6892919)
我们回看index.html的button标签,由于该标签的事件触发onclick绑定了getInfo()函数,因此下一步在index.js中定义getInfo()函数,该函数的代码如下:
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-P26_13869.jpg?sign=1739118326-2gaPEDcmVOLnXA8NQl7AOEe1CPyf4Zsd-0-ddfa8d07c9727795f9663921dedce746)
上述代码的document.getElementById是获取id="message"的标签(input标签)的属性value的属性值,JavaScript的document对象简称为DOM对象,它可以定位某个HTML标签并进行操作,从而实现网页的动态效果。document对象定义了7个对象方法,每个对象方法的详细说明如表1-3所示。
表1-3 document对象方法
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-T26_13867.jpg?sign=1739118326-d0DAme5poyFIeU8fhhGQ5xoYP9Pli2qX-0-0ad4c68e2411ae3abfaf71430e444726)
在实际开发中,我们经常使用getElementById、getElementsByName和getElementsByTagName方法来定位HTML标签,然后对已定位的HTML标签进行操作,由于标签的操作方法较多,本书便不再详细讲述了,有兴趣的读者可自行搜索相关资料。
最后保存index.js文件的JavaScript代码,在浏览器中打开index.html文件,在网页的文本框输入内容并单击“提交”按钮,如图1-7所示。
![](https://epubservercos.yuewen.com/DAA20F/31397888507163106/epubprivate/OEBPS/Images/Figure-P27_1392.jpg?sign=1739118326-LOidWKL7r2JsaBA14RRvegkBn7ZshYvg-0-f0dbd7a063a9fc3252959a5213b6492a)
图1-7 网页效果