javascript学习笔记

前天下午开始学javascript积累了一些练习用的代码,都比较基础,不过也很重要,贴到这里!


上午学习了几个javascript的常用事件,记下来,常看看,防止以后忘记了!!!


JS脚本可以放在html页中的任何位置,但是我们经常放在<head></head>中,这样做在之前是有些问题的,如果出现了一个很大JS脚本,那么整个页面的显示会在再浏览器解析完全部脚本以后再显示页面的内容,这样就会显得很慢,有些人也把<script></script>放在<body></body>的最后面,那时候是这样的

<script type="text/javascript" src="xxx.js" ></script>

后来加入了defer属性,如下,现在就可以直接放在<head></head>中了,这样会等到页面完全解析了再解析JS脚本

<script type="text/javascript" src="xxx.js" defer="defer"></script>

建议使用这样的方式来引用JS脚本,不要直接写到页面中去


if(isNaN(value)){alert("not a number")}  //判断一个value是不是数字

alert("string");//弹出警告框

onblur = "function1()"//当输入文本后焦点转移的时候引发事件

οnlοad="function2()"//加载body的时候引发此事件,放在<body>中

οnclick="function3()"//当鼠标点击控件的时候出发此事件

document.getElementById("XXXX").XXX;   //根据元素的ID获得元素本身

prompt("XXXXX","YYYYYY"); //构建一个简单的对话框,(XXXXX,表示对话框最上方的文字,YYYYY表示对话框中需要填写部分预填写的文字,此对话框还包含确定和关闭)

typeof(true); //显示变量的类型

typeof true; //同上效果


为了对基础有稍微全面的一点点了解,我写了一个JS脚本,主要是一些巩固基础的东西,希望对菜菜有帮助

//------------------------------------------------------------------//
//	This is a test of javascript basic syntax
//	by baobaoyeye
//	2011-7-21
//------------------------------------------------------------------//


function sayHi(){						//only a test for beginner
	alert("hi!");						//pop a warning dialog box

	var sum = 1 + 2;
	var test = true;
	if(test){
		test = false;
		alert(test);
	}

	var test2 = 1;
	if(test2){
		test2 = false;
		alert(test2);
	}
}

//function testfun1() and testfun2() are all use to test local value
//and global value.
//we should use local value more.

function testfun1(){
	var message = "hi";
	var message1;						//局部变量
	message2 = "world";					//全局变量

	document.getElementById("test1show1").value = message;
	document.getElementById("test1show2").value = message2;
}
function testfun2(){
	var message = "hi2",
		found = false,
		age = 29;

	document.getElementById("test2show1").value = message;
	document.getElementById("test2show2").value = message2;
}

function testfun3(){					//test data type
	var message = "string";
	//alert(typeof(message));
	//alert(typeof message);
	//alert(typeof 95);
	
	document.getElementById("test3show1").value = typeof(message);
	document.getElementById("test3show2").value = (typeof message);
	document.getElementById("test3show3").value = (typeof 95);
	document.getElementById("test3show4").value = (typeof true);
	document.getElementById("test3show5").value = (typeof undefined);
	document.getElementById("test3show6").value = (typeof null);

	var message4;
	alert(message4 == undefined);
	message4 = undefined;
	alert(message4 == undefined);
}

function testfun4(){					//test undefined 和 未声明的区别
	var message;						//定义未初始化
	//var message5;						//未定义
	document.getElementById("test4show1").value = typeof(message);
	document.getElementById("test4show2").value = typeof(message5);
	alert(message);
	alert(message5);					//这样会出现错误
}

function testfun5(){					//test null and undefined
	var car = null;
	//alert(typeof car);
	//alert(null == undefined);			//return true 但需要转换
	document.getElementById("test5show1").value = (typeof car);
	document.getElementById("test5show2").value = (null == undefined);
}

function testfun6(){
	var found = "true";
	var lost = "false";					//True or False neither true and false
	document.getElementById("test6show1").value = "True != true";

}

function testfun7(){					//TEST boolean type
	var message  = "hello world";
	var messageBoolean = Boolean(message);

	if(messageBoolean){
		alert(messageBoolean+" is true");
	}
}

function testfun8(){					//test integer 
	var intNum = 123;					//del
	document.getElementById("test8show1").value = "intNum = "+intNum;
	
	var octalNum1 = 0234;				//oct
	var octalNum2 = 02;
	document.getElementById("test8show2").value = "octalNum1 = "+octalNum1;
	document.getElementById("test8show3").value = "octalNum2 = "+octalNum2;
	
	var hexNum1 = 0xAAA;				//hex
	var hexNum2 = 0xBb2;
	document.getElementById("test8show4").value = "hexNum1 = "+hexNum1;
	document.getElementById("test8show5").value = "hexNum2 = "+hexNum2;
										//计算的过程中无论是八进制还是十六进制都转换成十进制算
}

function testfun9(){					//test double
	var floatNum1 = 2.3e20;
	var floatNum2 = 2E-2;

	document.getElementById("test9show1").value = "floatNum1 = "+floatNum1;
	document.getElementById("test9show2").value = "floatNum2 = "+floatNum2;
}


function testfun10(){					//test the minest and maxest number in javascript
	var minNum = Number.MIN_VALUE;		//min number
	alert(minNum);
	var maxNum = Number.MAX_VALUE;		//max number
	alert(maxNum);
										//isFinite() return if the result in the (min,max)
	var result = Number.MAX_VALUE + Number.MAX_VALUE;	
	alert(isFinite(result));
}

function testfun11(){					//test NaN(not a number)
										//(1)every operate will return NaN, while there 
										//	 is NaN in the process
	alert(NaN == NaN);					//(2)NaN not equal everything(include itself)
	
	alert(isNaN(NaN));					//true		NaN is not a number
	alert(isNaN(10));					//false
	alert(isNaN("10"));					//false		can be converted number
	alert(isNaN("blue"));				//true		can't be converted number
	alert(isNaN(true));					//false
}

function testfun13(){
	
	var num1 = Number("Hello wrold");	//NaN
	var num2 = Number("");				//0
	var num3 = Number("0000000001");	//1
	var num4 = Number("0x10");			//16
	var num5 = Number("123.213");		//123.213
	var num0 = Number("ABABABABA");		//NaN

	var num6 = Number(true);			//1
	var num7 = Number(123);				//123
	var num8 = Number(null);			//0
	var num9 = Number(undefined);		//NaN
	
	alert(" num1 = "+num1+"\n num2 = "+num2+"\n num3 = "+num3+"\n num4 = "+num4+"\n num5 = "+num5+"\n num0 = "+num0+"\n num6 = "+num6+"\n num7 = "+num7+"\n num8 = "+num8+"\n num9 = "+num9 );
	
}

function testfun14(){					//convert integer 
	
	var num0 = parseInt("   1");		//1
	var num1 = parseInt("   -1");		//-1
	var num2 = parseInt("    @1");		//NaN
	var num3 = parseInt("    ");		//NaN
	var num4 = parseInt("123black");	//123
	
	var num5 = parseInt("0x10");		//16
	var num6 = parseInt("010");			//8
	var num7 = parseInt(22.2);			//22
	var num8 = parseInt("0xf");			//15

	var num9 = parseInt("10",16);		//16
	var num10 = parseInt("0x10",16);	//16
	var num11 = parseInt("10",2);		//2
	var num12 = parseInt("10",8);		//8
	var num13 = parseInt("10",10);		//10


	alert(" num0 = "+num0+"\n num1 = "+num1+"\n num2 = "+num2+"\n num3 = "+num3+"\n num4 = "+num4+"\n num5 = "+num5+"\n num6 = "+num6+"\n num7 = "+num7+"\n num8 = "+num8+"\n num9 = "+num9+"\n num10 = "+num10+"\n num11 = "+num11+"\n num12 = "+num12+"\n num13 = "+num13);
}

function testfun15(){
	var num1 = parseFloat("22.34.5");	//22.34
	var num2 = parseFloat("123blue");	//123
	var num3 = parseFloat("0xA");		//0
	var num4 = parseFloat("00908.443");	//908.443
	var num5 = parseFloat("3.125e7");	//31250000
	alert(" num1 = "+num1+"\n num2 = "+num2+"\n num3 = "+num3+"\n num4 = "+num4+"\n num5 = "+num5);
}

//	String

function testfun16(){
	var str1 = "test";					
	var str2 = 'test';					//both of str1 and str2 are all right
										// \unnnn means Unicode
	var str3 = "This is the letter sigma: \u03a3";
	var str3len = str3.length;
	alert("str3 = "+str3 +"\nstr3len = " +str3len);

	var str3_1 = "\u03a3";
	var str3_1len = str3_1.length;
	alert("str3_1 = "+str3_1 +"\nstr3_1len = "+str3_1len);

	var str4 = "Java";
	str4 = str4 + "Script";
										
										//toString() function
	var str5 = 11;
	var str5ToString = str5.toString();	//"11"
	var str6 = true;
	var str6ToString = str6.toString();	//"true"
	alert("str5 = "+str5+"\nstr5ToString = "+str5ToString+"\nstr6 = "+str6+"\nstr6ToString = "+str6ToString);

	var num = 10;
	var str7 = num.toString();			//"10"
	var str8 = num.toString(2);			//"1010"
	var str9 = num.toString(8);			//"12"
	var str10 = num.toString(10);		//"10"
	var str11 = num.toString(16);		//"a"
	var str12 = num.toString(9);		//"11"
	alert("str7 = "+str7
		+"\nstr8 = "+str8
		+"\nstr9 = "+str9
		+"\nstr10 = "+str10
		+"\nstr11 = "+str11
		+"\nstr12 = "+str12);
										//String() function
	var str13 = 10;						//if have toString() function return toString() result
	var str14 = true;					
	var str15 = null;					//if equal null return null
	var str16;							//if undefined return undefined
	
	alert(String(str13));				//"10"
	alert(String(str14));				//"true"
	alert(String(str15));				//"null"
	alert(String(str16));				//"undefined"

}

//Object

function testfun17(){
	var o1 = new Object();				//create a instance of Object 		
	//var o1 = new Object;				//right but we don't recommend

										//constructor
										//hasOwnProperty("propertyName")
										//isPrototypeOf(Object)
										//propertyIsEnumerable("propertyName")
										//toString()
										//valueOf()
}

function testfun18(){
	var op = 10;
	++op;
	--op;
	op++;
	op--;

	var op1 = "2";
	var op2 = "z";
	var op3 = false;
	var op4 = 1.1;
	var o = {
		valueOf: function(){
			return -1;
		}
	};

	var ans1 = ++op2;					//NaN
	var ans2 = ++op3;					//1
	var ans3 = --op4;					//0.10000000000000009
	var ans4 = --o;						//-2

	alert( "ans1 = "+ans1
		+"\nans2 = "+ans2
		+"\nans3 = "+ans3
		+"\nans4 = "+ans4);
}

function testfun19(){
	var num1 = 25;
	var num2 = ~num1;
	alert(num2);						//-26

	var num3 = 25,
		num4 = 3;
	alert((num3 & num4)					//1
	+"\n"+(num3 | num4)					//27
	+"\n"+(num3 ^ num4));				//26

	var num5 = 3,						//11
		num6 = 13;						//1101
	alert((num5<<2)						//12 = 3 * 2 * 2
	+"\n"+((-num5)<<2)					//-12 = -(3 * 2 * 2)
	+"\n"+(num6>>2)						//floor(13/4)
	+"\n"+((-num6)>>2));				//floor(-13/4)
	return "hello world"
}

function testfun20(){
	var result1 = 5 + 5;
	alert(result1);						//10
	var result2 = 5 + "5";
	alert(result2);						//"55"
}

function testfun21(){
	var result1 = 5 - true;				//4
	var result2 = 5 - "";				//5
	var result3 = 5 - "2";				//3
	var result4 = 5 - null;				//5
	alert("result1 = "+result1
		+"\nresult2 = "+result2
		+"\nresult3 = "+result3
		+"\nresult4 = "+result4);
}

function testfun22(){
	var num1 = 55;
	var str1 = "55";

	alert(num1 == str1);				//true
	alert(num1 === str1);				//false

	alert(num1 != str1);				//false
	alert(num1 !== str1);				//true
}


function testfun23(){					//纠结的“,”操作符
	var num1 = (1,2,3,4,5,6);			//num1 = 6
	alert(num1);
}

function testfun24(){					//test for-in
	var array = ["bao","bao","ye","ye"];
	for (var propName in array){		
								//need other part do something for for-in
		document.write(array[propName]);
		//document.write("<br/>");
	}
}

function testfun25(){					//test switch statment
	var i = 25;
	switch(i){
		case 25:
			alert("25");
			break;
		case 35:
			alert("35");
			break;
		case 45:
			alert("45");
			break;
		default:
			alert("Other");
	}
}

//---------------------------------------------------------------------------
//Function
										//function can't override
function testfun26(name, message){			//test a function have args
	alert(name + "," + message);
}

function sum(num1, num2){				//test a function have return value
	return num1 + num2;
}

function howManyArgs(){
	alert(arguments.length);
}

function testArgs(){					//test the length of arguments 
	var sum1 = sum(2,3);

	alert(sum1);
	
	howManyArgs();						//0
	howManyArgs("bao",45);				//2
	howManyArgs(12);					//1
}

下面是JS脚本对应的html文件

<html>
	<head>
		<!--
		This is a test of javascript basic syntax == html part
		by baobaoyeye
		2011-7-22
		-->
		<title>I am an test of javascript htm</title>
		<script type="text/javascript" defer="defer" src="program.js"></script>
		<!--加入了defer属性以后javascript加载的过程等到页面的其他内容完成加载,
		它才加载,就和将script脚本放在body的最后一个效果-->
	</head>
	<body>
		<div id="testdiv1" class="field">
		<input type="button" value="sayHi" οnclick="sayHi()" />
		</div>
		<div class="field">
			<input type="button" value="testfun1" οnclick="testfun1()" />
			<input type="text" id="test1show1" value="" />
			<input type="text" id="test1show2" value="" />
		</div>
		<div class="field">
			<input type="button" value="testfun2" οnclick="testfun2()" />
			<input type="text" id="test2show1" value="" />
			<input type="text" id="test2show2" value="" />	
		</div>
		<div class="field">
			<input type="button" value="testfun3" οnclick="testfun3()" />
			<input type="text" id="test3show1" value="" />
			<input type="text" id="test3show2" value="" />	
			<input type="text" id="test3show3" value="" />
			<input type="text" id="test3show4" value="" />	
			<input type="text" id="test3show5" value="" />	
			<input type="text" id="test3show6" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun4" οnclick="testfun4()" />
			<input type="text" id="test4show1" value="" />	
			<input type="text" id="test4show2" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun5" οnclick="testfun5()" />
			<input type="text" id="test5show1" value="" />	
			<input type="text" id="test5show2" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun6" οnclick="testfun6()" />
			<input type="text" id="test6show1" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun7" οnclick="testfun7()" />
		</div>
		<div class="field">
		<input type="button" value="testfun8" οnclick="testfun8()" />
			<input type="text" id="test8show1" value="" />		
			<input type="text" id="test8show2" value="" />		
			<input type="text" id="test8show3" value="" />		
			<input type="text" id="test8show4" value="" />		
			<input type="text" id="test8show5" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun9" οnclick="testfun9()" />
			<input type="text" id="test9show1" value="" />		
			<input type="text" id="test9show2" value="" />		
		</div>
		<div class="field">
		<input type="button" value="testfun10" οnclick="testfun10()" />
		</div>
		<div class="field">
		<input type="button" value="testfun11" οnclick="testfun11()" />
		</div>
		<!--
		<div class="field">
		<input type="button" value="testfun12" οnclick="testfun12()" />
		</div>
		-->
		<div class="field">
		<input type="button" value="testfun13" οnclick="testfun13()" />
		</div>
		<div class="field">
		<input type="button" value="testfun14" οnclick="testfun14()" />
		</div>
		<div class="field">
		<input type="button" value="testfun15" οnclick="testfun15()" />
		</div>
		<div class="field">
		<input type="button" value="testfun16" οnclick="testfun16()" />
		</div>
		<div class="field">
		<input type="button" value="testfun18" οnclick="testfun18()" />
		</div>
		<div class="field">
		<input type="button" value="testfun19" οnclick="testfun19()" />
		</div>
		<div class="field">
		<input type="button" value="testfun20" οnclick="testfun20()" />
		</div>
		<div class="field">
		<input type="button" value="testfun21" οnclick="testfun21()" />
		</div>
		<div class="field">
		<input type="button" value="testfun22" οnclick="testfun22()" />
		</div>
		<div class="field">
		<input type="button" value="testfun23" οnclick="testfun23()" />
		</div>
		<div class="field">
		<input type="button" value="testfun24" οnclick="testfun24()" />
		</div>
		<div class="field">
		<input type="button" value="testfun25" οnclick="testfun25()" />
		</div>
		<div class="field">
		<input type="button" value="baobaoyeye hello world" οnclick="testfun26('baobaoyeye','hello world')" />
		</div>
		<div class="field">
		<input type="button" value="testfun27" οnclick="testArgs()" />
		</div>
		<!--
		<script type="text/javasrcipt" src="program.js"></script>
		-->
	</body>
</html>


在下初学如果有错误请,大家多多批评指正!
有需要源代码的同学们,bao.renyi@gmail.com 联系我吧~~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值