JavaScript程序设计教程 第2章 JavaScript基本语法.pdf
《JavaScript程序设计教程 第2章 JavaScript基本语法.pdf》由会员分享,可在线阅读,更多相关《JavaScript程序设计教程 第2章 JavaScript基本语法.pdf(118页珍藏版)》请在咨信网上搜索。
1、O第2章JavaScript基本语法OOOO2.1JavaScr ipt在HTML中的使用2.2JavaScr i pt代码调试方式2.3语句OO2.4变量Oo2.5数据类型oo 2.6表达式和运算符OO2.7关键字及保留字OO2.8正则表达式O2.9注释 2.10实战 2.11小结o简单了解一下HTML的常见标签,为后面各章节JavaScript 的学习做好准备。HTML常用标签及属性如表2.1所示。表2.1 HTML常用标签及属性标签/属性释义html描述网页head描述网页头部script存放JavaScript脚本body网页可见页面内容hl.h6实面内容标题a链接标签,定义锚src规
2、定外部脚本文件的URLtitle网页标题oQ2.1 JavaScr ipt 在 HTML 中的使用JavaScript在HTML中有两种存放方式:直接在页面上嵌 入JavaScript彳弋码、引用独立的js文件。1.直接在页面上嵌入JavaScript代码OOOOOQvtitle在HTML中使用JavaScriptalert(Hello World!1);脚本2.1.htmloQ在上面的代码中,将JavaScript脚本直接放在HTML的 标签之间,保存为HTML文件,运行HTML文件,弹出一个对话框,如图2.1所示。此网页显示:XHello World1确定图2.1弹出对话框o2.引用独立的
3、js文件示例代码如脚本2-2所示。(1)先创建HTML文件。ooooooQ在HTML中使用JavaScript脚本22.htmlo(2)紧接着我们需要创建一个JavaScript文件test-01,js?,示例代码如下所示。oootest-01,jsalert(J Hello W orld!);(3)运行HTML代码,结果如图2.2所示。此网页显示:XHello World?确定Q图2.2运行结果o 2.2JavaScr i pt代码调试方式使用alert()弹出警告框,示例代码如脚本2-5所示。oooooQvt-e在JavaScript中使用警告 框 v/titlealert(5+6);脚本
4、25.html运行上面HTML代码,浏览器显示结果如图2.5所示。此网页显示:X11确定图2.5 alert弹出警告框oQvtitle 在 JavaScript 中使用 document,write。方法 v/titledocument.write(Date();脚本26.html运行上面HTML代码,浏览器显示结果如图2.6所示。Wed Mar 29 2017 22:23:54 GMT+0800(中国标准时间)图2.6 document.write。显示结果(3)使用console.log。写入到浏览器控制台,示例代码如 脚本2-7所示。vtitle 在 JavaScript 中使用 con
5、sole.log。方法 v/titlea=5;b=6;c=a+b;console.log(c);Q脚本2.7.html运行上面HTML代码,浏览器显示结果如图2.7所示。Developer Tools-file:/G:/ziliao/JavaScript%E7%A8%.XK flElements Console Sources Network Timeline 0 top U Preserve log策8%84%汕E6%9C%AC2-5.卜5二:豆图2.7 console.Iog()显示结果o比较这3种调试技巧,console.log。是一种更好的方 Y 式,在实际应用中,更受开发人员的青睐。
6、对比分析如下 O (1)如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖,对程序的执行造成不便。(2)alert()函数会阻断JavaScript程序的执行,从而出 现副作用,而且使用alert()方法需要单击弹出窗的确认按 钮,操作麻烦,最重要的是alert()只能输出字符串。T(3)console.log。仅在控制台打印相关信息,不会对 JavaScript程序执行造成阻隔,此外,console,log()可以 接受任何字符串、数字和JavaScript对象,可以看到清楚O 的对象属性结构,在ajax返回json数组对象时调试很方便O。2.3语句JavaSc
7、ript语句是向浏览器发出的命令。语句的作用是告?诉浏览器该做什么。下面的JavaScript语句将“1+2”的值赋给 1变量a,也叫变量赋值。var a=1+2;var是变量声明命令,这里声明了变量a,然后将1+2的计算 结果赋值给变量a。1+2在JavaScript中叫表达式,会返回一个计算结果。表达 式和语句的区别在于:表达式由运算符构成,并运算产生结果的 T语法结构,每个表达式都会返回一个值。而语句主要是为了进行 某种操作,一般情况下不需要返回值。语句以分号结尾。一个分号代表一条语句结束。多条语句0可以写在一行内,如:var a=1+2;var b=ab c;o 2.4变量241变矍的
8、槌念在日常生活中,有些东西是固定不变的,而有些东西则 会发生很多变化,如天气、时间等。在程序设计语言中,约 定俗成将这些会改变的东西称之为变量。同代数一样,JavaScript变量可用于存放值和表达式。6变量的命名遵循以下原则:(1)变量必须以字母开头;?(2)变量也能以$和_开头(不过不推荐这么做);1(3)变量名不能包杳空格或其他标点符号;(4)变量名称对大小写敏感(a和A是不同的变量)。OoO242暧量的类型JavaScript是一种动态类型语言。变量的类型没有限制,可以赋予各种类型的值。比如文本值(name=John)。在 JavaScript中,类似John这样一条文本被称为字符串。
9、尽管JavaScript变量有很多种类型,但是现在,我们只 需要关注数字和字符串两种类型。当向变量分配文本值时,应该用双引号或单引号来包围 这个值。当局变量赋的值是数值时,不要使用引号。如果用引号 包围数值,该值会被作为文本来处理。o了 243暧量声明贼值1 在JavaScript中,变量声明用关键词var,变量赋值用二。变量声明赋值其实是分开的两步操作,比如var a=1这样一 条赋值语句实际的步骤是下面这样的:;var a;/声明变量a.a=1;/给变量a赋值为1如果只是声明了变量a而没有给变量a赋值,那么变量a的值 是undefined。6 变量必须声明之后才能使用,否则JavaScri
10、pt会报错:变量未定义。Oo2.4.4变量作用域JavaScript变量分为全局变量和局部变量。A 变量在函数内声明即为局部变量。局部变量有局部作用域:只能在函数内访问。变量在函数外定义,即为全局变量。全局变量有全局作用域:网页中所有脚本和函数均可使用。如果变量在函数内没有 使用var关键字声明,该变量也为全局变量。?变量生命周期:局部变量在函数开始执行时创建,函数执A行完后局部变量会自动销毁;全局变量在页面关闭后销毁。O下面来看一个实例,如脚本2-8所示。vMtle全局变量和局部变量示例v/Mtlevar a=global;b=global”;function testaFunction()
11、var a=local;return a;)function testbFunction()b=local;return b;)console.log(a);/1console.log(testaFunction();/2console.log(b);/3console.log(testbFunction();/4console.log(b);/5 脚本28.html运行脚本2-8显示结果如图2.8所示。9 Developer Tools-file:/G:/%E5%88%98%E6%95%8F-/JavaS.一 XQ flElements Console Sources Network Per
12、formance Memory E 0top Filter Default levels M Group similar 0global localglobal local local脚本 2-8.html:18、脚本 2-8.html:19脏肱 2-8.html:20能肱 2-8.html:21幽本 2-8.htEl:22 图2.8变量作用域示例结果oQ;245变量提价 JavaScript引擎工作方式是:先解析代码,获取所有被声明的变量,然后再一行一行地运行代码。这样所有变量声明语 句都会被提升到代码头部执行。这就叫作变量提升。先看一段简单的代码,如脚本2-9所示。QoQvtitle 变量
13、提升 v/title console.log(a);var a=1;脚本29.html回oQ按惯性逻辑来理解,首先在控制台打印出a的值,但这个 时候a还未声明和赋值,所以应该会报错。但实际上并不会报 错,运行结果如图2.9所示。7 Developer Tools-file:/G:/%E5%88%98%E6%95%8F-/JavaS.-XQ td Elements Console Sources Network Performance Memory H 0 top|Filter Default levels U Group similar Qundefined 能口本2-9.html:8图2.9
14、变量提升示例结果因为存在变量提升,真正运行的是脚本2-10。vtitle 变量提升 v/titlevar a;console.log(a);a=1;脚本210.html所以控制台显示的结果是undefined,表明变量a已经声 明但未赋值。o 2.5数据类型var a=1;?var b=ab ed;如上,变量a是数值类型,变量b是字符串类型。虽然变 量a、b是两种不同的数据类型,但在JavaScript脚本中对它 们声明和进行赋值的语法无任何区别。有些程序设计语言要 求程序员在声明变量的同时必须明确地指定其数据类型。像 这种要求程序员必须明确地对数据类型做出声明的程序设计 语言被称为强类型语言
15、,而像JavaScript这样不要求声明数 T 据类型的语言称为弱类型。所谓弱类型意味着程序员可随意改变某个变量的数据类型。O 在JavaScript中数据类型可分为两大类:基本数据类型和引用数据类型。2.5.1基域撤据类型JavaScript中有5种基本数据类型,分别为字符串(String)类型、数殖(Numb er)类型、布尔(Boolean)类型、Null类 型、Undefined类型。1.String类型 String类型用于表示由零或多个16位Unicode字符组成的字3符序列,即字符串。字符串必须包括在引号之间,单引号和双引号都可以。?2.Numb er类型i Numb er类型用
16、来表示整数、浮点数值和另一种特殊数值NaN JavaScript为了支持各种数值类型,定义了不同的数值字面量格式。o3.Boolean类型Boolean类型有两个字面值:true和false。但这 两个值与数字值并不等同,即true不一定等于1,false 不一定等于0。4.Undefined类型Undefined类型只有一个值,即特殊的undefined。在使用var声明变量但未进行初始化的时候,这个变量的 值就是undefined,如下所示。var message;alert(message);/输出 undefined运行显示结果如图2.12所示。O此网页显示:undefined禁止此页
17、再显示对话框。X确定图2.12 Undefined类型示例结果Developer Tools-file:/C:/Users/1/Desktop/%E8%84.XQ(5J Elements Console Sources Network Timeline 010 57 top U Preserve logundefined 脚本O Uncaught ReferenceError:messagel is not defined 能。本at 脚本 IQ图2.13 Undefined类型变量和未定义变量比较结果5.Null类型Null类型是第二个只有一个值的数据类型,即特殊 的null。从逻辑角度来看
18、,null值表示一个空对象指针 如果定义的变量准备在将来用于保存对象,那么最好 将该变量初始化为null而不是其他值。这样只要直接检 测null值就可以知道相应的变量是否已经保存了一个对 象的引用了,例如:if(ob ject!=null)/对ob ject对象执行某些操作 一一252引用裁据类型引用类型通常叫作类,也就是说,遇到引用值时,所处 理的就是对象。1.Ob ject类型Ob ject类是JavaScript中使用最多的一种类型。Ob ject 对象是一组数据和功能的集合。创建Ob ject实例有两种方式。一种是使用new操作符后 跟Ob ject构造函数。另一种方式是使用对象字面量
19、表示法。oQOOOQO2.A rray类型JavaScript中的数组与其他多数语言中的数组有着相 当大区别。虽然JavaScript数组与其他语言中的数组都是 数据的有序列表,但与其他语言不同的是,JavaScript数 组的每一项都可以是任何类型的数据。也就是说,可以用 数组的第1个位置来保存字符串,用第2个位置来保存数值,用第3个位置来保存对象。而且,JavaScript数组的大小是 可以动态调整的,即可以随着数据的添加自动增长以容纳 新增数据。OoQ创建数组的方式有两种。第1种是使用A rray构造函数。var fruitsl=new A rray();var fruits2=new
20、A rray(10);var fruits3=new A rray C apple,b anana,peach,);创建数组的第2种方式是使用数组字面量表示法。var fruitsl=;var fruits2=apple,b ananapeach;在读取和设置数组的值时,要使用方括号并提供相应 值的基于0的数字索引。var fruits 二apple,b anana,peach;/定义一个字符串数组console,log(fruits0);fruits1=grape;fruits3=lemon”;/显示第1项/修改第2项/新增第4项console,log(fruits);运行结果如图2.14所
21、示。Developer Tools-file:/C:/Users/1/Desktop/%E8%84.XJ Elements Console Sources Network Timeline q top D Preserve logapple 脚本 nappLenj grapen,peachrj nLemon 蒯本 1.html:11图2.14数组读写操作结果oQOOOQ数组长度保存在其length属性中,这个属性始终会 返回0或更大的值。var fruitsl=;var fruits2=1 apple,b anana,peach,;console.log(fruitsl.length);con
22、sole,log(fruits2.length);运行结果如图2.15所示。OoDeveloper Tools-file:/C:/Users/1/Desktop/%E8%84.Xre flElements Console Sources Network Timeline 0,top U Preserve log03 I脚本脚本1.卜:相:IC图2.15数组length属性操作结果o 3.Date类型JavaScript中的Date类型是在早期Java中的java.util.Date 类基础上构建的。为此,Date类型使用自UTC 1970年1月1日零时 开始经过的毫秒数来保存日期。在使用这种数
23、据存储格式的条件 下,Date类型保存的日期能够精确到1970年1月1日之前或之后的 285 616年。/日期对象的创建使用new操作符和Date构造函数。var now=new Date();?在调用Date构造函数而不传递参数的情况下,新创建的对象A自动获得当前日期和时间。如果想根据特定的日期和时间创建日 期对象,必须传入表示该日期的毫秒数。为了简化这一计算过程,JavaScript提供了两个方法:Date,parse()和Date.UTC()。表22 Date类型方法方法描述Date()返回当日的日期和时间getDate()从Date对象返回一个月中的某一天(131)getDay()从D
24、ate对象返回一周中的某一天(。6)getMonth()从Date对象返回月份(。11)getFullYear()从Date对象以4位数字返回年份getHours()返回Date对象的小时(023)getMinutes()返回Date对象的分钟(。59)getSeconds()返回Date对象的秒数(059)getMilliseconds()返回Date对象的毫秒数(0-999)getTime()返回1970年1月1日至今的毫秒数getTimezoneOffset()返回本地时间与格林威治标准时间(GMT)的分钟差getUTCDay()根据世界时从Date对象返回周中的一天(。6)getUTC
25、Month()根据世界时从Date对象返回月份(。11)getUTCFullYear()根据世界时从Date对象返回4位数的年份getUTCHours()根据世界时返回Date对象的小时(。23)getUTCMinutes()根据世界时返回Date对象的分钟(。59)getUTCSeconds()根据世界时返回Date对象的秒数(。59)getUTCMillisecondsO根据世界时返回Date对象的毫秒(。999)parse()返回1970年1月1日午夜到指定日期(字符串)毫秒数setDate()设置Date对象中月的某一天(1-31)setMonth()设置Date对象中月份(。11)s
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript程序设计教程 第2章 JavaScript基本语法 JavaScript 程序设计 教程 基本 语法
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【曲****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【曲****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。