JavaScript基础教程PPT课件.ppt

2020 4 8 1 Web基础之一JavaScript基础 2020 4 8 2 目标 理解什么是JavaScript如何将JavaScript嵌入到HTML中理解变量 数据类型和运算符掌握if else和switch语句掌握函数掌握内置对象 2020 4 8 3 什么是JavaScript 脚本程序 嵌入在HTML文件中 提供了和用户进行交互的能力 常见的脚本语言 VBScript javascriptJavaScript是NetScape公司的产品提供用户交互动态更改内容数据验证 2020 4 8 4 将JavaScript嵌入网页 可以将JavaScript语句插入HTML文档 方式如下 使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中将脚本代码作为HTML标签的属性值 2020 4 8 5 使用Script标签 JavaScript代码 document write 欢迎来到JavaScript世界 尽情享受学习的快乐 脚本代码 设置语言 2020 4 8 6 使用外部JS文件 外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC 源文件 属性可用于包括此外部文件 2020 4 8 7 使用外部JS文件 JavaScript代码 test htm 使用外部文件以上文本是通过访问外部JavaScript文件显示的 2020 4 8 8 将脚本代码作为HTML标签的属性值 在href属性中必须指明是javascript当前时间在onclick事件属性中可以不用指明是javascript 把script脚本作为属性值 html 2020 4 8 9 Javascript的基本格式 区分大小写以 作为语句结束符号 可加可不加 以 或 组为注释Javascript的数据类型 基本类型 存储在栈引用类型 是存储在堆中的对象 2020 4 8 10 Javascript是弱类型的语言 字符串 地址 null 布尔值 数字 undefined 对象 对象 对象 对象 对象 栈 堆 2020 4 8 11 Javascript的数据类型 2020 4 8 12 变量 Javascript采用弱类型的变量形式 即在声明时无需指定变量类型 在赋值的时候自动指定 变量名必须以字母或下划线 开头变量可以包含数字 从A至Z的大小写字母JavaScript区分大小写 即变量myVar myVAR和myvar是不同的变量 2020 4 8 13 声明变量 vara var 用于声明变量的关键字 a 变量名 同时声明和初始化变量vara 10 a 10 声明变量 声明多个变量varx y z 10 赋值 不声明变量 直接使用x 10 2020 4 8 14 typeof运算符号 Typeof对变量的运算结果为以下之一 UndefinedBooleanNumberStringObject typeof null 结果为object 此为历史遗留的错误 观察以下alert的结果variNum alert typeof null alert typeof iNum iNum 10 alert typeof iNum varbFlag true alert typeof bFlag varaStu newArray alert typeof aStu alert typeof hello 2020 4 8 15 观察以下运行结果 varotemp varotemp2 alert typeof otemp alert typeof otemp2 alert otemp undefined alert otemp2 undefined 会导致错误 因为没有定义过的变量只有typeof运算符可以使用 其他运算符都会导致错误 2020 4 8 16 声明变量 使用变量varx x prompt 淘宝网竟拍 请出一口价 1 document write 拍卖价格 x 用来连接多个字符串document write 恭喜您 您以最高价拍卖成功 alert 欢迎下次光临 定义变量 赋值 输出 prompt 提示信息 默认值 将弹出提示对话框 接受用户的输入 点击确定返回输入的字符串 点击取消反馈空字符串 2020 4 8 17 变量a b和c只能在其各自的函数中被访问 变量的作用域 脚本 函数function1局部变量a 函数function2局部变量b 函数function3局部变量c 可由函数1 函数2和函数3访问 全局变量gg 2020 4 8 18 转义字符 2020 4 8 19 varx 100 vary varz document write 竞拍SONY数码相机600万像素 x 起价 y prompt 加多少银子 1 z x y alert 您最终的出价 n z n 用于换行显示 Prompt函数返回输入的字符串 号的用法 1 10020 bug 200 2020 4 8 20 varx 100 vary varz document write 竞拍SONY数码相机600万像素 x 起价 y prompt 加多少银子 1 z x parseFloat y alert 您最终的出价 n z n 用于换行显示 parseFloat 函数将字符串转换为float数据parseInt 函数将字符串转换为int数据如果转换失败 返回NaN值 notanumber 使用isNaN z 判断是否为NULL 号的用法 2 2020 4 8 21 类型转换 转换为字符串 在javascript中数字 字符串和boolean都是伪对象 因此他们都有toString方法 varsColor red alert sColor toString varbFound true alert bFound toString variNum1 10 variNum2 10 6 alert iNum1 alert iNum2 alert iNum1 toString 2 alert iNum1 toString 8 alert iNum1 toString 16 alert iNum2 toString 8 alert iNum2 toString 16 2020 4 8 22 类型转换 转换为数字 parseInt和parseFloat 其解析方式为从位置0开始查看直到找到无法解析的字符 variNum1 parseInt 123abc variNum2 parseInt 0 xa variNum3 parseInt 013 variNum4 parseInt blue alert iNum1 alert iNum2 alert iNum3 alert iNum4 variNum1 parseInt 10 2 variNum2 parseInt 10 8 variNum3 parseInt 10 16 alert iNum1 alert iNum2 alert iNum3 2020 4 8 23 强制类型转换 Boolean value Number value String value varb1 Boolean varb2 Boolean hello varb3 Boolean 100 varb4 Boolean null varb5 Boolean 0 varb6 Boolean newObject alert b1 b1 alert b2 b2 alert b3 b3 alert b4 b4 alert b5 b5 alert b6 b6 非0 非空串 非空对象为true 其他false 2020 4 8 24 强制类型转换 Boolean value Number value String value alert Number false Number false alert Number true Number true alert Number undefined Number undefined alert Number null Number null alert Number 3 6 Number 3 6 alert Number 3 3 3 Number 3 3 3 alert Number newObject Number newObject Number转换和parseInt parseFloat转换的不同之处在于Number要求整个值都要有效 2020 4 8 25 引用类型 Object类与java中的Object类相似具体有 constructor prototype tostring valueof等方法NewObject 等价于 2020 4 8 26 属性名 属性值 name zhangsan age 123 getName function alert this name 从JavaScript的内部实现的角度来看问题 一个JavaScript对象就是属性集的组合 内部如何组织这些属性集的呢 使用类似于java中的Map 为什么使用for循环遍历属性的时候 没有找到constructor属性 2020 4 8 27 引用类型 Boolean 一般不用Number为基本数字类型的包装类有用的方法 varoNum newNumber 99 alert oNum toFixed 2 oNum newNumber 999 alert oNum toExponential 2 oNum newNumber 9999 alert oNum toPrecision 6 2020 4 8 28 运算符 2020 4 8 29 算术运算符 运算符示例 html 2020 4 8 30 比较运算符 比较运算符2 1 2020 4 8 31 运算符 逻辑运算符 2020 4 8 32 等号运算符规则 和 在进行运算之前都会进行类型转换 规则如下 如果一个运算数是Boolean则在检查相等之前先把他转换为数字值 False转换为0 true转换为1如果一个运算数是字符串 另一个是数字 则在检查相等之前先把字符串转换为数字值 如果一个运算数是字符串 另一个是对象 则在检查相等之前先把对象调用toString方法转换为字符串 如果一个运算数是对象 另一个是数字 则在检查相等之前先把对象转换为数字值 值null和undefined相等如果两个都是对象 则比较引用值 alert null undefined alert 5 5 alert false 0 2020 4 8 33 全等号 在作比较之前 不作类型转换 alert null undefined alert 5 5 alert false 0 2020 4 8 34 条件语句用于测试条件 if 条件 JavaScript代码 语法 if语句 如果要执行多个语句 必须将这些语句放在一对大括号 内 但如果只要执行一个语句 则可以省略大括号 2020 4 8 35 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value if numb1 其他代码略 同上例 2020 4 8 36 ifelse语句2 1 if 条件 JavaScript代码 else JavaScript代码 语法 2020 4 8 37 switch语句 switch 表达式 case常量1 JavaScript语句 break case常量2 JavaScript语句 break default JavaScript语句 语法 swtich示例 html 2020 4 8 38 数组 声明数组var数组名 newArray 数组大小 例 varemp newArray 3 添加元素emp 0 AA emp 1 BB emp 2 CC emp 也可以声明数组并赋初值 例 varemp newArray AA BB CC 2020 4 8 39 使用数组varemp newArray 3 emp 0 RyanDias emp 1 GrahamBrowne emp 2 DavidGreene document write 数组emp中的数据为 document write emp 0 document write emp 1 document write emp 2 数组 2020 4 8 40 数组 常用属性length 返回数组中元素的个数 应该是最大下标值 1常用方法 2020 4 8 41 varemp newArray 3 emp 0 RyanDias emp 1 GrahamBrowne emp 2 DavidGreene emp sort document write 排序结果是 document write emp 0 document write emp 1 document write emp 2 varx emp join document write x 数组排序 2020 4 8 42 循环 for循环do whilewhile For循环演示 html Do while循环演示 html 2020 4 8 43 函数 定义函数 function函数名 参数1 参数2 语句 调用函数 函数调用一般和表单元素的事件一起使用 调用格式为 事件名 函数名 functionsum one two varresult one two returnresult 表示单击此按钮时 调用函数sum 执行 2020 4 8 44 JavaScript函数 内置函数eval函数 用于计算字符串表达式的值isNaN函数 用于验证参数是否为NaN 非数字 Eval示例 html 2020 4 8 45 函数的应用 num1 num2 result 函数 html 2020 4 8 46 Javascript函数特性 无重载 但在javascript中定义两个名字相同的函数不会引发错误 他将会调用后定义的函数 functiondoAdd iNum alert iNum 1000 functiondoAdd iNum alert iNum 100 doAdd 100 2020 4 8 47 Javascript函数特性利用arguments模拟重载 Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数 开发者定义的函数在调用时可以接受任意的参数 不会引发错误 遗漏的参数以undefined传递给函数 多余的参数被忽略 但可以使用arguments数组接受 functionsayHello if arguments 0 exit return alert arguments 0 sayHello sayHello zhangsan sayHello exit 2020 4 8 48 Javascript函数特性利用arguments模拟重载 functiondoAdd if arguments length 1 alert arguments 0 elseif arguments length 2 alert arguments 0 arguments 1 doAdd 30 doAdd 30 30 2020 4 8 49 Function类 Varfunction name newFunction arg1 arg2 argN function body 例 varsayHello newFunction sName alert Hello sName sayHello zhangsan 2020 4 8 50 借助Function来理解函数 vardoAdd newFunction iNum alert iNum 100 doAdd newFunction iNum alert hello iNum doAdd 1 由以上可见 函数名只是指向函数对象的一个引用值 同样的 我们也可以使用不同的变量指向同一个函数 2020 4 8 51 借助Function来理解函数 vardoAdd newFunction iNum alert iNum 100 doAdd newFunction iNum alert hello iNum varotherAdd doAdd doAdd 1 otherAdd 9 2020 4 8 52 把函数作为参数传给其他函数 varsayHello newFunction sName sMessage alert Hello sName sMessage functioncallOtherFunc fnCall vArg1 vArg2 fnCall vArg1 vArg2 callOtherFunc sayHello zhangsan good alert callOtherFunc toString 2020 4 8 53 函数 指针 functionmyFunction alert Old myFunction 输出 Old myFunction function alert New myFunction 输出 New 可见 函数的名字相当于一个指针 2020 4 8 54 函数 指针 functionmyFunction alert Old varsavedFuncion myFunction myFunction function alert New myFunction 输出 New savedFuncion 输出 Old 2020 4 8 55 基于对象的Javascript JavaScript中的对象是由属性 properties 和方法 methods 两种基本的元素的构成的 前者是对象在实施其所需要行为的过程中 实现信息的装载单位 从而与变量相关联 后者是指对象能够按照设计者的意图而被执行 从而与特定的函数相联 对象要真正地被使用 可采用以下几种方式获得 引用JavaScript内部对象 由浏览器环境中提供 创建新对象 2020 4 8 56 Javascript的内部对象 Object Array Function String Boolean Number Date RegExp Math Global Error EvalError RangeError ReferenceError SyntaxError TypeError URIError 2020 4 8 57 对象操作语句 for in 格式如下 For 属性名in已知对象名 优点 无需知道对象中属性的个数即可进行操作 例 FunctionshowData object for varX 0 X 30 X document write object i FunctionshowData object for varxinobject document write object i 2020 4 8 58 对象操作语句 with语句 在该语句体内 任何对变量的引用被认为是这个对象的属性 以节省一些代码 with object 所有在with语句后的花括号中的语句 都是在后面object对象的作用域的 with o name 李四 age 100 height 12 3 2020 4 8 59 再论数组 定义方法1varaColors newArray aColors 0 red aColors 1 green aColors 2 blue for varxinaColors alert aColors x 定义方法2varaColors2 newArray red green blue 定义方法3varaColors3 red green blue 2020 4 8 60 再论数组 数组的大小是动态变化的varaColors3 red green blue aColors 6 gray for varx 0 x aColors length x alert aColors x for varxinaColors alert aColors x 2020 4 8 61 再论数组 数组的toString方法和valueOf方法varaColors3 red green blue aColors 10 gray alert aColors toString 字符串和数组之间的转换 splitvaraColors3 red green blue varsString aColors toString alert sString varaColors4 sString split for vari 0 i aColors4 length i alert aColors4 i 2020 4 8 62 再论数组 Javascript中 可以把数组看成是一个栈varaColors newArray aColors push red aColors push green aColors push blue for vari 0 i aColors length i alert aColors i varsColor aColors pop alert sColor sColor 2020 4 8 63 再论数组 结合shift 和unshift 以及push和pop 可以把数组看成是一个队列Shift 删除数组中的第一个元素Unshift 把一个元素放在数组的第一个位置varqueue red green blue queue push white alert queue toString queue shift alert queue toString queue unshift yellow alert queue toString queue sort alert queue toString queue reverse alert queue toString 2020 4 8 64 String对象 创建字符串有两种不同方法 使用var语句varnewstr 这是我的字符串 创建String对象varnewstr newString 这是我的字符串 2020 4 8 65 String对象 语法 indexOf 查找的子字符串 查找的起始位置 返回子字符串所在的位置 如果没找到 返回 1例如 varxvary abcdefg x y indexOf c 0 返回结果为2 起始位置是0 2020 4 8 66 functioncheckEmail vare document myform email value if e length 0 检测长度是否为0 即是否为空 alert 电子邮件不能为空 return if e indexOf 0 1 检测是否包含 符号 alert 电子邮件格式不正确 n必须包含 符号 return if e indexOf 0 1 检测是否包含 符号 alert 电子邮件格式不正确 n必须包含 符号 return document write 恭喜您 注册成功 检查电子邮件email是否包含 和 String对象 返回结果 1表示没找到 字符 字符串对象 htm 2020 4 8 67 Math对象 Math random 产生0 1的随机小数Math round 四舍五入取整 如9 34取整为9 2020 4 8 68 自动刷新document write 2秒自动刷新 随机显示图片 vari 0 i Math round Math random 8 1 document write Math对象 假定随机产生的数字i 3 上述代码即为 显示第三幅图片 3 jpg 如何实现 每隔2秒刷新网页 Math round Math random 8 1 产生1 9的数字 2020 4 8 69 Date对象 Date对象存储的日期为自1970年1月1日00 00 00以来的毫秒数 var日期对象 newDate 年 月 日等参数 例 varmydate newDate July29 1998 10 30 00 如果没有参数 表示当前日期和时间例 vartoday newDate 2020 4 8 70 Date对象 Data方法的分组 2020 4 8 71 Date对象 用作Date方法的参数的整数 2020 4 8 72 Date对象 Set方法 2020 4 8 73 Date对象 Get方法 2020 4 8 74 Date对象 To方法 Parse方法和UTC方法 2020 4 8 75 varnow newDate varhour now getHours if hour 0 Date对象 获得当前日期和时间 获得小时 即当前是几点 判断上午 下午还是晚上 月份数字0 11 注意 1 日期对象1 htm 2020 4 8 76 Date对象 setTimeout的用法 setTimeout 调用的函数 定时的时间 例 varmyTime setTimeout disptime 1000 clearTimeout myTime 本例的时间可以采用定时显示 使用定时器函数 每隔1秒调用disptime 函数显示时间 每隔1000毫秒调用函数disptime 执行 关闭定时器 2020 4 8 77 Date对象10 8 varmyTime setTimeout disptime 1000 设置定时器每隔1秒 1000毫秒 调用函数disptime 执行 刷新时钟显示 2020 4 8 78 Date对象 设置样式 无边框的文本框 Onload 事件 页面加载就调用函数 disptime 显示时间 2020 4 8 79 Date vardDate newDate alert dDate toString alert dDate toDateString alert dDate toLocaleDateString alert dDate toLocaleTimeString dDate newDate 2007 7 7 2020 4 8 80 this this这个词在function中有特别的意义 它指向了调用函数的那个对象 varoCar newObject oCar color red oCar showColor function alert this color oCar showColor 2020 4 8 81 functionshowColor alert this color varoCar1 newObject oCar1 color red oCar1 showColor showColor varoCar2 newObject oCar2 color blue oCar2 showColor showColor oCar1 showColor oCar2 showColor this这个词在function中有特别的意义 它指向了调用函数的那个对象 2020 4 8 82 this关键字 functionEmployee name salary mySupervisor this name name this salary salary this supervisor mySupervisor varboss newEmployee John 200 varmanager newEmployee Joan 50 boss varteamLeader newEmployee Rose 50 boss alert manager supervisor name isthesupervisorof manager name alert manager name ssupervisoris manager supervisor name 2020 4 8 83 定义类或对象的方法 工厂方法 前提 对象的属性可以在对象对象创建后动态定义 varoCar newObject oCar color red oCar doors 4 oCar mpg 20 oCar showColor function alert this color oCar showColor oCar functioncreateCar varoCar newObject oCar color red oCar doors 4 oCar mpg 20 oCar showColor function alert this color returnoCar varoCar createCar oCar showColor 2020 4 8 84 functioncreateCar sColor iDoors iMpg varoCar newObject oCar color sColor oCar doors iDoors oCar mpg iMpg oCar showColor function alert this color returnoCar varoCar createCar black 5 30 oCar showColor functionshowColor alert this color functioncreateCar sColor iDoors iMpg varoCar newObject oCar color sColor oCar doors iDoors oCar mpg iMpg oCar showColor showColor returnoCar varoCar createCar yellow 3 6 oCar showColor 2020 4 8 85 函数示例6 html 函数示例7 html 2020 4 8 86 定义类或对象的方法 构造函数方式 functionCar sColor iDoors iMpg this color sColor this doors iDoors this mpg iMpg this showColor function alert this color varoCar1 newCar red 5 6 varoCar2 newCar blue 8 9 oCar1 showColor oCar2 showColor alert typeofCar alert typeofnewCar 当这个函数创建的时候有一个同名的对象也被创建 2020 4 8 87 函数 原型 functionFish name color this name name this color color Fish prototype livesIn water Fish prototype price 20 varfish1 newFish mackarel gray varfish2 newFish goldfish orange varfish3 newFish salmon white for vari 1 i 3 i varfish eval fish i 只是取得指向这条鱼的指针alert fish name fish color fish livesIn fish price 输出 mackarel gray water 20 goldfish orange water 20 salmon whitewater 20 当一个对象被创建时 这个构造函数将会把它的属性prototype赋给新对象的内部属性 proto 这个 proto 被这个对象用来查找它的属性 2020 4 8 88 用prototype给对象添加函数 functionEmployee name salary this name name this salary salary Employee prototype getSalary functiongetSalaryFunction returnthis salary Employee prototype addSalary functionaddSalaryFunction addition this salary this salary addition 2020 4 8 89 用prototype给对象添加函数 varboss1 newEmployee Joan 200000 varboss2 newEmployee Kim 100000 varboss3 newEmployee Sam 150000 输出 alert boss1 getSalary 输出200000alert boss2 getSalary 输出100000alert boss3 getSalary 输出150000 2020 4 8 90 定义类或对象的方法 原型方式 functionCar sName Car prototype name sName Car prototype showName function alert this name varoCar newCar benz oCar showName varyourCar newCar haha yourCar showName oCar showName 输出 haha 每一个构造函数都有一个属性叫做原型 prototype 这个属性非常有用 为一个特定类声明通用的变量或者函数 原型方式的缺点 1 无法参数化的构造对象 2 修改一个引用属性会影响另一个对象 2020 4 8 91 定义类或对象的方法 原型方式 functionCar Car prototype color red Car prototype doors 4 Car prototype mpg 23 Car prototype drivers newArray mike tom Car prototype showColor function alert this color varoCar1 newCar varoCar2 newCar oCar1 showColor oCar2 showColor alert oCar2 drivers oCar1 drivers push jim 改变oCar1 drivers 结果确把oCar2也改变了alert oCar2 drivers 每一个构造函数都有一个属性叫做原型 prototype 这个属性非常有用 为一个特定类声明通用的变量或者函数 原型方式的缺点 1 无法参数化的构造对象 2 修改一个引用属性会影响另一个对象 2020 4 8 92 定义类或对象的方法 混合构造函数和原型方式 functionCar sColor iDoors iMpg aDrivers this color sColor this doors iDoors this mpg iMpg this drivers aDrivers Car prototype showColor function alert this color varoCar1 newCar red 5 3 newArray Tom Jack varoCar2 newCar blue 5 3 newArray Mike Jim oCar1 showColor oCar2 showColor alert oCar2 drivers oCar1 drivers push Jim alert oCar2 drivers 构造函数的方式定义属性 用原型方式定义方法 推荐使用 2020 4 8 93 定义类或对象的方法 动态原型方式 functionCar sColor iDoors iMpg aDrivers this color sColor this doors iDoors this mpg iMpg this drivers aDrivers if typeofCar initialized undefined Car prototype showColor function alert this color Car initialized true varoCar1 newCar red 5 3 newArray Tom Jack varoCar2 newCar blue 5 3 newArray Mike Jim oCar1 showColor oCar2 showColor alert oCar2 drivers oCar1 drivers push Jim alert oCar2 drivers 2020 4 8 94 进一步认识prototype 问题 资源耗费太大varstr hello str world 因此 优点是资源耗费较小 但是语义不够清楚 vararr newArray arr 0 hello arr 1 world varstr1 arr join alert str1 2020 4 8 95 进一步认识prototype functionStringBuffer this strings newArray StringBuffer prototype append function str this strings push str StringBuffer prototype toString function returnthis strings join varbuffer newStringBuffer buffer append hello buffer append world alert buffer toString 2020 4 8 96 进一步认识prototype 为本地类创建新的方法Number prototype toHexString function returnthis toString 16 variNum 15 alert iNum toHexString 2020 4 8 97 通过对象直接初始化 通过对象直接初始化 html 2020 4 8 98 自定义对象嵌套 自定义对象嵌套 html 2020 4 8 99 继承 对象冒充 functionClassA sColor this color sColor 使用this关键字给属性和方法赋值this showColor function alert this color functionClassB sColorr this newMethod ClassA 注意这不是把ClassA看成构造函数 而是看成了普通函数this newMethod sColor 调用时 ClassA中的this实际上是ClassB的对象deletethis newMethod varb newClassB red b showColor 2020 4 8 100 继承 对象冒充 functionClassA sColor this color sColor 使用this关键字给属性和方法赋值this showColor function alert this color functionClassB sColor sName this newMethod ClassA 注意这不是把ClassA看成构造函数 而是看成了普通函数this newMethod sColor 调用时 ClassA中的this实际上是ClassB的对象deletethis newMethod this name sName this sayName function alert this name varb newClassB red Tom b showColor b sayName 2020 4 8 101 练习 编写两个类 手机类 其中有颜色 品牌 价格等属性 有打电话的方法 相机类 其中有颜色 品牌 象素 价格等属性 有拍照的方法 编写一个拍照手机的类 继承以上两个类 即实现了多重继承 2020 4 8 102 继承 call方法 functionClassA sColor this color sColor 使用this关键字给属性和方法赋值this showColor function alert this color functionClassB sColo