javascript之高级程序设计二

最新推荐文章于 2023-02-28 10:12:14 发布

车晋强

最新推荐文章于 2023-02-28 10:12:14 发布

阅读量512

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chejinqiang/article/details/44117139

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

构成JavaScript完整实现的各个部分：
JavaScript的核心ECMAScript描述了该语言的语法和基本对象
DOM描述了处理网页内容的方法和接口
BOM描述了与浏览器进行交互的方法和接口。

ECMAScript基础
语法：区分大小写，弱类型，每行结尾的分号可有可无，注释与C相同。
var test="hi";
var age=25;
变量可以存放不同类型的值
var test="hi";
alert(test);
test=55;
alert(test);
ECMAScript有5种原始类型，即:undefined,null,boolean,number,string
并提供了typeof运算符来判断某一个变量属于哪一个类型。
var iNum=10;
alert(iNum.toString(2));//二进制字符串
alert(iNum.toString(8));//八进制字符串
alert(iNum.toString(16));//十六进制字符串
2.转换成数字
var iNum1=parseInt("1234adf");//1234
var iNum2=parseInt("0xA");//return 10;
var iNum1=parseInt("AF",16);//解析十六进制的值
另外还有函数parsefloat("1234.lll");
3.强制类型转换
Boolean,Number,String
var s1=string(null);
var n2=Number("56");
4.引用类型
var o=new Object();
Number类
var oNumberObject=new Number(55);
var iNumber=oNumberObject.valueOf();
String类
<script type="text/javascript">
//创建一个String对象
var oStringObject=new String("hello world");
//string对象的valueOf和toString方法都返回String型的原始值
alert(oStringObject.valueOf()==oStringObject.toString());
//length属性
alert(oStringObject.length);
//charAt()得到单个字符,charCodeAt()得到单个字符的代码
alert(oStringObject.charAt(1));
alert(oStringObject.charCodeAt(1));
//concat()用于把一个或多个字符串连接到string对象原始值上，保持原始的string对象不变.
var s1="hello";
var s2=s1.concat(" world");
alert(s2); //hello world
alert(s1); //hello
var s3=s1+" world!!"; //也可以用+号连接字符串
alert(s3); //hello world!!
//indexOf()与lastIndexOf()返回指定子串在另一个字符串中的位置
alert(oStringObject.indexOf(o));//从字符串的开始检索
alert(oStringObject.lastIndexOf(o));//从字符串的结尾检索
//localCompare()按照字母顺序比较
s1=new String("yellow");
alert(s1.localCompare("brick"));//1
alert(s1.localCompare("yellow"));//0
alert(s1.localcomparre("zoo"));//-1
//slice()与substring()都返回字符串中的子串，第一个参数为起始位置，第二个参数为终止位置。
alert(oStringObject.slice(3));//lo world
alert(oStringObject.slice(3,7));//lo w
alert(oStringObject.substring(3));//lo world
alert(oStringObject.substring(3,7));//lo w
//对于负数参数，slice()会用字符串的长度加上参数，substring()则将其作为0处理
alert(oStringObject.slice(-3));//rld
alert(oStringObject.substring(-3));//hello world
//toLowerCase(),toLocalLowerCase(),toUpperCase(),toLocalUpperCase()大小写转换
//instanceof运算符
alert(oStringObject instanceof string);//oStringObject是否为string类型的实例
///
//delete运算符
var o=new Object();
o.name="nicholas";
alert(o.name);
delete o.name;//删除对以前定义的对象属性或方法引用
alert(o.name);

//void运算符
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
//当点击后将会在屏幕上出现object window字样
<a href="javascript:window.open('about:blank')">click me</a>
//void运算符对任何值都返回undefined.避免输出不应该输出的值
<a href="javascript:void(window.open('about:blank'))">click me</a>
</body>
</html>
/
//函数
function sayhi(name,message){
alert("hello"+name+","+message);
}
sayhi("che","ni hao");
//如何函数没有明确的返回值，则它真正的返回的值是undefined
//函数不能重载，
//arguments对象,无需明确指出参数名就能访问他们
function sayHi(){
if(arguments[0]=="bye")
document.write("bye");
document.write(arguments.length+"");
}
sayHi("bye",1,1,1,1);
//arguments对象还可检测传递给函数的参数个数,如上所示

</script>
对象基础－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
1.本地对象:Object,Array,String,Number,Date,RegExp,Function
2.Array方法：join(),split(),slice(),push(),pop(),shift(),unshift(),sort(),reverse()
join("连接符")将数组转换成字符串输出，split()将字符串转换成数组
shift()将删除数组的第一个项，将其作为函数值返回。unshift()把一个项放在数组的第一个位置，然后把其它的向后移动
slice()方法返回具有特定项的新数组，接受一个或两个参数，即要提取的项的起始位置和结束位置。
3.Date()
<script type="text/javascript">
//创建Date对象
var d=new Date();
var d=new Date(0);
var d=new Date(Date.parse("May 25,2004"));
var d=new Date(Date.UTC(2004,1,5));
var d=new Date();
alert(d.toDateString());
alert(d.toTimeString());
//
//内置对象
//只定义了两个内置对象，即Global,Math
//Global对象,isNaN(),isFinite(),parseInt(),parseFloat(),
//encodeURI()用于处理完整的URI，encodeURIComponent()用于处理URI的一个片断
var sUri="http://www.baidu.cn/illegal value.htm#start";
alert(encodeURI(sUri));
alert(encodeURIComponent(sUri));
//decodeURI()与decodeURIComponent()恰与对应的上面的方法相反
//最后一个方法是最强大的方法eval()
//该方法就像是整个ECMAScript的解释程序，接受一个参数，即要执行的JavaScript字符串
eval("alert('hi')");//alert("hi");
eval("function sayHi(){alert('ddd');}");
sayHi();
//这种功能极其强大，也极其危险，恶意用户可能会插入对站点有安全的代码即代码注入
//Global的属性:undefined,NaN,
//Math对象,random()方法
var iNum=Math.floor(Math.random()*10+1);
//ECMAScript中的所有对象的所有属性和方法都是公用的。所有属性和方法默认都是公用的。
//函数是对象，对象可以有属性和方法
function sayHi(){
alert("hi");
}
sayHi().alternate=function(){
alert("hola");
};
sayHi();
sayHi.alternate();
//关键词this
function showColor(){
alert(this.color);
}
var car1=new Object;
car1.color="red";
car1.showColor=showColor;
var car2=new Object;
car2.color="blue";
car2.showColor=showColor;
car1.showColor();
car2.showColor();
//定义对象和类
//工厂方式
function showColor(){
alert("this.color");
}
function createCar(sColor,iDoors,iMpg){
var oTempCar=new Object;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.msg=iMsg;
oTempCar.showColor=showColor;
return oTempCar;
}
var oCar1=createCar("red",4,23); //一个对象
var oCar2=createCar("blue",3,25); //另一个对象
//混合的构造方式/原型方法
//用构造方法定义对象的所有非函数属性，用原型方法定义对象的函数属性。
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike","Sue");
}
Car.prototype.showColor=function(){
alert(this.color);
}
var car1=new Car("red",4,23);
var car2=new Car("blue",4,23);
//给对象创建新的方法
//可以使用prototype属性为任何已有的类定义新方法
Number.prototype.toHexString=function(){
return this.toString(16);
}
//重定义已经存在的方法
Function.prototype.originalToString=Function.prototype.toString;
Function.prototype.toString=function(){
if(this.originalToString().length>100)
return "function too long to display.";
else
return this.originalToString();
}

//
//继承,暂时不学它。

</script>
//第五章，浏览器中的JavaScript
<script language="JavaScript" src="external.js"></script>
<script type="text/javascript">
//大量的javascrip代码不应该内嵌在HTML文件中，因为：安全性，代码维护，缓存

</script>

<script type="text/javascript">
	//访问相关节点
	var html=document.documentElement;
	var head=html.firstChild;
	var body=html.lastChild;
	var head=html.childNodes[0];
	var body=html.childNodes[1];
	var head=html.childNodes.item(0);
	var body=html.childNodes.item(1);
	alert(html.childNodes.length);
	var body=document.body;
	//检测节点类型
	alert(document.nodeType);
	alert(document.documentElement.nodeType);
	//getElementsByTagName
	//getElementsByName
	//getElementById
	//getAttribute
	//setAttribute
	//createElement(),createTextNode(),appendChild()
var p=document.createElement("p");  //创建p标签
var textNode=document.createTextNode("hello world"); //创建文本节点
p.appendChild(textNode); //添加到p节点的末尾
document.body.appendChild(p); //大小写很重要
//
//removeChild(),replaceChild(),insertBefore()
var p=document.createElement("p");
var old=document.createTextNode("hello world");
p.appendChild(old);
document.body.appendChild(p);
//p.parentNode.removeChild(p);
var news=document.createTextNode("hello world!!!!!");
old.parentNode.replaceChild(news,old);
p.insertBefore(old,news);
///
//createDocumentFragment()创建文档碎片
var arrText=["first","second","third","fourth","fifth","six","seven","eight","nine","ten"];
var oFragment=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
var op=document.createElement("p");
var optext=document.createTextNode(arrText[i]);
op.appendChild(optext);
oFragment.appendChild(op);
	}
document.body.appendChild(oFragment);
//HTML DOM让特性像属性一样
oImg=document.getElementByTagName(img)[0];
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border="1";
//class===className
oImg.className="footer"
//
		//javascript中的table方法
	var oTable=document.createElement("table");
	oTable.setAttribute("border","1");
	oTable.setAttribute("width","100%");
	var oTBody=document.createElement("tbody");
	oTable.appendChild(oTBody);
	oTBody.insertRow(0);
	oTBody.rows[0].insertCell(0);
	oTBody.rows[0].cells[0].appendChild(document.createTextNode("cell1,1"));
	oTBody.rows[0].insertCell(1);
	oTBody.rows[0].cells[1].appendChild(document.createTextNode("cell2,1"));
	oTBody.insertRow(1);
	oTBody.rows[1].insertCell(0);
	oTBody.rows[1].cells[0].appendChild(document.createTextNode("cell1,2"));
	oTBody.rows[1].insertCell(1);
	oTBody.rows[1].cells[1].appendChild(document.createTextNode("cell2,2"));
  document.body.appendChild(oTable);
  //DOM遍历规范中的NodeIterator,TreeWalker对象
	</script>

<script type="javascript">
var retCat=new RegExp("cat");
//g表示搜索全部，而不是找到第一个匹配后就停止
//i表示不区分大小写
var retCat=new RegExp("cat",gi");
//正则表达式字面量
var retCat=/cat/gi;
//test()方法
var sToMatch="cat";
var reCat=/cat/;
alert(reCat.test(sToMatch));	
//match()返回一个在字符串中的所有匹配的数组
var sToMatch="a bat,a cat,a fat bat,a fat cat";
var reAt=/at/gi;
var arrMatches=sToMatch.match(reAt);
alert(arrMatches.length);
//search()方法返回在字符串中出现的一个匹配的位置
var sToMatch="a bat,a cat,a fat bat,a fat cat";
var reAt=/at/gi;
var arrMatches=sToMatch.search(reAt);
alert(arrMatches);
扩展的字符串方法
//replace()方法
var sToChange="the sky is red";
//alert(sToChange.replace("red","blue"));
var reRed=/red/gi;
alert(sToChange.replace(reRed,"blue"));
//split()方法
var scolor="red,blue,yellow,green";
//var arrColors=scolors.split(",");
var reComma=/\,/;
var arrColors=scolor.split(reComma);
for(var i=0;i<arrColors.length;i++)
alert(arrColors[i]);
//元字符,任何时候使用元字符都必须使用转义
//( [ { ^ $ | ) ? * + ,
var reQMark=/\?/;
//假设想删除字符串中所有的换行符，可以这样做：
var sNewString=sStringWithNewLines.replace(/\n/g,"");
//简单类
var sToMatch="a bat,a cat,a fat bat,a fat cat";
var reBatCatFat=/[bcf]at/gi; //分别匹配b,c,f
var arrMatches=sToMatch.match(reBatCatFat);
//负向类
var reBatCatRat=/[^bc]at/gi;//匹配除了b,c之外的所有字符
//范围类
var reOneToFour=/num[1-4]/gi;//匹配num1,num2,num3,num4
//组合类 [a-m1-4\n]
//预定义类
. [^\n\r] \d [0-9] \D[^0-9] \s空白字符,\S非空白字符,\w所有的字母数字和下划线.\W与\w相反
//假设想匹配三个数字
var reg=/\d\d\d/;
///量词
//?出现0次或1次，*出现0次或多次，+出现一次或多次，{n}一定出现n次，{n,}至少出现n次，{n,m}至少出现n次，但不超过m次.
var reg=/b?rea?d/;
var reg=/b{0,1}rea{0,1}d/;
//贪婪的，惰性的和支配性的量词
//贪婪量词先看整个的字符串是不是一个匹配，如果不匹配，去掉最后字符串中的最后一个字符，再次尝试。
//惰性量词：先看字符串中的第一个字母是不是匹配。
//支配量词：只尝试匹配整个字符串。
//单独一个?贪婪的，但一个问号后面再跟一个?就是惰性的。要使问号成为支配量词，在后面加上一个+
//浏览器对支配量词的支持还不完善，IE不支持。
var re1=/.*bbb/g;//贪婪
var re2=/.*?bbb/g;//惰性
//
//复杂模式
//分组即()
//匹配头部和尾部空白的正则表达式十分简单
var reExtraSpace=/^\s*(.*?)\s+$/;
//候选
var reRedOrBlack=/(red|black|green)/;
//反向引用：按照从左到右遇到的左括号字符的顺序进行创建和编号的。
var sToMatch="#123456789";
var reNumbers=/#(\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1);
//
var s="dogdog";
var re=/(dog)\1/;
alert(re.test(s));
//
//非捕获性分组
//创建反向引用的分组，我们称之为捕获性分组，非捕获性分组不创建反向引用。节约了存储开销
//如果要创建一个非捕获性分组，只要在左括号的后面加上一个问号和一个紧跟的冒号。
var s="#123456789";
var re=/#(?:\d+)/;
re.test(s);
//
//去掉文本中所有的HTML标签，防止游客在里面插入恶意的HTML
var reTag=/<(?:.|\s)*?>/g; //这个表达式匹配了所有的HTML标签
</script>
<script type="text/javascript">
String.prototype.stripHTML=function(){
	var reTag=/<(?:.|\s)*?>/g;//匹配所有的HTML标签
	return this.replace(reTag,"");
}
var sTest="<b>this would be good</b>";
alert(sTest.stripHTML);

//前瞻
</scrpt>
<script type="text/javascript">
//前瞻
//有时候，可能希望，当某个特定的字符分组出现在另一个字符串之前时才去捕获它。
var s1="bedroom";
var s2="bedding";
var re=/(bed(?=room))/;
alert(re.test(s1));
alert(re.test(s2));
边界,^,$,\b单词的边界，\B非单词的边界
//查找一个单词，只要它只出现在行尾
var sToMatch="Important word is the last one.";
var reLastWord=/(\w+)\.$/;
var reFirstWord=/^(\w+)/;
//使用单词实现
var sToMatch="Important word is the last one.";
var reFirstWord=/^(.+?)\b/;
//多行模式
//要指定多行模式，只要在正则表达式后面添加一个m选项。
var sToMatch="First second\nthird fourth\nfifth sixth";
var reLastWordOnLine=/(\w+)$/gm;//这样就会返回second,fourth,sixth
//
//RegExp对象的实例属性
//lastIndex,代表下次匹配将会从哪个字符位置开始
var sToMatch="bbq is short for barbecue";
var reB=/b/g;
reB.exec(sToMatch);
alert(reB.lastIndex);//1
reB.exec(sToMatch);
alert(reB.lastIndex);//2
reB.exec(sToMatch);
alert(reB.lastIndex);//18
reB.lastIndex=0;
alert(reB.lastIndex);
///
//静态属性
//input,lastMatch,lastParen,leftContext,rightContext
///常用模式
//验证日期
function isValidDate(sText){
	var reDate=/(?:0[1-9]|[12][0-9]|3[01])\/(?:[1-9]|1[0-2])\/(?:19|20\d{2})/;
	return reDate.test(sText);
	}
	alert(isValidDate("5/5/2004"));
		alert(isValidDate("5/5/2032"));
			alert(isValidDate("5/5/2044"));

//验证信用卡号
//信用卡号还有点麻烦，涉及到luhn算法
//验证电子邮箱地址
var reEmail=/^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$;
alert("john.doe@somewhere.com");
</script>

<script type="text/javascript">
	//浏览器检测:对象检测，user-agent字符串检测
	//对象检测法,在使用一个对象之前先检查它的存在
	if(document.getElementById){
		}
		else{
			}
  //user-agent字符串检测法
  var sUserAgent=navigator.userAgent;
  
	</script>

<script type="text/javascript">
	//事件
	//IE,冒泡型事件，DOM事件流，一次捕获过程一次冒泡过程。
	//冒泡事件是从下往上，捕获事件从上往下.
	//DOM还支持文本节点的捕获
	//事件处理函数/监听函数
	var oDiv=document.getElementById("div1");
	oDiv.οnclick=function(){
		alert("i was clicked");
		};
	<div οnclick="alert('i am clicked')"></div>
	//为每个可用事件分配多个事件处理函数
	//IE中，attachEnvent(),detachEvent()
	var fnclick1=function(){alert("clicked")};
	vr fnclick2=function(){alert("also clicked")};
	var oDiv=document.getElementById("div");
	oDiv.attachEvent("onclick",fnClick1);
	oDiv.attachEvent("onclick",fnClick2);
	//DOM中，addEventListener(),removeEventListener()这些方法需要三个参数,
	//事件名称，要分配的函数，true表示用于捕获阶段，false表示用于冒泡阶段
	oDiv.addEventListener("onclick",fnclick1,false);
	oDiv.addEventListener("onclick",fnclick2,false);
	//事件对象,是window对象的一个属性event
	oDiv.οnclick=function(){
		var oEvent=window.event;
		}
	oDiv.οnclick=function(oEvent){}
	//属性和方法，在IE和DOM当中
	//相似性
	//获取事件类型
	var sType=oEvent.type; //返回类似"click"或"mouseover"之类的值。
	function handleEvent(oEvent){
		if(oEvent.type=="click")
		{
			alert("clicked!");
			}
			else if(oEvent.type=="mouseover"){
				alert("mouse over");
				}
		}
 oDiv.οnclick=handleEvent;
 oDiv.οnmοuseοver=handleEvent;
 //在keydown,keyup事件中，可以使用keyCode属性获取按下的按键的数值代码。
 var iKeyCode=oEvent.keyCode();
 //例如Enter键为13，空格键为32，回退键为8.
 //检测shift,alt,ctrl键是否被按下，
 var bshift=oEvent.shiftKey;
 var bAlt=oEvent.altKey;
 var bCtrl=oEvent.ctrlKey;
 //获取客户端坐标,客户端区域是显示网页的窗口部分
 var iClientX=oEvent.clientX;
 var iClientY=oEvent.clientY;
 //获取屏幕位置
 var iScreenX=oEvent.screenX;
 var iScreenY=oEvent.screenY;
 //
 //区别
 //获取目标
 //位于事件中心的对象称为目标
 var oTarget=oEvent.srcElement;//IE
 var oTarget=oEvent.target;//DOM
 //获取字符代码
 var iCharCode=oEvent.keyCode;//IE
 var iCharCode=oEvent.charCode;//DOM
 //然后可以用这个值来获取实际的值
 var sChar=string.fromCharCode(oEvent.charCode);
 //如果不确定按下的键当中是否包含字符，可以使用isChar属性进行判断
 if(oEvent.isChar){
 	var iCharcode=oEvent.charCode;
 	}
 	//3.阻止某个事件的默认行为
 	//在用户右键点击页面时，阻止他使用上下文菜单.
 	document.body.οncοntextmenu=function(oEvent){
 		if(isIE){
 			oEvent=window.event;
 			oEvent.returnValue=false;
 			}
 			else{
 				oEvent.preventDefault();
 				}
 		}
 		//停止事件复制
 		oEvent.cancelBubble=true;//IE
 		oEvent.stopPropagation();//mozilla
 		
 /
 //事件的类型
 //鼠标事件，键盘事件，HTML事件，突变事件。
 //鼠标事件:click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove
 <html>
<head>
	<script type="text/javascript">
		//打印出鼠标事件的各个类型
		function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			}
		</script>
</head>
<body>
	<p>your mouse to click and double click the red square.</p>
	<div style="width:100px;height:100px;background-color:red" οnmοuseοver="handleEvent(event)"
		οnmοuseοut="handleEvent(event) οnmοusedοwn="handleEvent(event)" οnmοuseup="handleEvent(event)"
	οnclick="handleEvent(event)" ondbclick="handleEvent(event)" id="div1"></div>
	<p><textarea id="txt1" rows="15" cols="50"></textarea></p>	
</body>
</html>
//一个很流行的改变图片的.
<img src="image1.jpg" οnmοuseοver="this.src='image2.jpg'" οnmοuseοut="this.src='image1.jpg'">
//事件的属性：坐标属性(clientX,clientY)，type属性，target或srcElement属性，shiftKey,ctrlKey,altKey,button属性
	function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id;
			oTextbox.value+="\n at("+oEvent.clientX+","+oEvent.clientY+") on the client";
			oTextbox.value+="\n at("+oEvent.screenX+","+oEvent.screenY+") on the screen";
			oTextbox.value+="\n button down is"+oEvent.button;
			var arrKeys=[];
			if(oEvent.shiftKey)
			arrKeys.push("shift");
			if(oEvent.ctrlKey)
			arrKeys.push("ctrl");
			if(oEvent.altKey)
			arrKeys.push("alt");
			oTextbox.value+="\n keys down are"+arrKeys;
			}
//要触发dbclick事件，在同一个目标上要顺序发生以下事件：
//mousedown,mouseup,click,mousedown,mouseup.click,dbclick.
//
//键盘事件:keydown,keypress,keyup
//事件属性:keyCode属性,charCode属性(DOM),target或srcElement,shiftKey,ctrlKey,altKey,
<html>
<head>
	<script type="text/javascript">
		//打印出键盘标鼠事件的各个类型
		function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id;
			oTextbox.value+="\n keycode is "+oEvent.keyCode;
			oTextbox.value+="\n charcode is "+oEvent.charCode;
			
			var arrKeys=[];
			if(oEvent.shiftKey)
			arrKeys.push("shift");
			if(oEvent.ctrlKey)
			arrKeys.push("ctrl");
			if(oEvent.altKey)
			arrKeys.push("alt");
			oTextbox.value+="\n keys down are"+arrKeys;
			}
		</script>
</head>
<body>
	<p>your mouse to click and double click the red square.</p>
	<p><textarea id="txtInput" rows="15" cols="50" οnkeydοwn="handleEvent(event)" οnkeyup="handleEvent(event)"
οnkeypress="handleEvent(event)"></textarea></p>
	<p><textarea id="txt1" rows="15" cols="50" ></textarea></p>	
</body>
</html>
//用户按一次字符按键时，会按以下顺序发生：keydown,keypress,keyup
//HTML事件
//load事件，页面完全载入后，在window对象上触发。img完全载入后在其上触发.
//unload事件，页面完全卸载后，在window对象上触发.
//error事件,javascript脚本出错时，在window对象上触发。img指定图像无法载入时，在其上触发.
//resize事件，scroll事件，focus事件，blur事件。
window.οnlοad=function(){
	alert(loaded);
	}		
//与load和unload事件类似，resize事件的处理函数必须使用javascript代码分配给window对象或者HTML中分配给body元素.
<body οnresize="alert('resizing')">
//scroll事件,希望用户在卷动窗口时，确保某些内容一直在屏幕上可见.
//可与body元素的属性协用,scrollLeft,保存窗口在水平方向上卷动的距离，以及scrollTop，保存窗口在垂直方向上卷动的距离
window.οnscrοll=function(){
	var oWatermark=document.getElementById("divWatermark");
	oWatermark.style.top=document.body.scrollTop;
	}	

	</script>

<script type="text/javascript">
	//表单基础
	//HTML表单是通过<form>元素来定义的，它有以下特性。
	//method<GET,POST>,action(要提交的URL)
	//enctype－当向服务器发送数据时应该使用的编码方法，默认为application/x-www-url-encoded.不过要上传文件可以设置为multipart/form-data
	//<input> type判断是哪种文本控件
	//"text"单行文本框，"radio"单选按钮，"checkbox"复选框,"file"文件上传文本框,"password"密码输入框.
	//"button"一般按钮，"submit"提交按钮，"reset"重置按钮，"hidden"不会出现在屏幕上的输入字段。
	//"image"图像，与提交按钮功能相同。
	//<select>下拉列表框，里面的值由<option>元素定义。
	//<textarea>-多行文本框，尺寸由rows和cols特性来确定。
			<form method="post" action="handlepost.jsp">
	<label for="txtName">Name:</label><br>
<input type="text" id="txtName" name="txtName"><br>
<label for="txtPassword">password:</label><br>
<input type="password" id="txtPassword" name="txtPassword"><br>
<label for="selAge">Age</label><br>
<select name="selAge" id="selAge">
	<option>18-21</option>
	<option>22-25</option>
	<option>26-29</option>
	<option>30-35</option>
	<option>over 35</option>
</select><br>
<label for="txtComments">Comments:</label><br>
<textarea rows="10" cols="50" id="txtComments" name="txtComments"></textarea><br>
<input type="submit" value="submit form">
		</form>
		
///for特性指定它绑定的表单的ID，每个表单字段都应该包含id和name特性，且值相等。name用于将数据提交服务器，而id用于在客户端确定元素.
//获取表单的引用
var oForm=document.getElementById("form1");
或
var oForm=document.forms[0];
var oForm=document.forms["formz"];//使用name特性
//访问表单字段
var oFirstField=oForm.elements[0];
var oTextbox1=oForm.elements["textbox1"];
var oTextbox1=oForm.textbox1;
//表单字段的共性
//disabled特性可用来获取或设置表单控件是否被禁用
//form用来指定字段所在的表单，blur()方法可以使字段失去焦点。focus()方法会让表单字段获取焦点.
var oField1=oForm.elements[0];
vr oField2=oForm.elements[1];
oField1.disabled=true;
oField2.focus();
alert(oField1.form==oForm);
//聚焦于第一个字段
//很多开发人员将下面一段代码放在onload事件中
document.forms[0].elements[0].focus();
//提交表单
<input type="submit" value="Submit">
<input type="image" src="submit.gif">
<form method="post" action="javascript:alert('submitted')">
oForm=document.forms["form1"];
oForm.submit();
<input type="button" value="submit form" οnclick="document.forms[0].submit()">
//onsubmit事件可以用来在提交过程前验证表单。
//仅提交一次。以防止用户多次点击而造成信用卡中多次扣钱
<input type="button" value="submit" οnclick="this.disabled=true;this.form.submit()">
//文本框
//两种不同类型的文本框，单行的和多行的。<input type="text"><textarea>
//创建同时可以显示25个字符，最多容纳50个字符的文本框。
<input type="text" size="25" maxlength="50" value="initial value">
//获取/更改文本框的值value,length
//选择文本
function selectText(){
	var oTextbox1=document.getElementById("txt1");
	oTextbox1.focus();
	oTextbox1.select();
	}
//文本框事件
//两种文本框都支持blur和focus,同时还支持:change,select
//change,当用户更改内容后文本失去焦点时发生。select,当一个或多个字符被选中时发生。
<input type="text" name="textbox1" value="" οnblur="alert('blur')" οnchange="alert('change')">
//自动选择文本
<input type="text" οnfοcus="this.select()">
//自动切换到下一个
//禁止粘贴
οnpaste="return false";
//
//列表框和组合框
//HTML为每个<select>定义了options集合，它是控件的所有<option>元素的列表。
alert(oListbox.options[1].text);// 返回显示文本
alert(oListbox.options[1].value);//返回值特性
alert(oListbox.options[1].index);//返回位置
//<select>元素有一个selectedIndex特性，它总是包含目前选中的选项的索引。
//getSelectedIndexes()方法.
//添加选项，使用DOM方法创建<option>元素，并通过创建一个文本节点来分配选项名称。
//删除选项
oListbox.options[1]=null;
	</script>

<script type="text/javascript">
//支持CSS的下一步就是让JavaScript能够访问样式表
//一些常用的CSS特性以及它们对应的JavaScript中style对象的表示
//background-color:style.backgroundColor;color:style.color;font:style.font;font-family:style.fontFamily;font-weight:style.fontWeight;
<div id="div1" style="background-color:red;height:50px;width:50px"
οnmοuseοver="this.style.backgroundColor='blue'"
οnmοuseοut="this.style.backgroundColor='red'"></div>
//DOM样式的方法
//自定义鼠标提示
<a href="http://www.wrox.com" title="Wrox Site">Wrox</a>
<html>
<head>
	<script type="text/javascript">
	function showTip(oEvent){
		var oDiv=document.getElementById("divTip1");
		oDiv.style.visibility="visible";
		oDiv.style.left=oEvent.clientX+5;
		oDiv.style.top=oEvent.clientY+5;
		}	
		function hideTip(oEvent){
			var oDiv=document.getElementById("divTip1");
			oDiv.style.visibility="hidden";
			}
		</script>
</head>
<body>
	<p>move your mouse over the red square.</p>
	<div id="div1" style="background-color:red;height:50px; width:50px" οnmοuseοver="showTip(event)"
	οnmοuseοut="hideTip(event)"></div>
	<div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
		<span style="font-weight:bold">custon tooltip</span><br>
		more details can go here.
	</div>
</body>
</html>
//可折叠区域，可以通过点击某个地方来显示或者隐藏屏幕中的某个区域。使用CSS的display特性就可以完成
//这个操作，当display设置为none时，元素就被从页面流中移除，页面重绘时就像这个元素不存在一样。
//这与将visibility设置为hidden不同，它仅仅隐藏元素，以留下一个元素所占的空白。
<html>
<head>
	<script type="text/javascript">
	
		function toggle(sDivId){
			var oDiv=document.getElementById(sDivId);
			oDiv.style.display=(oDiv.style.display=="none")?"block":"none";
			}
			
		</script>
</head>
<body>
<div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"
οnclick="toggle('divContent1')">click here</div>
<div style="border:3px solid blue; height:100px;padding:10px" id="divContent1">this is some
	content to show and hide.>/div>
<p> </p>
<div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"
οnclick="toggle('divContent2')">click here</div>
<div style="border:3px solid blue;height:100px;padding:10px" id="divContent2">this is some content to show and hide</div>
</body>
</html>

//访问样式表
<html>
	<head>
		<title>Accessing style sheets example</title>
		<style type="text/css">
			div.special{
				background-color:red;
				height:10px;
				width:10px;
				margin:10px;
			</style>
			<script type="text/javascript">
				function getBackgroundColor(){
					var oCSSRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
					alert(oCSSRules[0].style.backgroundColor);
					}
				</script>
			</head>
			<body>
				<div id="div1" class="special"></div>
				<input type="button" value="get background color:"οnclick="getBackgroundColor()">
			</body>
</html>
/
//最终样式
//IE中使用currentStyle对象，它是对所有采用了的样式的合计。是只读的，不可赋值。
var oDiv=document.getElementById("div1");
alert(oDiv.currentStyle.backgroundColor);
//DOM中的最终样式
var oDiv=document.getElementById("div1");
alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);
//innerText,innerHTML<IE引入了这两个方法>
//innerText,用来修改起始标签和结束标签之间的文本
oDiv.appendChild(document.createTextNode("new text for the div."));
oDiv.innerText="new text for thd div.";
//innerHTML可以包含HTML标签
oDiv.innerHTML="<strong>Hello</strong><em>world</em";
var oStrong=document.createElement("strong");
oStrong.appendChild(document.createTextNode("Hello"));
var oEm=document.createElement("em");
oEm.appendChild(document.createTextNode("world"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(" "));
oDiv.appendChild(oEm);
//outerText,outerHTML
//与innerText,innerHTML十分相似，只不过替换的是整个目标节点
oDiv.outerText="Hello world!";
等同于:
var oText=document.createTextNode("hello world!");
var oDivParent=oDiv.parentNode;
oDivParent.replaceChild(oText,oDiv);
oDiv.outerHTML="<p>this is a paragraph.</p>";
//范围，暂时跳过。
	</script>

车晋强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之高级程序设计二

构成JavaScript完整实现的各个部分：JavaScript的核心ECMAScript描述了该语言的语法和基本对象DOM描述了处理网页内容的方法和接口BOM描述了与浏览器进行交互的方法和接口。ECMAScript基础语法：区分大小写，弱类型，每行结尾的分号可有可无，注释与C相同。var test="hi";var age=25;变量可以存放不同类型的值
复制链接

扫一扫