web第4章 javascript基础.

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,*,PHP Web程序设计,第,4,章,JavaScript,基础,将,JavaScript,代码载入页面的方法,/code,第,4,章,JavaScript,基础,4.1,基本语法,4.2 BOM,4.3 DOM,4.4,事件,4.1,基本语法,注释,变量,原始类型,运算符,语句,函数,4.1,基本语法,注释,JavaScript,注释与,C,、,PHP,的注释相同。,单行注释,/,注释内容,多行注释,/,*注释内容,注释内容,*,/,4.1,基本语法,变量,变量区分大小写,弱类型,变量定义,var test = hi;,var test = hi, test2 = hello;,变量命名规则,第一个字符必须是字母、下划线或者美元符号（,$,）,余下的字符可以是下划线、美元符号或者任何字母或数字字符,变量命名不仅要遵循以上两条规则，最好还应遵循,Camel,标记法,(var myTestValue),、,Pascal,标记法,(var MyTestValue),、匈牙利类型标记法,(var iMyTestValue,i,为整数,s,为字符串等,),4.1,基本语法,原始类型,Undefined,Null,Boolean,Number,String,4.1,基本语法,原始类型,Undefined,只有一个值，即,undefined,当变量未初始化时，该变量的默认值为,undefined,4.1,基本语法,原始类型,Null,只有一个值,null,用来表示尚未存在的对象，如果函数或者方法要返回的是对象，那么找不到该对象的时候，返回的通常为,null,undefined,是由,null,派生而来所以两者被定义为相等，但是两者的含义不同,4.1,基本语法,原始类型,Boolean,只有两个值,true,或者,false,4.1,基本语法,原始类型,Number,该类型既可以表示,32,位的整数，也可以表示,64,位的浮点数。,直接输入的任何数字都被看做为,Number,型的字面量,要定义浮点值，必须包括小数点和小数点后的一位数字,var fNum = 1.0;,4.1,基本语法,原始类型,String,字符串的字面量是由双引号,(),或单引号,(),声明的。,可以存储,0,个或者多个,Unicode,字符，每个,Unicode,字符占,16,位,字符串的首字符从位,0,开始，第二个字符位置为,1,，依次类推,运算符,一元运算符,位运算符,Boolean,运算符,乘性运算符,加性运算符,关系运算符,等性运算符,条件运算符,赋值运算符,逗号运算符,运算符,一元运算符号,delete,运算符删除对以前定义的对象属性或者方法的引用,void,运算符对任何值都返回,undefined,，该运算符通常用来避免输出不应该输出的值,window.open(about:blank),会返回新打开窗口的引用,click me,该代码执行后会有问题,click me,该代码能正常工作,前增量,/,前减量运算符,+iNum,-iNum,后增量,/,后减量运算符,iNum+, iNum-,运算符,位运算符号,NOT(),AND(&),OR(|),XOR(),只有一个数位存放的为,1,时，返回的结果才为,1,左移运算符,(,符号位保留,),无符号右移运算符,(,符号位不保留，使用时需要谨慎,),运算符,Boolean,运算符,逻辑,NOT(!),逻辑,AND(&),逻辑,OR(|),运算符,乘性运算符,乘法运算符,(*),除法运算符,(/),取模,(,余数,),运算符,(%),运算符,加性运算符,加法运算符,(+),减法运算符,(-),运算符,关系运算符,该类型运算符都返回一个,Boolean,值,大于,(),大于等于,(=),小于,(),小于等于,( iNum2) ? iNum1 : iNum2;,运算符,赋值运算符,(=),将等号右边的值赋予左边的变量,var iNum = 10;,运算符,逗号运算符,(,),在一条语句中执行多个运算,var iNum1=1, iNum2=2, iNum3=3;,最常用于变量声明中,语句,if,do-while,while,for,for-in,break,continue,with,switch,语句,if,if (i 10) ,/code, else ,/code,if (i 10) ,/code, else if (i 5) ,/code, else ,/code,语句,do-while,至少执行循环体一次,var i = 0;,do ,i += 2;, while (i 10);,语句,while,var i = 0;,while (i 10) ,i += 2;,语句,for,for(var i=0; i iCount; i+) ,/code,语句,for-in,用于枚举对象的属性,var obj = new Object;,obj.name = zhangsan;,obj.age = 20;,for(p in obj) ,alert(p);,语句,break,立即退出当前循环,for(var i=0; i5) ,break;,语句,continue,只退出当前循环,允许继续进行下一次循环,for(var i=0; i10; i+) ,if(i=5) ,continue;,/code,语句,with,设置代码在特定对象的作用域,var sMsg = hello world;,sMsg. toUpperCase();,sMsg. toUpperCase1();,sMsg. toUpperCase2();,sMsg. toUpperCase3();,with(sMsg) ,alert(toUpperCase();/,输出,HELLO WORLD,toUpperCase1();,toUpperCase2();,toUpperCase3();,语句,switch,未使用,break,则会贯穿剩余,case,case,中的值可以使用字符串,var i = 20;,switch(i) ,case 10: ,alert(10); break;,case 20: ,alert(20); break;,default : alert(default);,函数,定义,无重载,arguments,对象,函数,定义,语法,function,functionName(arg1,arg1,.,argN),/statements,例子,function sayHi(sName, sMessage) ,alert(Hello +sName+,+sMessage);,sayHi(,张三,你好,);,函数,无重载,函数不支持重载,后定义的函数将覆盖之前定义的函数,例如,function doAdd(iNum) ,alert(iNum+100);,function doAdd(iNum) ,alert(iNum+10);,doAdd(10);/20,函数,arguments,对象,在函数代码中,可以使用特殊对象,arguments,开发者无需明确指出参数名,只需使用,argumentsi(i,为参数的位置索引,),就能访问它们,第一个参数位于位置,0,第二个参数于位置,1,依次类推,属性,arguments.length,为传递给函数的参数个数,可以使用,arguments,对象来判断传递给函数的参数类型和个数来模拟函数重载,例如,function sayHi() ,if(arguments0=bye) ,return;,alert(arguments0);,alert(arguments.length);,sayHi(zhangsan);,sayHi(lisi,wangwu);,sayHi(bye);,4.2 BOM,BOM,是,browser object model,的缩写，简称浏览器对象模型,BOM,提供了独立于内容而与浏览器窗口进行交互的对象,由于,BOM,主要用于管理窗口与窗口之间的通讯，因此其核心对象是,window,BOM,由一系列相关的对象构成，并且每个对象都提供了很多方法与属性,BOM,缺乏标准，,JavaScript,语法的标准化组织是,ECMA,，,DOM,的标准化组织是,W3C,BOM,最初是,Netscape,浏览器标准的一部分,4.2 BOM,BOM结构图,4.2 BOM,BOM,对象子元素的访问方法,通过索引：,window.frames0,通过,name,属性：,window.framesframeName,4.2 BOM,window,对象是,BOM,中所有对象的核心，它表示,当前窗口,对象的引用,window,对象除了是,BOM,中所有对象的父对象外，还包含一些窗口控制函数,几个特殊的,window,对象,top,指向最顶层的框架，即浏览器自身,parent,指向父窗口,self,当前窗口自身的引用,用来显式的指明是当前窗口,window,主要函数,函数的名字最后带有,To,或,By,，,to,是绝对的意思,(,从整体而言,),，,by,是相对的意思,(,从原先的位置而言,),窗体控制函数,窗体滚动轴控制函数,窗体焦点控制函数,新建窗体函数,对话框函数,状态栏属性,时间等待与间隔函数,窗体控制函数,moveBy(x, y);,从当前位置水平移动窗体,x,个像素，垂直移动窗体,y,个像素，,x,为负数，将向左移动窗体，,y,为负数，将向上移动窗体,moveTo(x,y),移动窗体左上角到相对于屏幕左上角的,(x,y),点，当使用负数做为参数时会吧窗体移出屏幕的可视区域,resizeBy(w,h),相对窗体当前的大小，宽度调整,w,个像素，高度调整,h,个像素。如果参数为负值，将缩小窗体，反之扩大窗体,resizeTo(w,h),把窗体宽度调整为,w,个像素，高度调整为,h,个像素,窗体滚动轴控制函数,scrollTo(x,y),在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为,x,个像素的位置，将纵向滚动条移动到相对于窗体高度为,y,个像素的位置,scrollBy(x,y),如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的,x,个像素的位置,(,就是向左移动,x,像素,),，将纵向滚动条移动到相对于当前纵向滚动条高度为,y,个像素的位置,(,就是向下移动,y,像素,),窗体焦点控制函数,focus(),使窗体或控件获取焦点,blur(),与,focus,函数相反，使窗体或控件失去焦点,新建窗体函数,window.open(url, name, features, replace),打开,(,弹出,),一个新的窗体,url -,要载入窗体的,URL,name -,新建窗体的名称,(,也可以是,HTML target,属性的取值，目标,),features -,代表窗体特性的字符串，字符串中每个特性使用逗号分隔,replace -,一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定,window.close(),关闭窗体,所有的窗体都可以使用此函数关闭,对于通过使用,open,函数打开的窗体，使用,close,函数将直接关闭。,非,open,打开的窗体，或者对整个浏览器调用,close,函数时将弹出一条关闭信息，询问是否关闭。用户可以拒绝关闭。,状态栏属性,状态栏是浏览器底部边界的区域，用于向用户显示信息,window.defaultStatus,属性,状态栏默认信息,window.status,属性,设置状态栏信息,注意：不要过度使用状态栏，它可能分散用户的注意力,时间等待与间隔函数,setTimeout(codes, interval);,暂停指定的毫秒数后执行指定的代码,codes -,代码段的字符串表示，或者是匿名函数、函数名,interval -,等待的毫秒数,(,通常用于产生动画效果,),返回值,- setTimeout,函数的,ID,标识，每次调用,setTimeout,函数都会产生一个唯一的,ID,，可以通过,clearTimeout,函数,(,此函数的参数接收一个,setTimeout,返回的,ID),暂停,setTimeout,函数还未执行的代码,clearTimeout(id),取消指定的,setTimeout,函数将要执行的代码,id - setTimeout,函数返回的,ID,如果还没有执行,setTimeout,函数中的代码，就调用了,clearTimeout,函数，那么就不会执行,setTimeout,函数中的代码了,时间等待与间隔函数,setInterval(codes, interval),间隔指定的毫秒数不停地执行指定的代码,codes -,代码段的字符串表示,(,与,eval,函数的参数相同,),，或者是匿名函数、函数名,interval -,间隔的毫秒数,返回值,- setInterval,函数的,ID,标识，每次调用,setInterval,函数都会产生一个唯一的,ID,，可以通过,clearInterval,函数,(,此函数的参数接收一个,setInterval,返回的,ID),暂停,setInterval,函数,setInterval,函数会重复间隔一段时间执行代码，因此应使用,clearInterval,函数将其停止，或者页面被卸载也会自动停止,clearInterval(id),取消指定的,setInterval,函数将要执行的代码,id - setInterval,函数返回的,ID,document,用于表现,HTML,页面当前窗体的内容,document,是,BOM,中最重要对象之一,document,对象是,window,对象的属性,document,既属于,BOM,又属于,DOM,document,对象包含一个节点对象，此对象包含每个单独页面的所有,HTML,元素，这就是,W3C,的,DOM,对象，我们将在,DOM,章节学习,document,属性,cookie -,用户,cookie,title -,当前页面,title,标签中定义的文字,URL -,当前页面的,URL,document函数,document.write(str),在文档中写入字符串,str -,要写入文档中的字符串,document.writeln(str),在文档中写入字符串，并在字符串的末尾增加一个换行符,str -,要写入文档中的字符串,location,用于获取或设置窗体的,URL,，并且可以用于解析,URL,，是,BOM,中最重要的对象之一,location,既是,window,对象的属性又是,document,对象的属性,location,包含,8,个属性，其中,7,个都是当前窗体的,URL,的一部分，剩下的也是最重要的一个是,href,属性，代表当前窗体的,URL,location,的,8,个属性都是可读写的，但是只有,href,与,hash,的写才有意义,例如改变,location.href,会重新定位到一个,URL,，而修改,location.hash,会跳到当前页面中的,anchor(,或者,等,),名字的标记,(,如果有,),，而且页面不会被重新加载,hash 属性 - 返回URL中#符号后面的内容,host 属性 - 返回域名,hostname 属性 - 返回主域名,href 属性 - 返回当前文档的完整URL或设置当前文档的URL,pathname 属性 - 返回URL中域名后的部分,port 属性 - 返回URL中的端口,protocol 属性 - 返回URL中的协议,search 属性 - 返回URL中的查询字符串,location对象属性图示,navigator对象通常用于检测浏览器与操作系统的版本,navigator对象是window对象的属性,由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本，这里只介绍最普遍支持且最常用的,常用的navigator属性,appCodeName,-,浏览器代码名的字符串表示,appName,-,官方浏览器名的字符串表示,appVersion,-,浏览器版本信息的字符串表示,cookieEnabled,-,如果启用cookie返回true，否则返回false,javaEnabled,-,如果启用java返回true，否则返回false,platform,-,浏览器所在计算机平台的字符串表示,plugins,-,安装在浏览器中的插件数组,taintEnabled,-,如果启用了数据污点返回true，否则返回false,userAgent,-,用户代理头的字符串表示,navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串，其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。,screen,对象用于获取用户的屏幕信息,screen,对象是,window,对象的属性,screen,对象属性,availHeight,属性,-,窗口可以使用的屏幕高度，单位像素,availWidth,属性,-,窗口可以使用的屏幕宽度，单位像素,colorDepth,属性,-,用户浏览器表示的颜色位数，通常为,32,位,(,每像素的位数,),pixelDepth,属性,-,用户浏览器表示的颜色位数，通常为,32,位,(,每像素的位数,),（,IE,不支持此属性）,height,属性,-,屏幕的高度，单位像素,width,属性,-,屏幕的宽度，单位像素,availWidth,与,availHeight,属性非常有用，例如：可以使用下面的代码填充用户的屏幕,window.moveTo(0,0);,window.resizeTo(screen.availWidth, screen.availHeight);,