web基础教程之Javascript.ppt
《web基础教程之Javascript.ppt》由会员分享,可在线阅读,更多相关《web基础教程之Javascript.ppt(71页珍藏版)》请在三一办公上搜索。
1、课程名称 web 基础课程(javascript),讲师:喻辉中软培训中心邮件:,JavaScript语言概况,什么是JavaScript?JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。简单的说它是一种运行在客户端的脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行。JavaScript使得网页制作的交互性更强,更生动和灵活。当在浏览网页时做了某种操作就产生一个事件,JavaScript所编写的程序对相应的事件做出反应。,JavaScript语言概况,基本特点:脚本
2、编写语言基于对象的语言简单性 简化的java语言;变量类型采用弱类型 安全性只能通过浏览器实现信息浏览或动态交互动态性 JavaScript是动态的,采用以事件驱动的方式进行的 跨平台性 JavaScript是依赖于浏览器本身,与操作环境无关,JavaScript语言概况,JavaScript和Java的区别:1、基于对象和面向对象 面向对象的三大特点(封装,继承,多态)缺一不可。通常“基于对象”是使用对象,但是无法利用现有的对象模板产生新的对象类型.2、执行过程不同 js是浏览器读取它们的时候才进行编译、执行 3、强变量和弱变量 JavaScript Java var n=1 int n=1
3、;n=1.5 float n=1.5;n=“董爽爽”String n=“董爽爽”;4、嵌入方式不一样JavaScript:.Java:.,JavaScript语言概况,JavaScript程序编写注意事项:1、JS是区分大小写的 函数名称为“myfunction”并不和“myFunction”相同 2、空格的使用 JS会忽略多余的空白。name=“Hege“与 name=”Hege”相同3、JS的注释 单行注释:/this is a comment多行注释:/*This is a comment several lines*/4、若不认识JavaScript代码的浏览器,则所有在其中的标识均被
4、忽略;若认识,则执行其结果。,JavaScript引入方式,HTML的任意位置都可以引入JavaScript,有两种方式引入JavaScript一种是直接在HTML文档中直接写:例如:例子演示:firstscript.htmlDocument.write()是文档对象的输出函数,其功能是将括号中的字符或变量值输出到窗口;document.close()是将输出关闭。,JavaScript运行方式,可以直接在HTML页面中调用JavaScript函数,也可以通过链接方式运行指定的函数 alert(“Hello,World!”);点击这里会弹出一个alert框其中,alert是JavaScript
5、内置的一个函数,用于弹出对话框。例子:secondscript.html,JavaScript引入方式,Javascript第二种引入方式:是写单独的JS文件,然后在HTML中引入该文件:引入JS文件后,在HTML文件中就可以调用JS文件定义的函数了还包含了一个language属性,用于指定使用的脚本语言例子:thirdscript.html,JavaScript三种消息框,创建三种消息框:警告框、确认框、提示框。警告框:Alert()确认框:Confirm()提示框:Prompt()打开窗口:Open()扩展:子父页面传值,Javascript基本构成,变量语句三种控制语句函数对象方法属性,
6、JavaScript变量,JavaScript语法上与Java十分相似,不同的是JavaScript不是强类型,变量没有任何类型JavaScript不是强类型语言,变量可以不声明而直接使用。即使声明也不用指明类型var=;或者:=;,JavaScript变量,JavaScript变量的类型可以是:1、整型 可以是正整数、0、负整数,可以是十进制、八进制、十六进制。八进制“0”,十六进制加“0 x”。2、浮点型 即“实型”3、字符串型 用单引号或双引号。4、布尔型 true和 false。5、对象,JavaScript语句,以分号结束,可以使用将多个语句括在一起JavaScript语句在语法上与
7、Java基本相同,也包括了顺序、分支、循环三种程序结构顺序结构按语句顺序执行;分支结构根据条件执行不同的语句块;循环则反复执行同一语句块。,Javascript分支结构,if语句if()else;switch语句switch(e)case r1:break;case r2:break;default:.例子:ifswitch.html,Javascript循环结构,for 循环for(=;);for循环例子:for.htmlwhile循环while();do while();while循环例子:while.html,Javascript循环结构,break结束循环,跳出循环体continue结
8、束本次循环,进入下一次循环例子:break&continue.html,Javascript函数,JavaScript中函数有多种,如对象的方法、全局函数等等。这里所说的函数是指自定义函数。定义函数用以下语句:function 函数名(参数集)函数体;.return;.其中,用在 function 之后和函数结尾的大括号是不能省去的,就算整个函数只有一句。,Javascript对象,JavaScript与Java类似,也采用了对象化编程对象包括基本对象和对象DOM基本对象:可以将声明的变量视为对象,依其类型不同可以调用对象不同的属性和方法DOM(document object model)对象
9、:页面内容也可以抽象成对象,依其种类的不同,也有不同的属性和方法 简单的说,DOM是一种理念,一种思想,一种方法使 Web开发人员可以访问HTML元素!,Javascript对象,基本对象全局对象Global数字对象Number字符串对象String数组对象Array数学对象Math日期对象Date,Javascript对象,对象具有属性、方法和事件三大特征。属性:决定了对象的特征,如长度、颜色等等。方法:是对象可以做的事情,通过调用方法达到改变对象状态的目的事件:能响应发生在对象上的事情,全局对象,全局对象是一个虚拟的对象,通常用Global代表它JavaScript有一些全局的函数,通常认
10、为是Global对象的,调用这些方法时直接写名字就可以了,无须用对象名限定。属性NaN 非数字 var a=abc;alert(parseInt(a);,全局对象,方法isFinite()如果括号内的数字是“有限”的(介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间)返回 true;否则false。isNaN()如果括号内的值是“NaN”则返回 true 否则返回 false。parseInt()把括号内的内容转换成整数。如果字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。parseFloat()转换浮点数,其它同上 例子:glo
11、ble.html,Number对象,属性 MAX_VALUE:Number.MAX_VALUE,返回“最大值”MIN_VALUE:Number.MIN_VALUE;返回“最小值”NaN:Number.NaN 或 NaN;返回“NaN”NEGATIVE_INFINITY:Number.NEGATIVE_INFINITY,返回负无穷大,比“最小值”还小的值。POSITIVE_INFINITY:Number.POSITIVE_INFINITY;返回正无穷大,比“最大值”还大的值。方法toString()用法:.toString();返回字符串形式。若 a=123;则 a.toString()=123
12、。toLocaleString()用法:.toLocaleString();返回一个日期,该日期使用当前区域设置并已被转换为字符串。valueOf()用法:.valueOf();返回指定对象的原始值。例子:numberobject.html,String对象,属性length:返回该字符串的长度。方法charAt()用法:.charAt();返回该字符串位于第位的单个字符。charCodeAt()用法:.charCodeAt();返回该字符串位第位字符的 ASCII 码。indexOf()用法:.indexOf(,);找到返回位置。没有找到就返回“-1”。lastIndexOf()用法:.la
13、stIndexOf(,)。找到返回位置。没有找到就返回“-1”。,String对象,split()用法:.split();返回一个数组。substring()用法:.substring(,);返回原字符串的子字符串。substr()用法:.substr(,);返回原字符串的子字符串。toLowerCase()用法:.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。toUpperCase()用法:.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。例子:stringobject.html,Array对象,JavaScript中的数组对象与Java
14、中的数组对象相同,也是一个对象的集合。不同在于JavaScript中数组中的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,从零开始。数组定义方法:var=new Array();多维数组定义:var myArray=new Array(new Array(),new Array(),new Array(),.);,Array对象,数组元素访问方法:=.;数组初始化方法:var=new Array(,.);例如,var myArray=new Array(1,4.5,Hi);var myArray=new Array(new Array(1,2,3),ne
15、w Array(5,6,7);,Array对象,属性length 用法:.length。方法join()用法:.join();返回字符串,把数组元素用串起来。reverse()用法:.reverse();使数组中的元素顺序反过来。slice()用法:.slice(,);返回原数组的子集,始于,终于。sort()用法:.sort();例子:arrayobject.html和Array.html,Math对象,Math对象提供了与数学计算相关的属性和方法Math对象的属性和方法调用时的格式都是Math.属性E 返回常数 e(2.718281828.)。LN2 返回 2 的自然对数(ln 2)。LN
16、10 返回 10 的自然对数(ln 10)。LOG2E 返回以 2 为低的 e 的对数(log2e)。LOG10E 返回以 10 为低的 e 的对数(log10e)。PI 返回(3.1415926535.)。SQRT1_2 返回 1/2 的平方根。SQRT2 返回 2 的平方根。,Math对象,方法 abs(x)返回 x 的绝对值。acos(x)返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。asin(x)返回 x 的反正弦值。atan(x)返回 x 的反正切值。atan2(x,y)返回复平面内点(x,y)对应的复数的幅角,用弧度表示,其值在-到 之间。ceil(x)返回大于等于
17、x 的最小整数。cos(x)返回 x 的余弦。exp(x)返回 e 的 x 次幂(ex)。,Math对象,floor(x)返回小于等于 x 的最大整数。log(x)返回 x 的自然对数(ln x)。max(a,b)返回 a,b 中较大的数。min(a,b)返回 a,b 中较小的数。pow(n,m)返回 n 的 m 次幂(nm)。random()返回大于 0 小于 1 的一个随机数Math.random()round(x)返回 x 四舍五入后的值。sin(x)返回 x 的正弦。sqrt(x)返回 x 的平方根。tan(x)返回 x 的正切。例子:mathobject.html,Date对象,Da
18、te 可以储存任意一个日期,从 0001 年到 9999 年,精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。,Date对象,定义日期对象:var d1=new Date;var d2=new Date();d1和d2的初始值都是当前时间。如果要自定初始值,可以用:var d1=new Date(99,10,1);/99 年 10 月 1 日 v
19、ar d2=new Date(Oct 1,1999);/同上,Date对象,方法g/setUTCFullYear()返回/设置年份g/setUTCYear()返回/设置年份g/setUTCMonth()返回/设置月份,一月返回0g/setUTCDate()返回/设置日期g/setUTCDay()返回/设置星期,0 表示星期天g/setUTCHours()返回/设置小时数,24小时制g/setUTCMinutes()返回/设置分钟数g/setUTCSeconds()返回/设置秒钟数g/setUTCMilliseconds()返回/设置毫秒数g/setTime()返回/设置时间,该时间就是日期对象
20、的内部处理方法:从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。,Date对象,getTimezoneOffset()返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。toString()返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800 2000”。toLocaleString()返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。如:“2000-07-21 15:43:46”。toGMTString(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 基础教程 Javascript
链接地址:https://www.31ppt.com/p-6523294.html