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语言之后，Netscap

2、e公司引进了Sun公司有关Java的程序概念，将自己原有的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服务器端,即是在

3、服务器上运行js, 通过js来操作目录,文件,连接数据库等.,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的值赋给b var a = b = 3; / 声明变量

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

5、类型,基本类型 数值类型 字符串类型 布尔值类型 null undefined,zixue.it 燕十八 精品PHP教程,4.1 运算符,算术运算符 + - * / % 赋值运算符 = += -= *= /= %= 条件运算 = ! & ,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.writ

6、e(刷牙); document.write(洗脸);,zixue.it 燕十八 精品PHP教程,5.3 单路分支结构 -if,if(exp) 语句1; 语句2; 语句N; 解释:如果表达式exp为真,则内的代码块,则执行, 如果为假,则不执行,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) 代码

7、段1; else if(exp2) 代码段2; else if(exp3) 代码段3; else 代码段N; ,如果exp1为真,则执行代码段1 如果exp2为真,则执行代码段2 . . 如果都不满足,执行代码段N,zixue.it 燕十八 精品PHP教程,5.6 多路分支结构 -switch,switch(变量) case 值1: 代码段1; break; case 值2 代码段2; break; case 值3: 代码段3; break; ,如果等于 值1 执行代码段1; 退出; 如果等于 值2 执行代码段1; 退出; 如果等于 值3 执行代码段3; 退出;,zixue.it 燕十八 精品

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

9、p);,执行循环体中的代码段; 再回到while判断 如果exp为假, while结束; 如果为exp真,循环体至少执行一次,zixue.it 燕十八 精品PHP教程,5.9 for循环,for(exp1;exp2;exp3) 循环体 ,先执行且只执行一次exp1, 再判断exp2是否为真, 如果为真则执行循环体. 执行循环体后,执行exp3; 再回到exp2,zixue.it 燕十八 精品PHP教程,5.9 循环结构练习题,1:用while和for循环计算1到100之和 2:面试题,3:百钱百鸡问题: 张丘建算经成书于公元5世纪，作者是北魏人书中最后一道题堪称亮点，通常也被称为“百钱买百鸡”

10、问题，民间则流传着县令考问神童的佳话书中原文如下： 今有鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买鸡百只，问鸡翁、母、雏各几何？ 题目的意思是，公鸡5文钱1只，母鸡3文钱1只，小鸡1文钱买3只，现在用100文钱共买了100只鸡，问：在这100只鸡中，公鸡、母鸡和小鸡各是多少只？（设每种至少一只）,zixue.it 燕十八 精品PHP教程,补充材料：百鸡术 相传在南北朝时期(公元 386 年公元 589 年),我国北方出了一个“神童“,他反映敏捷,计算能力超群,许多连大人一时也难以解答的问题,他一下子就给算出来了.远远近近的人都喜欢找他计算数学问题。 “神童“的名气越来越大,传到当时

11、宰相的耳中。有一天,宰相为了弄清“神童“是真是假,特地把“神童“的父亲叫了去,给了他 100 文钱,让第二天带 100 只鸡来.并规定 100 只鸡中公鸡,母鸡和小鸡都要有,而且不准多,也不准少,一定要刚好百钱百鸡。 当时,买 1 只公鸡 5 文钱,买 1 只母鸡 3 文钱,买 3 只小鸡才 1 文钱.怎样才能凑成百钱百鸡呢 “神童“想了一会,告诉父亲说,只要送 4 只公鸡, 18 只母鸡和 78 只小鸡就行了。 第二天,宰相见到送来的鸡正好满足百钱百鸡,大为惊奇.他想了一下,又给了 100 文钱,让明天再送 100 只鸡来,还规定不准只有 4 只公鸡。 这个问题也没有难住“神童“.他想了一会

12、,叫父亲送 8 只公鸡, 11 只母鸡和 81 只小鸡去.还告诉父亲说,遇到类似问题,只要怎样怎样就行了.第二天,宰相见到了送来的 100 只鸡,赞叹不已.他又给了 100 文钱,要求下次再送 100 只鸡来。 岂料才一会儿,“神童“的父亲就送来了 100 只鸡.宰相一数:公鸡 12 只,母鸡 4 只,小鸡 84 只,正好又满足百钱百鸡. 这个“神童“就是张丘建.他继续勤奋学习,终于成为一个著名的数学家.他的名著张丘建算经里,最后一个题目就是这个有趣的“百鸡问题“。 在张丘建生活的那个年代,他又是怎样算出题目的几个答案的呢。 原来,张丘建发现了一个秘密: 4 只公鸡值 20 文钱, 3 只小鸡

13、值 1 文钱,合起来鸡数是 7 ,钱数是 21 ;而 7 只母鸡呢,鸡数是 7 ,钱数也是 21 .如果少买 7 只母鸡,就可以用这笔钱多买 4 只公鸡和 3 只小鸡.这样,百鸡仍是百鸡,百钱仍是百钱.所以,只要只有求出一个答案,根据这种法则,马上就可以求出其它的答案来。这就是驰名中外的“百鸡术“。,zixue.it 燕十八 精品PHP教程,6.1 函数的概念 -数学角度,x,f(x),自变量,应变量,关系,f(x)=2x,函数:是变量的运算关系,zixue.it 燕十八 精品PHP教程,6.2 函数的概念 -程序角度,函数是有特定功能的代码段. 可以把某些常用而特定的功能写一个函数, 再想实

14、现这个功能时,可能调用这个函数来达到. 从而达到重用代码和简化开发的目的.,zixue.it 燕十八 精品PHP教程,6.3体会函数的封装,泡一杯茶,要经过这么几步: 把水放到壶里 壶放炉子上 水开后把水倒进杯子 加点茶叶,把水放到壶里 壶放炉子上 水开后把水倒进杯子 加点茶叶,当你让别人帮你泡茶时,只需要说帮我“泡一杯茶“就可以了. 不必把4句都说一遍,泡的茶都一样, 想喝点铁观音怎么办?,zixue.it 燕十八 精品PHP教程,6.4 函数的调用,函数不会自己发挥作用, 只有在调用的时候才能运行,调用语法: 函数名(arg,arg2,arg3),zixue.it 燕十八 精品PHP教程,

15、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,函数被调用时, js引擎的执行权进入到函数内部. 两种情况下,执行权交回 1:函数执行到

16、最后一行 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, 变量b.

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

18、， 这个编号不可能重复,每个编号内容 索引/标号值 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,用法:

19、 var arr = a,b,c; alert(arr.length),zixue.it 燕十八 精品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 燕十八 精品P

20、HP教程,8.1 对象创建,创建一个空对象: 1: var obj = new Object(); 2: var obj = 创建一个非空对象 var 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属

21、性: 长度 concat 方法（String）连接两个或更多个字符串。 indexOf(string) 返回出现字符串的位置 substr(num1,num2)截取字符串 toLowerCase() 转换成小写 toUpperCase() 转换成大写 replace(str1,str2) 字符串替换,9.1 字符串对象的属性及方法,zixue.it 燕十八 精品PHP教程,getYear() 返回年份（2位或4位） getFullYear() 返回年份（4位） getMonth() 返回月份 0-11 getDate() 返回日期 1-31 getDay() 返回星期数 0-6 getHour

22、s() 返回小时数 0-23 getMinutes() 返回分钟数 0-59 getSeconds() 返回秒数 0-59 getMilliseconds() 返回亳秒数0-999,9.2 日期时间对象,zixue.it 燕十八 精品PHP教程,ceil(数值) 大于或等于该数的最小整数 floor(数值) 小于或等于该数的最大整数 min(数值1,数值2) 返回最小值 max(数值1,数值2) 返回最大值 pow(数值1,数值2) 返回数值1 的 数值2的次方 random() 返回随机数 0-1 round(数值) 四舍五入 sqrt(数值) 开平方根,9.3 数学对象Math,zixue

23、.it 燕十八 精品PHP教程,concat 返回一个由两个数组合并组成的新数组。 join 返回一个由数组中的所有元素连接在一起的 String 对象。 pop 删除数组中的最后一个元素并返回该值。 push 向数组中添加新元素，返回数组的新长度。 shift 删除数组中的第一个元素并返回该值。 unshift 返回一个数组，在该数组头部插入了指定的元素。 sort 返回一个元素被排序了的 Array 对象 reverse 返回一个元素反序的 Array 对象。 slice 返回数组的一个片段。 splice 从数组中删除元素，,9.4 数组对象,zixue.it 燕十八 精品PHP教程,D

24、OM 节点介绍 节点 类型 遍历节点 创建节点 节点访问和修改,10.1 DOM对象,zixue.it 燕十八 精品PHP教程,10.2 DOM节点与层次,zixue.it 燕十八 精品PHP教程,10.3 DOM节点类型,nodeName属性 ： 节点的名字、 nodeType属性 ： 返回一个整数，代表这个节点的类型。 nodeType = 1 ： 元素节点 nodeType = 2 ： 属性节点 nodeType = 3 ： 文本节点 、 nodeValue属性 ： 返回一个字符串，这个节点的值。 如果节点是元素节点，那么返回null；（注意下） 如果是属性节点，nodeValue将返回

25、这个属性的值。 如果是文本节点，nodeValue将返回这个文本节点的内容。,zixue.it 燕十八 精品PHP教程,10.4 DOM- document对象,getElementsByName(name) ,保证兼容性,只用于表单,zixue.it 燕十八 精品PHP教程,10.5 DOM- 节点关系,zixue.it 燕十八 精品PHP教程,10.6 DOM- 节点关系,children:非w3c的标准,但主流浏览器支持,zixue.it 燕十八 精品PHP教程,10.7 DOM- 节点创建,zixue.it 燕十八 精品PHP教程,10.8 DOM- 节点修改,zixue.it 燕十八

26、 精品PHP教程,10.9 DOM- 节点修改,zixue.it 燕十八 精品PHP教程,11.1 DOM事件,事件:就是某个元素上发生某件事时干什么? 指定事件的方式: 直接在 HTML 标记中指定，是应用最普遍的方法 ,zixue.it 燕十八 精品PHP教程,11.2 DOM事件 -之页面事件,onBlur 当失去焦点时 onFocus 当获得焦点时 onLoad 当页面加载时 onUnload 当页面关闭时,zixue.it 燕十八 精品PHP教程,11.3 DOM事件 -之鼠标事件,onclick 当点击时 onmouseover 当经过时 onmouseout 当离开时 onmou

27、sedown 当鼠标按下时 onmouseup 当鼠标抬起时 onmousemove 当鼠标移动时,zixue.it 燕十八 精品PHP教程,11.4 DOM事件 -之键盘事件,onChange 当内容被改变时 onSelect 当内容选中时 onkeypress 当键盘点击时 onkeydown 当键盘按下时 onkeyup 当键盘抬起时 onSubmit 当表单提交时 onReset 当表单重置时,zixue.it 燕十八 精品PHP教程,window 对象下的子对象 navigator 浏览器信息 location 地址栏 history 历史记录 screen 屏幕,12.1 BOM模

28、型-浏览器窗口,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教程,host 主机 port 端口 href 地址 pathname 路径 protocol 协议 s

29、earch 查询字符串 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教程,