JavaScript概述doc.docx
- 文档编号:8853022
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:13
- 大小:758.20KB
JavaScript概述doc.docx
《JavaScript概述doc.docx》由会员分享,可在线阅读,更多相关《JavaScript概述doc.docx(13页珍藏版)》请在冰豆网上搜索。
JavaScript概述doc
第章
JavaScript入门
(
视频讲解:
20分钟)
在学习JavaScript前,应该了解什么是JavaScript、JavaScriptr的特点及其编写工具和在HTML中的使用等,通过了解这些内容来增强对JavaScript语言的理解以方便以后更好地学习。
本章能够完成的主要范例(已掌握的在方框中打勾)
应用Dreamweaver工具在HTML中直接嵌入JavaScript代码
在index.html文件中调用外部JavaScript文件function.js
使用JavaScript脚本输出一个“你好JavaScript”字符串
1.1JavaScript概述
JavaScript是Web页面中的一种脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。
它不需要进行编译,而是直接嵌入在HTML页面中,把静态页面转变成可以和用户交互并响应相应事件的动态页面。
1.1.1JavaScript的发展历程
JavaScript语言的前身是LiveScript语言,由美国Netscape(网景)公司的布瑞登·艾克(BrendanEich)为即将在1995年发布的Navigator2.0浏览器的应用而开发的脚本语言。
在与Sun(升阳)公司联手及时完成了LiveScript语言的开发后,就在Navigator2.0即将正式发布前,Netscape公司将其改名为JavaScript,也就是最初的JavaScript1.0版本。
虽然当时JavaScript1.0版本还有很多缺陷,但拥有JavaScript1.0版本的Navigator2.0浏览器几乎主宰着整个浏览器市场。
因为JavaScript1.0如此成功,Netscape公司在Navigator3.0中发布了JavaScript1.1版本。
同时,微软开始进军浏览器市场,发布了InternetExplorer3.0并搭载了一个JavaScript的类似版本,其注册名称为JScript,这成为JavaScript语言发展过程中的重要一步。
在微软进入浏览器市场后,此时有3种不同的JavaScript版本同时存在:
Navigator中的JavaScript、IE中的JScript及CEnvi中的ScriptEase。
与其他编程语言不同的是,JavaScript并没有一个标准来统一其语法或特性,而这3种不同的版本恰恰突出了这个问题。
1997年,JavaScript1.1版本作为一个草案提交给欧洲计算机制造商协会(ECMA),最终由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司程序员组成了TC39委员会,该委员会被委派来标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义。
TC39委员会制定了“ECMAScript程序语言的规范书”(又称为“ECMA-262标准”),该标准由国际标准化组织(ISO)采纳通过,作为各种浏览器生产开发所使用的脚本程序的统一标准。
1.1.2JavaScript的主要特点
JavaScript脚本语言主要有以下几个特点:
解释性
JavaScript不同于一些编译性的程序语言,例如C、C++等,它是一种解释性的程序语言,它的源代码不需要经过编译,而是直接在浏览器中运行时被解释。
基于对象
JavaScript是一种基于对象的语言。
这说明它能运用已经创建的对象。
因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
事件驱动
JavaScript可以直接对用户或用户输入做出响应,无须经过Web服务程序。
它对用户的响应是以事件驱动的方式进行的。
所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,此动作称为“事件”。
比如按鼠标、移动窗口、选择菜单等都可以视为事件。
事件发生后,可能会引起相应的事件响应。
跨平台
JavaScript依赖浏览器本身,与操作环境无关,只要有支持JavaScript浏览器的计算机就可以正确执行。
安全性
JavaScript是一种安全的语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,这可有效地防止数据丢失。
1.1.3JavaScript的典型应用
使用JavaScript脚本实现的动态页面在Web上随处可见。
下面将介绍几种JavaScript常见的应用。
验证用户输入的内容
使用JavaScript脚本语言可以在客户端对用户输入的数据进行验证。
例如,在制作用户注册信息页面时,要求用户输入确认密码,以验证两次输入的密码是否一致。
如果用户在“确认密码”文本框中输入的信息与“密码”文本框中输入的信息不同,将弹出相应的提示信息,如图1.1所示。
图1.1验证两次输入的密码是否一致
文字特效
使用JavaScript脚本语言可以使文字实现多种特效,如图1.2所示。
图1.2文字特效
动画效果
在浏览网页时,经常会看到一些动画效果,使页面显得更加生动。
使用JavaScript脚本语言也可以实现这样的动画效果,例如,在页面中实现下雪的效果,如图1.3所示。
窗口的应用
在打开网页时经常会看到一些浮动的广告窗口,这些广告窗口是网站最大的盈利手段。
这些窗口也可以通过JavaScript脚本语言来实现,如图1.4所示。
图1.3动画效果
图1.4窗口的应用
京东网上商城应用的JQuery效果
访问京东网上商城的首页时,在页面右侧有一个为手机和游戏充值的栏目,这里应用了JQuery实现了标签页的效果:
将鼠标指针移动到“手机充值”栏目上时,标签页中将显示为手机充值的相关内容;将鼠标指针移动到“游戏充值”栏目上时,将显示为游戏充值的相关内容,如图1.5所示。
图1.5京东网上商城应用的JQuery效果
应用AJAX技术实现XX搜索提示
在XX首页的搜索文本框中输入要搜索的关键字时,下方就会自动给出相关提示。
如果给出的提示中有符合要求的内容,可以直接进行选择。
例如,输入“明日科”后,在下面将显示如图1.6所示的提示信息。
图1.6XX搜索提示页面
1.2JavaScript运行环境
JavaScript本身是一种脚本语言,不是一种工具,实际运行JavaScript代码的软件是环境中的解释引擎——NetscapeNavigator或MicrosoftInternetExplorer浏览器。
JavaScript依赖浏览器的支持而工作。
1.2.1硬件要求
在使用JavaScript进行程序开发时,要求使用的硬件开发环境如下:
首先必须具备运行Windows98、WindowsXP、WindowsVista、Windows7、Windows2000等及其ServicePack2或更高版本的基本硬件配置环境。
至少有512MB以上的内存。
640*480分辨率以上的显示器,建议使用1024*768。
至少1G以上的可用硬盘空间。
1.2.2软件要求
本书介绍的JavaScript基本功能适用于大部分浏览器。
为了能够更好地运行本书程序,建议读者的软件安装配置如下:
WindowsXP、Windows7操作系统。
NetscapeNavigator3.0或InternetExplorer6.0以上版本。
1.2.3浏览器对JavaScript脚本的支持
由于各浏览器对JavaScript脚本支持的不一致,因此,在进行JavaScript脚本编程时,首先应确定用户使用的浏览器类型,然后根据浏览器类型编写JavaScript脚本。
下面将介绍Netscape的Navigator浏览器和Microsoft的InternetExplorer浏览器。
1.NetscapeNavigator(网景浏览器)
NetscapeNavigator是最早,也是最有影响力的网页浏览器之一。
由于IE浏览器和微软的Windows操作系统捆绑在一起,因此对网景浏览器的市场发展造成了巨大影响,使它逐渐淡出主流浏览器的行列。
下面介绍NetscapeNavigator的版本及其支持的JavaScript版本,如表1.1所示。
表1.1NetscapeNavigator版本及所支持的JavaScript版本
浏览器版本
JavaScript版本
Navigator2.0
JavaScript1.0
Navigator3.0
JavaScript1.1
Navigator4.0
JavaScript1.2
Navigator4.5
JavaScript1.3
Navigator6.0
JavaScript1.5
Navigator7.0
JavaScript1.5
2.MicrosoftInternetExplorer(微软浏览器)
InternetExplorer(IE)是微软公司推出的一款网页浏览器。
IE浏览器不是最早的浏览器,自推出之日起它就是免费的。
从一定程度上说,是微软提供免费的IE浏览器后带动了整个互联网的发展。
下面介绍InternetExplorer浏览器版本的变化及其所支持的JavaScript版本,如表1.2所示。
表1.2IE浏览器版本及所支持的JavaScript版本
浏览器版本
JavaScript版本
InternetExplorer3
JavaScript1.1
InternetExplorer4
JavaScript1.3
续表
浏览器版本
JavaScript版本
InternetExplorer5
JavaScript1.4
InternetExplorer5.5
JavaScript1.5
InternetExplorer6
JavaScript1.5
InternetExplorer7
JavaScript1.5
InternetExplorer8
JavaScript1.5
InternetExplorer9
JavaScript1.8
1.3JavaScript的开发工具
编辑JavaScript脚本可以使用任何一种文本编辑器,如Windows中的记事本、写字板等应用软件。
由于JavaScript程序可以嵌入到HTML文件中,因此读者可以使用任何一种编辑HTML文件的工具软件,如MacromediaDreamweaver和MicrosoftFrontPage等。
1.3.1MacromediaDreamweaver
Dreamweaver是当今流行的网页编辑工具之一,它采用了多种先进技术,提供图形化程序设计窗口,能够快速高效地创建网页,并生成与之相关的程序代码,使网页创作过程简单化,生成的网页也极具表现力。
从DreamweaverMX开始,Dreamweaver开始支持可视化开发,这对于初学者来说确实是一个比较好的选择,因为它是所见即所得的,其特征包括语法加亮、函数补全、参数提示等。
值得一提的是,Dreamweaver在提供强大的网页编辑功能的同时,还提供了完善的站点管理机制,极大地方便了程序员对网站的管理工作。
Dreamweaver工具的开发环境如图1.7所示。
图1.7Dreamweaver工具的开发环境
Dreamweaver工具的开发环境有3种视图形式,分别为“代码”视图、“拆分”视图和“设计”视图。
在“代码”视图中可编辑代码;在“拆分”视图中可以同时编辑“代码”视图和“设计”视图中的内容;在“设计”视图中可以在页面中插入HTML元素,进行页面布局和设计。
1.3.2MicrosoftFrontPage
FrontPage是微软公司开发的一款强大的Web制作工具和网络管理向导,包括HTML处理程序、网络管理工具、动画图形创建和编辑工具,以及Web服务器程序。
通过FrontPage创建的网站不仅内容丰富,而且专业。
最值得一提的是,它的操作界面与Word的操作界面极为相似,非常容易学习和使用。
FrontPage工具的开发环境如图1.8所示。
图1.8FrontPage工具的开发环境
1.4在HTML中使用JavaScript
通常情况下,在HTML中使用JavaScript有以下两种方法:
一种是在页面中直接嵌入JavaScript代码,另一种是在页面中链接外部JavaScript文件。
下面分别对这两种方法进行介绍。
1.4.1在页面中直接嵌入JavaScript脚本
在HTML文档中可以使用标记对将JavaScript脚本嵌入到其中;在HTML文档中可以使用多个
【例1.2】在index.html文件中调用外部JavaScript文件function.js,运行index.html文件,在浏览器中输出欢迎信息。
实例位置:
光盘\MR\Instance\01\1.2
首先编写外部的JavaScript文件,命名为function.js。
function.js文件的代码如下:
document.write('欢迎来到JavaScript的世界!
');
然后在index.html页面中调用文件function.js,代码如下:
在浏览器中运行index.html页面,如图1.10所示。
图1.10调用外部JavaScript文件输出欢迎信息
注意:
在外部JavaScript文件中,不需要将脚本代码用标记括起来。
1.5综合应用
【例1.3】制作一个HTML页面,在该页面中使用JavaScript脚本输出一个“你好JavaScript”字符串。
实例位置:
光盘\MR\Instance\01\1.3
通过JavaScript在网页中输出字符串使用的是Document对象的write()方法,代码如下:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
document.write("你好JavaScript");