JavaScript程序设计完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx
《JavaScript程序设计完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx》由会员分享,可在线阅读,更多相关《JavaScript程序设计完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx(220页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、JavaScript程序设计程序设计第第1章章 JavaScript简介简介1.1 什么是JavaScript1.2 JavaScript与Java区别1.3 JavaScript能做什么1.4 JavaScript实现JavaScript程序设计程序设计第第1章章 JavaScript简介简介1.5 JavaScript环境搭建1.6 编写第一个JavaScript程序JavaScript程序设计程序设计什么是JavaScript特点:简单性简单性 动态性动态性 跨平台性跨平台性 节省服务器的开销节省服务器的开销 JavaScript是一种基于对象(Object)和事件驱动(EventDri
2、ven)并具有安全性能的脚本语言。1.1 1.1 什么是什么是JavaScriptJavaScript第1章 JavaScript简介JavaScript程序设计程序设计基于对象和面向对象 解释和编译强变量和弱变量代码格式不一样嵌入方式不一样 静态联编和动态联编1.2 JavaScript1.2 JavaScript与与JavaJava区别区别第1章 JavaScript简介JavaScript程序设计程序设计JavaScript能做什么与用户交互与用户交互 提供反馈提供反馈 创建自定义创建自定义Web界面界面 处理表单处理表单 设置设置cookie1.3 JavaScript1.3 Java
3、Script能做什么能做什么第1章 JavaScript简介JavaScript程序设计程序设计JavaScript不能做什么(1)JavaScript不允许写服务器机器上的文件。(2)JavaScript不能关闭不是由它自己打开的窗口。(3)JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。1.3 JavaScript1.3 JavaScript能做什么能做什么第1章 JavaScript简介JavaScript程序设计程序设计JavaScript实现1.4 JavaScript1.4 JavaScript实现实现第1章 JavaScript简介JavaScript程序设
4、计程序设计文档对象模型DOMSamplePagehelloworld!1.4 JavaScript1.4 JavaScript实现实现第1章 JavaScript简介JavaScript程序设计程序设计浏览器对象模型BOMBOM主要处理浏览器窗口和框架,不过通常浏览器特定的JavaScript扩展都被看做BOM的一部分:(1)弹出新的浏览器窗口;(2)移动、关闭浏览器窗口以及调整窗口大小;(3)提供 Web浏览器详细信息的定位对象;(4)提供用户屏幕分辨率详细信息的屏幕对象;(5)对 cookie的支持;(6)IE扩展了 BOM,加入了 ActiveXObject类,可以通过 JavaScri
5、pt实例化 ActiveX对象;1.4 JavaScript1.4 JavaScript实现实现第1章 JavaScript简介JavaScript程序设计程序设计环境搭建 (1)浏览器;(2)Web服务器(wamp);http:/ JavaScript1.5 JavaScript环境搭建环境搭建第1章 JavaScript简介JavaScript程序设计程序设计示例代码/JavaScriptAppearsherealert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世界!);1.6 1.6 编写第一个编写第一个JavaScriptJavaScript程
6、序程序第1章 JavaScript简介JavaScript程序设计程序设计什么是JavaScriptJavaScript与Java区别JavaScript能做什么JavaScript实现JavaScript环境搭建编写第一个JavaScript程序总结总结第1章 JavaScript简介JavaScript程序设计程序设计JavaScript程序设计程序设计第第2章章 JavaScript基本语法基本语法2.1 JavaScript在HTML中的使用2.2 JavaScript代码调试方式2.3 语句2.4 变量JavaScript程序设计程序设计第第2章章 JavaScript基本语法基本语
7、法2.5 数据类型2.6 表达式和运算符2.7 关键字及保留字2.8 正则表达式JavaScript程序设计程序设计第第2章章 JavaScript基本语法基本语法2.9 注释2.10 实战:加减运算JavaScript程序设计程序设计2.1 JavaScript2.1 JavaScript在在HTMLHTML中的使用中的使用两种方式使用 (1)直接在页面上嵌入JavaScript代码;(2)引用独立的js文件;第2章 JavaScript基本语法JavaScript程序设计程序设计2.2 JavaScript2.2 JavaScript代码调试方式代码调试方式三种代码调试方式 (1)使用al
8、ert()弹出警告框;(2)使用document.write()方法将内容写到HTML文档中;(3)使用console.log()写入到浏览器控制台;第2章 JavaScript基本语法JavaScript程序设计程序设计2.2 JavaScript2.2 JavaScript代码调试方式代码调试方式三种代码调试方式比较 (1)如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖,对程序执行造成不便;(2)alert()函数会阻断JavaScript程序的执行,从而造成副作用,而且使用alert()方法需要点击弹窗的确认按钮操作麻烦,最重要的是alert()只能输出
9、字符串;(3)console.log()仅在控制台打印相关信息,不会对JavaScript程序执行造成阻隔,此外,console.log()可以接受任何字符串、数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回json数组对象时调试很方便;第2章 JavaScript基本语法JavaScript程序设计程序设计2.3 2.3 语句语句语句 JavaScript语句是向浏览器发出的命令;vara=1+2;vara=1+2;varb=abc;第2章 JavaScript基本语法JavaScript程序设计程序设计2.4 2.4 变量变量变量概念及命名 (1)变量以字母开头;
10、(2)变量也能以$和_开头(不过不推荐这么做);(3)变量名不能包含空格或其他标点符号;(4)变量名称对大小写敏感(a和A是不同的变量);vara;/声明变量aa=1;/给变量a赋值为1第2章 JavaScript基本语法JavaScript程序设计程序设计2.4 2.4 变量变量变量作用域 (1)全局变量;(2)局部变量;第2章 JavaScript基本语法JavaScript程序设计程序设计2.4 2.4 变量变量变量提升 JavaScript引擎工作方式是:先解析代码,获取所有被声明的变量,然后再一行一行的运行代码。这样所有变量声明语句都会被提升到代码头部执行。这就叫做变量提升。第2章
11、JavaScript基本语法JavaScript程序设计程序设计2.5 2.5 数据类型数据类型基本数据类型 (1)String类型;(2)Number类型;(3)Boolean类型;(4)Undefined类型;(5)Null类型;第2章 JavaScript基本语法JavaScript程序设计程序设计2.5 2.5 数据类型数据类型引用数据类型 (1)Object类型;(2)Array类型;(3)Date类型;(4)RegExp类型;(5)Function类型;第2章 JavaScript基本语法JavaScript程序设计程序设计2.5 2.5 数据类型数据类型基本数据类型和引用数据类型
12、的区别 (1)声明变量时不同的内存分配;(2)不同的内存分配机制也带来了不同的访问机制;(3)复制变量时的不同;(4)参数传递的不同;第2章 JavaScript基本语法JavaScript程序设计程序设计2.5 2.5 数据类型数据类型数据类型转换 (1)利用转换函数;(2)强制类型转换;(3)利用JavaScript变量弱类型转换;第2章 JavaScript基本语法JavaScript程序设计程序设计2.6 2.6 表达式和运算符表达式和运算符表达式和运算符概念 (1)表达式是各种数值、变量、运算符的综合体,最简单的表达式可以是常量或者变量名称;(2)运算符是变量中用来处理运算数的各种符
13、号;常量表达式:hello;变量表达式:example;赋值表达式:string=”helloworld”。第2章 JavaScript基本语法JavaScript程序设计程序设计2.6 2.6 表达式和运算符表达式和运算符运算符类型 (1)一元运算符;(2)算术运算符;(3)关系运算符;(4)逻辑运算符;(5)位运算符;(6)赋值运算符;(7)其他运算符;第2章 JavaScript基本语法JavaScript程序设计程序设计2.6 2.6 表达式和运算符表达式和运算符运算符优先级 (1)+-+!deletetypeofvoid(一元运算符、返回数据类型、对象创建、未定义值);(2)*/%(
14、乘法、除法、取余);(3)+-(加法、减法、字符串连接);(4)(移位);(5)=instanceofin(小于、小于等于、大于、大于等于、instanceof);(6)=!=!=(等于、不等于、严格相等、非严格相等);(7)&(按位与);第2章 JavaScript基本语法JavaScript程序设计程序设计2.6 2.6 表达式和运算符表达式和运算符运算符优先级 (8)(按位异或);(9)|(按位或);(10)&(逻辑与);(11)|(逻辑或);(12)?(条件);(13)=*=/=%=+=-=&=|=(赋值、运算赋值);(14),(多重求值);第2章 JavaScript基本语法Java
15、Script程序设计程序设计2.6 2.6 表达式和运算符表达式和运算符运算符优先级 运算符优先级等级:一元运算符 算术运算符 比较运算符 逻辑运算符 三元运算符 赋值运算符 逗号运算符第2章 JavaScript基本语法JavaScript程序设计程序设计2.7 2.7 关键字及保留字关键字及保留字关键字 (1)breakdoinstanceoftypeof;(2)caseelsenewvar;(3)catchfinallyreturnvoid;(4)continueforswitchwhile;(5)debugger*;(6)functionthiswith;(7)defaultifthr
16、ow;(8)deleteintry;第2章 JavaScript基本语法JavaScript程序设计程序设计2.7 2.7 关键字及保留字关键字及保留字保留字 (1)abstractenumintshort;(2)booleanexportinterfacestatic;(3)byteextendslongsuper;(4)charfinalnativesynchronized;(5)classfloatpackagethrows;(6)constgotoprivatetransient;(7)debuggerimplementsprotectedvolatile;(8)doubleimpor
17、tpublic;第2章 JavaScript基本语法JavaScript程序设计程序设计2.8 2.8 正则表达式正则表达式正则表达式定义及特性 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑varreg=/abcd/;/这个叫对象直接量方式varreg=newRegExp(abcd);/这个叫构造函数方式varreg=/abcd/g;varreg=newRegExp(abcd,g);reg=newRegExp(w+);/这里的要转义reg=/w+/;/这样就不需要第2章 J
18、avaScript基本语法JavaScript程序设计程序设计2.8 2.8 正则表达式正则表达式正则表达式语法正则表达式是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。模式描述在搜索文本时要匹配一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。第2章 JavaScript基本语法JavaScript程序设计程序设计2.8 2.8 正则表达式正则表达式普通字符 普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号;第2章 JavaScript基本语法JavaScript
19、程序设计程序设计2.8 2.8 正则表达式正则表达式非打印字符第2章 JavaScript基本语法JavaScript程序设计程序设计字符字符描述描述cx匹配由x指明的控制字符。例如,cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则,将c视为一个原义的c字符。f匹配一个换页符。等价于x0c和cL。n匹配一个换行符。等价于x0a和cJ。r匹配一个回车符。等价于x0d和cM。s匹配任何空白字符,包括空格、制表符、换页符等等。等价于fnrtv。S匹配任何非空白字符。等价于fnrtv。t匹配一个制表符。等价于x09和cI。v匹配一个垂直制表符。等价于x0b和cK。2.8 2
20、.8 正则表达式正则表达式特殊字符第2章 JavaScript基本语法JavaScript程序设计程序设计特殊字符特殊字符描述描述$匹配输入字符串的结尾位置。如果设置了RegExp对象的Multiline属性,则$也匹配n或r。要匹配$字符本身,请使用$。()标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符,请使用(和)。*匹配前面的子表达式零次或多次。要匹配*字符,请使用*。+匹配前面的子表达式一次或多次。要匹配+字符,请使用+。.匹配除换行符n之外的任何单字符。要匹配.,请使用.。标记一个中括号表达式的开始。要匹配,请使用。?匹配前面的子表达式零次或一次,或指明
21、一个非贪婪限定符。要匹配?字符,请使用?。将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如,n匹配字符n。n匹配换行符。序列匹配,而(则匹配(。匹配输入字符串的开始位置,除非在方括号表达式中使用,此时它表示不接受该字符集合。要匹配字符本身,请使用。标记限定符表达式的开始。要匹配,请使用。|指明两项之间的一个选择。要匹配|,请使用|。2.8 2.8 正则表达式正则表达式限定符第2章 JavaScript基本语法JavaScript程序设计程序设计字符字符描述描述*匹配前面的子表达式零次或多次。例如,zo*能匹配z以及zoo。*等价于0,。+匹配前面的子表达式一次或多次。
22、例如,zo+能匹配zo以及zoo,但不能匹配z。+等价于1,。?匹配前面的子表达式零次或一次。例如,do(es)?可以匹配do或does中的do。?等价于0,1。nn是一个非负整数。匹配确定的n次。例如,o2不能匹配Bob中的o,但是能匹配food中的两个o。n,n是一个非负整数。至少匹配n次。例如,o2,不能匹配Bob中的o,但能匹配foooood中的所有o。o1,等价于o+。o0,则等价于o*。n,mm和n均为非负整数,其中n30)alert(i大于30);elseif(i0)alert(i小于0);elsealert(i在0到30之间);第3章 JavaScript程序构成JavaScr
23、ipt程序设计程序设计3.1 3.1 程序控制流程序控制流for循环语句 for(initialization;expression;post-loop-expression)statement;varcount=10;for(vari=0;icount;i+)alert(i);第3章 JavaScript程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流for.in循环语句 for(propertyinexpression)statement;for(varpropNameinwindow)document.write(propName);第3章 JavaScr
24、ipt程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流while循环语句 while(expression)statement;vari=0;while(i10)alert(i);i+=2;第3章 JavaScript程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流label语句 label:statementstarti:5第3章 JavaScript程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流break和continue语句 break和continue语句用于循环中精确地控制代码的执行。b
25、reak语句可以立即退出循环,阻止再次反复执行任何代码。而continue语句只是退出当前循环,根据控制表达式还允许继续进行下一次循环。第3章 JavaScript程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流do.while语句 dostatements;while(condition)dox=x+Thenumberis+i+;i+;while(i5);第3章 JavaScript程序构成JavaScript程序设计程序设计3.1 3.1 程序控制流程序控制流switch语句 switch(expression)casevalue:statement;bre
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 程序设计 完整版 课件 全套 ppt 电子 教案 教学 设计 教程
限制150内