第1课_概述.ppt

《第1课_概述.ppt》由会员分享，可在线阅读，更多相关《第1课_概述.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript语法基础JavaScript基础基础本章目录n1.1JavaScript简述n1.2JavaScript的的环环境要求境要求n1.3编写编写JavaScript的工具的工具n1.4编写第一个编写第一个JavaScript程序程序常用Script语言lJavaScript：NetScape公司为Navigator浏览器开发的，是写在HTML文件中的一种脚本语言，能实现网页内容的交互显示。lJscript：Microsoft公司为IE浏览器开发的，是写在HTML文件中的一种脚本语言，能实现网页内容的交互显示。lVBScript：主要用于ASP中开发服务器端的动态网页。1.1Ja

2、vaScript简述 n 什么是什么是JavaScriptnJavaScript的主要特点的主要特点nJavaScript的的应应用用什么是JavaScriptJavaScript是是Web页页面面中中的的一一种种脚脚本本编编程程语语言言，也也是是一一种种通通用用的的、跨跨平平台台的的、基基于于对对象象和和事事件件驱驱动动并并具具有有安安全全性性的的脚脚本本语语言言。它它不不需需要要进进行行编编译译，而而是是直直接接嵌嵌入入在在HTML页页面面中中（不不能能独独立立运运行行），把把静静态态页页面面转转变变成成支支持持用用户户交交互互并并响响应应相相应应事事件件的的动动态页态页面。面。JavaS

3、cript的主要特点JavaScript脚本脚本语语言的基本特点如下：言的基本特点如下：（1）解）解释释性性JavaScript不不同同于于一一些些编编译译性性的的程程序序语语言言，例例如如C、C+等等，它它是是一一种种解解释释性性的的程程序序语语言言，它它的的源源代代码码不不需需要要经过编译经过编译，而直接在，而直接在浏览浏览器中运行器中运行时时被解被解释释。（2）基于）基于对对象象JavaScript是是一一种种基基于于对对象象的的语语言言。这这意意味味着着它它能能运运用用自自己己已已经经创创建建的的对对象象。因因此此，许许多多功功能能可可以以来来自自于于脚脚本本环环境中境中对对象的方法与

4、脚本的相互作用。象的方法与脚本的相互作用。（3）事件）事件驱动驱动JavaScript可可以以直直接接对对用用户户或或客客户户输输入入做做出出响响应应，无无须须经经过过Web服服务务程程序序。它它对对用用户户的的响响应应，是是以以事事件件驱驱动动的的方方式式进进行行的的。所所谓谓事事件件驱驱动动，就就是是指指在在主主页页中中执执行行了了某某种种操操作作所所产产生生的的动动作作，此此动动作作称称为为“事事件件”。比比如如按按下下鼠鼠标标、移、移动动窗口、窗口、选择选择菜菜单单等都可以等都可以视为视为事件。当事件事件。当事件发发生后，可能会引起相生后，可能会引起相应应的事件响的事件响应应。（4）跨

5、平台）跨平台JavaScript依依赖赖于于浏浏览览器器本本身身，与与操操作作环环境境无无关关，只只要要能能运运行行浏浏览览器器的的计计算算机机，并并支支持持JavaScript的的浏浏览览器器就就可正确可正确执执行。行。（5）安全性）安全性JavaScript是是一一种种安安全全性性语语言言，它它不不允允许许访访问问本本地地的的硬硬盘盘，并并不不能能将将数数据据存存入入到到服服务务器器上上，不不允允许许对对网网络络文文档档进进行修改和行修改和删删除，只能通除，只能通过浏览过浏览器器实现实现信息信息浏览浏览或或动态动态交互。交互。这样这样可有效地防止数据的可有效地防止数据的丢丢失。失。虽然Ja

6、vaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展NetscapeNavigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是LiveScript；而Java的前身是Oak语言。下面对两种语言间的异同作如下比较：JavaScript和和Java的区别的区别一首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于In

7、ternet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展NetscapeNavigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。语言。JavaScript和Java的区别1其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。JavaScript和Java的区别2三、

8、两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。JavaScript和Java的区别3四、两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。静态绑定和动态绑

9、定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。JavaScript和Java的区别4五、代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaSc

10、ript使用.来标识；而Java使用.来标识。JavaScript和Java的区别51.2JavaScript的环境要求P4 n硬件要求n软件要求1.3编写JavaScript的工具编写编写JavaScript脚本程序的工具有多种，主要包括记事本、脚本程序的工具有多种，主要包括记事本、FrontPage、Dreamweaver、1stJavaScriptEditor和和UltraEdit32等，下面主要介绍前三种。等，下面主要介绍前三种。n使用记事本n使用FrontPagen使用DreamweaverJavaScript的作用和基本语法规则l使用JavaScript的各种功能，可以增强站点的动

11、态性和交互性。l提供用户交互l动态更改内容l验证数据l与其他任何语言一样，JavaScript也遵循一些基本的语法规则，如：l区分大小写l保持整个程序的统一风格（如平等函数中的语句使用代码缩进相同、使用分号风格要一致，要么全加要么全不加）l语句;语句块对齐l使用空格等缩进格式l使用注释/,/*/l标识符风格：尽量使用有意义的单词（如英文）作为标识符、避免出现缩写、除循环控制变量（如I,j,k等）外，不要使用单字符变量名、对于常量尽量使用大写加下划线作为标识符、对于常量最好习惯使用大写加下划线作为标识符、对于变量最好习惯使用小写加下划线作为标识符、函数名最好用小写字母开始、对象名最好以大写字母开

12、始）l源文件（.js文件和包括脚本的文件）：最好将各个对象放在单独的文件中、每个文件开头应有注释文字。使用记事本记记事事本本是是编编写写JavaScript代代码码的的最最简简单单的的工工具具，它它可可以以做做一一些些简简单单的的文文字字处处理理和和JavaScript代代码码的的局局部部修修改改。虽虽然然记记事事本本使使用用简简单单，但但如如果果使使用用它它编编写写一一些些复复杂杂的的JavaScript代码，则需要熟练掌握代码，则需要熟练掌握JavaScript的语法、对象等。的语法、对象等。例例1.1下面介绍使用记事本编写下面介绍使用记事本编写JavaScript程序，具体步骤如下。程序

13、，具体步骤如下。（1）单击）单击“开始开始”菜单，选择菜单，选择“程序程序”/“附件附件”/“记事本记事本”选项，打开记事本。选项，打开记事本。（2）在记事本的工作区域输入）在记事本的工作区域输入HTML标识符和标识符和JavaScript代码，具体代码如下。代码，具体代码如下。用记事本编写JavaScript程序window.alert(Hello Javascript);Hello Javascript使用FrontPage使用Dreamweaver1.4编写第一个JavaScript程序n编写JavaScriptn运行JavaScript程序n调试JavaScript程序编写JavaSc

14、riptJavaScript脚本在脚本在HTML文件中的位置有文件中的位置有3种。种。在在HTML的的标标记记中中的的任任何何位位置置。如如果果所所编编写写的的JavaScript程程序序用用于于输输出出网页的内容，应该将网页的内容，应该将JavaScript程序置于程序置于HTML文件中需要显示该内容的位置。文件中需要显示该内容的位置。在在HTML的的标标记记中中。如如果果所所编编写写的的JavaScript程程序序需需要要在在某某一一个个HTML文文件件中中多多次次使使用用，那那么么，就就应应该该编编写写JavaScript函函数数（function），并并将将函函数数置置身身于该于该HT

15、ML的的标记中。标记中。function check()alert(我被调用了);使用时直接调用该函数名就可以了。使用时直接调用该函数名就可以了。单击单击“提交提交”按钮，调用按钮，调用check()函数。函数。在在一一个个js的的单单独独的的文文件件中中。如如果果所所编编写写的的JavaScript程程序序需需要要在在多多个个HTML文文件件中中使使用用，或或者者，所所编编写写的的JavaScript程程序序内内容容很很长长，这这时时，就就应应该该将将这这段段JavaScript程程序序置置于于单单独独的的js文文件件中中，然然后后在在所所需需要要的的HTML文文件件“a.html”中中，通

16、过通过标记包含该标记包含该js文件。如：文件。如：被包含的被包含的ch1-1.js文件代码如下。文件代码如下。document.write(这是外部文件中JavaScript代码!);JavaScript作为客户端程序嵌入网页l使用Script标记在文档中直接嵌入语句。可将标识放入头部（在主页和其余部分代码之前装载使代码的功能更强大）或主体（以实现某些部分动态地创建文档）之间。l将JavaScript源文件（*.js）引用到html文档中。l将程序代码作为某个元素的事件属性值，或超链接的href属性值。将JavaScript文件引入 使用src属性引入外部的比较长的JavaScript文件中的

17、代码编写JavaScript（3）虽虽然然大大多多数数浏浏览览器器都都支支持持JavaScript，但但少少部部分分浏浏览览器器不不支支持持JavaScript，还还有有些些支支持持JavaScript的的浏浏览览器器为为了了安安全全问问题题关关闭闭了了对对的的支支持持。如如果果遇遇到到不不支支持持JavaScript脚脚本本的的浏浏览览器器，网网页页会会达达不不到到预预期期效效果果或或出出现现错错误误。解解决决这这个个问问题题可可以以使使用用以以下两种方法。下两种方法。qHTML注释符号注释符号HTML注注释释符符号号是是以以结结束束的的。如如果果在在此此注注释释符符号号内内编编写写Java

18、Script脚脚本本，对对于不支持于不支持JavaScript的浏览器，将会把编写的的浏览器，将会把编写的JavaScript脚本作为注释处理。脚本作为注释处理。q标记标记如如果果当当前前浏浏览览器器支支持持JavaScript脚脚本本，那那么么该该浏浏览览器器将将会会忽忽略略标标记记之之间间的的任任何何内内容容。如如果果浏浏览览器器不不支支持持JavaScript脚脚本本，那那么么浏浏览览器器将将会会把把这这两两个个标标记记之之间间的内容显示出来。通过此标记可以提醒浏览者当前使用的浏览器是否支持的内容显示出来。通过此标记可以提醒浏览者当前使用的浏览器是否支持JavaScript脚本。脚本。（

19、4）JavaScript脚本语言区分字母大小写脚本语言区分字母大小写。使用标记书写格式 l这是html注释标记，用于告知不支持javascript的浏览器忽略这些标记中包含的语句。/是Javascript的注释lJavascript语句以“；”结束l浏览器不支持JS的写法内容.作为href的属性值使用JavaScript写法Javascript红色部分是在html标记中加入JavaScript代码。注意：用作URL的javascript代码前要增加javascript:，以说明使用的是javascript协议，而在事件属性中的javascript代码前不需要加javascript进行说明。调试

20、JavaScript程序程序出错类型分为语法错误和逻辑错误两种。程序出错类型分为语法错误和逻辑错误两种。1语法错误语法错误语语法法错错误误是是在在程程序序开开发发中中使使用用不不符符合合某某种种语语言言规规则则的的语语句句，从从而而产产生生的的错错误误称称为为语语法法错错误误。例例如如，错错误误地地使使用用了了JavaScript的的关关键键字字，错错误误地地定定义义了了变变量量名名称等，这时，当浏览器运行称等，这时，当浏览器运行JavaScript程序时就会报错。程序时就会报错。例例如如，将将上上面面程程序序中中的的第第7行行中中的的语语句句改改写写成成下下述述语语句句，即即将将第第一一个个

21、字字符符由由小小写写字母改成大写字母。字母改成大写字母。Alert(我要学我要学JavaScript！);保存该文件后再次在浏览器中运行，程序就会出错。保存该文件后再次在浏览器中运行，程序就会出错。运行本程序，将会弹出如图运行本程序，将会弹出如图1.18所示的错误信息。所示的错误信息。调试JavaScript程序2逻辑错误逻辑错误有有些些时时候候，程程序序中中不不存存在在语语法法错错误误，也也没没有有执执行行非非法法操操作作的的语语句句，可可是是程程序序运运行行的的结结果果却却是是不不正正确确的的，这这种种错错误误叫叫做做逻逻辑辑错错误误。逻逻辑辑错错误误对对于于编编译译器器来来说说并并不不算

22、算错错误误，但但是是由由于于代代码码中中存存在在的的逻逻辑辑问问题题，导导致致运运行行结结果果没没有有得得到到期期望望的的结结果果。逻逻辑辑错错误误在在语语法法上上是是不不存存在在错错误误的的，但但是是从从程程序序的的功功能能上上看看是是Bug。它它是是最最难难调调试试和和发发现现的的Bug。因因为为它它们们不不会会抛抛出出任任何何错误信息。惟一能看到的就是程序的功能（或部分功能）没有实现。错误信息。惟一能看到的就是程序的功能（或部分功能）没有实现。例如，某商城实现商品优惠活动，如果用户是商城的会员，那么商品打八五折，代码如下。例如，某商城实现商品优惠活动，如果用户是商城的会员，那么商品打八五

23、折，代码如下。user=会员;if(user=会员)price=485*8.5;/485是商品价格,8.5是打的八五折alert(商品的会员价格是：+price);/输出商品的会员价运行程序时，程序没有弹出错误信息运行程序时，程序没有弹出错误信息 price=485*8.5/10;/485是商品价格,8.5/10是打的八五折对对于于逻逻辑辑错错误误而而言言，发发现现错错误误是是容容易易的的，但但要要查查找找出出逻逻辑辑错错误误的的原原因因却却很很困困难难。因因此此，在在编写程序的过程中，一定要注意使用语句或者函数的书写完整性，否则将导致程序出错。编写程序的过程中，一定要注意使用语句或者函数的书

24、写完整性，否则将导致程序出错。alert(“这是第一个JavaScript例子!”);document.write(“欢迎访问苏州学院主页！);外部外部JS脚本文件的创建与应用脚本文件的创建与应用Date.js文件创建：/vartmpDate=newDate();Date=tmpDate.getDate();Month=tmpDate.getMonth()+1;year=tmpDate.getFullYear();document.write(今天是：);document.write(year);document.write(年);document.write(Month);document.

25、write(月);document.write(Date);document.write(日);/myArray=newArray(6);myArray0=星期日;myArray1=星期一;myArray2=星期二;myArray3=星期三;myArray4=星期四;myArray5=星期五;myArray6=星期六;weekday=tmpDate.getDay();if(weekday=0|weekday=6)document.write(+myArrayweekday+);elsedocument.write(+myArrayweekday+);Date.js文件应用创建简单的脚本在Jav

26、aScript中显示时间l1、打开文本编辑器,键入开始和结束的标签:lll2、添加JavaScript语句l在变量中储存数据now=newDate();l计算结果localtime=now.toString();lutctime=now.toGMTString();l3、创建输出document.write(Localtime:+localtime+);ldocument.write(UTCtime:+utctime);l4、测试脚本（修改脚本-大钟表显示、处理JavaScript中的错误）l如果要显示错误信息，可在IE浏览器中，选择“工具”“Internet选项”，在“高级”选项卡中，取消选择“禁用脚本调试”复选框，选中“显示每个脚本的错误信息”复选框。练习题l1、用什么软件可以编辑JavaScript程序？A浏览器B文本编辑器C铅笔和纸张l2、JavaScript程序中变量的用途是什么？A存储数字、日期和其他值B随机变化C使人回书起中学所学的代数l3、在HTML文件中，什么应该出现在JavaScript脚本的最后？A.标签B.标签C。END语句l4、在大钟表上加入毫秒的显示。可以使用getMilliseconds函数，类似于getSecond，返回的是毫秒。l5、修改脚本，显示时间（包括毫秒）两次。注意在加载页面时，在此两个时间之间是否有时间变动。