JavaScript基础知识完整版课件.ppt

上传人:小飞机 文档编号:1565816 上传时间:2022-12-06 格式:PPT 页数:364 大小:4.85MB
返回 下载 相关 举报
JavaScript基础知识完整版课件.ppt_第1页
第1页 / 共364页
JavaScript基础知识完整版课件.ppt_第2页
第2页 / 共364页
JavaScript基础知识完整版课件.ppt_第3页
第3页 / 共364页
JavaScript基础知识完整版课件.ppt_第4页
第4页 / 共364页
JavaScript基础知识完整版课件.ppt_第5页
第5页 / 共364页
点击查看更多>>
资源描述

《JavaScript基础知识完整版课件.ppt》由会员分享,可在线阅读,更多相关《JavaScript基础知识完整版课件.ppt(364页珍藏版)》请在三一办公上搜索。

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

2、over事件等等。在JavaScript中,事件往往与事件处理程序配套使用。,2、客户端脚本语言:不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说JavaScript是在用户的浏览器上运行,不需要服务器的支持而可以独立运行。JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行,并且速度较慢。,二、JavaScript发展历史:1、1995年2月,就职于NetScape公司 布

3、兰登 艾奇,开发一种名为LiveScript的脚本语言,为了赶在发布日期前完成LiveScript的开发,NetScape与Sun公司建立了一个开发联盟。为了搭上媒体热炒的Java的顺风车(当时Java已经很火),临时把LiveScript改名为JavaScript(1.0)。2、此时,微软在其Internet Explorer 3中加入了名为JScript的JavaScript实现(命名为JScript是为了避开与NetScape有关的授权问题)。,3、微软推出JScript后,JavaScript出现了3个不同的版本:NetScape Navigator中的JavaScript、Inter

4、net Explorer中的JScript和ScriptEase中的CEnvi。当时没有标准规定JavaScript的语法和特性,3个版本并存的局面已经暴露了这个问题(不兼容问题)。所以,JavaScript的标准化问题被提上了议事日程。4、1997年,欧洲计算机制造商协会(ECMA)完成了ECMA-262(发音“ek-ma-script”)的新脚本语言的标准。,5、以后,浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础,也在不同程度上取得了成功。注:虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却

5、比ECMA-262中规定的多得多。一个完整的JavaScript实现由下列3个不同的组成部分:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。,三、JavaScript开发及运行环境1、开发环境:JavaScript是一种脚本语言,代码不需要变异成二进制,而是以文本的形式存在,因此任何文本编辑器都可以作为其开发环境,比如记事本(虽然很少人使用)、EditPlus、Ultra Edit(UE)、Dreamweaver等。,2、运行环境:JavaScript依赖于浏览器,即浏览器是JavaScript的运行环境。当前主流浏览器都能运行今后学习的JavaScript代

6、码,若出现浏览器兼容问题,到时会请同学们注意。不同的编辑器会对语法进行简单的错误识别,不同的浏览器也提供对JavaScript程序的调试功能。问:还记得当前主流的浏览器吗?,注意:一个页面中只要一个地方JavaScript语法错误,则整个JavaScript程序都不执行。为我们找错和调试带来了困难。,第二节 定义和使用JavaScript方式,1、定义方式(1)嵌入HTML文件中一般放在(事实上可以放在任何位置)中,格式:/此处为JavaScript代码,(2) 定义专门的外部文件 将JavaScript代码写在一个独立的脚本文件(扩展名为.js)中,在页面中使用时直接导入该脚本文件即可,导入

7、的格式: 注意:不能这么写: 错误!必须有结束标签,知识扩充:除了上面两种最为常用的方式外,还可以在一下地方定义JavaScript代码:(1)在HTML的元素事件属性中 比如,按钮的单击事件,代码:示例:,(2)在超链接中定义 语法:超链接示例:效果:,2、一个简单的JavaScript的例子(1)嵌入到HTML文件中,单击后显示的效果,(2)定义专门的js文件A、定义一个扩展名为.js的文件,其中定义如下代码:,B、定义一个HTML文件,导入该外部js文件,并调用js文件中的代码:,C、单击“按钮”后,同样实现效果:,三、作业1、在HTML嵌入一段JavaScript代码,并定义一个按钮,

8、当点击按钮时,弹出“欢迎学习JavaScript”。2、将上题的JavaScript代码放在单独的js文件中,运行。,第二章 JavaScript语言基础,一、对一些问题的说明:1、区分大小写:JavaScript中的变量、函数名和操作符都区分大小写,关键字不能做变量或函数名字。所以,test和Test是两个变量,typeof因是关键字所以不能是函数名或者变量名。2、标识符:就是变量、函数、属性、函数的参数等。规定:(1)第一个字符必须是字母、下划线(_)、美元符号($)。(2)其他字符可以是字母、下划线、美元符号或数字。,第一节:数据类型、变量和运算符,3、注释:包括单行注释和多行注释。(1

9、)单行注释:/ 如: /这是一个单行注释(2)多行注释 /* */如:/*这是一个多行注释*/,4、语句:JavaScript中语句以一个;结尾(英文分号)。但可以省略 ; 。比如:注:分号虽不是必须的,但建议必须加上它,这样可以提高效率(解析器不必再花时间推测应该在哪里插入分号了)和避免错误。,5、在控制语句中,单行语句可以不加(不放在代码块中),但强烈加上即使代码块中只有一条语句。多行语句如果放在一个代码块中执行,必须加,二、数据类型JavaScript是弱类型脚本语言,使用变量之前,无须定义,想使用某个变量时直接使用即可,JavaScript会根据需要自动确定数据类型和进行数据类型的转换

10、,但每个变量还是要确定数据类型的。JavaScript中数据类型基本数据类型(简单数据类型)和复合数据类型(复杂数据类型)两类,不同大类下面又有自己的小类,如下表:,1、typeof操作符:用来检测给定变量的数据类型对一个值使用typeof操作符可能返回下列某个字符串之一:(1)undefined:值未定义时。(2)boolean:值是布尔值时。(3)string:值是字符串时。(4) number:值是数值时。(5)object:值是对象或者null(代表空对象引用)。(6)function:值是函数时。,示例:,注:A、typeof操作符的操作数可以是变量也可以是数值字面量。如:B、因ty

11、peof是一个操作符而不是函数,所以可以使用小括号(())将操作数括起来,也可以不使用,如:C、typeof(null) 返回值是object,原因在于特殊值null被认为是一个空对象的引用(一个对象为空时,值是null)。上页中有例子。,2、Undefined类型:该类型只有一个值,即特殊的undefined。在使用var声明变量但未对其加以初始化时,这个变量值就是undefined。(注意值为小写,JS大小写敏感)。示例:,知识扩充:包含undefined值的变量和尚未定义的变量是不一样的。例如:,对于尚未声明的变量,可以使用typeof操作符检测其数据类型。返回值也为:undefined

12、值,和定义后未赋初值的变量一样。即使用一个未定义的变量时没有值,但其类型为Undefined。,建议:定义一个变量时显式地初始化变量。,3、Null类型:只有一个值,即:null。null值表示一个空对象(这正是使用typeof检测null值会返回“object”)。如:,知识扩充:如果定义的变量准备将来用于保存对象,那么最好将该变量初始化为null而不是其他值。这样,直接检查null值就可以判断相应的变量是否已经保存了一个对象的引用:var car=null;/其他操作if(car!=null) /前提是car已赋初值null/对car进行某些操作另:,4、Boolean类型:该类型有两个值

13、:true和false。(必须全是小写)可以将其他值通过Boolean()函数转换为Boolean类型,返回值取决于要转换值的数据类型和实际值。,其他类型转为Boolean类型的规则:,知识扩充:使用流控制语句(比如if语句)时,会将其他值自动转换为相应的Boolean转换(根据相应的数据类型和对应的值)。比如:运行结果:,5、Number类型:包括整数和浮点数值(双精度数值)。除了常用的十进制外,还可以表示八进制和十六进制。八进制的第一位必须是0,后跟(07),十六进制前两位是0 x,后跟(09及AF)。八进制和十六进制表示的数值最终将被转换为十进制。,(1)浮点数值:该数值中必须包含一个小

14、数点。var num1=1.1;var num2=0.1;var num3=.1;/有效,但不推荐。如果数值只有小数部分,则可以省略整数部分的0。,(2)数值转换:2个函数将非数值转换为数值:parseInt():用于将字符串转换成整数数值。parseFloat():用于将字符串转换成浮点型数值。,arseInt():将字符串转换为整数。规则:A、它会忽略字符串前面的空格,直至找到第一个非空格字符,如果第一个字符不是数字字符或者负号,则返回NaN。B、转换空字符串返回NaN。 C、如果第一个字符是数字字符,会接着进行解析,直到完成或者遇到非数字字符。,D、使用该函数的第二个参数指定转换时要转成

15、的进制数。指定基数会影响到转换的输出结果:,arseFloat():将一个字符串转成浮点数。和parseInt基本相同,区别:(1)字符串中的第一个小数点是有效的,第二个小数点是无效的,后面的字符串会被忽略。“22.34.5” 转成 22.34(2)始终会忽略前导0(把前导0直接去掉),十六进制数始终被转成0,只解析十进制数,所以没有第二个参数。即只能转成十进制(3)字符串中没有小数点或小数点后边全是0,则该函数返回整数。,注意:如果需要将表单中的数值(字符串)在前台通过JS进行算数运算时,必须先使用parseInt或者parseFloat进行转换再运算。,知识扩充:(1)保存浮点数值需要的内

16、存空间是保存整数的两倍,因此js会自动将一些能够转换为整数的自动转换为浮点数,如小数点后没跟任何数字(如1.)或者浮点数本身是个整数(如1.0)。如:结果都为1:,(2)可以使用e表示法(科学计数法),值为e前面的*10的指数次幂。var num=3.125e7; /等价于 31250000var num=3e-7;/0.0000003;,(3)由于精度问题,导致进行浮点数的算数运算时有时结果不准确。如:第一个alert输出: 第二个输出:,(4)数值范围:ECMAScript表示的最小数值是:Number.MIN_VALUE(一般浏览器该值是:5e-324)能够表示的最大值是:Number.

17、MAX_VALUE.上面两个值,不同浏览器会有区别,使用下面的语句可测出:,(5)NaN:(Not a Number)。表示一个本来要返回数值的操作未返回数值的情况,比如:任何涉及NaN的操作(如NaN/10)都会返回NaN 。NaN与任何值都不想等。包括NaN本身。alert(Nan=Nan);/falseisNaN(),用来判断数值是否“不是数值”,不是数值时返回true,否则,返回false。,6、String类型:表示由0或多个16位Unicode字符组成的字符序列(每个字符16位Unicode编码),即字符串。字符串既可以是双引号()也可以是单引号()表示。下面的表示都是合法的:va

18、r str1 = “hello”; var str2 = hello这两种表示的语法在解释上没有任何区别,但必须匹配,否则会出现错误。,(1)有一些转义字符具有特殊含义:n (换行)t(制表)b(空格) r(回车) f(进纸) (斜杠) (单引号) ”(双引号),(2)length:该属性返回字符串的长度。关于汉子等双字节字符,length属性可能不会精确地返回字符串中的字符数目。(实际上,js中双字节字符算一个长度,是由unicode编码决定的(该编码用2个字节表示) alert(软件系.length);/3,(3)【了解】字符串是不可变的,即,字符串一旦创建,值不能再改变。要改变某个变量保

19、存的字符串,首先要销毁原来的字符串,然后再用一个包含新值的字符串填充该变量。var lang=”Java”;/开辟空间lang = lang+”Script”;/Scirpt字符串也会开辟空间。再开辟一个容纳Java和Script的空间放新串,并且销毁原来的2字符串空间。这样对于以前的浏览器性能较低,现在已解决了这个效率低的问题。,(4)【了解】将其他数值转换为字符串: A:.toString():函数 可以将其他数值(包括字符串,除了null和undefined值)转换为字符串表现。 var age=11; var ageAsString = age.toString();/”11” var

20、 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 ,转成十进制num.toString(16);/A 或a ,转成十六进制B:String(要转换的数值):该函数和.toString()的区别在于可以转换null和undef

21、ined值。var value1=null,value2;String(value1);/nullString(value2);/undefined,作业: 1、使用typeof关键字测试不同变量的数据类型,并输出他们的数据类型。 2、使用parseFloat函数,编写一个可以进行加、减、乘、除、取余运算的简单计算器。,三、变量:JavaScript的变量是松散类型的,所谓松散类型是可以用来保存任何类型的数据;并且一个变量的值类型是可变的。,1、定义方式:A、使用var操作符(关键字),后跟变量名的形式。,B、不适用var关键字,使用时直接赋初值。【不推荐】,2、作用范围:根据范围不同,变量分

22、为:全局变量和局部变量。函数外边直接定义的变量称为全局变量,函数内部定义的变量称为局部变量。如:,很奇怪的是:JavaScript中函数内定义的变量没有块范围,而是在整个函数内有效,如:哪怕是在函数中间使用var声明的变量,在函数开始处照样有效,只是此时没有赋初值。,3、使用var和不使用的区别:A、使用var定义变量,程序会强制定义一个新变量;B、不使用var定义变量,系统会优先在当前上下文中搜索是否存在该变量,只有变量不存在的前提下,才会重新定义一个新变量。当然,推荐使用var在函数外边定义全局变量,而在函数内部使用var定义局部变量。,函数内部去掉var后,输出不同的结果:,四、操作符:

23、,1、+:既是字符串运算符又是加法运算符,在进行变量的运算时取决于变量的类型。 数字字符串和数值相加时,数值自动转为字符串再运算;想减时,字符串自动转为数值再运算。,2、=和=区别(!=和!=区别相同)=:先进行类型转换,再比较类型和值。(值相等,类型不同,则为true)=:不进行类型转换,比较类型和值。(值相等,类型相同,才为true),3、关系运算符也可以比较字符串,规则是按照字母的Unicode值进行比较,若第一个字母相同,则进行第二个的比较,以此类推。,4、typeof运算符,前面已经详细介绍。5、instanceof判断某个变量是否为指定类的实例。如:,作业:1、使用var声明两个整

24、型变量,分别输出它们的和、差、积、商、取余结果。2、声明 var=5和var=5,使用=和=判断它们是否相等。3、练习instanceof的用法。,第二节流程控制和函数,一、流程控制:1、选择结构:if 、switch2、循环结构:while 、do while、for、for in 3、终止循环:break、continue,关于for in:作用:(1)遍历数组中的所有数组元素 (2)遍历JavaScript对象的所有属性结果:,二、函数:1、定义函数的方式(2种):A、定义命名函数格式:function funcName(参数值)/函数体,比如:如:function sayHi(name

25、,message)alert(“hello”+name+”,”+message);,B、定义匿名函数:格式:var 变量名 = function(参数)/函数体,比如修改上面的函数为var sayHi = function (name,message)alert(“hello”+name+”,”+message);此处,sayHi的作用就是指向定义的函数,类似函数的名字。,2、函数调用的方式(3种):A、直接调用:函数名(实参值) ; /如果函数有参数时。比如调用sayHi函数:,B、在表达式中调用这种方式比较适合有返回值的函数,返回值作为表达式的一部分参与运算,有时还会和(alert、doc

26、ument)等语句配合输出。,C、在事件中调用当调用事件时,JavaScript可以调用某个事件来响应这个函数,比如:,注:(1)return 语句不是函数中必须的,但任何函数在任何时候都可以通过return语句后跟要返回的值实现返回值。function sum(num1,num2)return num1+num2;/执行到return后会立即退出。 (2)若在一个文件中,定义函数名字相同,会使用最后定义的函数。,作业:1、使用JavaScript输出19002015年之间的闰年。(1)能够被400整除的是闰年;(2)能够被4整除,并且不能被100整除2、定义一个函数,该函数用来接收一个生日值

27、(月日组成的4位字符串,比如“0210”,“1225”等),并根据该生日值提示属于的星座。,第三章JavaScript核心类,第一节 字符串类,一、字符串类(String)String类是字符串类型(String)的封装类,它允许用户使用String类的方法和属性操作操作初始的字符串类型值(或说:字符串可以直接使用String类中的属性和方法) 【明白这句话特别重要,因为其他的基本数据类型也都有相应的包装类,这些类型值(如果有)也可以直接操作包装类的属性或者方法, 比如Boolean类、Number类和String类,另外复合类型也有对应的类,比如Array类、Function类、Object

28、类等】,1、字符串对象创建的方式A、直接声明字符串常量【最常用】,格式:var 字符串变量=字符串;/也可以是单引号比如:B、使用new关键字实例化字符串对象,格式: var 字符串对象=new String(字符串);,比如:根据我们以前学习的面向对象可知,这一步就是去实例化String类,得到一个对象str,实例化时会自动去调用String类中的构造方法,完成赋初值的操作。,2、String类的常用属性: length功能:该属性用来返回字符串中的数量。说明:中文字符虽然是双字节,也算是一个单字符。比如:注意:JavaScript中调用类中的属性、方法,通过 .(英文点号),和PHP通过-

29、不同。,3、String类中的常用方法:,详细解释(1)charAt() : 可返回指定位置的字符。语法: stringObject.charAt(index)提示和注释: 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。,实例:在字符串 Hello world! 中,我们将返回位置 1 的字符:返回结果:e,(2)charCodeAt() :返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。注意:方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不

30、过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。语法:stringObject.charCodeAt(index),提示和注释:字符串中第一个字符的下标是 0。如果 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。实例:在字符串 Hello world! 中,我们将返回位置 1 的字符的 Unicode 编码:值为:101,(3)indexOf() :返回某个指定的字符串值在字符串中首次出现的位置。语法:stringObject.indexOf(searchvalue,fromindex),说明:该方法将从头到尾地检索字符串 string

31、Object,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。提示和注释:(1)注释:indexOf() 方法对大小写敏感!(2)如果要检索的字符串值没有出现,则该方法返回 -1。,实例:将在 Hello world! 字符串内进行不同的检索:运行结果:,作业:1、分别输出“Hello World ”和“你若安好,便是晴天”两个字符串的长度。2、输出“Hel

32、lo World”中第三个字符和第五个字符的编码。3、计算“Hello World”中第一个“o”的下标,(4)concat() :用于连接两个或多个字符串。语法:stringObject.concat(stringX,stringX,.,stringX)说明:concat() 方法将把它的所有参数转换成字符串,然后按顺序连接到字符串 stringObject 的尾部,并返回连接后的字符串。请注意,stringObject 本身并没有被更改。,提示和注释:使用 + 运算符来进行字符串的连接运算通常会更简便一些。实例:将创建两个字符串,然后使用 concat() 把它们显示为一个字符串:运行结果

33、:,(5)lastIndexOf() :返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。语法:stringObject.lastIndexOf(searchvalue,fromindex),返回值:如果在 stringObject 中的 fromindex 位置之前存在 searchvalue,则返回的是出现的最后一个 searchvalue 的位置。即从fromindex 位置向前查找,找到最后一次出现的位置。说明:该方法将从尾到头地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字

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

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

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

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

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

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

40、qrt_value=Math.sqrt(15);的方式访问其中的常量或方法。,二、Math 的属性,下面举几个常用的属性的例子:(1)Math.LOG10E:运行结果:(2)Math.PI:运行结果:,(3)Math.SQRT2运行结果:,三、Math的常用方法,下面是几个常用方法的使用例子:(1)Math.abs(x) :返回数的绝对值。(2)Math.ceil(x):可对一个数进行上舍入。,(3)Math.floor(x):对一个数进行下舍入。(4)Math.max(x.) :返回两个指定的数中带有较大的值的那个数。注意:该方法现在可以有多个参数。Math.min(x.)和max相同,不再

41、举例。,(5)random() : 返回介于 0.0 1.0 之间的一个随机数。注意:该方法每次获取的数值都不一样,比如:,(6)Math.round(x) :把一个数字舍入为最接近的整数。,1、使用max()函数求出3个数中的最大值,用min()函数求出其中的最小值。2、完成能生成4个09之间的随机数的程序。3、把本小组的学生放到数组中,每点击一次按钮,可以随机抽出本小组的一名学生显示到页面上4、设定圆的半径为2.5,求圆的面积、周长。,小项目,完成如下图所示的计算器功能:只完成红框中内容。,第三节:日期(Date)类,一、定义日期对象1、说明:(1)与日期相关的运算被封装在Date类中,使

42、用该类的方法和属性可以获取客户端操作系统的日期和时间值。(2)要调用Date类的方法(注:Date类没有自己的属性),首先必须使用构造器创建一个Dete类的实例。,2、定义方式(1)定义获取当前系统日期时间的对象:var nowDate=new Date();(2)定义参数为毫秒数的日期时间对象:var newDate=new Date(毫秒数);参数值表示从1970年1月1日午夜0时开始的毫秒数,返回该毫秒数代表的时间。,(3)定义参数为日期时间字符串的对象var newDate = new Date(日期字符串) 它将参数表示的字符串型的日期值转为日期对象。格式可以有:月 日,年 时:分:

43、秒 (月用英文,其他可以是数字,日年间一定有,)年/月/日 时:分:秒 (所有部分都是数字,年份四位,月是从011),(4)定义含有多个参数的对象var newDate=new Date(year ,month ,day ,hour ,minuute ,second ,millisecond )说明:从前往后分别表示年、月、日、时、分、秒、毫秒。注意:月的值是从0开始,即0代表1月。,下面的例子分别验证了上边几种不同实例化的方式:,二、常用方法,说明:(1)Date类中存在很多的getXxx方法和对应的setXxx方法,上面只是列出了部分,用时可以查看JavaScript手册。(2)这类get

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

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

46、示例:,注意:如果进行日期间某个值的算数运算时,需要先使用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);示例:/新建一个长度

47、为5的数组,有5个元素。var myArr = 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时,下标为

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

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

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

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号