js系统学习.doc

FJavascript 基础 黑客帝国电影Js的组成 BOMDOMECMAscript（核心）将人写的代码翻译为机器语言功能：+-*/ 定义变量 定义函数几乎没有兼容性问题 将文档（指的是网页）给了js可以操作页面对象的能力在js中其实就是documentDoc.getid有兼容性问题BOM给了js操作浏览器的能力几乎不兼容 ECMAscript又叫解释器，起翻译的作用Js的栈和堆 栈是用来存值得，堆是用来存引用的，栈里的复制会产生一个副本，而堆里面对象的复制是用指针来说的堆存储的特点：程序运行时可以临时分配存储空间 Typeof 的返回值：boolean string object undefined number function （6种）（面试题） 基本类型：boolean string number undefined 复合类型：对象 比如 div div.id=” 字符串 width=“数字” 引用 Js除了已经提供的内置对象外，也可以自定义对象。例如 Var person=; =”liwneyan”p.age=”23”/定义成员函数p.run=function() alert(“run”);在js文件中设置对象1,新建js文件2 function Arraytool（）Var Arraytool =new Arraytool();Function getMax()Var max=this0;For(var x=1,xthis.length,x+)/此处的length为长度 If(maxthisx) Max=thisx;Return max;Atotype. getMax= getMax;Var arr2,4,1,3;Var x=arr.osMax(); ArrayFunction getMax(arr)Var max=arr0;For(var x=1,xarr.length,x+)/此处的length为长度 If(maxarrx) Max=arrx; Return max; Atotype. getMax= getMax; 在主界面是 Alert(“max”=+a)Js中冒号用法1. 声明对象的成员varBook= Name:法, Price:100, Discount:function(rate) this.Price*=rate; ;alert(Book.Price);Book.Discount(0.8);/8折alert(Book.Price);2.作为一个对象的属性， 比如： var on = a:1, b:2 ;该表达式表示建立一个对象，该对象具有两个属性，属性 a 的值是 1，属性 b 的值是 要访问该对象的属性可以用类似 on.a 或 ona 的方法来访问。数组的定义Var arr=1,2,3,4,5;或者是 var arr=new Array();/只能这样写对于数组的方法是：例如： var arr=可以是数字可以是字符若用 arr.sort(),来排序则会将数字当做字符对待 var arr=12,3,1,31,35,2,4;/默认情况下按字符串 arr.sort(); alert(arr);需要写为 arr.sort(function(num1.num2) return num1-num2;/安从大到小排序)；数组的链接： Var arr1=1,2,3; Var arr2=4,5,6;Alert(arr1.concat(arr2);/1,2,3,4,5,6Arr1.join(“|”);/split与join相反；数组的强大函数：1.中间删除splice(开始位置(index)，长度)；2. 中间插入 Splice（5,0，a,b,c）从第6个位置开始删0个元素后，添加abc; 3.替换 Splice（1,2，a，b）;Js函数的使用Function Student(name,age)T=name;This.age=age;Var stu=Student(“zhaoliu”,30);/Alert(”.”+stu.age);With的使用With(stu)Alert(name+”+age)；With的作用：它可以简化书写，可以吧对象存在小括号中则在中使用对象的属性。For in /遍历对象For（s in arr）Alert（s）；/遍历了属性Alert(s+“：”+stu.s);String的使用Var s=”abc”Var y=s.方法（）；/link()Document.write(y); math函数parseInt函数：返回由字符串转换得到的整数。(从字符串中提取整数) 该函数的作用：1. 将字符串转化为数字2. 将小数转化为整数例如： var a=”12px34”; Alert(paseInt(a)/12; 若是字符则提示NAN （NAN 不是一个数字）NAN+33=NAN a=12; b=12; alert(a=b)/自发将数字转化为字符串 true alert(a=b)/ false 3/2=1.5/注意此处得到的不是整数321.5的paseInt是321for(var x=0;x=10;x+)var b=parseint(math.random()*10+1);var b=Math.floor(math.random()*（10+1）); 1-10的随机数document.write(b+”);Tostring（2） 将一个整数变成二进制作用：返回对象的字符串表示语法：Objectname.toString(radix) radix：基数objectname必选项。要得到字符串表示的对象。radix可选项。指定将数字值转换为字符串时的进制。Var x=6;Var num=x.toString(2);/将x转化为二进制 Date对象月份从0开始所以要加1返回 Date 对象中用本地时间表示的一个月中的日期值Object.getDate() prototype属性 作用：返回对象类型原型的引用，定义字符的Atptype.getmax=max; var date=new Date(); date.setDate(1);/此处设置的天，若是32，自动进位 ,自然getDate得到的是天数 alert(date.getFullYear()+-+(date.getMonth()+1)+-+date.getDate();Width(date)Alert(getYear()+”年”+”星期”+getDay();倒计时中的加零函数 function fillZero(num, digit)var str=num;/若str是number不会有length属性 /* number转化为string类型的两种方式 1.str=num+; 2.str=num.toString(); */ while(str.lengthdigit)str=0+str; alert(str);/此处的空格不会显示 数组循环的另一种的写法Var arr=2,5,3,5,6,9,1,4;For(y in arr)/另一种写法 for(var y=0;yarr.length-1;y+) Alert(arry);Stotype.reverse=reverse();或者Atotype.reverse=function();第十一讲DOM编程DOM: Document object model 文档对象模型DOM的三层模型：Dom1 将HTML封装成对象Dom2 将XML封装成对象DOM3将xml封装成对象haha有了DOM可以动态的改变div中的数据DOM树 DOM节点DHTML 动态的HTMLHTML CSS DOM JAVASCRIPTIOMHTML：将数据封装起来Dom：将标签封装成对象Dom高级表格的操作要重点学习Css 负责标签中的数据的样式Javascription:将三者融合，用程序设计的方式实现动态的效果Xmlhttprequest- ajaxDom的应用在中设置hahah在head中设置 Function demo() Var obj= obj.getelementid(“divid”); Obj.innertext=”kk”;/此处最好改为innerHTML/Alert（“obj.tagName”）;Obj.className=”font1”/font1为css中定义的字体的颜色 /两个字符组成的标签后一个单词的首字母大写 关于字体颜色的切换Boolean b=true；在demo函数中设置If(b)Obi.className=”font1”;b=false;elseObj.className=”font2”;小程序在中Var ranum=parseint（math.Random()*100+1）/在100中选取随机数Function guss（）Var obj=document.getelementById(“textid”);/此处得到的是String型 Var value=parseInt(obj.value)If(ranumvalue) Alert(“小了，继续”)Else If(ranumvalue) Alert(“大了，继续”)Else If(ranum=value) Alert(“中了，恭喜！”)；在中设置避免产生相同的随机数的方法 function initmine(width,height,m) var basic=; var sum=width*height; for(var x=0;xsum; x+) basicx=x; for(var i=0;im;i+) var rn=Math.floor(Math.random()*(basic.length); /rn的范围是0-（basic.length-1） minepostArray.push(basicrn); basic.splice(rn,1);/避免随机数产生重复的 console.log(minepostArrayi); 第十二讲Javascript的回顾Javascript：是Netscape公司的语言，基于对象和事件的驱动和java的不同之处1. 所属的公司不同：java是sun公司，现在是oracle公司2. js是基于对象，java是面向对象？3. js是由浏览器解释执行，java是由jvm解释执行4. js是弱语言类象（是指变量的定义不分类型，只用var），java是强语言类型变量的补充： 1.用一个不存在的变量的时候会报错 2.用一个不存在的属性只会提示undefined 若a没有定义 Alert（a）；/报错 Alert（window.a）/undefined / alert(a);/报错 alert(typeof a);/undefined5. js是非严谨，java是严谨的 js运行在客户端，是与用户交互的一种语言js的基本语法：1 变量用var关键字申明变量 特殊的常量 undefined2 语句 和java很相像 If switch（java中的它限定4中类型） while do while for使用逻辑运算符进行布尔表达式的连接的时候，需要用到“& |”因为在js中 非零即为真 0为假，null为假，undfined为假 非null为真Js中特有的语句With（对象）：可以确定对象可以使用的范围，在该范围内可以直接使用对象的属性和行为，而不用 对象.行为（或属性）的形式调用For （变量in对象）：可以对对象的属性或行为进行遍历(for的另一种)数组 Js数组的特点：数组的长度是可变的，相当于java中的集合 该数组存放的元素的类型可以是不同的 数组的操作是和java是一样的 定义格式： Var arr=1,”abc”,true若不知道数组里有多少的元素 Var arr=new Array（）；/ var arr=new Array(1,aa,a); 或者 var arr=; 二维数组的定义 Var arr=2,3,4,1,4 数组的方法 函数的使用注意部分（java中没有的现象）：Function show（） Return “show run”Var method=show（）；Var method=show；这两个语句都是正确的，第一句是将show方法的执行结果赋值给method变量第二句是将show指向的对象的地址赋值给method，则metnod也就指向了对象。则第二句可以写成Var method=method（）；函数本身就是对象，函数名就是对象的引用，把引用赋值给变量，则变量也就指向了对象Js可以通过对象的形式进行封装首先通过函数来描述对象Function person（name,age） This.age=age;T=name;Var p=new person(“zhangsan”,40)对person赋予方法Pshow=function（）Js定义好的对象Date string golal 这些对象都有一个属性原型prototypePrototype可以获取指定对象的引用通过该引用对已有的对象增加新的功能注意此处的thisString对象中的应用文档中输出红色的abc常见的全局方法parseInt（num radix）/将数字格式的字符串转化成整数，若制定了基数，num（默认起初是十进制）将按照基数的进制进行转化Js中函数中参数的传递第十四讲 userAgent:反应浏览器的版本是什么样子的Loacation：反应当前页面的路径或网址可以读也可以自己写Window.location=””window对象演示 function windowdemo() var name=window.navigator.appName; var version=window.navigator.appVersion; var loa=window.location.href; /document.write(name+.+version+123+loa); /Window.close(); / var b=window.confirm(爱在离别时); /alert(b)； / window.moveTo(200,400); / window.moveBy(200,400);/向右偏移，向下偏移，只在ie中有效，window可以省略 /window.resizeTo(400,400); / var text=mpt(我是对话框，haha); /返回用户输入的值 /alert(text); /oNewWindow = window.open( sURL , sName , sFeatures , bReplace)Parameters/window的间隔的应用 /间歇性广告的弹出 window.setInterval(alert(haha),3000);/直接按是单引号 var i=0; function test() i+=1; alert(i); setTimeout(test(),1000); 也可以这样： setTimeout(test,1000); /*广告不能关的流氓行为 window.onunload=function() window.open(ad.html); Window.open(“page”,_blank,height=500px,height=600px); */ function adddemo() window.open(ad.html,_blank); /文本框内只允许输入数字 /键盘上的按键出发的事件 function num() /* if(!(event.keyCode=48&event.keyCode=57) alert(只能输入数字); event.returnValue=false;/校对表单的正误 */ var node=event.srcElement;/设置或获取触发事件的对象。 alert(); 表单补充无标题文档window.onload=function() var f=document.getElementById(form1); var u=document.getElementsByName(user)0; var p=document.getElementsByName(pass)0; f.onsubmit=function() if(u.value=|p.value=) alert(错误);return false; f.onreset=function() if(confirm(是否要清空？) return true; return false; 用户名： 密码： 第十五讲新闻区域的改变无标题文档/* 1.定义数据封装的标签（定义界面） 2.确定事件源 3.注册事件 4.事件处理 需求： 页面中有一个新闻区域 通过超链接 大 中 小 改变用户区域的字体大小*/ /函数的初始写法 /* function changmax() var size=document.getElementById(news); size.style.fontSize=24px;/不要忘记写引号 function changnorm() var size=document.getElementById(news); size.style.fontSize=16px;/不要忘记写引号 系统默认字体大小为16px function changmin() var size=document.getElementById(news); size.style.fontSize=9px;/不要忘记写引号 */ /提高函数的复用性/*function change(zi) var size=document.getElementById(news); size.style.fontSize=zi;/不要忘记写引号 系统默认字体大小为16px */function change(className) var size=document.getElementById(news); size.className=className;/不要忘记写引号 系统默认字体大小为16px .max background-color:#999999; font-size:36px; color:#000099; .norm background-color:#00CC00; font-size:16px; color:#000000; .min background-color:#996699; font-size:9px; color:#FFFF00; !- 大 中 小 - !- 大 中 小 - 大 中 小 中国科技的教育发展问题 中国科技的教育发展问题 中国科技的教育发展问题 中国科技的教育发展问题 中国科技的教育发展问题 中国科技的教育发展问题 中国科技的教育发展问题第十六讲展开闭合效果 展开闭合效果1无标题文档 / var b=true; / vat tagname=getElementsByTagName; function change() var divnode=document.getElementsByTagName(div)0;/此处注意 get + Elements +By +TagName / alert(divnode.nodeName); /* if(b) divnode.style.height=8px; divnode.style.overflow=hidden; b=false; else divnode.style.height=8px; divnode.style.overflow=visible; b=true; */ if(divnode.className=close) divnode.className=open;else divnode.className=close function list() /var dlnode=document.getElementsByTagName(dl)0; /var dtnode=document.getElementsByTagName(dt)0; / alert(dlnode.nodeName+.+dtnode.nodeName); var dtnode=event.srcElement; /鼠标触发的事件源 var dlnode=dtnode.parentNode; if(dlnode.className=open) dlnode.className=close; else dlnode.className=open; /*获取节点的两种方式 1 通过event的srcelement/ 兼容问题 2 将事件源作为this传入*/ .open overflow:visible; .close height:16px; overflow:hidden; !- 需求：通过点击的实现展开闭合的效果 一行字的默认高度是16px； 我的人生我做主-上层项目上层次昂木 公司开会公司考试 公司开会公司考试 公司开会公司考试公司开会公司考试 公司开会公司考试Dl-dt-dd上层项目上层次昂木 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试展开闭合效果2无标题文档 function list(dtnode) var dlnode=dtnode.parentNode; var dlnodes=document.getElementsByTagName(dl);/谨记 此处用的是圆括号，不是方括号 for(var x=0;xdlnodes.length;x+) if(dlnodesx=dlnode) if(dlnode.className=open) dlnode.className=close; else dlnode.className=open; else dlnodesx.className=close; .open overflow:visible; .close overflow:hidden; height:16px; 上层项目上层次昂木 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试上层项目上层次昂木 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 上层项目上层次昂木 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 公司开会公司考试 第十七讲利用table 中的块实现展开闭合效果1 function list() var anode=event.srcElement; / alert(anode.nodeName);