第章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技术实现百度搜索提示在百度首页的搜索文本框中输入要搜索的关键字时,下方就会自动给出相关提示.
如果给出的提示中有符合要求的内容,可以直接进行选择.
例如,输入"明日科"后,在下面将显示如图1.
6所示的提示信息.
图1.
6百度搜索提示页面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.
0JavaScript1.
0Navigator3.
0JavaScript1.
1Navigator4.
0JavaScript1.
2Navigator4.
5JavaScript1.
3Navigator6.
0JavaScript1.
5Navigator7.
0JavaScript1.
52.
MicrosoftInternetExplorer(微软浏览器)InternetExplorer(IE)是微软公司推出的一款网页浏览器.
IE浏览器不是最早的浏览器,自推出之日起它就是免费的.
从一定程度上说,是微软提供免费的IE浏览器后带动了整个互联网的发展.
下面介绍InternetExplorer浏览器版本的变化及其所支持的JavaScript版本,如表1.
2所示.
表1.
2IE浏览器版本及所支持的JavaScript版本浏览器版本JavaScript版本InternetExplorer3JavaScript1.
1InternetExplorer4JavaScript1.
3续表浏览器版本JavaScript版本InternetExplorer5JavaScript1.
4InternetExplorer5.
5JavaScript1.
5InternetExplorer6JavaScript1.
5InternetExplorer7JavaScript1.
5InternetExplorer8JavaScript1.
5InternetExplorer9JavaScript1.
81.
3JavaScript的开发工具编辑JavaScript脚本可以使用任何一种文本编辑器,如Windows中的记事本、写字板等应用软件.
由于JavaScript程序可以嵌入到HTML文件中,因此读者可以使用任何一种编辑HTML文件的工具软件,如MacromediaDreamweaver和MicrosoftFrontPage等.
1.
3.
1MacromediaDreamweaverDreamweaver是当今流行的网页编辑工具之一,它采用了多种先进技术,提供图形化程序设计窗口,能够快速高效地创建网页,并生成与之相关的程序代码,使网页创作过程简单化,生成的网页也极具表现力.
从DreamweaverMX开始,Dreamweaver开始支持可视化开发,这对于初学者来说确实是一个比较好的选择,因为它是所见即所得的,其特征包括语法加亮、函数补全、参数提示等.
值得一提的是,Dreamweaver在提供强大的网页编辑功能的同时,还提供了完善的站点管理机制,极大地方便了程序员对网站的管理工作.
Dreamweaver工具的开发环境如图1.
7所示.
图1.
7Dreamweaver工具的开发环境Dreamweaver工具的开发环境有3种视图形式,分别为"代码"视图、"拆分"视图和"设计"视图.
在"代码"视图中可编辑代码;在"拆分"视图中可以同时编辑"代码"视图和"设计"视图中的内容;在"设计"视图中可以在页面中插入HTML元素,进行页面布局和设计.
1.
3.
2MicrosoftFrontPageFrontPage是微软公司开发的一款强大的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文档中可以使用多个标记,每个标记中可以包含多个JavaScript的代码集合.
标记常用的属性及说明如表1.
3所示.
表1.
3标记常用的属性及说明属性说明language设置所使用的脚本语言及版本src指定外部脚本文件的路径位置type设置所使用脚本语言的类型,此属性已代替language属性defer此属性表示当HTML文档加载完毕后再执行脚本语言【例1.
1】应用Dreamweaver工具在HTML中直接嵌入JavaScript代码,如图1.
9所示.
实例位置:光盘\MR\Instance\01\1.
1图1.
9在HTML中直接嵌入JavaScript代码1.
4.
2链接外部JavaScript文件在HTML中引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式.
如果脚本代码比较复杂或是同一段代码可以被多个页面所使用,则可以将这些脚本代码放置在一个单独的文件中,并设置该文件的扩展名为.
js,然后在需要使用该代码的Web页面中链接该文件即可.
在Web页面中链接外部JavaScript文件的语法格式如下:【例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文件输出欢迎信息1.
5综合应用【例1.
3】制作一个HTML页面,在该页面中使用JavaScript脚本输出一个"你好JavaScript"字符串.
实例位置:光盘\MR\Instance\01\1.
3通过JavaScript在网页中输出字符串使用的是Document对象的write()方法,代码如下:使用JavaScript输出"你好JavaScript"字符串document.
write("你好JavaScript");运行结果如图1.
11所示.
图1.
11使用JavaScript输出"你好JavaScript"字符串1.
6本章小结本章主要对JavaScript初级知识进行了简单的介绍,包括JavaScript的主要特点、用于实现哪些功能、JavaScript语言的编辑工具、在HTML中的使用等,通过这些内容让读者对JavaScript先有一个初步的了解,为以后的学习奠定基础.
JUSTG,这个主机商第二个接触到,之前是有介绍到有提供俄罗斯CN2 GIA VPS主机活动的,商家成立时间不久看信息是2020年,公司隶属于一家叫AFRICA CLOUD LIMITED的公司,提供的产品为基于KVM架构VPS主机,数据中心在非洲(南非)、俄罗斯(莫斯科),国内访问双向CN2,线路质量不错。有很多服务商实际上都是国人背景的,有的用英文、繁体搭建的冒充老外,这个服务商不清楚是不是真...
昨天我们很多小伙伴们应该都有看到,包括有隔壁的一些博主们都有发布Vultr商家新的新用户注册福利活动。以前是有赠送100美元有效期30天的,这次改成有效期14天。早年才开始的时候有效期是60天的,这个是商家行为,主要还是吸引到我们后续的充值使用,毕竟他们的体验金赠送,在同类商家中算是比较大方的。昨天活动内容:重新调整Vultr新注册用户赠送100美元奖励金有效期14天今天早上群里的朋友告诉我,两年...
diyvm怎么样?diyvm这是一家低调国人VPS主机商,成立于2009年,提供的产品包括VPS主机和独立服务器租用等,数据中心包括香港沙田、美国洛杉矶、日本大阪等,VPS主机基于XEN架构,均为国内直连线路,主机支持异地备份与自定义镜像,可提供内网IP。最近,DiyVM商家对香港机房VPS提供5折优惠码,最低2GB内存起优惠后仅需50元/月。点击进入:diyvm官方网站地址DiyVM香港机房CN...