Web应用开发技术与案例教程
上QQ阅读APP看书,第一时间看更新

3.1 JavaScript基础

使用HTML语言和CSS技术已经可以制作漂亮的页面,但这样的页面仍然存在一定缺陷:页面的内容为静态内容;缺少用户与客户端浏览器的动态交互。

JavaScript可以实现用户与页面的动态交互。JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它于1995年由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现。因为Netscape公司与Sun公司(已由Oracle收购)合作,Netscape公司管理层希望它外观看起来像Java,因此取名为JavaScript。

JavaScipt语言具有以下特点。

● 脚本语言:JavaScript是一种脚本解释性语言,不需要编译器编译,直接由浏览器解释。

● 基于对象:JavaScript是一种基于对象的语言,在JavaScript中可以使用预创建的对象。

● 事件驱动:JavaScript采用事件驱动方式,包括页面加载和用户动作。

● 简单性:JavaScript是一种弱类型的语言,并未使用严格的数据类型,变量也不必先声明再引用。

● 动态性:JavaScript是动态的,它能够直接对用户的输入做出响应,无需经过Web服务器处理,从而能够得到很快的响应速度。

● 安全性:JavaScript是一种安全的语言,它不允许访问本地的硬盘,不能将数据存储到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地保证了数据的安全性。

● 跨平台性:JavaScript仅依赖于浏览器,与操作系统无关。只要浏览器支持JavaScript,它就能正确执行。

使用JavaScript可以轻松地实现与HTML的互操作,并且完成丰富的页面交互效果,可以通过嵌入或调入标准的HTML语言实现。

可以通过一个简单例子来了解JavaScript是如何嵌入HTML并实现的。创建一个HTML页面“HelloWorld.html”,输入代码,具体见【例3-1】。

【例3-1】 使用JavaScript的第一种方式。

978-7-111-63649-6-Chapter03-1.jpg

alert() 方法用于显示带有一条括号内指定消息和一个“确定”按钮的警告框。执行此页面,浏览器会先弹出一个显示“Hello World!”的弹窗,如图3-1a所示,用户单击“确定”按钮后,浏览器才继续显示文档内容,如图3-1b所示。

978-7-111-63649-6-Chapter03-2.jpg

图3-1 【例3-1】运行结果

a)【例3-1】弹窗 b)【例3-1】文档

由上例可见,如同HTML标记语言一样,JavaScript程序代码也可以用任何编辑软件进行编辑,且JavaScript代码由<script>…</script>标签说明。

方法一:在<script>头尾标签之间直接嵌入JavaScript代码。如【例3-1】中JavaScript代码的嵌入。

978-7-111-63649-6-Chapter03-3.jpg

方法二:在HTML文档中引用JavaScript文件。在<script>头标签中使用src属性指定引用的JavaScript文件,如【例3-2】所示。

【例3-2】 使用JavaScript的第二种方式。

978-7-111-63649-6-Chapter03-4.jpg

978-7-111-63649-6-Chapter03-5.jpg

文件HelloJS.js中是JavaScript代码,例如:

978-7-111-63649-6-Chapter03-6.jpg

此时,JS文件“HelloJS.js”必须与该HTML页面文件同目录,若不与该HTML页面文件同目录,则需要在文件名前指定路径。

【例3-2】的运行效果与【例3-1】是完全一致的。