前天下午开始学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 联系我吧~~