《javascript学习介绍课件》由会员分享，可在线阅读，更多相关《javascript学习介绍课件（68页珍藏版）》请在金锄头文库上搜索。
1、javascript学习目录(1)1.javascript介绍2.javascript引入3.变量声明与数据类型4.运算符5.流程控制6.函数7.数组zixue.it燕十八精品PHP教程javascript学习目录(2)8.对象9.内置对象学习10.DOM操作11.DOM事件12.window对象13.特效及表单验证zixue.it燕十八精品PHP教程1.1javascript是什么?JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，N
2、etscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript重新进行设计，并改名为JavaScript。zixue.it燕十八精品PHP教程1.2javascript如何改变网页铲掉P标签把a标签复制增加一个span标签DOM模型javascript引擎zixue.it燕十八精品PHP教程1.3javascript只能用来改变网页?javascript引擎在javascript的功能远比你知道的要强大.javascript的解释引擎放在哪儿,js的作用就可以发挥到哪儿不局限于浏览器比如:目前流行的node.js服务器端,即是在服务器上运行js,通过js来操作目录,
3、文件,连接数据库等.zixue.it燕十八精品PHP教程2.1javascript代码如何引入?code.zixue.it燕十八精品PHP教程3.1变量的声明的本质年龄5林书豪MVP声明一个变量,实质是在内存中产生了一个变量名,和一个变量值,并且该变量名自身又有一个属性值,是指向变量值的位置zixue.it燕十八精品PHP教程3.2怎么声明变量?vara=3;/声明变量a,且把3赋给a作值varb=a;/声明变量b,且把a的值赋给bvara=b=3;/声明变量a,b,并把3赋给a,bvara,b;/声明变量a,b,但不赋值zixue.it燕十八精品PHP教程3.3变量名有什么要求?1:以字母,
4、_,$,数字的组合,但是,第1个字符不能是数字.或者说:以字母,_,$开头,后面由字母,_,$,数字的组合都可以2:比较新的js标准已经支持用任何UNICODE字符做变量名(当然,仍然不能用数字开头).这意味着,汉字可以做变量名(实际开发勿用)3:变量名区分大小写4:要求命名有意义,不要用aaa,c,asdf这样的变量名zixue.it燕十八精品PHP教程3.4变量类型有哪几种?衍生类型数组类型对象类型函数类型基本类型数值类型字符串类型布尔值类型nullundefinedzixue.it燕十八精品PHP教程4.1运算符算术运算符+-*/%赋值运算符=+=-=*=/=%=条件运算=!&zixue
5、.it燕十八精品PHP教程5.1流程控制顺序语句分支语句if,if/else,if/elseif/./if,switch循环语句while,do/while,forzixue.it燕十八精品PHP教程5.2顺序结构按顺序,一句一句来执行;document.write(8点应该起床);document.write(刷牙);document.write(洗脸);zixue.it燕十八精品PHP教程5.3单路分支结构-ifif(exp)语句1;语句2;语句.N;解释:如果表达式exp为真,则内的代码块,则执行,如果为假,则不执行zixue.it燕十八精品PHP教程5.4双路分支结构-if/elsei
6、f(exp)代码段1;else代码段2;解释:如果exp为真,执行代码段1否则,执行代码段2代码段1,代码段2必有且只有一段执行zixue.it燕十八精品PHP教程5.5多路分支结构-if/elseif/elseif(exp1)代码段1;elseif(exp2)代码段2;elseif(exp3)代码段3;else代码段N;如果exp1为真,则执行代码段1如果exp2为真,则执行代码段2.如果都不满足,执行代码段Nzixue.it燕十八精品PHP教程5.6多路分支结构-switchswitch(变量)case值1:代码段1;break;case值2代码段2;break;case值3:代码段3;b
7、reak;如果等于值1执行代码段1;退出;如果等于值2执行代码段1;退出;如果等于值3执行代码段3;退出;zixue.it燕十八精品PHP教程5.7循环结构-while循环while(exp)代码段;如果exp为假,while结束;如果为exp真,执行循环体中的代码段;再回到while判断zixue.it燕十八精品PHP教程5.8while循环的特点v特点：特点：先判断表达式，后执行循环体v说明：说明：、循环体有可能一次也不执行、循环体可为任意类型语句、下列情况，退出while循环： 条件表达式不成立（为false） 循环体内遇break，goto 、无限循环无限循环: : while(1)
8、循环体;zixue.it燕十八精品PHP教程5.8do-while循环的特点do代码段;while(exp);执行循环体中的代码段;再回到while判断如果exp为假,while结束;如果为exp真,循环体至少执行一次zixue.it燕十八精品PHP教程5.9for循环for(exp1;exp2;exp3)循环体先执行且只执行一次exp1,再判断exp2是否为真,如果为真则执行循环体.执行循环体后,执行exp3;再回到exp2zixue.it燕十八精品PHP教程5.9循环结构练习题1:用while和for循环计算1到100之和2:面试题3:百钱百鸡问题:张丘建算经成书于公元5世纪，作者是北魏人
9、书中最后一道题堪称亮点，通常也被称为“百钱买百鸡”问题，民间则流传着县令考问神童的佳话书中原文如下：今有鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买鸡百只，问鸡翁、母、雏各几何？题目的意思是，公鸡5文钱1只，母鸡3文钱1只，小鸡1文钱买3只，现在用100文钱共买了100只鸡，问：在这100只鸡中，公鸡、母鸡和小鸡各是多少只？（设每种至少一只）zixue.it燕十八精品PHP教程补充材料：百鸡术相传在南北朝时期(公元386年公元589年),我国北方出了一个神童,他反映敏捷,计算能力超群,许多连大人一时也难以解答的问题,他一下子就给算出来了.远远近近的人都喜欢找他计算数学问题。神童的名气
10、越来越大,传到当时宰相的耳中。有一天,宰相为了弄清神童是真是假,特地把神童的父亲叫了去,给了他100文钱,让第二天带100只鸡来.并规定100只鸡中公鸡,母鸡和小鸡都要有,而且不准多,也不准少,一定要刚好百钱百鸡。当时,买1只公鸡5文钱,买1只母鸡3文钱,买3只小鸡才1文钱.怎样才能凑成百钱百鸡呢神童想了一会,告诉父亲说,只要送4只公鸡,18只母鸡和78只小鸡就行了。第二天,宰相见到送来的鸡正好满足百钱百鸡,大为惊奇.他想了一下,又给了100文钱,让明天再送100只鸡来,还规定不准只有4只公鸡。这个问题也没有难住神童.他想了一会,叫父亲送8只公鸡,11只母鸡和81只小鸡去.还告诉父亲说,遇到类
11、似问题,只要怎样怎样就行了.第二天,宰相见到了送来的100只鸡,赞叹不已.他又给了100文钱,要求下次再送100只鸡来。岂料才一会儿,神童的父亲就送来了100只鸡.宰相一数:公鸡12只,母鸡4只,小鸡84只,正好又满足百钱百鸡.这个神童就是张丘建.他继续勤奋学习,终于成为一个著名的数学家.他的名著张丘建算经里,最后一个题目就是这个有趣的百鸡问题。在张丘建生活的那个年代,他又是怎样算出题目的几个答案的呢。原来,张丘建发现了一个秘密:4只公鸡值20文钱,3只小鸡值1文钱,合起来鸡数是7,钱数是21;而7只母鸡呢,鸡数是7,钱数也是21.如果少买7只母鸡,就可以用这笔钱多买4只公鸡和3只小鸡.这样,
12、百鸡仍是百鸡,百钱仍是百钱.所以,只要只有求出一个答案,根据这种法则,马上就可以求出其它的答案来。这就是驰名中外的百鸡术。zixue.it燕十八精品PHP教程6.1函数的概念-数学角度xf(x)自变量应变量关系f(x)=2x函数:是变量的运算关系zixue.it燕十八精品PHP教程6.2函数的概念-程序角度函数是有特定功能的代码段.可以把某些常用而特定的功能写一个函数,再想实现这个功能时,可能调用这个函数来达到.从而达到重用代码和简化开发的目的.zixue.it燕十八精品PHP教程6.3体会函数的封装泡一杯茶,要经过这么几步:把水放到壶里壶放炉子上水开后把水倒进杯子加点茶叶把水放到壶里壶放炉子
13、上水开后把水倒进杯子加点茶叶当你让别人帮你泡茶时,只需要说帮我泡一杯茶就可以了.不必把4句都说一遍泡的茶都一样,想喝点铁观音怎么办?zixue.it燕十八精品PHP教程6.4函数的调用函数不会自己发挥作用,只有在调用的时候才能运行调用语法:函数名(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函
14、数的执行权与交回var i = 0;i += 3;document.write(hello );fun();document.wrte(world);fun函数被调用时,js引擎的执行权进入到函数内部.两种情况下,执行权交回1:函数执行到最后一行2:函数遇到return返回;zixue.it燕十八精品PHP教程6.8函数是一种变量在PHP中,函数就是一种语法结构,可以声明,调用.但不能赋值.在js里,函数就是一个变量,也可以赋值,引用.functiont()那么,则存在一个变量tzixue.it燕十八精品PHP教程6.9函数中变量的作用域vara=3;varb=4;functionout()v
15、ara=5;varc=6;alert(a+b);functionins()alert(c)ins();变量，变量，变量函数变量a,变量b.函数变量甲变量乙zixue.it燕十八精品PHP教程6.10系统函数escape():字符转成计算机通用的unicode码unescape():解码isFinite():判断一个数字是否为有限的(相对于无穷大)isNaN()：判断一个变量是否为非数字parseFloat()：把字符串前缀的数字转成浮点型parseInt()：把字符串前缀的数字转点整型eval()：执行一段js代码zixue.it燕十八精品PHP教程7.1数组的概念数组是什么？数组就是一组变量
16、的集合0123如何区别数组里的每一个值？构造一组箱子，每个箱子都有一个编号，这个编号不可能重复每个编号-内容索引/标号-值index-valuezixue.it燕十八精品PHP教程7.2创建数组的方式要a:创建一个空数组:1:vararr=newArray();2:vararr=;b:创建一个有初始值的数组1:vararr=newArray(a,b,c);2:vararr=a,b,c;c:创建一个有初始单元数量数组1:vararr=newArray(5);zixue.it燕十八精品PHP教程7.3数组的属性length:代表数组的单元个数-长度,空数组的length为0用法:vararr=a,
17、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燕十八精品PHP教程8.1对象创建创建一个空对象:1:varobj=newObject();2:
18、varobj=创建一个非空对象varobj=k1:v1,k2:v2,k3:v3zixue.it燕十八精品PHP教程8.2对象单元值的读取春夏秋冬雪obj=obj.春obj春zixue.it燕十八精品PHP教程8.3对象单元的删除deleteobj.属性名zixue.it燕十八精品PHP教程8.4对象的遍历forin结构for(perinobj)alert(objper);zixue.it燕十八精品PHP教程lengthlength属性属性: :长度长度concat concat 方法（方法（StringString）连接两个或更多个字符串。）连接两个或更多个字符串。indexOf(string
19、)indexOf(string)返回出现字符串的位置返回出现字符串的位置substr(num1,num2)substr(num1,num2)截取字符串截取字符串toLowerCase()toLowerCase()转换成小写转换成小写toUpperCase()toUpperCase()转换成大写转换成大写replace(str1,str2) replace(str1,str2) 字符串替换字符串替换9.1字符串对象的属性及方法zixue.it燕十八精品PHP教程getYeargetYear()() 返回年份（返回年份（2 2位或位或4 4位）位）getFullYeargetFullYear()(
20、)返回年份（返回年份（4 4位）位）getMonthgetMonth()()返回月份返回月份 0-110-11getDategetDate() () 返回日期返回日期 1-311-31getDaygetDay()()返回星期数返回星期数 0-60-6getHoursgetHours()()返回小时数返回小时数 0-230-23getMinutesgetMinutes()() 返回分钟数返回分钟数 0-590-59getSecondsgetSeconds()() 返回秒数返回秒数 0-590-59getMillisecondsgetMilliseconds()() 返回亳秒数返回亳秒数0-999
21、0-9999.2日期时间对象zixue.it燕十八精品PHP教程ceil(ceil(数值数值) ) 大于或等于该数的最小整数大于或等于该数的最小整数floor(floor(数值数值) ) 小于或等于该数的最大整数小于或等于该数的最大整数min(min(数值数值1,1,数值数值2) 2) 返回最小值返回最小值max(max(数值数值1,1,数值数值2) 2) 返回最大值返回最大值powpow( (数值数值1,1,数值数值2) 2) 返回数值返回数值1 1 的的 数值数值2 2的次方的次方random()random() 返回随机数返回随机数 0-10-1round(round(数值数值) ) 四
22、舍五入四舍五入sqrtsqrt( (数值数值) ) 开平方根开平方根9.3数学对象Mathzixue.it燕十八精品PHP教程concat返回一个由两个数组合并组成的新数组。join返回一个由数组中的所有元素连接在一起的String对象。pop删除数组中的最后一个元素并返回该值。push向数组中添加新元素，返回数组的新长度。shift删除数组中的第一个元素并返回该值。unshift返回一个数组，在该数组头部插入了指定的元素。sort返回一个元素被排序了的Array对象reverse返回一个元素反序的Array对象。slice返回数组的一个片段。splice从数组中删除元素，9.4数组对象zix
23、ue.it燕十八精品PHP教程DOM节点介绍节点类型遍历节点创建节点节点访问和修改10.1DOM对象zixue.it燕十八精品PHP教程10.2DOM节点与层次zixue.it燕十八精品PHP教程10.3DOM节点类型nodeName属性：节点的名字、nodeType属性：返回一个整数，代表这个节点的类型。nodeType=1：元素节点nodeType=2：属性节点nodeType=3：文本节点、nodeValue属性：返回一个字符串，这个节点的值。如果节点是元素节点，那么返回null；（注意下）如果是属性节点，nodeValue将返回这个属性的值。如果是文本节点，nodeValue将返回这个
24、文本节点的内容。zixue.it燕十八精品PHP教程10.4DOM-document对象getElementsByName(name),保证兼容性,只用于表单zixue.it燕十八精品PHP教程10.5DOM-节点关系zixue.it燕十八精品PHP教程10.6DOM-节点关系children:非w3c的标准,但主流浏览器支持zixue.it燕十八精品PHP教程10.7DOM-节点创建zixue.it燕十八精品PHP教程10.8DOM-节点修改zixue.it燕十八精品PHP教程10.9DOM-节点修改zixue.it燕十八精品PHP教程11.1DOM事件事件事件: :就是某个元素上发生某件事
25、时干什么就是某个元素上发生某件事时干什么? ?指定事件的方式指定事件的方式: :直接在直接在 HTML HTML 标记中指定，是应用最普遍的方标记中指定，是应用最普遍的方法法 zixue.it燕十八精品PHP教程11.2DOM事件-之页面事件onBluronBlur当失去焦点时当失去焦点时onFocusonFocus 当获得焦点时当获得焦点时onLoadonLoad 当页面加载时当页面加载时onUnloadonUnload 当页面关闭时当页面关闭时 zixue.it燕十八精品PHP教程11.3DOM事件-之鼠标事件onclick onclick 当点击时当点击时onmouseoveronmou
26、seover当经过时当经过时onmouseoutonmouseout当离开时当离开时onmousedownonmousedown当鼠标按下时当鼠标按下时onmouseup onmouseup 当鼠标抬起时当鼠标抬起时onmousemoveonmousemove当鼠标移动时当鼠标移动时zixue.it燕十八精品PHP教程11.4DOM事件-之键盘事件onChangeonChange当内容被改变时当内容被改变时onSelectonSelect当内容选中时当内容选中时onkeypressonkeypress 当键盘点击时当键盘点击时onkeydownonkeydown 当键盘按下时当键盘按下时onk
27、eyuponkeyup 当键盘抬起时当键盘抬起时onSubmitonSubmit当表单提交时当表单提交时onResetonReset当表单重置时当表单重置时zixue.it燕十八精品PHP教程window 对象下的子对象对象下的子对象navigator浏览器信息浏览器信息location地址栏地址栏history历史记录历史记录screen屏幕屏幕12.1BOM模型-浏览器窗口zixue.it燕十八精品PHP教程appCodeName appCodeName 内部代码内部代码appNameappName浏览器名称浏览器名称appVersionappVersion浏览器版本浏览器版本platfo
28、rmplatform操作系统类型操作系统类型userAgentuserAgent用户代理信息用户代理信息cookieEnabledcookieEnabled是否支持是否支持cookiecookie12.2navigator对象zixue.it燕十八精品PHP教程12.4history对象length : length : 历史记录的数目历史记录的数目back();back();forward();forward();go();go();zixue.it燕十八精品PHP教程hosthost主机主机portport端口端口hrefhref地址地址pathnamepathname路径路径protoc
29、olprotocol协议协议searchsearch查询字符串查询字符串assign(urlassign(url) )页面跳转页面跳转12.3location对象zixue.it燕十八精品PHP教程12.3screen对象heightheight高度高度widthwidth宽度宽度availHeightavailHeight可用高度可用高度availWidthavailWidth可用宽度可用宽度colorDepthcolorDepth颜色颜色zixue.it燕十八精品PHP教程alert(message)alert(message)confirm(message) confirm(messag
30、e) prompt(messageprompt(message，defaultstr) defaultstr) close()close()关闭窗口关闭窗口print()print()打印打印setIntval(setIntval(表达式表达式, ,毫秒毫秒););clearIntval(clearIntval(定时器对象定时器对象););setTimeout(setTimeout(表达式，毫秒表达式，毫秒) )clearTimeout(clearTimeout(定时器对象定时器对象) )12.4window对象的方法zixue.it燕十八精品PHP教程13.1常见特效tabtab切换切换相册相册时钟时钟实现字体大中小实现字体大中小表格隔行换色表格隔行换色zixue.it燕十八精品PHP教程zixue.it燕十八精品PHP教程
