Django 3 Web应用开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.10.3　JavaScript

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

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

图1-26　目录结构

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h3>这是标题</h3>
<div class="content">
<p>这是正文</P>
<input id="message" placeholder="输入你的留言">
<br>
<button id="submit" onclick="getInfo()">提交</button>
</div>
</body>
</html>

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

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

表1-4　JavaScript的事件触发

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

function getInfo(){
var txt = document.getElementById("message").value
if (txt){
    alert("你的留言：" + txt + "，已提交成功")
} else {
    alert("请输入你的留言");
}
}

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

表1-5　document对象方法

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

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

图1-27　网页效果

上一章目录下一章