Java相关课程系列笔记之八JavaScript学习笔记

open_xxg 贡献于2014-06-05

作者 Fianglu  创建于2013-10-17 07:25:00   修改者Fianglu  修改于2013-10-17 07:26:00字数37432

文档摘要:  1)JavaScript是一种网页编程技术,用来向HTML页面添加动态交互效果。   2)JavaScript是一种基于对象和事件驱动的解释性脚本语言,具有与Java和C语言类似的语法。   3)JavaScript可直接嵌入HTML页面。由浏览器解释执行代码,不进行预编译。
关键词:

 JavaScript学习笔记 Java相关课程系列笔记之八 笔记内容说明 JavaScript(王春梅老师主讲,占笔记内容100%); 目 录 一、 JavaScript概述 1 1.1什么是JavaScript 1 1.2 JavaScript发展史 1 1.3 JavaScript的特点 1 1.4 JavaScript的定义方式 1 1.5 JavaScript的代码错误查看 2 1.6注释 2 二、 JavaScript基础语法 3 2.1编写JavaScript代码 3 2.2常量、标识符和关键字 3 2.3变量 3 2.4数据类型 3 2.5 string数据类型 3 2.6 number数据类型 3 2.7 boolean数据类型 3 2.8数据类型的隐式转换 4 2.9数据类型转换函数 4 2.10特殊类型 5 2.11算术运算 5 2.12关系运算 5 2.13逻辑运算 5 2.14条件运算符 5 2.15流程控制语句 6 三、 JavaScript常用内置对象 7 3.1什么是JavaScript对象 7 3.2使用对象 7 3.3常用内置对象 7 3.4 String对象 7 3.5 String对象与正则表达式 8 3.6 Array对象 9 3.7 Math对象 10 3.8 Number对象 11 3.9 RegExp正则表达式对象 11 3.10 Date对象 12 3.11函数与Function对象 12 3.12全局函数 13 3.13 Arguments对象 14 四、 window对象 15 4.1 DHTML简介 15 4.2 DHTML对象模型 15 4.3 window对象 15 4.4常用方法:对话框 15 4.5常用方法:窗口的打开和关闭 16 4.6常用方法:周期性定时器 16 4.7常用方法:一次性定时器 16 4.8案例:动态时钟 16 五、 Document对象与DOM 17 5.1概念 17 5.2根据元素ID查找节点 17 5.3根据层次查找节点 17 5.4根据标签名称查找节点 18 5.5读取或者修改节点信息 18 5.6修改节点的样式 18 5.7查找并修改节点 18 5.8三个案例 19 5.9增加新节点 21 5.10删除节点 21 5.11案例:联动菜单 21 六、 HTML DOM 23 6.1 HTML DOM概述 23 6.2 Select对象 23 6.3 Option对象 23 6.4案例:联动菜单(HTML DOM方式) 23 6.5 Table对象 24 6.6 TableRow对象 24 6.7 TableCell对象 24 6.8案例:产品列表 24 七、 window其他子对象(DHTML模型) 26 7.1 screen对象 26 7.2 history对象 26 7.3 location对象 26 7.4 navigator对象 26 7.5事件 26 7.6 event对象 27 八、 面向对象基础 29 8.1属性 29 8.2方法 29 8.3定义对象的三种方式 29 8.4创建通用对象 29 8.5创建对象的模版 29 九、 JSON 30 9.1 JSON概述 30 9.2名称可以是属性 30 9.3名称也可以是方法 30 9.4案例:批量提交数据和下拉框版式日历 30 一、 JavaScript概述 1.1什么是JavaScript 1)JavaScript是一种网页编程技术,用来向HTML页面添加动态交互效果。 2)JavaScript是一种基于对象和事件驱动的解释性脚本语言,具有与Java和C语言类似的语法。 3)JavaScript可直接嵌入HTML页面。由浏览器解释执行代码,不进行预编译。 1.2 JavaScript发展史 1)JavaScript的正式名称是“ECMAScript”,此标准由ECMA组织发展和维护。 2)ECMA-262是正式的JavaScript(Netscape)和JScript(Microsoft)。 3)网景公司在Netscape2.0首先推出了JavaScript。微软公司从IE3.0开始提供对客户端JavaScript的支持,并另取名为JScript。 u 注意事项:与Java没任何关系。 1.3 JavaScript的特点 1)可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。 2)解释执行:事先不解释,逐行执行。 3)基于对象:内置大量现成对象。 4)适宜:客户端数据计算、客户端表单合法性验证、浏览器事件的触发、网页特殊显示效果制作。 1.4 JavaScript的定义方式 1)方式一:直接定义在事件中 例如: 2)方式二:在页面上标签中嵌入标签,标签中放置JavaScript代码 例如: u 注意事项: v alter修改,alert警告。 v onclick="alert('hello world');"字符串用单引号或双引号隔开,此处用单引号,因为会和前面的双引号成对。 3)方式三:将代码写在单独的.js文件中,在html页面的里使用 1.5 JavaScript的代码错误查看 1)解释性代码,若代码错误,则页面无任何效果。 2)IE浏览器:使用开发工具。 3)Firefox浏览器:使用错误控制台查看。 1.6注释 单行注释用“//”,多行注释用:/* */ 二、 JavaScript基础语法 2.1编写JavaScript代码 1)由Unicode字符集编写。 2)语句:表达式、关键字、运算符组成;大小写敏感;使用分号结束。 2.2常量、标识符和关键字 1)常量:直接在程序中出现的数据值(字面量),用完就丢弃了。如alert("hello"); 2)标识符:由不以数字开头的字母、数字、下划线、$组成。常用于表示函数、变量等的名称。不能和保留关键字重复,如break、if等。 3)关键字:只有系统才能用的标识符。 2.3变量 1)变量声明:使用关键字var声明变量,如var x,y; u 注意事项:以var关键字声明,声明的时候不确定类型,变量的类型以赋值为准。 例如:var x,y,z; x=10; y="mary"; z=true; 2)变量初始化:使用等号赋值 u 注意事项:没有初始化的变量则自动取值为undefined,如:var count = 0; 3)变量命名同标识符的规则,大小写敏感。 2.4数据类型 1)基本类型:number数字、string字符串、boolean布尔 2)特殊类型:null空、undefined未定义 3)复杂类型:array数组、object对象 2.5 string数据类型 1)表示文本:由Unicode字符、数字、标点符号组成的序列。 2)首尾由单引号或双引号括起来。 3)特殊字符需要转义,用转义符\,如:\n,\\,\',\“ 例如:var a = "欢迎来到\"JavaScript世界\""; u 注意事项:可用在正则表达式,只允许录入汉字[^\u4e00-\u9fa5$],每个汉字都有转义符。 2.6 number数据类型 1)不区分整型数值和浮点型数值:所有数字都采用64位浮点格式存储,类似于double格式 。 2)整数:16进制数前面加上0x,8进制前面加0。 3)浮点数:使用小数点记录数据,如3.4,5.6;使用指数记录数据,如4.3e23=4.3X10^23 2.7 boolean数据类型 1)仅有两个值:true和false;实际运算中true=1,false=0 2)多用于结构控制语句。 2.8数据类型的隐式转换 1)JavaScript属于松散类型的程序语言 ①变量在声明时不需要指定数据类型。 ②变量由赋值操作确定数据类型。 2)不同类型数据在计算过程中会自动进行转换 ①数字+字符串:数字转换为字符串 ②数字+布尔值:true转换为1,false转换为0 ③字符串+布尔值:布尔值转换为字符串true或false ④布尔值+布尔值:布尔值转换为数值1或0 例如: var s="a"; var n=1; var b1=true; var b2=false; alert(s + n);//a1 alert(s + b1);//atrue alert(n + b1);//2 alert(b1 + b2);//1 2.9数据类型转换函数 1)转换方式: ①隐式转换:直接转,默认的规则 ②显式转换:利用转换的方法 u 注意事项:不建议用隐式转换。 2)显式转换 ①toString:转成字符串,所有数据类型均可转换为string类型。 ②parseInt:强制转换成整数,如果不能转换,则返回NaN。 例如:parseInt("6.12")=6(无四舍五入) ③parseFloat:牵制转换成浮点数,如果不能转换,则返回NaN。 例如:parseFloat("6.12")=6.12 ④typeof:查询数值当前类型,返回string/number/boolean/object。 例如:typeof(“test”+3)="string" 3)NaN:not a number,非常特殊,它不是数字,所以任何数跟它都不相等,甚至NaN本身也不等于NaN 4)isNaN(str): is not a number,判断文本是否为数值,false为数值,true为非数值 5)案例 eg1:转换函数:得到录入数值的整数部分 function getInt() { var str = document.getElementById("txtData").value; if (isNaN(str)) alert("请录入数值"); else { var data = parseInt(str); alert("整数部分为:" + data); } } eg2:转换函数:计算录入数值的平方 function getSquare() { var str = document.getElementById("txtData").value; if (isNaN(str)) alert("请录入数值"); else { var data = parseFloat(str); var result = data * data; alert(result); } } 2.10特殊类型 1)null:null在程序中代表“无值”或者“无对象”。可以通过给一个变量赋值null来清除变量的内容。 2)undefined:声明了变量但从未赋值或这对象属性不存在。 2.11算术运算 1)加(+)减(-)乘(*)除(/)余数(%) ①“-”:可以表示减号,也可以表示负号。 ②“+”:可以表示加法,也可以用于字符串的连接。 2)递增(++)递减(--) i++等价于i=i+1,i--等价于i=i-1 2.12关系运算 1)用于判断数据之间的大小关系:“>”、“<”、“>=”、“<=”、“==”、“!=” u 注意事项:“= =“比较的是值(内容)。 2)关系表达式的值为boolean类型(“true”或“false”) 3)严格相等:“===”类型、数值都相同。 4)非严格相等:!== 例如:var a = "10"; var b = 10; if(a == b) alert("equal"); if(a === b) alert("same"); 2.13逻辑运算 1)逻辑非(!)逻辑与(&&)逻辑或(||) 2)逻辑运算的操作数均为boolean表达式 b1 b2 b1&&b2 b1||b2 !b1 false false false false true false true false true true false false true false true true true true 2.14条件运算符 1)条件运算符又称“三目”或“三元”运算符。 2)语法:boolean表达式?表达式1:表达式2 ①先计算boolean表达式的值,如果为true,则整个表达式的值为表达式1的值。 ②如果为false,则整个表达式的值为表达式2的值。 eg:猜数字 function guessNumber(str) {//内置结果 var result = 10; if (isNaN(str)) alert("请录入数值"); else { var data = parseFloat(str); var info = data > result ? "大了" : "小了"; alert(info); } } 2.15流程控制语句 程序默认情况下顺序执行,改变或者控制执行顺序。 1) if语句:①if(表达式){语句块1}else{语句块2} ②if(表达式1){语句块1}else if(表达式2){语句块2}else{语句块3} 2)switch-case语句: switch(表达式){ case 值1:语句1;break; case 值2:语句2;break; default:语句3; } 3)for语句: for(初始化;条件;增量){ 语句; } u 注意事项:初始化中的局部变量用var声明。 4)while语句 while(条件){ 语句1; } u 注意事项:使用break或者continue中止循环 eg:阶乘计算 function getFac() { var result = 1; for (var i = 1; i <= 10; i++) { result *= i; } alert("10的阶乘为:" + result); } 三、 JavaScript常用内置对象 3.1什么是JavaScript对象 1)JavaScript是一种基于对象的语言,对象是JavaScript中最重要的元素。 2)JavaScript包含多种对象:内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象 3.2使用对象 1)对象由属性和方法封装而成。 2)属性的引用:使用点“.”运算符、通过下标的方式引用。 3)对象的方法的引用:ObjectName.methods()。 3.3常用内置对象 1)简单数据对象:String、Number、Boolean 2)组合对象:Array、Date、Math 3)复杂对象:Function、RegExp 3.4 String对象 1)创建字符串对象 方式一:var str1 = "hello world"; 方式二:var str2 = new String("hello world"); 2)String对象的属性:length,例如:alert(str1.length); 3)String对象的方法: ①大小写转换:toLowerCase():转为小写;toUpperCase():转为大写。 例如:var str1="AbcdEfgh"; var str2=str1.toLowerCase();alert(str2);//结果为 abcdefgh var str3=str1.toUpperCase();alert(str3);//结果为 ABCDEFGH ②获取指定字符:charAt(index):返回指定位置index的字符; charCodeAt(index):返回指定位置index的字符的Unicode编码 u 注意事项:下标index从0开始。 例如:var str1="JavaScript网页教程"; var str2=str1.charAt(12);alert(str2);//结果为 教 var str3=str1.charCodeAt(12);alert(str3);//结果为 25945 ③查询指定字符串: indexOf(findstr,index):从前往后,从位置index开始查找指定的字符串findstr,并返回出现的首字符的位置。 lastIndexOf(findstr):从后往前,查找指定的字符串findstr,并返回出现的首字符的位置。 u 注意事项:index可省略,代表从0开始找。如果没有找到则返回-1。 例如:var str1="JavaScript网页教程"; var str2=str1.indexOf("a");alert(str2);//结果为 1 var str3=str1.lastindexOf("a");alert(str3);//结果为 3 ④获取子字符串:substring(start,end):从start开始,到end结束,不包含end。 例如:var str1="abcdefgh"; var str2=str1.substring(2,4);alert(str2);//结果为 cd ⑤替换子字符串:replace(oldstr,newstr):返回替换后的字符串。 例如:var str1="abcde"; var str2=str1.replace("cd","aaa");alert(str2);//结果为 abaaae ⑥拆分子字符串:split(bystr):用bystr分割字符串,并返回分割后的字符串数组。 例如:var str1="一,二,三,四,五,六,日"; var strArray=str1.split(",");alert(strArray[1]);//结果为 二 3.5 String对象与正则表达式 String对象有几个方法可以结合正则表达式使用。 1)方法: ①replace(regexp,"replacestr"):返回替换后的结果。 ②match(regexp):返回匹配字符串的数组。 ③search(regexp):得到匹配字符串的“首“字符位置的索引。 2)JavaScript中使用正则表达式:使用两个斜杠, / 表达式 / 匹配模式 ①正则表达式回顾:\d 或者 [a-z]{3,5}。就是纯文本的表达式,用来表示某种匹配模式。在不同的语言环境下,提供了不同的类,执行或者使用正则表达式,实现文本的各种处理。 ②匹配模式:g:global,全局匹配;m:multilin,多行匹配;i:忽略大小写匹配。 例如:var str1="abc123def"; var str2=str1.replace(/\d/g,"*");alert(str2);//abc***def,如果不用全局匹配则只替换一个数字 var array=str1.match(/\d/g);//1,2,3 var index=str1.search(/\d/);alert(index);//3 3)案例 eg1:查找并替换文本框中录入的子字符串 js 为 * function searchStringAndReplace() { var str = document.getElementById("txtString").value; var count = 0; var index = str.indexOf("js", 0); while (index > -1) { str = str.replace("js","*"); index = str.indexOf("js", index + 1); } document.getElementById("txtString").value = str; } eg2:字符查询与过滤(使用正则表达式)
function stringByRegex() { var str = document.getElementById("txtString").value; var result = str.match(/js/gi); document.getElementById("txtString").value = str.replace(/js/gi, "*"); alert("共替换了" + result.length + "处。"); } 3.6 Array对象 一列有多个数据。JavaScript中只有数组没有集合。 1)创建方式 方式一:var arr = ["mary",10,true];//用中括号!不是大括号;常用;声明的同时并赋值。 方式二:var arr = new Array("mary",10,true);//声明的同时并赋值。 方式三:var arr = new Array();或var arr = new Array(7);//可有长度也可没有长度。即便写了长度,也能把第8个数据存入!先声明后赋值。 例如:arr[0] = "mary"; arr[1] = 10; arr[2] = true; alert(arr[3]);//undefined 2)数组的属性:length 3)创建二维数组:通过指定数组中的元素为数组的方式可以创建二维甚至多维数组。 例如:var week=new Array(7); for(var i=0;i<=6;i++){ week=[i]=new Array(2); } week[0][0]="星期日";week[0][1]="Sunday"; …… week[6][0]="星期六";week[6][1]="Saturday"; 4)方法:数组转换为字符串 ①join(bystr):以bystr作为连接数组中元素的分隔字符,返回拼接后的数组。 ②toString():输出数组的内容(以逗号隔开)。 例如:var arr1=[1,2,3,4]; alert(arr1.toString());//1,2,3,4 alert(arr1.join("-"));//1-2-3-4 5)方法:连接数组,concat(value,…):value作为数组元素连接到数组的末尾(数组连接),返回连接后的数组。 例如:var a=[1,2,3]; var b=a.concat(4,5); alert(a.toString());//1,2,3 alert(b.toString());//1,2,3,4,5 u 注意事项:concat方法并不改变原来数组的内容! 6)方法:获取子数组,slice(start,end):截取从start开始到end结束(不包含end)的数组元素。end省略代表从start开始到数组结尾。 例如:var arr1=['a','b','c','d','e','f','g','h',]; var arr2=arr1.slice(2,4);alert(arr2.toString());//c,d var arr3=arr1.slice(4);alert(arr3.toString());//e,f,g,h 7)方法:数组反转,reverse():改变原数组元素的顺序。 例如:var arr1=[32,12,111,444]; alert(arr1.reverse());//444,111,12,32 8)方法:数组排序 ①sort():数组排序,默认按照字符串的编码顺序进行排序。 ②sort(sortfunc):sortfunc用来确定元素顺序的函数名程。 例如:var arr1=[32,12,111,444]; arr1.sort();alert(arr1.toString());//111,12,32,444 function sortFunc(a,b){ return a-b; } arr1.sort(sortFunc);alert(arr1.toString());//12,32,111,444 9)案例 eg1:数组倒转与排序 function operateArray(t) { //拆分为数组 var array = document.getElementById("txtNumbers").value.split(","); switch (t) { case 1: array.reverse(); break; case 2: array.sort(); break; case 3: array.sort(sortFunc); break; } alert(array.toString()); } function sortFunc(a, b) { return a - b; } eg2:统计文本框中录入的各个字符的各数(使用二维数组)

统计文本框中录入的各字符的个数

function countString(str) { var result = new Array(); for (var i = 0; i < str.length; i++) {//直接循环str var curChar = str.charAt(i);//得到当前字符 var isHas = false;//声明一个变量,标识char在结果中是否出现过 for (var j = 0; j < result.length; j++) { //循环判断当前字符是否在result中出现过 //如果出现过,则设置标识为true,并增加数量,最后跳出循环 if (curChar == result[j][0]) { isHas = true; result[j][1]++; break; } } if (!isHas)//循环result完毕,没有出现过,则加入result result.push(new Array(curChar, 1)); } alert(result.toString()); } eg3:彩票双色球生成器

彩票双色球生成器

function randomNumber(min, max) {//随机数,包含下限,不包含上限 var n = Math.floor(Math.random() * (max - min)) + min; return n; } function doubleBall() {//彩票双色球 var result = new Array();//声明一个数组,用于存放结果 var i = 0; while (i < 6) {//先产生6个红球 var curCode = randomNumber(1, 34);//先生成一个1到33之间的号码 var isHas = false;//判断该号码是否出现过 for (var j = 0; j < result.length; j++) { if (result[j] == curCode) { isHas = true; break; } } if (!isHas) {//没有出现过,则加入且计数器加1 result.push(curCode); i++; } } result.sort(sortFunc);//产生完6个红球后,先排序,再产生一个蓝球 var info = result.toString(); var blueBall = randomNumber(1, 17); alert(info + " | " + blueBall); //返回结果 } function sortFunc(a, b) { return a - b; }//排序用的方法 3.7 Math对象 用于执行相关的数学计算。 1)没有构造函数Math()。 2)不需要创建,直接把Math作为对象使用就可以调用其所有属性和方法。如:不需要创建var data=Math.PI; 直接使用Math.PI;像Java中的静态类一样。 3)常用属性:都是数学常数,如:Math.E(自然数)、Math.PI(圆周率)、Math.LN2(ln2)、Math.LN10(ln10)等 4)常用方法: ①三角函数:Math.sin(x)、Math.cos(x)、Math.tan(x)等 ②反三角函数:Math.asin(x)、Math.acos(x)等 ③计算函数:Math.sqrt(x)、Math.log(x)、Math.exp(x)等 ④数值比较函数:Math.abs(x)、Math.max(x,y,...)、Math.random()、Math.round(x)等 u 注意事项: v Math.random():是一个 >=0 且 <1 的正小数 v Math.floor(x):地板,小于等于x,并且与它最接近的整数。注意:将负数舍入为更小的负数,而不是向0进行舍入。 v Math.ceil(x):天花板,返回大于等于x,并且与它最接近的整数。注意:不会将负数舍人为更小的负数,而是向0舍入。 5)案例 eg:随机得到3-9之间的一个整数(包含3,不包含9) 分析:① * (9-3)则得到0-6之间的小数。② +3则得到3-9之间的小数。 function getRandom(){ var min = 3; var max = 9; var seed = Math.random(); var n = Math.floor( seed * (max-min) + min); alert(n); } 3.8 Number对象 Number对象是原始数值的包装对象。 1)创建Number对象 方式一:var myNum=new Number(value); 方式二:var myNun=Number(value); 2)常用方法 ①toString:数值转换为字符串。 ②toFixed(n):数值转换为字符串,并保留小数点后n位数,多了就截断,四舍五入。少了就用0补足,常用作数值的格式化。比如: var data=23.56789; alert(data.toFixed(2));//23.57 data=23.5; alert(data.toFixed(2));//23.50 3.9 RegExp正则表达式对象 1)创建正则表达式对象 方式一:var reg1=/^\d{3,6}$/; 方式二:var reg2=new RegExp("^\d{3,6}$"); 2)JavaScript中,正则表达式的应用分为两类: 一类:和String对象的三个方法结合使用,实现对string的操作,如:replace/match/search 二类:调用正则表达式对象的常用test方法测试,RegExpObject.test(string):如果字符串string中含有与RegExpObject匹配的文本,则返回true,否则返回false 3)案例 eg:输入验证 用户名(3到6位字母数字的组合):
电话号码(6位数字):
function validateUserName(name) {//验证用户名 var reg = /^[a-zA-Z0-9]{3,6}$/;//reg是一个对象 var isRight = reg.test(name); if (!isRight){ alert("录入错误!"); } } function validateUserPhone(phone) {//验证电话号码 var reg = /^\d{6}$/; var isRight = reg.test(phone); if (!isRight){ alert("录入错误!"); } } 3.10 Date对象 Data对象用于处理日期和时间。 1)创建Data对象 方式一:var now = new Date();//当前日期和时间 方式二:var now = new Date("2013/01/01 12:12:12"); 2)常用方法 ①读取日期的相关信息:getDay()、getDate()、getMonth()、getFullYear()… ②修该日期:setDay()、setDate()、setMonth()、setHours() …… ③转换为字符串:得到某种格式的字符串显式,常用于页面显式,如:toString()、toDateString()、toLocaleTimeString() 3)案例 eg:计算查询时段 三天内 一周内 function getDateRange(days) {//时间的查询 var end = new Date();//得到当前日期 var endString = end.toLocaleDateString(); end.setDate(end.getDate() - days + 1);//修改日期 var s = "开始日期为:" + end.toLocaleDateString() + "\n";//显示结果 s += "结束日期为:" + endString; alert(s); } 3.11函数与Function对象 1)函数的概述:函数(方法)是一组可以随时随地运行的语句。Function对象可以表示开发者定义的任何函数。函数实际上是功能完整的对象。 2)函数的定义:function 函数名(参数){ 函数体; return; } u 注意事项: v 由关键字function定义。 v 函数名的定义规则与标识符一致,大小写敏感。 v 可以使用变量、常量或表达式作为函数调用的参数。 v 返回值必须使用return。 3) 函数的调用:函数可以通过其名字加上括号中的参数进行调用。如果有多个参数,则参数之间用逗号隔开。如果函数有返回值,则可以声明变量等于函数的结果即可。比如: function sum(n1,n2){ return n1+n1; } var result=sum(1,1); alert(result);//2 4)JavaScript中,如何创建一个方法 方式一:使用function关键字明文的声明一个方法(最常用,用于功能相关的方法) 例如:function AA(a,b){ alert(a+b); } 方式二:使用Function对象创建函数,语法: var functionName=new Function(arg1,...argN,functionBody); 最后一个参数是方法体,前面的其它参数是方法的参数。 例如: function testFunction(){ var f = new Function("a","b","alert(a+b);"); f(10,20); } u 注意事项: v 需求:有些方法不需要显式的存在,只是为其他方法里所使用(类似于java中的内部类)。 v 缺陷:方法体不能复杂。 方式三:创建匿名函数,语法: var func=function(arg1,...argN){ func_body; return value; } 例如:var f = function(a,b){ alert(a+b); } 5)案例 eg:数组按数值排序(使用Function对象和匿名函数) function sortArray() {//使用 Function 对象 var array = [34, 2, 14, 56, 43]; array.sort(new Function("a", "b", "return a-b;")); alert(array.toString()); } function sortArray2(){//使用匿名函数 var array=[12,3,45,9]; var f = function(a,b){ return a-b; }; array.sort(f); alert(array.toString()); } 3.12全局函数 全局函数可用于所有内建的JavaScript对象。常用的全局函数有: 1)decodeURI/encodeURI ①encodeURI(str):把字符串作为URI进行编码(大写i)。 ②decodeURI(str):对encodeURI()函数编码过的URI进行解码。 例如:function test(){ var s="http://sss.jsp?name=张三&code=李四"; var r1=encodeURI(s); var r2=decodeURI(r1); alert(r1); alert(r2); } 2)parseInt/parseFloat ①parseInt(str):强制转换成整数,如果不能转换,则返回NaN。 例如:parseInt("6.12")=6(无四舍五入) ②parseFloat(str):牵制转换成浮点数,如果不能转换,则返回NaN。 例如:parseFloat("6.12")=6.12 3)isNaN(str):is not a number,判断文本是否为数值,false为数值,true为非数值。 4)eval(str):用于计算某个字符串,以得到结果;或者用于执行其中的JavaScript代码。 u 注意事项:eval(str)只接受原始字符串作为参数,如果参数中没有合法的表达式和语句,则抛出异常 例如:var str="2+3"; alert(str);//2+3 alert(eval(str));//5 5) 案例 eg:简单计算器
function calculater(s){ if( s == "="){//如果单击的是=则计算,否则拼接 var s1 = document.getElementById("txtNumber").value; var r = eval(s1); document.getElementById("txtNumber").value = r; }else{ document.getElementById("txtNumber").value +=s; } } 3.13 Arguments对象 1)arguments是一种特殊对象,在函数代码中,代表当前方法被传入的所有的参数,形成一个数组。 2)在函数代码中,可以使用arguments访问所有参数。 ①arguments.length:函数的参数个数; ②arguments.[i]:第i个参数 3)JavaScript中,没有传统意义上的重载(方法名相同,但是参数不同),即:如果方法名相同,则以最后一次定义的为准。如果想在JavaScript中实现类似于重载的效果,就需要使用arguments对象。 4)案例 eg:模拟一个方法的重载 //Javascript 代码中,相同名称的方法如果重复定义,将会用新定义的方法覆盖已有的同名方法,因此,只能创建一个名为 myMethod 的方法,且不需要为该方法定制参数。 function myMethod() { if (arguments.length == 1) {//计算平方 var n = parseInt(arguments[0]);//避免隐式转换,主动显式转换 alert(n + " 的平方为:" + n * n); } else if (arguments.length == 2) {//计算和 var n = parseInt(arguments[0]); var m = parseInt(arguments[1]); var result = n + m; alert(n + " 与 " + m + " 的和为:" + result); } } 四、 window对象 4.1 DHTML简介 1)操作HTML以创造各种动态视觉效果,是一种浏览器端的动态网页技术。 2)DHTML的功能: ①动态改变页面元素。 ②事件响应机制制作动态折叠的树形结构和菜单。 ③与用户进行交互等。 3)DHTML对象模型包括浏览器对象模型和DOM对象模型。 4.2 DHTML对象模型 将整个窗口均实现了对象化,结构如下: 4.3 window对象 window对象表示浏览器中打开的窗口。也是父对象。 1)常用属性 ①name:窗口名称。 ②opener:打开当前窗口的window对象(引用)。 ③status:窗口底部状态栏信息。 2)常用子对象 ①document:代表给定浏览器窗口中的HTML文档。 ②history:包含了用户浏览过的URL信息。 ③location:包含关于当前URL的信息。 ④navigator:包含Web浏览器的信息。 ⑤screen:包含关于客户屏幕和渲染能力的信息。 ⑥event:代表事件状态。 4.4常用方法:对话框 1) alert(str):提示对话框,显示str字符串的内容。 例如:window.alert("aa"); //window.可省 2)confirm(str):确认对话框,像是str字符串的内容,按“确定”返回true,其他操作返回false。 3)prompt(str,value):输入对话框,采用文本框输入信息,str为提示信息,value为初始值,按“确定”返回输入值,其他操作返回undefine,value可省。 例如:function testConfirm(){ var r = window.confirm("Are you really...."); alert(r); window.prompt("请输入ID:");//因为不能控制它,所以很少用 } 4.5常用方法:窗口的打开和关闭 1)window.open(url):重复打开。 2)window.open(url,name):采取命名方式,避免重复打开。 3)window.open(url,name,comfig):config设置新窗口外观如高和宽。 4)window.close():关闭窗口。 例如:function testNewWindow(){ var config="toolbar=no,location=no,width=300,height=200"; window.open("http://www.baidu.com","a",config); } 4.6常用方法:周期性定时器 1)setInterval(exp,time):周期性触发代码exp,返回已经启动的定时器。exp:执行语句,time:时间周期,单位为毫秒。 2)clearInterval(tObj):停止启动的定时器。tObj:启动的定时器对象。 4.7常用方法:一次性定时器 1)setTimeout(exp,time):一次性触发代码exp,返回已经启动的定时器。exp:执行语句,time:时间周期,单位为毫秒。 2)clearTimeout(tObj):停止启动的定时器。tObj:启动的定时器对象。 4.8案例:动态时钟 function showTime(){//显式时间 var t =new Date();//将当前时间显式在一个文本框中 document.getElementById("txtTime").value = t.toLocaleTimeString(); } var timer;//设置全局变量 function startClock(){//启动时钟 timer = window.setInterval(showTime,1000);//有返回值的。 } function stopClock(){//停止时钟 window.clearInterval(timer); } var timer1;//设置全局变量 function wait(){//5秒后弹出一个Hello timer1 = window.setTimeout("alert('Hello');",5000);//可以执行合法的文本表达式 } u 注意事项:showTime没有括号,代表每隔一定时间让浏览器去找showTime对象并启动一次;showTime()则为立即启动方法。 五、 Document对象与DOM 5.1概念 1)Document对象:每个载入浏览器的HTML文档都会成为Document对象。 ①通过使用Document对象,可以从脚本中对HTML页面中的所有元素进行访问(操作文档中的任何内容,都过Document)。 ②Document对象是window对象的一部分,可通过window.document方式对其进行访问。 2)DOM:Document Object Model,文档对象模型,HTML文档中的所有节点组成了一个文档树(或节点树)。 ①树起始于文档节点,Document对象是一颗文档树的根。 ②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。 5.2根据元素ID查找节点 1)方法:document.getElementById(idValue) 2)忽略文档的结构,通过指定的ID来返回元素节点。 3)可以查找整个HTML文档中的任何HTML元素。 u 注意事项:如果ID值错误,则返回null。 5.3根据层次查找节点 1)遵循文档的层次结构,查找单个节点:parentNode、firstChild、lastChild 2)遵循文档的层次结构,查找多个节点: childNodes:以s结尾的都是数组,则有length属性。 3)案例 eg:根据层次查找节点 var sObj=document.getElementById("sell"); alert(sObj.childNodes.length);//7?为何是7?! var s1=sObj.firstChild; alert(s1.innerHTML);//undefined?这又为何为未定义? 解释:childNodes会找到sell下的所有子节点,除了真正的子节点外,还有空格这种特殊节点,所以长度为7。只有不空格,都写一行结果才为3,如: 同理,第一个子节点为空格,firstChild的内容当然也就是undefined了。 5.4根据标签名称查找节点 1)getElementsByTagName("namestr"):在某个节点的所有后代里查找某种类型的元素(根据指定的标签名),并返回所有的元素(返回一个节点列表)。 ①忽略文档的结构,查找整个HTML文档中的所有元素。 ②如果标签名错误,则返回长度为0的节点列表。 u 注意事项:单词Elements结尾有s,所以为数组。 2)length属性:返回的是一个节点列表,是个数组,因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如: 文本

一周畅销

var spans=document.getElementsByTagName("span"); alert(spans.length);//2 alert(spans[1].innerHTML);//榜 5.5读取或者修改节点信息 1)规则一:将HTML标签对象化,操作前先明确被对象化的标签都有什么属性。 如:aObj代表一个元素,有aObj.href属性,但没有aObj.value和aObj.src 2)规则二:innerHTML:设置或获取位于对象起始和结束标签内的内容。 如:aObj.innerHTML可修改元素标签中的“元素”两字 u 注意事项:单标签无法用innerHTML修改内容。 3)规则三:nodeName:得到某个元素节点和属性节点(即可得到标签或属性名称)及其类型位置。xxx.nodeName:当未知节点类型时,使用该属性获得节点的名称,全大写方式。 如:if(xxx.nodeName == "IMG") xxx.src = "http://..."; 4)节点属性:getAttribute()方法:根据属性名称获取属性的值。 将HTML标签、属性、CSS样式都对象化。 5.6修改节点的样式 1)style属性:语法:node.style.color; node.style.fontSize u 注意事项:CSS样式中属性名内有“-”的,这里省略,并把后面单词首字母大写! 2)className属性:语法:var Obj=document.getElementById("p1"); 如:Obj.className="样式类名称";//可用于设置不同的样式。 5.7查找并修改节点 1)使用getElementById()方法找到元素节点。 2)修改元素内容:innerHTML 3)修改样式:style属性或className属性 4)修改属性:html属性 5.8三个案例 eg1:表单验证
Name: 3-5个小写字母
Age: 2位数字
function validName(){//验证用户名 var name = document.getElementById("txtName").value;//得到录入的用户名 var r = /^[a-z]{3,5}$/;//验证 if(r.test(name))//根据验证结果显示不同的样式 document.getElementById("nameInfo").className = "success"; else document.getElementById("nameInfo").className = "fail"; return r.test(name);//添加返回 } function validAge(){//验证年龄 var age = document.getElementById("txtAge").value;//得到录入的年龄 var r = /^[0-9]{2}$/;//验证 if(r.test(age))//根据验证结果显示不同的样式 document.getElementById("ageInfo").className = "success"; else document.getElementById("ageInfo").className = "fail"; return r.test(age);//添加返回 } function validDatas(){//验证所有数据,验证name和age,return true和false var r1 = validName(); var r2 = validAge(); return r1&&r2 } u 注意事项:onclick="return validDatas();返回值为true则提交表单,否则取消提交,即为return false时取消某事件。 eg2:读取或修改节点信息

h2文本

段落文本

h2.style1{ border-top:1px solid red; border-right:2px solid blue; } function testDocument(){ var imgObj = document.getElementById("img1"); imgObj.src = "ok.png";//修改图片 //修改段落:字体颜色,背景色,字体大小,段落文本 var pObj = document.getElementById("p1"); pObj.style.color = "red";//注:pObj.style = "color:red";不够对象化 pObj.style.backgroundColor = "silver"; //注:pObj.style.background-color 不认识减号,去掉减号,下个单词首字母大即可。 pObj.style.fontSize = "25";//单位由浏览器的默认值决定 pObj.innerHTML = "new text"; //修改某元素的样式:样式复杂时用 document.getElementById("h2").className = "style1"; //复杂样式先定义一个样式类h2.style1{}(定义在内部样式或外部样式都可以),再用 className操作,不能用class,被系统用了。正常情况是标签中直接写class="style1",但为了实现动态效果而使用className进行操作。 } eg3:购物车
价格数量小计
10.00 10.00
20.00 20.00
总计:00.00
function add(btnObj){//增加购物的数量 var tdObj = btnObj.parentNode;//得到当前按钮所在的td for(var i=0;i function addNewNode(){ var formObj = document.getElementById("form1"); var obj = document.createElement("input");//为form添加一个文本框 obj.value = "mary"; formObj.appendChild(obj); var aObj = document.createElement("a");//form最后添加一个超级连接 aObj.href = "http://tts6.tarena.com.cn"; aObj.innerHTML = "cilck me"; formObj.appendChild(aObj); var btnObj = document.createElement("input");//在原有按钮的前面加入一个按钮 btnObj.type = "button"; btnObj.value = "new button"; btnObj.onclick = function(){ alert("hello"); };//function方法 formObj.insertBefore(btnObj,formObj.firstChild);//由于第一个子节点为空白,所以此处oldNode可用firstChild去定位(放在空白前)。 } 5.10删除节点 1)语法:parentNode.removeChild(childNode); u 注意事项:一定是从父节点删除子节点,不能直接删除子节点。 例如: link1 function deleteNode(){ var delNode=document.getElementById("a1"); delNode.parentNode.removeChild(delNode); } 5.11案例:联动菜单 //以下为JS代码:声明一个数组类型的全局变量用于存储所有的城市数据 var array = new Array(); array[0] = ["请选择"]; array[1] = ["海淀","朝阳","西城","东城"]; array[2] = ["石家庄","邢台","保定"]; function showCities(){//根据省显示城市 //得到第一个选择框的选中的选项的索引 var i = document.getElementById("sel1").selectedIndex; //先删除选择框中原有的元素 var sellObj = document.getElementById("sel2"); // for(var j=0;j0){ sellObj.removeChild(sellObj.firstChild); } var cities = array[i];//根据索引找到城市数据 //循环城市数据,创建option元素,文本写入 for(var index=0;index标签即表示一个Select对象。 2)常用属性:options(选项数组)、selectedIndex(索引从0开始)、size 3)常用方法:add(option)、remove(index) 4)事件:onchange 例如: 6.3 Option对象 1)Option对象代表HTML表单中下拉列表中的一个选项,

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ] 2 人已下载

下载文档