JavaScript超全、超详细介绍.ppt

1、JS /调用它的方法可以是： abc(); abc(.任意多个参数); function other(arg0,arg1)/定义接收两个参数的函数 alert(“”); 调用它的方法可以是: other(); Other(.任意多个参数.);,Javascript函数声明的另一种方式：,var someFunc = function() /将函数赋给某个变量名.局部。 someFunc = functio() /将函数赋给某个变量名，全局。 调用方式同前。,JavaScript变量：,JavaScript变量可以接收任意的值。分为全局变量和局部变量。 使用var关键字声明一个局部变量。范围为一

2、个函数内部。 不使用var声明一个全局变量。考虑以下代码 function abc() str = “itcast”;/声明全局变量 for(var i=0;i10;i+)/声明此方法内部变量 alert(“内部”+i); /可以访问i abc(); if(str) /可以访问str alert(外部访问：+str); if(i) /不可以访问 i alert(外部：+i); ,北京传智播客教育 ,脚本可以出现的页面的任何位置，建议的位置如下：,JS的控制语句： (某些内容直接略),If.else if .else While,for,do.while for. in. switch.case

3、 Break return 异常处理 Trycatch,JS的调试工具：firebug/scriptdebug,Firebug是火狐浏览器的插件。 Scriptdebug是ie浏览器的插件。,document常用方法:,document是window对象的子对象，代表整个页面的内容部分。 document.getElementById根据一个id属性获取一个页面元素。返回一个对象。 document.getElementsByName,根据名称获取一组页面元素。返回一组对象的数组。 document的其他方法： createElement 创建一个页面元素。 getElementsByTagN

4、ame 根据元素名称返回元素数组。,页面元素：,Label for=“someid” - 在选中标签时等同于选中元素。 select .optgroup.option 实现分组选项。 Form 表单 Button , input type=“button” . 相同的元素。 fieldSet .legend. 范围选项。 Iframe 嵌入，子页面。 Div,span,p 层，块，段落。 Table . 表格。 更多内容，可见HTML文档。,Window对像及方法：,事件： onload -在浏览器完成对象的装载后立即触发。 方法： Alter, close, confirm, prompt

5、clearInterval, setInterval 每隔多长时间执行一次。 clearTimeout，setTimeout多长时间以后执行一次。 Open, showModalDialog显示对话框。 子对像： document -文档对象 event事件对象 属性： dialogArguments设置或获取传递给模式对话框窗口的变量或变量数组 returnValue设置或获取从模式对话框返回的值。 status设置或获取位于窗口底部状态栏的信息,onload-页面加载完成以后执行：,window.onload=function() 一般用于包含页面加载完成后自动执行的代码。 请考虑以下代码

6、，会提示哪一个？,请考虑以下代码能否在启动时提示:,showModalDialog显示模式对话框实现两个页面之间的数据传递,vReturnValue = window.showModalDialog(sURL , vArguments , sFeatures),模式对话框在现实的 开发当中，非常有用。 经常用于不要求用户 输入，但要求用户选择 的数据。,延时执行：,window.setTimeout(func,times) /以毫秒为单位的times时间以后执行func方法一次。 window.setInerval(func,times) /每隔以毫秒为单位的times时间以后执行一次func

7、方法。 两个方法均可以返回一个句柄，可以控制继续或是终止执行。 clearTimeout(handler); clearInterfal(handler); 主要的用途： 多长时间以后转到成功页面。 强制用户看说明书。,内容管理：value,html,text,设置或获取一个输入框的内容：document.getElementById(“name”).value 设置或获取一个div中的文本内容： div.innerText 设置或是获取div中的html内容： div.innerHTML,history和location:,window.history.go(-1); - 返回上一次操作的页

8、面。不会发出请求，从浏览器的缓存中获取显示的页面数据。 Window.location.href=“newUrl”; - 打开一个新的地址。,event事件源对像：,代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。 clientX, clientY-设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 keyCode设置或获取与导致事件的按键关联的 Unicode 按键代码。 srcElement设置或获取触发事件的对象。 x,y设置或获取鼠标指针位置相对于父文档的 x 像素坐标。y设置或获取鼠标指针位置相对于父文档的 y 像素坐标

9、。,event对象：,Event对象是js的事件源对像，有实际的开发中，非常有实用： 1：用event的x和y实现右键菜单。 对body的oncontextmenu添加事件。 Onclick只用于监听鼠标的左键，而contextmenu可以监听右键。 onmousedown等可以监鼠标的各个键。 在方法中通过event获取x和y轴的坐标。 Div使用position:absolute显示绝对位置。,北京传智播客教育 ,event对像：,2：用Event对象可以获取用户的键盘事件：onkeydown. 作用：限制用户输入非允许字符 如：年龄输入框只允许用户输入数字。 event.keyCode可

10、以获取用户按键的整数编码，如A为65,a为97等。 可以通过String类的fromCharCode方法将一个整数转成一个字符。 使用onkeydown=“return down();”在down方法中如果返回false则为不输入。,北京传智播客教育 ,JavaScript内置对像-目录,Array Push将数据追加到数组的尾部 pop从数组的最上面取一个数并删除它。 Date 用Date强制验证码刷新。 Math Number parseInt parseFloat RegExp正则表达式对像，匹配开始，$匹配结束。 Var p = /d$/; 匹配一个数字 Object Object类似

11、于Java中的Map. 使用和 直接定义对像(json) Java Script Object Navigation Object,特殊数据类型：undefined,undefined 是未初始化变量的默认值 区别undefined与未定义变量 下面这段程序运行的结果？ 如果一个数据类型为undefinde，则使用if判断为false.,var num; alert(1+typeof(num);/undefined alert(2+typeof(num1);/undefinde alert(“3”+(num=undefined);/true ，因为num就是undefined alert(4+

12、(num1=undefined);/不能进行比较，num1不存在,特殊数据类型：null,null与undefined的区别 下面这段程序运行的结果？ 如果一个数据变null，则通过if判断为false;,北京传智播客教育 ,alert(typeof(null);/object,对象 alert(typeof(undefined);/undefined,字符串 alert(null=undefined);/true，仍然为true，因为null和undefined都是false.而false=false当然为true.,数据类型转换,自动类型转换 toString() parseInt()和p

13、arseFloat() 强制类型转换 Boolean(value) Number(value) String(value),var xx = 3-10;/因为-*/是数学运算符，所以会自动转 alert(xx);/-7 var yy = 10-3; alert(yy);/7 var a = 80; var b = 50; var c = a-b;/-运算将自动转换 alert(c);/30 var d = a+b; alert(d);/8050，不自动转换 var d = parseInt(a)+parseInt(b);/使用Math方法转 alert(d);/130 var d = Numb

14、er(a)+Number(b);/强转 alert(d);/130,= 与 = 比较,= 只比较数据的值是否一样。 如 var a=“100”; var b = 100; Var boo = (a=b);/true，先将数据类型进行转换然后再对比 =除了比较数据的值，还比较数据类型是否一样。称为：全等于。 如上例： Var boo2 = (a=b);/false,因为a与b的类型不一样。,String对象及其方法：,Array对像:,JS中的Array对像，是一个动态数组。 在声明时无须声明大小。,Array对像：,JS中的Array可是一个宝贝，它不仅是一个数组，还是一个Stack（栈）.

15、如下面的代码也是可以的：注意使用字符做为下标值。,北京传智播客教育 ,如上例，使用pinyins.length则为0，那我们如何遍历它呢？,Array对像：简化声明：,类似于数组 Var a = 1,2,3,4,5; Var b = “a”,”b”,”c”; 类似于HashMap Var c = “name”:”Tom”,”age”:”88”; 上面声明的方式我们就称它为JSON，JSON被称为JavaScript对象表述性语言。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScri

16、pt Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C+, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。,Array对像的方法：,concat 方法 返回一个新数组，这个新数组是由两个或更多数组组合而成的。 array1.concat(item1, item2, . . . , itemN) join 方法 返回字符串值，其中包含了连接到

17、一起的数组的所有元素，元素由指定的分隔符分隔开来。 arrayObj.join(separator) pop 方法 移除数组中的最后一个元素并返回该元素。 arrayObj.pop( ) 弹栈 push 方法 将新元素添加到一个数组中，并返回数组的新长度值。 arrayObj.push(item1 item2 . . . itemN ) 压栈,Array对像的方法：,reverse 方法 ,1,2,3 - 3,2,1 shift 方法 移除数组中的第一个元素并返回该元素。 arrayObj.shift( ) slice 方法 返回一个数组的一段。 arrayObj.slice(start, e

18、nd) sort 方法 toLocaleString 方法 toString 方法,Array实例：,使用Array实现联动： 思想：定义一个数组以省为key值，以市为value,而市又是另一个数组。 如：var array = new Array(); array北京=“海淀”,”昌平”;使用这种方式直接定义数组。 然后可以定义多个不同的key对应不同的数组。 在页面上定义一个省的select和一个市的select元素。 当页面启动时，动态给省的select添加所有key,必须使用for.in遍历方式，获取所有key值，使用new Option(value,key)初始化数据。 给省添加on

19、change事件，只要省信息变化，就清空市并再重新填充。,二级联动让你的数据变的更加合理：使用key:value,数据结构为Map与List的组合：,Object对像：,Object可以表示任意的对像。 var obj = new Object(); 可以给Object任意的属性，从而可以构造一个类似于Map的数据 = “传智播客”; obj.addr = “中国北京”;,For in 示例：可以获取一个对像的所有成员：,北京传智播客教育 ,有了for in没有API文档也能编程了。,JavaScript对像基础：-声明JS类：,JavaScript当中，String,Dat

20、e,Object等，都被叫做对象。,Prototype-扩展实现继承：,北京传智播客教育 ,Prototype:-类扩展和类继承：,以下给String类扩展一个trim方法：,JS的的其他运算符：,Typeof(someVar)检查一个变量的数据类型,返回String类型的字符串. typeof 返回值有六种可能： number, string, boolean, object, function, 和 undefined. Instanceof判断一个变量是否是特定定的一个实例. new 创建一个新的对像,JS-事件,JS-事件,1. 事件流,- 冒泡型事件-从内向外依次执行。如：oncli

21、ck事件。,在IE上阻止冒泡：,event的属性cancelBubble设置或获取当前事件是否要在事件句柄中向上冒泡。,北京传智播客教育 ,2. 事件监听事件绑定：,- 简单的通用方法 在IE和在FF上都可以正常的运行。,事件绑定和解除：,- IE的方法 attachEvent是绑定 detachEvent是解除 只可以在IE中使用。,3. 事件对象,- IE浏览器中事件对象是window对象的一个属性event oP.onclick = function() var oEvent = window.event; -DOM中规定event对象必须作为唯一的参数传给事件处理函数 oP.oncli

22、ck = function(oEvent) ,在两种浏览器中，获取event的不同方式,- 因此为了兼容两种浏览器，通常采用下面的方法 oP.onclick = function(oEvent) if(window.event) /如果存在 oEvent = window.event; ,eval-执行一段字符串所包含的js代码：,eval(codeString) 必选项 codestring 参数是包含有效 JScript 代码的字符串值。这个字符串将由 JScript 分析器进行分析和执行。 示例： eval(“(var a = 99)”); alert(a);,这可是一个好东西，没有它将

23、没有办法处理JSON !,1. CSS的概念,- CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是实现页面表现（Presentation）的核心元素。 - CSS的引入,2. 使用CSS控制页面显示样式,- 行内样式 - 内嵌式 - 链接式 - 导入样式,北京传智播客教育 ,3. CSS选择器,标记选择器也叫直接样式,将对所有的H1元素设置此样式,CSS选择器,必须要显示的通过class属性引用此样式,ID选择器：,CSS选择器选择器的集体声明：,使用,逗号进行分隔,选择器的嵌套：,子选择器: (注意

24、以下代码IE不适用),伪样式，IE不能用，但 FF可以：,伪选择器也是CSS标准的一部分，大部分的浏览器都支持，ie6不支持。 :hover 鼠标停留在某元素上时执行。,示例隔行变色和hover变色。,在IE上hover事件必须要自己书写JS代码：,北京传智播客教育 ,定义样式表：,给所有TR设置鼠标事件：，注意里面设置className的方式,1. div与span标记,- 在使用CSS排版的页面中，与是两个常用的标记。（division）简单而言是一个区块容器标记，即之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。 - 与的区别,3. 元素的定位

25、,- float定位,Position定位：,absolute- 绝对。,relative-相对。,Z-index立体空间位置：,通过绝对定位和 Z-index即可以实现 遮罩层。,2. 盒子模型,- 一个盒子由content、border、padding(空隙)、margin(间隙)这四部分组成,北京传智播客教育 ,Ajax:,Ajax 异步。 页面无刷新技术与服务器进行交互。,1. 认识Ajax,- Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML）是相对较新的名字，通常被人们亲切的称作“阿贾克斯” - 传统的web采用同步交互的形

26、式，即用户向服务器发送一个请求，然后服务器根据用户的请求执行相应的任务，并返回结果 Ajax与传统的web应用不同，它采用的是异步交互的方式.,Ajax的组成部分,- JavaScript - 操作ajax的方式 - CSSajax的辅助 - DOMajax的容器 - XMLHttpRequest 对象 ajax的核心 xhr(XMLHttpRequest)对像的创建不由服务器决定，而由客户端决定。,用iFrame实现的ajax:,隐藏帧 实现对用户名是否存在的验证，不使用回显。 实现对图片上传以后的直接显示。 实现对表格的CRUD。,2. XMLHttpRequest对象创建：,-ajax的核心对像是：XMLHttpRequest 异步对象链接服务器 - 创建注意，应该先使用window.XMLHttpRequest判断。 new ActiveXObject(“Microsoft.XMLHttp”);/这是1.0版本 在注册表中，可以查找ActiveXObject支持的版本。,北京传智播客教育 ,典型请求过程：3步走,建立请求：,- 建立请求 Ajax请求的方式有两种：get/post 注意最