javascript学习介绍课件.ppt

《javascript学习介绍课件.ppt》由会员分享，可在线阅读，更多相关《javascript学习介绍课件.ppt（68页珍藏版）》请在三一办公上搜索。

1、javascript学习目录(1),javascript介绍javascript引入变量声明与数据类型运算符流程控制函数数组,zixue.it 燕十八精品PHP教程,javascript学习目录(2),对象内置对象学习DOM操作DOM事件window对象特效及表单验证,zixue.it 燕十八精品PHP教程,1.1 javascript是什么?,JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关J

2、ava的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。,zixue.it 燕十八精品PHP教程,1.2 javascript如何改变网页,铲掉P标签把a标签复制增加一个span标签,DOM模型,javascript引擎,zixue.it 燕十八精品PHP教程,1.3 javascript只能用来改变网页?,javascript引擎在,javascript的功能远比你知道的要强大.javascript的解释引擎放在哪儿,js的作用就可以发挥到哪儿不局限于浏览器比如:目前流行的node.js服务器端,即是在服务器上运行js,通过js来操作目录,文件,连接数

3、据库等.,zixue.it 燕十八精品PHP教程,2.1 javascript代码如何引入?,code.,zixue.it 燕十八精品PHP教程,3.1 变量的声明的本质,年龄,5,林书豪,MVP,声明一个变量,实质是在内存中产生了一个变量名,和一个变量值,并且该变量名自身又有一个属性值,是指向变量值的位置,zixue.it 燕十八精品PHP教程,3.2 怎么声明变量?,var a=3;/声明变量a,且把3赋给a作值var b=a;/声明变量b,且把a的值赋给bvar a=b=3;/声明变量a,b,并把3赋给a,bvar a,b;/声明变量a,b,但不赋值,zixue.it 燕十八精品PHP教

4、程,3.3 变量名有什么要求?,1:以字母,_,$,数字的组合,但是,第1个字符不能是数字.或者说:以字母,_,$开头,后面由字母,_,$,数字的组合都可以2:比较新的js标准已经支持用任何UNICODE字符做变量名(当然,仍然不能用数字开头).这意味着,汉字可以做变量名(实际开发勿用)3:变量名区分大小写4:要求命名有意义,不要用 aaa,c,asdf这样的变量名,zixue.it 燕十八精品PHP教程,3.4 变量类型有哪几种?,衍生类型数组类型对象类型函数类型,基本类型数值类型字符串类型布尔值类型nullundefined,zixue.it 燕十八精品PHP教程,4.1 运算符,算术运算

5、符+-*/%赋值运算符=+=-=*=/=%=条件运算=!&,zixue.it 燕十八精品PHP教程,5.1 流程控制,顺序语句分支语句 if,if/else,if/else if/./if,switch循环语句while,do/while,for,zixue.it 燕十八精品PHP教程,5.2 顺序结构,按顺序,一句一句来执行;,document.write(8点应该起床);document.write(刷牙);document.write(洗脸);,zixue.it 燕十八精品PHP教程,5.3 单路分支结构-if,if(exp)语句1;语句2;语句.N;解释:如果表达式exp为真,则内的代

6、码块,则执行,如果为假,则不执行,zixue.it 燕十八精品PHP教程,5.4 双路分支结构-if/else,if(exp)代码段1;else 代码段2;,解释:如果 exp为真,执行代码段1否则,执行代码段2,代码段1,代码段2必有且只有一段执行,zixue.it 燕十八精品PHP教程,5.5 多路分支结构-if/else if/else,if(exp1)代码段1;else if(exp2)代码段2;else if(exp3)代码段3;else 代码段N;,如果exp1为真,则执行代码段1如果exp2为真,则执行代码段2.如果都不满足,执行代码段N,zixue.it 燕十八精品PHP教程,

7、5.6 多路分支结构-switch,switch(变量)case 值1:代码段1;break;case 值2 代码段2;break;case 值3:代码段3;break;,如果等于 值1执行代码段1;退出;如果等于 值2执行代码段1;退出;如果等于 值3执行代码段3;退出;,zixue.it 燕十八精品PHP教程,5.7 循环结构-while循环,while(exp)代码段;,如果exp为假,while结束;如果为exp真,执行循环体中的代码段;再回到while判断,zixue.it 燕十八精品PHP教程,5.8 while循环的特点,特点：先判断表达式，后执行循环体说明：、循环体有可能一次也

8、不执行、循环体可为任意类型语句、下列情况，退出while循环：条件表达式不成立（为false）循环体内遇break，goto、无限循环:while(1)循环体;,zixue.it 燕十八精品PHP教程,5.8 do-while循环的特点,do 代码段;while(exp);,执行循环体中的代码段;再回到while判断如果exp为假,while结束;如果为exp真,循环体至少执行一次,zixue.it 燕十八精品PHP教程,5.9 for循环,for(exp1;exp2;exp3)循环体,先执行且只执行一次exp1,再判断exp2是否为真,如果为真则执行循环体.执行循环体后,执行exp3;再回到

9、exp2,zixue.it 燕十八精品PHP教程,5.9 循环结构练习题,1:用while和for循环计算1到100之和2:面试题,3:百钱百鸡问题:张丘建算经成书于公元5世纪，作者是北魏人书中最后一道题堪称亮点，通常也被称为“百钱买百鸡”问题，民间则流传着县令考问神童的佳话书中原文如下：今有鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买鸡百只，问鸡翁、母、雏各几何？题目的意思是，公鸡5文钱1只，母鸡3文钱1只，小鸡1文钱买3只，现在用100文钱共买了100只鸡，问：在这100只鸡中，公鸡、母鸡和小鸡各是多少只？（设每种至少一只）,zixue.it 燕十八精品PHP教程,补充材料：百鸡

10、术相传在南北朝时期(公元 386 年公元 589 年),我国北方出了一个神童,他反映敏捷,计算能力超群,许多连大人一时也难以解答的问题,他一下子就给算出来了.远远近近的人都喜欢找他计算数学问题。神童的名气越来越大,传到当时宰相的耳中。有一天,宰相为了弄清神童是真是假,特地把神童的父亲叫了去,给了他 100 文钱,让第二天带 100 只鸡来.并规定 100 只鸡中公鸡,母鸡和小鸡都要有,而且不准多,也不准少,一定要刚好百钱百鸡。当时,买 1 只公鸡 5 文钱,买 1 只母鸡 3 文钱,买 3 只小鸡才 1 文钱.怎样才能凑成百钱百鸡呢 神童想了一会,告诉父亲说,只要送 4 只公鸡,18 只母鸡和

11、 78 只小鸡就行了。第二天,宰相见到送来的鸡正好满足百钱百鸡,大为惊奇.他想了一下,又给了 100 文钱,让明天再送 100 只鸡来,还规定不准只有 4 只公鸡。这个问题也没有难住神童.他想了一会,叫父亲送 8 只公鸡,11 只母鸡和 81 只小鸡去.还告诉父亲说,遇到类似问题,只要怎样怎样就行了.第二天,宰相见到了送来的 100 只鸡,赞叹不已.他又给了 100 文钱,要求下次再送 100 只鸡来。岂料才一会儿,神童的父亲就送来了 100 只鸡.宰相一数:公鸡 12 只,母鸡 4 只,小鸡 84 只,正好又满足百钱百鸡.这个神童就是张丘建.他继续勤奋学习,终于成为一个著名的数学家.他的名著

12、张丘建算经里,最后一个题目就是这个有趣的百鸡问题。在张丘建生活的那个年代,他又是怎样算出题目的几个答案的呢。原来,张丘建发现了一个秘密:4 只公鸡值 20 文钱,3 只小鸡值 1 文钱,合起来鸡数是 7,钱数是 21;而 7 只母鸡呢,鸡数是 7,钱数也是 21.如果少买 7 只母鸡,就可以用这笔钱多买 4 只公鸡和 3 只小鸡.这样,百鸡仍是百鸡,百钱仍是百钱.所以,只要只有求出一个答案,根据这种法则,马上就可以求出其它的答案来。这就是驰名中外的百鸡术。,zixue.it 燕十八精品PHP教程,6.1 函数的概念-数学角度,x,f(x),自变量,应变量,关系,f(x)=2x,函数:是变量的运

13、算关系,zixue.it 燕十八精品PHP教程,6.2 函数的概念-程序角度,函数是有特定功能的代码段.可以把某些常用而特定的功能写一个函数,再想实现这个功能时,可能调用这个函数来达到.从而达到重用代码和简化开发的目的.,zixue.it 燕十八精品PHP教程,6.3体会函数的封装,泡一杯茶,要经过这么几步:把水放到壶里壶放炉子上水开后把水倒进杯子加点茶叶,把水放到壶里壶放炉子上水开后把水倒进杯子加点茶叶,当你让别人帮你泡茶时,只需要说帮我泡一杯茶就可以了.不必把4句都说一遍,泡的茶都一样,想喝点铁观音怎么办?,zixue.it 燕十八精品PHP教程,6.4 函数的调用,函数不会自己发挥作用,

14、只有在调用的时候才能运行,调用语法:函数名(arg,arg2.,arg3),zixue.it 燕十八精品PHP教程,6.5函数的返回值,函数可以没有返回值,也可以有一个返回值不可能有多个返回值,函数体,调用,结果,a=f(),zixue.it 燕十八精品PHP教程,6.6 函数的语法,function 函数名(arg1,arg2,arg3.,arg4)代码段return 返回值;,zixue.it 燕十八精品PHP教程,6.7 函数的执行权与交回,var i=0;i+=3;document.write(hello);fun();document.wrte(world);,fun,函数被调用时,

15、js引擎的执行权进入到函数内部.两种情况下,执行权交回1:函数执行到最后一行2:函数遇到return返回;,zixue.it 燕十八精品PHP教程,6.8 函数是一种变量,在PHP中,函数就是一种语法结构,可以声明,调用.但不能赋值.,在js里,函数就是一个变量,也可以赋值,引用.function t()那么,则存在一个变量t,zixue.it 燕十八精品PHP教程,6.9 函数中变量的 作用域,var a=3;var b=4;function out()var a=5;var c=6;alert(a+b);function ins()alert(c)ins();,变量，变量，变量,函数变量a

16、,变量b.,函数变量甲变量乙,zixue.it 燕十八精品PHP教程,6.10 系统函数,escape():字符转成计算机通用的unicode码unescape():解码isFinite():判断一个数字是否为有限的(相对于无穷大)isNaN()：判断一个变量是否为非数字parseFloat()：把字符串前缀的数字转成浮点型parseInt()：把字符串前缀的数字转点整型eval()：执行一段js代码,zixue.it 燕十八精品PHP教程,7.1 数组的概念,数组是什么？数组就是一组变量的集合,如何区别数组里的每一个值？构造一组箱子，每个箱子都有一个编号，这个编号不可能重复,每个编号-内容索

17、引/标号-值index-value,zixue.it 燕十八精品PHP教程,7.2 创建数组的方式,要,a:创建一个空数组:1:var arr=new Array();2:var arr=;b:创建一个有初始值的数组1:var arr=new Array(a,b,c);2:var arr=a,b,c;c:创建一个有初始单元数量数组1:var arr=new Array(5);,zixue.it 燕十八精品PHP教程,7.3 数组的属性,length:代表数组的单元个数-长度,空数组的length为0,用法:var arr=a,b,c;alert(arr.length),zixue.it 燕十八

18、精品PHP教程,7.4 数组的遍历,遍历数组的思路:数组的单元个数为N,则下标为0,1,2,.N-1因此,可以读取length然后利用for循环,从0,到 length-1逐个遍历,练习:把数组a,b,c,d;分别正序打印,倒序打印,正倒序同时打印,zixue.it 燕十八精品PHP教程,8.0 对象的概念,每个编号-内容属性-值property-value,对象和数组的本质一样,都是组织的一堆数据,只不过对象的下标不为数字且无序.,zixue.it 燕十八精品PHP教程,8.1 对象创建,创建一个空对象:1:var obj=new Object();2:var obj=创建一个非空对象var

19、 obj=k1:v1,k2:v2,k3:v3,zixue.it 燕十八精品PHP教程,8.2 对象单元值的读取,obj=,obj.春obj春,zixue.it 燕十八精品PHP教程,8.3 对象单元的删除,delete obj.属性名,zixue.it 燕十八精品PHP教程,8.4 对象的遍历,for in 结构for(per in obj)alert(objper);,zixue.it 燕十八精品PHP教程,length属性:长度concat 方法（String）连接两个或更多个字符串。indexOf(string)返回出现字符串的位置substr(num1,num2)截取字符串toLowe

20、rCase()转换成小写toUpperCase()转换成大写replace(str1,str2)字符串替换,9.1 字符串对象的属性及方法,zixue.it 燕十八精品PHP教程,getYear()返回年份（2位或4位）getFullYear()返回年份（4位）getMonth()返回月份 0-11getDate()返回日期 1-31getDay()返回星期数 0-6getHours()返回小时数 0-23getMinutes()返回分钟数 0-59getSeconds()返回秒数 0-59getMilliseconds()返回亳秒数0-999,9.2 日期时间对象,zixue.it 燕十八精

21、品PHP教程,ceil(数值)大于或等于该数的最小整数floor(数值)小于或等于该数的最大整数min(数值1,数值2)返回最小值max(数值1,数值2)返回最大值pow(数值1,数值2)返回数值1 的 数值2的次方random()返回随机数 0-1round(数值)四舍五入sqrt(数值)开平方根,9.3 数学对象Math,zixue.it 燕十八精品PHP教程,concat 返回一个由两个数组合并组成的新数组。join 返回一个由数组中的所有元素连接在一起的 String 对象。pop 删除数组中的最后一个元素并返回该值。push 向数组中添加新元素，返回数组的新长度。shift 删除数组

22、中的第一个元素并返回该值。unshift 返回一个数组，在该数组头部插入了指定的元素。sort 返回一个元素被排序了的 Array 对象reverse 返回一个元素反序的 Array 对象。slice 返回数组的一个片段。splice 从数组中删除元素，,9.4 数组对象,zixue.it 燕十八精品PHP教程,DOM节点介绍节点类型遍历节点创建节点节点访问和修改,10.1 DOM对象,zixue.it 燕十八精品PHP教程,10.2 DOM节点与层次,zixue.it 燕十八精品PHP教程,10.3 DOM节点类型,nodeName属性：节点的名字、nodeType属性：返回一个整数，代表这

23、个节点的类型。nodeType=1：元素节点nodeType=2：属性节点nodeType=3：文本节点、nodeValue属性：返回一个字符串，这个节点的值。如果节点是元素节点，那么返回null；（注意下）如果是属性节点，nodeValue将返回这个属性的值。如果是文本节点，nodeValue将返回这个文本节点的内容。,zixue.it 燕十八精品PHP教程,10.4 DOM-document对象,getElementsByName(name),保证兼容性,只用于表单,zixue.it 燕十八精品PHP教程,10.5 DOM-节点关系,zixue.it 燕十八精品PHP教程,10.6 DOM

24、-节点关系,children:非w3c的标准,但主流浏览器支持,zixue.it 燕十八精品PHP教程,10.7 DOM-节点创建,zixue.it 燕十八精品PHP教程,10.8 DOM-节点修改,zixue.it 燕十八精品PHP教程,10.9 DOM-节点修改,zixue.it 燕十八精品PHP教程,11.1 DOM事件,事件:就是某个元素上发生某件事时干什么?指定事件的方式:直接在 HTML 标记中指定，是应用最普遍的方法,zixue.it 燕十八精品PHP教程,11.2 DOM事件-之页面事件,onBlur当失去焦点时onFocus 当获得焦点时onLoad 当页面加载时onUnlo

25、ad 当页面关闭时,zixue.it 燕十八精品PHP教程,11.3 DOM事件-之鼠标事件,onclick 当点击时onmouseover当经过时onmouseout当离开时onmousedown当鼠标按下时onmouseup 当鼠标抬起时onmousemove当鼠标移动时,zixue.it 燕十八精品PHP教程,11.4 DOM事件-之键盘事件,onChange当内容被改变时onSelect当内容选中时onkeypress 当键盘点击时onkeydown 当键盘按下时onkeyup 当键盘抬起时onSubmit当表单提交时onReset当表单重置时,zixue.it 燕十八精品PHP教程,

26、window对象下的子对象navigator浏览器信息location地址栏history历史记录screen屏幕,12.1 BOM模型-浏览器窗口,zixue.it 燕十八精品PHP教程,appCodeName 内部代码appName浏览器名称appVersion浏览器版本platform操作系统类型userAgent用户代理信息cookieEnabled是否支持cookie,12.2 navigator对象,zixue.it 燕十八精品PHP教程,12.4 history对象,length:历史记录的数目back();forward();go();,zixue.it 燕十八精品PHP教程,

27、host主机port端口href地址pathname路径protocol协议search查询字符串assign(url)页面跳转,12.3 location对象,zixue.it 燕十八精品PHP教程,12.3 screen对象,height高度width宽度availHeight可用高度availWidth可用宽度colorDepth颜色,zixue.it 燕十八精品PHP教程,alert(message)confirm(message)prompt(message，defaultstr)close()关闭窗口print()打印setIntval(表达式,毫秒);clearIntval(定时器对象);setTimeout(表达式，毫秒)clearTimeout(定时器对象),12.4 window对象的方法,zixue.it 燕十八精品PHP教程,13.1 常见特效,tab切换相册时钟实现字体大中小表格隔行换色,zixue.it 燕十八精品PHP教程,zixue.it 燕十八精品PHP教程,