JavaScript基础加强.ppt

1、北京传智播客教育 ,JavaScript基础加强,于 洋,北京传智播客教育 ,什么是JavaScript,Netscape公司开发的一种脚本语言 ，并且可在所有主要的浏览器中运行 IE、Firefox、Chorme、Opera JavaScript 被设计用来向 HTML 页面添加交互行为 无需编译，可由浏览器直接解释运行 JavaScript 是一种弱类型语言 JavaScript 的正式名称是 ECMAScript。这个标准由 ECMA 组织发展和维护。,北京传智播客教育 ,JavaScript历史,在早期浏览器竞争的背景下，各浏览器厂商标新立异，独树一帜，JavaScript 脚本编写者

2、们苦不堪言 W3C、ECMA 的不懈努力下，随着Microsoft 的 IE浏览器的不断改进，一个遵奉标准、笃行规范的 Web 新世界展现在世人面前,北京传智播客教育 ,JavaScript语言组成,一个完整 JavaScript实现由以下3个部分组成 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM）,北京传智播客教育 ,JavaScript程序编写,HTML 的 标签用于把 JavaScript 插入 HTML 页面当中 编写JavaScript 两种方式：内部JS和外部JS 内部JS程序，在HTML源码中 alert(1); language 属性不赞成使用，

3、请使用type属性替代 外部JS程序，在HTML中引入单独的JS程序 1.js 内容 alert(2); 在引用外部JS的script标签间不能编写JavaScript代码,北京传智播客教育 ,JavaScript基本语法,变量、函数、运算符区分大小写 变量是弱类型的 var a = 10; var b = true; var c = hello; 每行结尾的;可有可无，建议编写 两种类型的注释 单行注释以双斜杠开头（/） 多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）,北京传智播客教育 ,JavaScript的数据类型,JavaScript和Java一样存在两种数据类型 原始

4、值 （存储在栈Stack中简单数据） 引用值 （存储在堆heap中对象） 5种原始数据类型 Undefined、Null、Boolean、Number 和 String JavaScript中字符串是原始数据类型 通过typeof运算符，查看变量类型 所有引用类型都是object 通过instanceof 运算符解决typeof对象类型判断问题 区分 undefined 和 null 变量定义了未初始化 - undefined 访问的对象不存在 - null,北京传智播客教育 ,JavaScript对象,String对象 - 字符串类型的引用类型 var s = new String(itca

5、st); Number对象 - 数字原始类型引用类型 var n = new Number(100); Boolean对象 - 布尔原始类型引用类型 var b = new Boolean(true); Math对象 执行数学任务 Date对象 用于处理日期和时间 Array对象 数组对象，进行数组操作,北京传智播客教育 ,JavaScript 函数的定义,方式一 function add(a,b) return a + b; 函数无需定义返回值，可以直接返回 方式二 var add = function(a,b)return a+b; 方式三 var add=new Function(a,b

6、,return a+b;); 方法的最后一个参数是函数体，之前是可变参数,北京传智播客教育 ,JavaScript 全局函数,encodeURI / decodeURI 编解码URI 进行url跳转时可以整体使用encodeURI encodeURIComponent / decodeURIComponent 编解码URI组件 传递参数时需要使用encodeURIComponent escape / unescape 对字符串进行unicode编码 escape不编码字符有69个：*，+，-，.，/，_，0-9，a-z，A-Z encodeURI不编码字符有82个：!，#，$，=，?，_，0-

7、9，a-z，A-Z encodeURIComponent不编码字符有71个：!， ，(，)，*，-，.，_，0-9，a-z，A-Z isNaN 检查某个值是否为数字 parseInt / parseFloat 解析字符串为整数 / 浮点数 eval 计算javascript 字符串，并把它作为脚本代码来执行,北京传智播客教育 ,JavaScript 对象定义,JavaScript中所有对象都是Object实例 var person = new Object(); JavaScript对象 实际上是一个key:value 集合结构 = “小丽”; / 定义属性 perso

8、n.setName = function(name) / 定义方法 = name; 也可以使用 来直接 JavaScript对象 var company = name : 传智播客, getName : function() alert(); ; company.getName();,北京传智播客教育 ,JavaScript 类定义,function可以JavaScript函数，也可以定义JavaScript类结构 var Person = function(name,age) / 构造函数 = name; this.age = age

9、; this.setName = function(name) = name; ; this.getName = function() return ; ; var p = new Person(小丽,18); p.setName(小明); alert(p.getName(); alert(p.age);,北京传智播客教育 ,function类模板prototype属性,通过function对象prototype属性添加类原型的属性和方法 var Car = function() var car1 = new Car(); / 通过function对象 p

10、rototype属性 / 去定义类模板 原型中属性 和 方法 C = 保时捷; var car2 = new Car(); alert(); = 宝马; alert(); 练习：通过prototype 属性添加新方法、重命名已有的方法,北京传智播客教育 ,使用原型链完成Javascript单继承,function ClassA() ClassA.prototype.color = blue; ClassA.prototype.sayColor = function () alert(this.color)

11、; ; function ClassB() ClassB.prototype = new ClassA(); 将ClassB原型指向ClassA 对象，可以实现单继承,北京传智播客教育 ,对象冒充实现JavaScript多重继承,function A() this.showinfo = function() alert(A的信息); ,function B() this.printMsg = function() alert(B的信息); ,function C() / 继承A this.newMethod = A; this.newMethod(); delete this.newMetho

12、d; / 继承B this.newMethod = B; this.newMethod(); delete this.newMethod; / 新加的方法 panyinfo = function() alert(传智播客); ,北京传智播客教育 ,BOM基础加强,于 洋,北京传智播客教育 ,浏览器对象BOM,DOM Window DOM Navigator DOM Screen DOM History DOM Location,北京传智播客教育 ,Window对象,Window 对象表示浏览器中打开的窗口 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一

13、个 window 对象，并为每个框架创建一个额外的 window 对象 window.frames 返回窗口中所有命名的框架 parent是父窗口（如果窗口是顶级窗口，那么parent=self=top） top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe） self是当前窗口（等价window） opener是用open方法打开当前窗口的那个窗口 练习：在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后，在iframe外面窗口中显示内容,北京传智播客教育 ,window的open close练习,北京传智播客教育 ,windon opener练习,另

14、一个方案：使用window. showModalDialog 方法实现,北京传智播客教育 ,与对话框有关的方法,window.alert(String) Boolean window.confirm(String) String mpt(String),北京传智播客教育 ,setTimeout,setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式 setTimeout(code,millisec) code 要调用的函数后要执行的 JavaScript 代码串 millisec 在执行代码前需等待的毫秒数 练习：在页面动态显示当前时间,注意：setTime

15、out() 只执行 code 一次。如果要多次调用，可以让 code 自身再次调用 setTimeout()。,北京传智播客教育 ,setTimeout广告漂浮, function move() document.getElementById(layer1).style.left= Math.random()*500; document.getElementById(layer1).style.top= Math.random()*500; setTimeout(move(),1000); 随机漂浮的广告 ,定义层图片移动 的函数move( ),每隔1秒调用move( )函数随机改变层的位置，

16、从而实现随机漂浮的效果,北京传智播客教育 ,其它浏览器对象的使用,DOM History History 对象包含用户（在浏览器窗口中）访问过的 URL back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL go() 加载 history 列表中的某个具体页面 练习：返回按钮制作 DOM Location Location 对象包含有关当前 URL 的信息 通过href属性完成超链接效果 练习：图片链接按钮,北京传智播客教育 ,DOM基础加强,于 洋,北京传智播客教育 ,DOM结构模型,北京传智播客教育 ,XML DOM

17、和 HTML DOM 关系,XML DOM 定义了访问和处理 XML 文档的标准方法 HTML文档格式 符合XML语法标准，所以可以使用XML DOM API 在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为 元素节点 Element 属性节点 Attr 文本节点 Text 文档节点 Document HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API 进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM,北京传智播客教育 ,BOM 和HTML DOM关系图,北京

18、传智播客教育 ,N O D E 接 口 的 特 性 和 方 法,北京传智播客教育 ,Document对象,每个载入浏览器的 HTML 文档都会成为 Document 对象 常用属性 all 提供对文档中所有 HTML 元素的访问 anchors返回对文档中所有 Anchor 对象的引用 forms返回对文档中所有 Form 对象引用 body 提供对 元素的直接访问 常用方法 getElementById()返回对拥有指定 id 的第一个对象的引用 getElementsByName()返回带有指定名称的对象集合 getElementsByTagName()返回带有指定标签名的对象集合 wri

19、te()向文档写 HTML 表达式 或 JavaScript 代码,北京传智播客教育 ,DOM 节点常用属性,nodeName 如果节点是元素节点，nodeName返回这个元素的名称 如果是属性节点，nodeName返回这个属性的名称 如果是文本节点，nodeName返回一个内容为#text 的字符串 nodeType Node.ELEMENT_NODE -1 - 元素节点 Node.ATTRIBUTE_NODE -2 - 属性节点 Node.TEXT_NODE -3 - 文本节点 nodeValue 如果给定节点是一个属性节点，返回值是这个属性的值 如果给定节点是一个文本节点，返回值是这个文

20、本节点内容 如果给定节点是一个元素节点，返回值是 null,北京传智播客教育 ,练习,问题: 打印 ”明天休息” (利用两种方法) 提示:使用(firstChild lastChild childNodes),北京传智播客教育 ,练习,问题: 打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue) 同时打印文本值 北京 海淀 奥运,北京传智播客教育 ,练习,问题: 输出所有select元素下的所有option元素中对应的文本内容 例如:中专 输出-中专,北京传智播客教育 ,DOM节点常见操作,DOM 获取节点 DOM 改变节点 DOM 删除节

21、点 DOM 替换节点 DOM 创建节点 DOM 添加节点,北京传智播客教育 ,练习,问题:当单击”北京”这个节点时,北京这个节点被 ”反恐精英”替换,北京传智播客教育 ,练习,问题: 在id=edu下增加大专,北京传智播客教育 ,练习,北京传智播客教育 ,练习,北京传智播客教育 ,练习,北京传智播客教育 ,练习,北京传智播客教育 ,练习,北京传智播客教育 ,JavaScript常用事件,鼠标移动事件 鼠标点击事件 加载与卸载事件 聚焦与离焦事件 键盘事件 提交与重置事件 选择与改变事件,北京传智播客教育 ,鼠标移动事件,mousemove/mouseout/mouseover function

22、 mouseovertest() document.getElementById(info).value = 鼠标在输入框上; function mouseouttest() document.getElementById(info).value= 鼠标在输入框外; ,北京传智播客教育 ,鼠标点击事件,click/dblclick/mousedown/mouseup function addFile() var file = document.createElement(input); file.setAttribute(id, temp_file); file.setAttribute(type, file); document.body.appendChild(file); ,北京传智播客教育 ,加载与卸载事件,load/unload function loadform() alert(这是一个自动装载例子!);function unloadform() alert(这是一个卸载例子!); 传智播客 ,北京传智播客教育 ,聚焦与离焦事件,focus/blur function checkDate() var date1 = document. get