JavaScript基础知识完整版.ppt课件_第1页
JavaScript基础知识完整版.ppt课件_第2页
JavaScript基础知识完整版.ppt课件_第3页
JavaScript基础知识完整版.ppt课件_第4页
JavaScript基础知识完整版.ppt课件_第5页
已阅读5页,还剩359页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、JavaScript第一章JavaScript概述第一节 JavaScript简介一、JavaScript是什么?JavaScript是一种基于对象基于对象(内置了许多对象)(内置了许多对象)和事件驱动并具有相对安全性的客户端客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。知识扩充:1、事件驱动:用户与网页交互时产生的操作,称为事件。事件可以由用户引发,也可能是页面发生改变,甚至还有你看不见的事件(如Ajax的交互进度改变)。绝大部分事件都由用户的动作所引发,如:用户按鼠标的按键,就产生click事件,若鼠标的指针在链接

2、上移动,就产生mouseover事件等等。在JavaScript中,事件往往与事件处理程序配套使用。2 2、客户端脚本语言:、客户端脚本语言:不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说JavaScript是在用户的浏览器上运行,不需要服务器的支持而可在用户的浏览器上运行,不需要服务器的支持而可以独立运行。以独立运行。JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差,而且在在JavaScriptJavaScript中,如果一条中,如果一条运

3、行不了,那么下面的语言也无法运行运行不了,那么下面的语言也无法运行,并且速度较慢。二、JavaScript发展历史:1、1995年2月,就职于NetScape公司 布兰登 艾奇,开发一种名为LiveScript的脚本语言,为了赶在发布日期前完成LiveScript的开发,NetScape与与Sun公公司建立了一个开发联盟。为了搭上媒体热炒的司建立了一个开发联盟。为了搭上媒体热炒的Java的顺风车(当时的顺风车(当时Java已经很火),临时把已经很火),临时把LiveScript改名为改名为JavaScript(1.0)。)。2、此时,微软在其Internet Explorer 3中加入了名为J

4、Script的JavaScript实现(命名为JScript是为了避开与NetScape有关的授权问题)。3、微软推出JScript后,JavaScript出现了3个不同的版本:NetScape Navigator中的JavaScript、Internet Explorer中的JScript和ScriptEase中的CEnvi。当时没有标准规定JavaScript的语法和特性,3个版本并存的局面已经暴露了这个问题(不兼容问题)。所以,JavaScript的标准化问题被提上了议事日程。4、1997年,欧洲计算机制造商协会(ECMA)完成了ECMA-262(发音“ek-ma-script”)的新脚

5、本语言的标准。5、以后,浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础,也在不同程度上取得了成功。注:虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的多得多。一个完整的一个完整的JavaScript实现由下列实现由下列3个不同的个不同的组成部分:核心(组成部分:核心(ECMAScript)、文档对象模型)、文档对象模型(DOM)、浏览器对象模型()、浏览器对象模型(BOM)。三、JavaScript开发及运行环境1、开发环境:JavaScript是一种脚本语言,代码不需要

6、变异成二进制,而是以文本的形式存在,因此任何文本编辑器都可以作为其开发环境,比如记事本(虽然很少人使用)、EditPlus、Ultra Edit(UE)、Dreamweaver等。2、运行环境:JavaScript依赖于浏览器,即浏览器是JavaScript的运行环境。当前主流浏览器都能运行今后学习的JavaScript代码,若出现浏览器兼容问题,到时会请同学们注意。不同的编辑器会对语法进行简单的错误识别,不同的浏览器也提供对JavaScript程序的调试功能。问:还记得当前主流的浏览器吗?注意:一个页面中只要一个地方JavaScript语法错误,则整个JavaScript程序都不执行。为我们

7、找错和调试带来了困难。第二节 定义和使用JavaScript方式1、定义方式(1)嵌入HTML文件中一般放在(事实上可以放在任何位置)中,格式:/此处为JavaScript代码(2) 定义专门的外部文件 将JavaScript代码写在一个独立的脚本文件(扩展名为.js)中,在页面中使用时直接导入该脚本文件即可,导入的格式: 注意:不能这么写: 错误!必须有结束标签知识扩充:除了上面两种最为常用的方式外,还可以在一下地方定义JavaScript代码:(1)在HTML的元素事件属性中 比如,按钮的单击事件,代码:示例:(2)在超链接中定义 语法:超链接示例:效果:2、一个简单的JavaScript

8、的例子(1)嵌入到HTML文件中单击后显示的效果(2)定义专门的js文件A、定义一个扩展名为.js的文件,其中定义如下代码:B、定义一个HTML文件,导入该外部js文件,并调用js文件中的代码:C、单击“按钮”后,同样实现效果:三、作业1、在HTML嵌入一段JavaScript代码,并定义一个按钮,当点击按钮时,弹出“欢迎学习JavaScript”。2、将上题的JavaScript代码放在单独的js文件中,运行。第二章 JavaScript语言基础一、对一些问题的说明:1、区分大小写:JavaScript中的变量、函数名和操作符都区分大小写,关键字不能做变量或函数名字。所以,test和Test

9、是两个变量,typeof因是关键字所以不能是函数名或者变量名。2、标识符:就是变量、函数、属性、函数的参数等。规定:(1)第一个字符必须是字母、下划线(_)、美元符号($)。(2)其他字符可以是字母、下划线、美元符号或数字。第一节:数据类型、变量和运算符3、注释:包括单行注释和多行注释。(1)单行注释:/ 如: /这是一个单行注释(2)多行注释 /* */如:/*这是一个多行注释*/4、语句:JavaScript中语句以一个;结尾(英文分号)。但可以省略 ; 。比如:注:分号虽不是必须的,但建议必须加上它,这样可以提高效率(解析器不必再花时间推测应该在哪里插入分号了)和避免错误。5、在控制语句

10、中,单行语句可以不加(不放在代码块中),但强烈加上即使代码块中只有一条语句。多行语句如果放在一个代码块中执行,必须加二、数据类型JavaScript是弱类型脚本语言,使用变量之前,无须定义,想使用某个变量时直接使用即可,JavaScript会根据需要自动确定数据类型和进行数据类型的转换,但每个变量还是要确定数据类型的。JavaScript中数据类型基本数据类型(简单数据类型)和复合数据类型(复杂数据类型)两类,不同大类下面又有自己的小类,如下表:大类大类数据类型数据类型说明说明基基本本数数据据类类型型数值类型数值类型(Number)包含整数和浮点数布尔类型布尔类型(Boolean)只有true

11、和false两个值 【两个值小写】字符串类型字符串类型(String)表示一个字符序列,必须使用单引号()或双引号()括起来Undefined类型类型(Undefined)用来确定一个已经创建但还没有赋初值的变量,只有一个值为:undefined 【小写】Null类型类型(Null)表名某个变量的值为空,只有一个值为:null【小写】复复合合数数据据类类型型Object类型类型(Object)该类型的值为对象,对象由一些列属性(变量)和方法(函数)的集合,访问它们时用:. (英文点号)数组(数组(Array)一系列的变量组成函数函数(Function)包含一段可执行的代码1、typeof操作符

12、:用来检测给定变量的数据类型对一个值使用typeof操作符可能返回下列某个字符串之一:(1)undefined:值未定义时。(2)boolean:值是布尔值时。(3)string:值是字符串时。(4) number:值是数值时。(5)object:值是对象或者值是对象或者null(代表空对代表空对象引用)象引用)。(6)function:值是函数时。示例:注:A、typeof操作符的操作数可以是变量也可以是数值字面量。如:B、因typeof是一个操作符而不是函数,所以可以使用小括号(())将操作数括起来,也可以不使用,如:C、typeof(null) 返回值是object,原因在于特殊值nul

13、l被认为是一个空对象的引用(一个对象为空时,值是null)。上页中有例子。2、Undefined类型:该类型只有一个值,即特殊的undefined。在使在使用用var声明变量但未对其加以初始化时,这个变声明变量但未对其加以初始化时,这个变量值就是量值就是undefined。(注意值为小写,JS大小写敏感)。示例:知识扩充:包含undefined值的变量和尚未定义的变量是不一样的。例如: 对于尚未声明的变量,可以使用typeof操作符检测其数据类型。返回值也为:undefined值,和定义后未赋初值的变量一样。即使用一个未定义的变量时没有值,但其类型为Undefined。建议:定义一个变量时显式

14、地初始化变量。3、Null类型:只有一个值,即:null。null值表示一个空对象(这正是使用typeof检测null值会返回“object”)。如:知识扩充:如果定义的变量准备将来用于保存对象,那么最好将该变量初始化为null而不是其他值。这样,直接检查null值就可以判断相应的变量是否已经保存了一个对象的引用:var car=null;/其他操作if(car!=null) /前提是car已赋初值null/对car进行某些操作另:4、Boolean类型:该类型有两个值:true和false。(必须全是小写)可以将其他值通过Boolean()函数转换为Boolean类型,返回值取决于要转换值的

15、数据类型和实际值。其他类型转为Boolean类型的规则:数据类型数据类型转换为转换为true值值转换为转换为false值值BooleantruefalseString任何非空字符串(空字符串)Number任何非零数字值(包括无穷大)0和NaNObject任何对象nullUndefinedundefined知识扩充:使用流控制语句(比如if语句)时,会将其他值自动转换为相应的Boolean转换(根据相应的数据类型和对应的值)。比如:运行结果:5、Number类型:包括整数和浮点数值(双精度数值)。除了常用的十进制外,还可以表示八进制和十六进制。八进制的第一位必须是0,后跟(07),十六进制前两位

16、是0 x,后跟(09及AF)。八进制和十六进制表示的数值最终将被转换为十进制。(1)浮点数值:该数值中必须包含一个小数点。var num1=1.1;var num2=0.1;var num3=.1;/有效,但不推荐。如果数值只有小数部分,则可以省略整数部分的0。(2)数值转换:)数值转换:2个函数将非数值转换为数值:I.parseInt():用于将字符串转换成整数数值。II.parseFloat():用于将字符串转换成浮点型数值。I.parseInt():将字符串转换为整数。规则:A、它会忽略字符串前面的空格,直至找到第一个非空格字符,如果第一个字符不是数字字符或者负号,则返回NaN。B、转换

17、空字符串返回NaN。 C、如果第一个字符是数字字符,会接着进行解析,直到完成或者遇到非数字字符。D、使用该函数的第二个参数指定转换时要转成的进制数。指定基数会影响到转换的输出结果:II.parseFloat():将一个字符串转成浮点数。和parseInt基本相同,区别:(1)字符串中的第一个小数点是有效的,第二个小数点是无效的,后面的字符串会被忽略。“22.34.5” 转成 22.34(2)始终会忽略前导0(把前导0直接去掉),十六进制数始终被转成0,只解析十进制数,所以没有第二个参数。即只能转成十进制即只能转成十进制(3)字符串中没有小数点或小数点后边全是0,则该函数返回整数。注意:如果需要

18、将表单中的数值(字符串)在前台通过JS进行算数运算时,必须先使用parseInt或者parseFloat进行转换再运算。 知识扩充:(1)保存浮点数值需要的内存空间是保存整数的两倍,因此js会自动将一些能够转换为整数的自动转换为浮点数,如小数点后没跟任何数字(如1.)或者浮点数本身是个整数(如1.0)。如:结果都为1: (2)可以使用e表示法(科学计数法),值为e前面的*10的指数次幂。var num=3.125e7; /等价于 31250000var num=3e-7;/0.0000003; (3)由于精度问题,导致进行浮点数的算数运算时有时结果不准确。如:第一个alert输出: 第二个输出

19、:(4)数值范围:ECMAScript表示的最小数值是:Number.MIN_VALUE(一般浏览器该值是:5e-324)能够表示的最大值是:Number.MAX_VALUE.上面两个值,不同浏览器会有区别,使用下面的语句可测出:(5)NaN:(Not a Number)。表示一个本来要返回数值的操作未返回数值的情况,比如:任何涉及NaN的操作(如NaN/10)都会返回NaN 。NaN与任何值都不想等。包括NaN本身。alert(Nan=Nan);/falseisNaN(),用来判断数值是否“不是数值”,不是数值时返回true,否则,返回false。6、String类型:类型:表示由0或多个1

20、6位Unicode字符组成的字符序列(每个字符16位Unicode编码),即字符串。字符串既可以是双引号()也可以是单引号()表示。下面的表示都是合法的:var str1 = “hello”; var str2 = hello这两种表示的语法在解释上没有任何区别,但必须匹配,否则会出现错误。(1)有一些转义字符具有特殊含义:n (换行)t(制表)b(空格) r(回车) f(进纸) (斜杠) (单引号) ”(双引号) (2)length:该属性返回字符串的长度。关于汉子等双字节字符,length属性可能不会精确地返回字符串中的字符数目。(实际上,js中双字节字符算一个长度,是由unicode编码

21、决定的(该编码用2个字节表示) alert(软件系.length);/3(3)【了解】字符串是不可变的,即,字符串一旦创建,值不能再改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用一个包含新值的字符串填充该变量。var lang=”Java”;/开辟空间lang = lang+”Script”;/Scirpt字符串也会开辟空间。再开辟一个容纳Java和Script的空间放新串,并且销毁原来的2字符串空间。这样对于以前的浏览器性能较低,现在已解决了这个效率低的问题。(4)【了解】将其他数值转换为字符串: A:.toString():函数 可以将其他数值(包括字符串,除了除了nu

22、ll和和undefined值值)转换为字符串表现。 var age=11; var ageAsString = age.toString();/”11” var bool=true; var boolAsString = bool.toString();/”true”特别注意null和undefined无法转成字符串。可以为该函数指定一个参数(值为2、8、10、16)分别用以转换数值时变成不同进制的字符串数据。var num=10;num.toString(2);/1010 ,转成二进制num.toString(8);/12,转成八进制num.toString(10);/10 ,转成十进制nu

23、m.toString(16);/A 或a ,转成十六进制B:String(要转换的数值):该函数和.toString()的区别在于可以转换null和undefined值。var value1=null,value2;String(value1);/nullString(value2);/undefined作业: 1、使用typeof关键字测试不同变量的数据类型,并输出他们的数据类型。 2、使用parseFloat函数,编写一个可以进行加、减、乘、除、取余运算的简单计算器。三、变量:JavaScript的变量是松散类型的,所谓松散类型是可以用来保存任何类型的数据;并且一个变量的值类型是可变的。1

24、、定义方式:A、使用var操作符(关键字),后跟变量名的形式。B、不适用var关键字,使用时直接赋初值。【不推荐】2、作用范围:根据范围不同,变量分为:全局变量和局部变量。函数外边直接定义的变量称为全局变量,函数内部定义的变量称为局部变量。如:很奇怪的是:JavaScript中函数内定义的变量没有块范围,而是在整个函数内有效,如:哪怕是在函数中间使用var声明的变量,在函数开始处照样有效,只是此时没有赋初值。3、使用var和不使用的区别:A、使用var定义变量,程序会强制定义一个新变量;B、不使用var定义变量,系统会优先在当前上下文中搜索是否存在该变量,只有变量不存在的前提下,才会重新定义一

25、个新变量。当然,推荐使用var在函数外边定义全局变量,而在函数内部使用var定义局部变量。 函数内部去掉var后,输出不同的结果:四、操作符:运算符运算符种类种类算数运算符算数运算符+(加)、-(减)、*(乘)、/(除)、%(取余)、+(累加)、-(累减)赋值运算符赋值运算符=(赋值)、+=(加赋值)、-=(减赋值)、*=(乘赋值)、/=(除赋值)、%=(取余赋值)关系运算符关系运算符(大于)、=(大于等于)、=(小于等于)、!=(严格不等于,比较类型和值)、=(严格等于,比较类型和值)字符串运算符字符串运算符+ 逻辑运算符逻辑运算符&(与)、|(或)、!(非)条件运算符条件运算符? : (唯

26、一的三目运算符)逗号运算符逗号运算符,typeof运算符运算符typeof 判断某个变量的数据类型instanceof运算符运算符instanceof 判断某个变量是否是指定类的实例位运算符位运算符&(按位与)、|(按位或)、(按位非)、(按位异或)、(右移) 【了解】1、+:既是字符串运算符又是加法运算符,在进行变量的运算时取决于变量的类型。 数字字符串和数值相加时,数值自动转为字符串再运算;想减时,字符串自动转为数值再运算。2、=和=区别(!=和!=区别相同)=:先进行类型转换,再比较类型和值。(值相等,类型不同,则为true)=:不进行类型转换,比较类型和值。(值相等,类型相同,才为tr

27、ue)3、关系运算符也可以比较字符串,规则是按照字母的Unicode值进行比较,若第一个字母相同,则进行第二个的比较,以此类推。4、typeof运算符,前面已经详细介绍。5、instanceof判断某个变量是否为指定类的实例。如:作业:1、使用var声明两个整型变量,分别输出它们的和、差、积、商、取余结果。2、声明 var=5和var=5,使用=和=判断它们是否相等。3、练习instanceof的用法。第二节流程控制和函数一、流程控制:1、选择结构:if 、switch2、循环结构:while 、do while、for、for in 3、终止循环:break、continue关于for in

28、:作用:(1)遍历数组中的所有数组元素 (2)遍历JavaScript对象的所有属性结果:二、函数:1、定义函数的方式(2种):A、定义命名函数格式:function funcName(参数值)/函数体比如:如:function sayHi(name,message)alert(“hello”+name+”,”+message);B、定义匿名函数:格式:var 变量名 = function(参数)/函数体比如修改上面的函数为var sayHi = function (name,message)alert(“hello”+name+”,”+message);此处,sayHi的作用就是指向定义的函

29、数,类似函数的名字。2、函数调用的方式(3种):A、直接调用:函数名函数名(实参值实参值) ; /如果函数有参数时。比如调用sayHi函数:B、在表达式中调用这种方式比较适合有返回值的函数,返回值作为表达式的一部分参与运算,有时还会和(alert、document)等语句配合输出。C、在事件中调用当调用事件时,JavaScript可以调用某个事件来响应这个函数,比如:注:(1)return 语句不是函数中必须的,但任何函数在任何时候都可以通过return语句后跟要返回的值实现返回值。function sum(num1,num2)return num1+num2;/执行到return后会立即退出

30、。 (2)若在一个文件中,定义函数名字相同,会使用最后定义的函数。作业:1、使用JavaScript输出19002015年之间的闰年。(1)能够被400整除的是闰年;(2)能够被4整除,并且不能被100整除2、定义一个函数,该函数用来接收一个生日值(月日组成的4位字符串,比如“0210”,“1225”等),并根据该生日值提示属于的星座。第三章JavaScript核心类第一节 字符串类一、字符串类(String)String类是字符串类型(String)的封装类,它允许用户使用String类的方法和属性操作操作初始的字符串类型值(或说:字符串可以直接使用String类中的属性和方法) 【明白这句

31、话特别重要,因为其他的基本数据类型也都有相应的包装类,这些类型值(如果有)也可以直接操作包装类的属性或者方法, 比如Boolean类、Number类和String类,另外复合类型也有对应的类,比如Array类、Function类、Object类等】1、字符串对象创建的方式A、直接声明字符串常量【最常用】,格式:var 字符串变量=字符串;/也可以是单引号比如:B、使用new关键字实例化字符串对象,格式: var 字符串对象=new String(字符串);比如:根据我们以前学习的面向对象可知,这一步就是去实例化String类,得到一个对象str,实例化时会自动去调用String类中的构造方法,

32、完成赋初值的操作。2、String类的常用属性: length功能:该属性用来返回字符串中的数量。说明:中文字符虽然是双字节,也算是一个单字符。比如:注意:JavaScript中调用类中的属性、方法,通过 .(英文点号),和PHP通过-不同。3、String类中的常用方法:方法名称方法名称说明说明charAt(index)返回字符串对象中指定索引位置处的一个字符。charCodeAt(index)返回字符串对象中指定位置处的Unicode编码值,介于065535间。indexOf(searchvalue,fromindex)返回参数中指定字符串的索引值,若出现多次,则返回第一次的索引值,参数2

33、可以指定从哪个位置开始。concat(stringX,stringX,.,stringX)用于连接两个或多个字符串。lastIndexOf(searchvalue,fromindex)返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。substr(start,length)可在字符串中抽取从 start 下标开始的指定数目的字符。方法名称方法名称说明说明substring(start,stop)用于提取字符串中介于两个指定下标之间的字符。split(separator,howmany)把一个字符串分割成字符串数组。replace(substr,replacement)

34、用于在字符串中用一些字符替换另一些字符。toLowerCase()用于把字符串转换为小写。toUpperCase() 方法用于把字符串转换为大写。详细解释(1)charAt() : 可返回指定位置的字符。语法: stringObject.charAt(index)提示和注释: 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。实例:在字符串 Hello world! 中,我们将返回位置 1 的字符:返回结果:e(2)charCodeAt() :返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 6553

35、5 之间的整数。注意:方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。语法:stringObject.charCodeAt(index)提示和注释:字符串中第一个字符的下标是 0。如果 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。实例:在字符串 Hello world! 中,我们将返回位置 1 的字符的 Unicode 编码:值为:101(3)indexOf() :返回某个指定的字符串值在字符串中首次出现的位置。语法:stringObject.indexOf

36、(searchvalue,fromindex)说明:该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。提示和注释:(1)注释:indexOf() 方法对大小写敏感!(2)如果要检索的字符串值没有出现,则该方法返回 -1。实例:将在 Hello world! 字符串内进行不同的检索:运行结果:作业:1、分别

37、输出“Hello World ”和“你若安好,便是晴天”两个字符串的长度。2、输出“Hello World”中第三个字符和第五个字符的编码。3、计算“Hello World”中第一个“o”的下标(4)concat() :用于连接两个或多个字符串。语法:stringObject.concat(stringX,stringX,.,stringX)说明:concat() 方法将把它的所有参数转换成字符串,然后按顺序连接到字符串 stringObject 的尾部,并返回连接后的字符串。请注意,stringObject 本身并没有被更改。提示和注释:使用 + 运算符来进行字符串的连接运算通常会更简便一些

38、。实例:将创建两个字符串,然后使用 concat() 把它们显示为一个字符串:运行结果:(5)lastIndexOf() :返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。语法:stringObject.lastIndexOf(searchvalue,fromindex)返回值:如果在 stringObject 中的 fromindex 位置之前存在 searchvalue,则返回的是出现的最后一个 searchvalue 的位置。即从fromindex 位置向前查找,找到最后一次出现的位置。说明:该方法将从尾到头地检索字符串 stringObject,看它是否含有

39、子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一个字符在 stringObject 中的位置。即要么从结尾向前查找,要么从fromindex 位置向前查找。提示和注释:(1)lastIndexOf() 方法对大小写敏感!(2)如果要检索的字符串值没有出现,则该方法返回 -1。实例:将在 Hello world! 字符串内进行不同的检索:运行结果:(6)substr() :可在字符串中抽取从 start 下标开始的指定数目的字符。语法:st

40、ringObject.substr(start,length)返回值:一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 lengh个字符。如果没有指定 lengh,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。示例:将使用 substr() 从字符串中提取一些字符运行结果:(7)substring() :用于提取字符串中介于两个指定下标之间的字符。语法:stringObject.substring(start,stop)返回值:一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其

41、内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。说明:(1)substring() 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。(2)如果参数 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。重要事项:substring() 不接受负的参数。示例:将使用 substring() 从字符串中提取一些字符:运行结果:(8)split() :用于把一个字符串分割成字符串数组。语法:stringObject.split

42、(separator,howmany)返回值:一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。提示和注释:(1)如果把空字符串 () 用作 separator,那么 stringObject 中的每个字符之间都会被分割。(2)String.split() 执行的操作与 Array.join() 执行的操作是相反的。示例:将按照不同的方式来分割字符串运行结果:(,用来分割每个数组元素)(9)replace() :用于在字符串中用一些字符替换另一些字符语法:stringObje

43、ct.replace(substr,replacement)返回值:一个新的字符串,是用 replacement 替换了 substr的第一次匹配之后得到的。示例:replace替换的例子结果:(10)toLowerCase() :用于把字符串转换为小写。 toUpperCase() :用于把字符串转换为大写。语法:stringObject.toLowerCase()stringObject.toUpperCase()返回值:一个新的字符串,在其中 stringObject 的所有大(小)写字符全部被转换为了小(大)写字符。示例:大小写转换的例子运行结果:作业:4、定义三个字符串“PHP1”、

44、“PHP2”,“PHP3”,将它们连接成一个字符串输出。5、使用substr()从“Hello World”中截取出“World”。6、使用substring()从“Hello World”中截取出“Hello”。7、将一个存有本小组学生姓名,且用符分开的字符串,用各个名字符分割存放到数组中。8、将“Hello World”全部转为小写,输出之后再全部转为大写。第二节 数学类一、说明:1、Math 类用于执行数学任务。2、Math类不需要创建,而直接使用。Math类的所有属性和方法都是静态的,只需使用语法“Math.方法名(参数)”或“Math.常量名”来调用即可,不需要实例化。3、使用:va

45、r pi_value=Math.PI;var sqrt_value=Math.sqrt(15);的方式访问其中的常量或方法。二、Math 的属性下面举几个常用的属性的例子:(1)Math.LOG10E:运行结果:(2)Math.PI:运行结果:(3)Math.SQRT2运行结果:三、Math的常用方法方法方法作用作用abs(x) 返回x的绝对值。 ceil(x)对x进行向上舍入成整数。floor(x)对x进行下舍入成整数。max(x,y) 返回 x 和 y 中的最高值。min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。random() 返回 0 1 之

46、间的随机数。round(x) 把数四舍五入为最接近的整数。sqrt(x) 返回数的平方根。 下面是几个常用方法的使用例子:(1)Math.abs(x) :返回数的绝对值。(2)Math.ceil(x):可对一个数进行上舍入。(3)Math.floor(x):对一个数进行下舍入。(4)Math.max(x.) :返回两个指定的数中带有较大的值的那个数。注意:该方法现在可以有多个参数。Math.min(x.)和max相同,不再举例。 (5)random() : 返回介于 0.0 1.0 之间的一个随机数。注意:该方法每次获取的数值都不一样,比如:(6)Math.round(x) :把一个数字舍入为

47、最接近的整数。1、使用max()函数求出3个数中的最大值,用min()函数求出其中的最小值。2、完成能生成4个09之间的随机数的程序。3、把本小组的学生放到数组中,每点击一次按钮,可以随机抽出本小组的一名学生显示到页面上4、设定圆的半径为2.5,求圆的面积、周长。小项目,完成如下图所示的计算器功能:只完成红框中内容。第三节:日期(Date)类一、定义日期对象1、说明:(1)与日期相关的运算被封装在Date类中,使用该类的方法和属性可以获取客户端操作系统的日期和时间值。(2)要调用Date类的方法(注:Date类没有自己的属性),首先必须使用构造器创建一个Dete类的实例。2、定义方式(1)定义

48、获取当前系统日期时间的对象:var nowDate=new Date();(2)定义参数为毫秒数的日期时间对象:var newDate=new Date(毫秒数);参数值表示从1970年1月1日午夜0时开始的毫秒数,返回该毫秒数代表的时间。(3)定义参数为日期时间字符串的对象var newDate = new Date(日期字符串) 它将参数表示的字符串型的日期值转为日期对象。格式可以有:月 日,年 时:分:秒 (月用英文,其他可以是数字,日年间一定有,)年/月/日 时:分:秒 (所有部分都是数字,年份四位,月是从011)(4)定义含有多个参数的对象var newDate=new Date(y

49、ear ,month ,day ,hour ,minuute ,second ,millisecond )说明:从前往后分别表示年、月、日、时、分、秒、毫秒。注意:月的值是从0开始,即0代表1月。 下面的例子分别验证了上边几种不同实例化的方式:二、常用方法方法名方法名说明说明getFullYear()从 Date 对象以四位数字返回年份getMonth()从 Date 对象返回月份 (0 11)。getDate()从 Date 对象返回一个月中的某一天 (1 31)。getHours()返回 Date 对象的小时 (0 23)。getTime()返回 1970 年 1 月 1 日至今的毫秒数。

50、parse()返回1970年1月1日午夜到指定日期(字符串)的毫秒数。setFullYear()设置 Date 对象中的年份(四位数字)。toLocaleString()根据本地时间格式,把 Date 对象转换为字符串。方法方法说明说明toLocaleTimeString()根据本地时间格式,把 Date 对象的时间部分转换为字符串。toLocaleDateString()根据本地时间格式,把 Date 对象的日期部分转换为字符串。说明:(1)Date类中存在很多的getXxx方法和对应的setXxx方法,上面只是列出了部分,用时可以查看JavaScript手册。(2)这类getXxx()方法

51、用法基本相同(当然setXxx()之间用法也相同),用时可以举一反三。1、getXxx()方法 :这类方法都是可以获取日期时间中的某部分内容,比如:getFullYear() :返回一个表示年份的 4 位数字。注:其他方法用法类似,不再举例。2、getTime() :可返回距 1970 年 1 月 1 日之间的毫秒数。下面的方式可以计算现在距1970年1月1日有多少年:3、 Date.parse(datestring):解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数,注意:该方法是静态方法,用类名直接调用。示例:4、setXxx()方法:一般用于设置某个日期时间值

52、。比如:setFullYear() :用于设置年份。语法:dateObject.setFullYear(year,month,day)说明:该函数还可以有第二个、第三个参数分别用来设置月份。示例:使用setFullYear()方法设置年份(月、日)5、toXxxString():这些方法的作用是将日期时间值格式化为中间单词(Xxx)指定的字符串格式的日期,比如:(1)toLocaleString() :可根据本地时间把 Date 对象转换为字符串,并返回结果。(2)toUTCString() :可根据世界时 (UTC) 把 Date 对象转换为字符串,并返回结果。示例:注意:如果进行日期间某个

53、值的算数运算时,需要先使用getXxx()方法获取到某个时间值,之后在运算,比如:作业:1、获取当前的系统日期值。 2、获取1970年1月1日到现在的毫秒数。 3、计算距离国庆节还有多少天?第四节:数组(Array)类一、说明:Array 对象用于在单个的变量中存储多个值。二、创建数组的3种方式:1、实例化一个长度为0的数组:var arr= new Array();示例:/声明一个长度为0的数组myArr。var myArr=new Array();(2)实例化一个长度为n的数组,n是参数。var arr=new Array(n);示例:/新建一个长度为5的数组,有5个元素。var myAr

54、r = new Array(5);(3)实例化一个赋初值的数组,包含多个参数。var arr = new Array(值1,值2,值3,.);示例:/创建一个数组,并且赋初值是1,2,3,4var myArr = new Array(1,2,3,4);【知识扩充】创建数组的另外一种方式:var colors = ”red”,”blue”,”green”; var colors = ;使用加下标索引的方式来获取数组中的一项值:colors0获取red值。如果下标值超过的数组的个数,则数组会自动增加到该所以值加1的长度。比如:访问colors3时,下标为3的值已经超限,则数组长度自动增1 ,变为4

55、。三、数组的属性length :设置或返回数组中元素的数目。注意:设置 length 属性可改变数组的大小。如设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。1、采用多种方式创建一个包含3个元素的数组(1)先创建一个空数组,之后向其中加入3个元素。(2)先创建一个长度为3的数组,之后再新增3个元素。(3)创建数组的同时,赋三个初值。2、将上面的数组长度增加2,查看数组中的元素值。3、将上面的数组长度变为2,查看数组中的元素值。【知识扩充】colors.length=4;/数组的元素个数增

56、加1个alert(colors3);/undefined。虽然长度增加一个但没有赋值。/colors3=”black”;/添加一个新的元素/alert(colors3);/显示添加的新元素值colorscolors.length=”brown”;/在最后面新增一个元素colors99=”black”;/在下标为99处添加一个元素alert(colors.length);/该数组长度变为100四、常用方法:常用方法:1、concat() :用于连接两个或多个数组。注:该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。注:字符串类中也有一个concat()函数,不知你还记得否?语法:ar

57、rayObject.concat(arrayX,arrayX,.,arrayX)示例:输出:2、join() :用于把数组中的所有元素放入一个字符串。语法:arrayObject.join(separator)示例:结果:注意使用该函数分割后变成字符串了3、pop() :用于删除并返回数组的最后一个元素。注意:该函数执行时除了删除最后一个元素,还将最后一个元素作为返回值,返回。示例:4、reverse():用于颠倒数组中元素的顺序。注意:该方法会改变原来的数组,而不会创建新的数组。5、sort() :用于对数组的元素进行排序。注意:数组在原数组上进行排序,不生成副本。不再讲解其他方法的用法,用

58、时可以查手册。 新建一个数组,两面包含3个元素,完成如下操作: 1、另外再新建两个数组,里面各包含两个元素,将这个数组连接在一起,组成一个新数组,并输出数组中的元素值。 2、将上面的3个数组转换成一个字符串输出。 3、获取并删除数组的第一个、最后一个元素值。 4、将数组排序。 5、将数组元素逆序排列。第四章 window对象一、浏览器对象介绍浏览器是JavaScript程序的宿主,为了能够和JavaScript程序进行通信,比如获得浏览器的信息和对浏览器做出响应。浏览器为JavaScript解释器提供了应用程序接口,它提供了很多宿主对象(浏览器对象)来完成这些操作,可以使用户能创建很多精美的网

59、页动态效果,这种宿主对象被称为BOM(Browser Object Model ,浏览器对象模型)。对象主要有:window、navigator、screen、history、location等。其中,window对象是一个顶层对象,其他对象都有该对象派生。二、window对象一、说明:1、Window 对象表示浏览器中打开的窗口。2、如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。3、没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。注意:(1)Window 对

60、象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写 document,而不必写 window.document。同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。(2)Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。(3)除了上面两个属性之外,parent

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论