《JavaScript超全、超详细介绍》由会员分享，可在线阅读，更多相关《JavaScript超全、超详细介绍（84页珍藏版）》请在金锄头文库上搜索。
1、JS & CSS,JavaScript技术体系,浏览器对像 查：HTML文档 不同的浏览之间有差异,内置对像，数据类型 需要查：JavaScript文档 任何浏览器都支持这些对象,JavaScript脚本语言：,JS脚本语言，被浏览器解析执行。 在用户打开包含有JS/CSS的网页时，即被下载到客户端，客户端运行。具有速度快、不占用带宽、可以控制页面显示等效果。 JS可以嵌入到任意扩展名的页面上，如JSP,ASP,PHP,ASPX。做为一个程序员，JS是必须要掌握(了解、掌握、精通)的技术之一。,HTML和JavaScript:,HTML（Hypertext Markup Language），是
2、用于描述网页文档的一种标记语言。 HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。 HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.21996年1月14日，W3C推荐标准 HTML 4.01997年12月18日，W3C推荐标准 HTML 4.01（微小改进）1999年12月24日，W3C推荐标准 HTML 5.0直接支持流媒体的播放、动画效果等。尚在推广。,JavaScript函数声明/调用方式：,JS函数的声明和调用对参数没有任何限制，即没有重载。 function abc() /声
3、明一个函数alert(“itcast”); /调用它的方法可以是： abc(); abc(任意多个参数);function other(arg0,arg1) /定义接收两个参数的函数alert(“”); 调用它的方法可以是: other(); Other(任意多个参数);,Javascript函数声明的另一种方式：,var someFunc = function() /将函数赋给某个变量名.局部。 someFunc = functio() /将函数赋给某个变量名，全局。 调用方式同前。,JavaScript变量：,JavaScript变量可以接收任意的值。分为全局变量和局部变量。 使用var关
4、键字声明一个局部变量。范围为一个函数内部。 不使用var声明一个全局变量。考虑以下代码 function abc()str = “itcast”; /声明全局变量for(var i=0;i10;i+) /声明此方法内部变量alert(“内部”+i); /可以访问i abc(); if(str) /可以访问stralert(“外部访问：“+str); if(i) /不可以访问 ialert(“外部：“+i); ,北京传智播客教育 ,脚本可以出现的页面的任何位置，建议的位置如下：,JS的控制语句： (某些内容直接略),Ifelse if else While,for,dowhile for in
5、switchcase Break return异常处理 Trycatch,JS的调试工具：firebug/scriptdebug,Firebug是火狐浏览器的插件。 Scriptdebug是ie浏览器的插件。,document常用方法:,document是window对象的子对象，代表整个页面的内容部分。 document.getElementById根据一个id属性获取一个页面元素。返回一个对象。 document.getElementsByName,根据名称获取一组页面元素。返回一组对象的数组。 document的其他方法： createElement 创建一个页面元素。 getEleme
6、ntsByTagName 根据元素名称返回元素数组。,页面元素：,Label for=“someid” - 在选中标签时等同于选中元素。 select optgroupoption 实现分组选项。 Form 表单 Button , input type=“button” 相同的元素。 fieldSet legend 范围选项。 Iframe 嵌入，子页面。 Div,span,p 层，块，段落。 Table . 表格。 更多内容，可见HTML文档。,Window对像及方法：,事件： onload -在浏览器完成对象的装载后立即触发。 方法： Alter, close, confirm, prom
7、pt clearInterval, setInterval 每隔多长时间执行一次。 clearTimeout，setTimeout多长时间以后执行一次。 Open, showModalDialog显示对话框。 子对像： document -文档对象 event 事件对象 属性： dialogArguments设置或获取传递给模式对话框窗口的变量或变量数组 returnValue设置或获取从模式对话框返回的值。 status设置或获取位于窗口底部状态栏的信息,onload-页面加载完成以后执行：,window.onload=function() 一般用于包含页面加载完成后自动执行的代码。 请考虑
8、以下代码，会提示哪一个？,请考虑以下代码能否在启动时提示:,showModalDialog显示模式对话框实现两个页面之间的数据传递,vReturnValue = window.showModalDialog(sURL , vArguments , sFeatures),模式对话框在现实的 开发当中，非常有用。 经常用于不要求用户 输入，但要求用户选择 的数据。,延时执行：,window.setTimeout(func,times) /以毫秒为单位的times时间以后执行func方法一次。window.setInerval(func,times) /每隔以毫秒为单位的times时间以后执行一次f
9、unc方法。两个方法均可以返回一个句柄，可以控制继续或是终止执行。clearTimeout(handler); clearInterfal(handler); 主要的用途： 多长时间以后转到成功页面。 强制用户看说明书。,内容管理：value,html,text,设置或获取一个输入框的内容：document.getElementById(“name”).value 设置或获取一个div中的文本内容： div.innerText 设置或是获取div中的html内容： div.innerHTML,history和location:,window.history.go(-1); - 返回上一次操作的
10、页面。不会发出请求，从浏览器的缓存中获取显示的页面数据。 Window.location.href=“newUrl”; - 打开一个新的地址。,event事件源对像：,代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。 clientX, clientY-设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 keyCode设置或获取与导致事件的按键关联的 Unicode 按键代码。 srcElement设置或获取触发事件的对象。 x,y设置或获取鼠标指针位置相对于父文档的 x 像素坐标。y设置或获取鼠标指针位置相对于父文档的 y 像素坐
11、标。,event对象：,Event对象是js的事件源对像，有实际的开发中，非常有实用： 1：用event的x和y实现右键菜单。 对body的oncontextmenu添加事件。 Onclick只用于监听鼠标的左键，而contextmenu可以监听右键。 onmousedown等可以监鼠标的各个键。 在方法中通过event获取x和y轴的坐标。 Div使用position:absolute显示绝对位置。,北京传智播客教育 ,event对像：,2：用Event对象可以获取用户的键盘事件：onkeydown. 作用：限制用户输入非允许字符 如：年龄输入框只允许用户输入数字。 event.keyCode
12、可以获取用户按键的整数编码，如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
13、类似于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 al
14、ert(“4“+(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() pars
15、eInt()和parseFloat() 强制类型转换 Boolean(value) Number(value) String(value),var xx = 3-“10“;/因为-*/是数学运算符，所以会自动转 alert(xx);/-7 var yy = “10“-3; alert(yy);/7var a = “80“; var b = “50“; var c = a-b;/-运算将自动转换 alert(c);/30var d = a+b; alert(d);/8050，不自动转换var d = parseInt(a)+parseInt(b);/使用Math方法转 alert(d);/130var d = Number(a)+Number(b);/强转 alert(d);/130,= 与 = 比较,= 只比较数据的值是否一样。 如 var a=“100”; var b = 100; Var boo = (a=b);/true，先将数据类型进行转换然后再对比 =除了比较数据的值，还比较数据类型是否一样。称为：全等于。 如上例： Var boo2 = (a=b);/false,因为a与b的类型不一样。,
