slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
JavaScript 基础培训(三) PowerPoint Presentation
Download Presentation
JavaScript 基础培训(三)

Loading in 2 Seconds...

play fullscreen
1 / 25
mara-peters

JavaScript 基础培训(三) - PowerPoint PPT Presentation

88 Views
Download Presentation
JavaScript 基础培训(三)
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. JavaScript基础培训(三) By 陈古松 2013年9月27日

  2. 目标 理解那些困扰我们的概念 函数----黑箱操作 面向对象or 面向过程----指挥者 or 操作者

  3. 函数

  4. 函数模型 代码块 参数1 参数2 返回值 参数.. 黑盒子模型(从用户角度) 用户从来不关心我们的魔术是如何创造出来了,他们只关心结果

  5. 变量的作用域 全局变量 局部变量

  6. 函数结构体 1、使用function语句: Function functionName(x1,x2,x3…..){ //函数行为,要善用注释 return y } 参数:x1、x2、x3、...... 函数名:functionName(语义化) 返回结果:return y(并不是所有) 2、利用函数直接量 varfunctionName=function(x1,x2,x3{ //函数行为 return y } 3、匿名函数: function(x1,x2,x3……){ //函数行为,要善用注释 return y }

  7. 函数的作用 思考: 我们平时是如何用css来控制网页样式的? 设定class 或者id或者就用tagNames 在html中建立盒子 为每个盒子进行css样式定义 WHY?

  8. 函数的作用 但我们会遇上这么一个情况: 神奇的css3可以帮我们实现渐变效果,但是它的代码却: filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) ; progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); background:red; background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 如果我们要多次使用渐变效果,我们该怎么做呢? 定义class,需要时引用

  9. 函数的作用 小小总结: 常用情况: 特殊情况: 先有盒子结构,后定义功能 先有功能,后引用于盒子结构 函数的作用:创造的是一个功能,可以重复被使用

  10. 函数的特征 回到css,再思考一个问题: 在使用线性渐变时候我们考虑盒子的大小同时加上圆角、阴影、字体颜色等功能,合适吗? 函数功能的单一性

  11. 函数的特征 思考一下函数能否共存: function add(x1,x2){ var y=x1+x2; return y; } function add(x1,x2,x3){ var y=x1+x2+x3; return y; } 重载:因传入的参数不同或因函数的类型不同,允许同名函数存在且相互不干扰 JS函数不能重载

  12. 函数的调用 varnewName= functionName(x1,x2,x3.....) 若无参数,则只用functionName(); 值得注意的是: 当函数无参数时,会有特殊情况出现,如我们遇到过的 window.onload=oneName; function oneName(){ body; } 这里没有可爱的括号?

  13. 对象

  14. 谈论对象 抽象事物 具体事物 Everything is an Object

  15. 面向对象与面向过程 让我们看看描述厚朴工作室的方法: 厚朴工作室存在了11多年了,厚朴工作室有许多图书,厚朴工作室有许多双屏幕电脑,厚朴工作室为整个化院服务,厚朴工作室不间断会有图书被买进,厚朴工作室会为厚朴工作室成员进行培训 面向对象:厚朴工作室为主题,谈论其属性与方法 换一个方式: 老大在2002年成立了厚朴工作室,老师为厚朴工作室增加了许多设备,图书管理员买了许多书并且定期会更新,会有专业人士为厚朴工作室举行培训 面向过程:操作者为主题,谈论其操作过程

  16. 属性与方法 属性:对象所用的性质 方法:对象所具有的能力,可以被操作,实质是接口 厚朴工作室存在了11年了 属性: 厚朴工作室有许多图书 厚朴工作室有许多双屏幕电脑 厚朴工作室 化院老师调用 厚朴工作室有为化院服务的能力 图书购买这调用 厚朴工作室有买进图书的能力 方法: 培训者调用 厚朴工作室有培训的能力

  17. 对象的分类 Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 本地对象: 内置对象: Math对象、Global对象(不需要实例化) 宿主对象: 寄宿在浏览器上的对象:Window、Document、History等

  18. 函数与对象 思考: 函数是不是对象? 函数可以看成是只具有单一功能的对象; 而对象也可以看成是可以具有多功能的函数,对象内部也可调用函数,对象的方法从本质来看也是函数 小小提示: 一般情况书都不会严格控制函数的单功能性,但个人写程序时思考好是函数或者对象

  19. 对象的实例化 我们创造的对象实际上并不是简简单单的对象,而是对象的集合类, 当我们调用对象时,需要赋予对象单独的个体含义,即实例化 我们创造人这个对象时,实际上说的是人类,而我们要具体描述某个人时,就需要赋予对人类的实例化,当描述另外一个人时,需要再次实例化 实例化方法:我们所熟悉的关键字:new function Object(x1,x2,x3){ } var object1=new Object(X1,X2,X3){ } varobject2=new Object(Y1,Y2,Y3){ }

  20. 封装与接口 封装:在程序上,隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别;将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员 意义:数据与程序的保护,非诚勿扰 降低使用的难度与增加使用的便捷性,例如JQuery 注意:需要好的接口说明文档或注释

  21. 继承与多态 继承与多态可以说是对逻辑性思维的一个体现 一个例子: 对象----人--------人有名字,人有年龄,人有思维能力; 对象----小孩-----小孩是人,所以小孩有名字,有年龄,也有思维能力 小孩还有哭的能力----------------特性 小孩(子类)继承了人(父类)这个对象 继承的作用:增强对象的复用性、可扩展性 小小测试(判断错误): 会网管知识的要接一些网管任务,我不会网管知识,所以我不要接网管任务 吃货在非三餐时间会吃其他东西,我不是吃货,所以我在三餐外不吃其他东西

  22. 继承与多态 继承实例:http://ce.sysu.edu.cn/hope/Item/108929.aspx 思考: 假设已经已经建立了人(父)和小孩(子)这两个对象并确立了继承关系, 当出现一个具体小孩是,我们在可以怎么描述小孩? 1.具体的小孩肯定是小孩,所以可以用小孩来描述 多态:子类可以用父类来描述 (向上转型) 2.小孩也是人,所以可以用人来描述这个小孩 思考:可不可以用小孩(子)来描述人(父)? 可以,把所有的除小孩外的其他人干掉,人就等同于小孩了。 向下转型:这是非常暴力的,常常是精度的损失或出现意外情况

  23. 回顾概念 封装 继承 多态 对象类型 属性与方法 重复 实例化 函数 对象 重载 面向对象(OOP) 面向过程 函数作用域 类

  24. 作业 1、学习函数与对象里面有许多许多的代码知识。 PS:只有懂了DOM相关知识后才能把JS所写的东东真正放在网页中,先学习DOM也是提供可操作的平台 2、模仿http://ce.sysu.edu.cn/hope/Item/108929.aspx的范例写一个继承相关的实例,重在体验,主题可以任选。 3、复习DOM的相关知识,以减轻下次培训的负担。

  25. Thank you