1.第一種方式:在時間句柄后太假js代碼;
例如瀏覽器彈出對話框;
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>無標題文檔</title> 7 </head> 8 9 <body> 10 <!--JavaScript是基於事件驅動型的編程語言,當發生某個特殊的事件的時候執行一段特殊的程序--> 11 <!--每一個時間都會對應一個事件句柄,事件句柄的名稱:on+事件名--> 12 <!--程序員可以在事件句柄后"注冊"js代碼--> 13 <!--當事件發生時瀏覽器自動執行事件句柄后的js代碼--> 14 <!--window是js中的內置對象,代表整個窗口屬於BOM的一員--> 15 <!--window這個內置對象有一個方法,叫做alert,這個方法可以彈出消息框--> 16 <!--JS語句以分號結尾--> 17 <button type="button" onclick="window.alert('hello world')">請點擊我</button> 18 19 </body> 20 </html>
2.第二種:讓瀏覽器彈出對話框也可以把js代碼寫在獨立腳本塊中:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <!-- TemplateBeginEditable name="doctitle" --> 7 <title>無標題文檔</title> 8 <!-- TemplateEndEditable --> 9 <!-- TemplateBeginEditable name="head" --> 10 <!-- TemplateEndEditable --> 11 <!--獨立腳本塊,其中可以編寫js代碼;獨立腳本塊既可以放在head中,可以出現在hmtl中的任何位置--> 12 <script type="text/javascript"> 13 //在整個頁面加載過程中之上而下的順序解釋執行 14 //並且alert方法具有阻塞作用,只有點擊確定后alert方法才算執行完成,頁面中才會出現"注冊" 15 alert("hello"); 16 </script> 17 </head> 18 19 <body> 20 注冊 21 </body> 22 </html>
3.第三種方式:將js文件(專門寫js代碼)引用到html中
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>無標題文檔</title> 7 <script type="text/javascript" src="1.js"> 8 9 //這里不能寫js代碼 10 //alert("你好,世界"); 11 </script> 12 </head> 13 14 <body> 15 注冊 16 </body> 17 </html>
4.js中的變量
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <!-- TemplateBeginEditable name="doctitle" --> 7 <title>JS中的變量</title> 8 <!-- TemplateEndEditable --> 9 <!-- TemplateBeginEditable name="head" --> 10 <!-- TemplateEndEditable --> 11 <script type="text/javascript" > 12 13 /* 14 1.什么是變量? 15 -內存中存儲數據的最基本的單元 16 17 2.變量怎么聲明? 18 -java是一種強類型的語言 19 強類型:java語言是由編譯階段,在編譯階段就確定了變量的數據類型 20 例如:int i=10; 21 以上程序通過編譯之后,i變量的數據類型從始至終都是int類型,不能將其他數據類型的值賦給i變量。例如:i="abc"; 22 以上程序不能通過編譯。 23 這種類型稱為強類型; 24 -jsvascript是一種弱類型編程語言 25 弱類型:javascript這種腳本語言,以普通形式保存,不需要編譯,直接運行。沒有編譯期。 26 弱類型的特征:變量的數據類型是可以隨意改變。 27 int i=100;//在javascript中不需要這樣編寫,因為沒有編譯期了。 28 29 var a=100;//javascript中是這樣做的 30 a="abc";//程序執行到此,a為字符串類型 31 a=true;//a為boolear類型 32 a=3.2;//a 為浮點類型 33 -變量聲明的語法格式: 34 var 變量名; 35 36 3.變量如何賦值? 37 變量賦值格式: 38 變量名=值; 39 *重點:js中的變量若沒有顯示賦值,系統默認賦值undefined;undefined在js中是一個具體的值,表示未定義。 40 41 4.全局變量,局部變量? 42 js中遵循就近原則,全局變量作用域是整個js程序,局部變量的作用域只是某個函數 43 44 5.一行上可以定義多個變量 45 */ 46 //若沒有給變量賦值,系統默認undefined 47 var ename; 48 alert("ename:"+ename); 49 50 //可以賦其他類型的值 51 ename="SMITH"; 52 alert("ename:"+ename); 53 54 ename=100; 55 alert("ename:"+(ename+1)); 56 57 ename=false; 58 alert("ename:"+(ename?"ABC":"DEF")); 59 60 //js中字符串可以使用單引號 61 ename='abcdf'; 62 alert("ename:"+ename); 63 64 //a,b的值都是undefined;c的值為300; 65 var a,b,c=300; 66 67 alert(a); 68 alert(b); 69 alert(c); 70 71 </script> 72 </head> 73 74 <body> 75 76 </body> 77 </html>
5.js中的函數
(1)js中的函數定義方式:
第一種定義方式:function 函數名(形參列表){
js語句;
}
第二中定義方式:函數名=function(形參列表){
js語句;
}
(2)js中的函數無返回值類型;其函數的可以返回任意類型的數據,也可以無返回值;當函數無返回值的時候默認返回undefine;
(3)js中的函數沒有重載機制,在同一個js代碼中,不能出現兩個同名函數;
(4)當函數返回NaN時,表示返回的結果本應該是一個數字,但是實際返回的結果不是一個數字;
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>無標題文檔</title> 7 <script type="text/javascript"> 8 9 //這段js語句直接暴露在script標簽中,整個html頁面加載的時候自上而下的順序執行 10 window.alert("測試程序"); 11 /* 12 4.js中的函數怎么定義? 13 語法格式1: 14 function 函數名(形參列表){ 15 16 js語句構成的函數體; 17 18 } 19 語法格式2: 20 函數名=function(形參列表){ 21 22 函數體; 23 24 } 25 26 27 function testFun(){ 28 29 //js的函數執行結束之后的返回值類型是任意的,也可以不返回任何數據,當函數沒用返回值的時候默認返回undefine; 30 31 //return 100; 32 //return "Hello"; 33 //return 12.0; 34 35 } 36 37 function sum(a,b){ 38 39 40 } 41 42 怎么調用函數?以下都可以 43 sum(10,20); 44 sum("abs","def"); 45 sum(2.0,3.0); 46 sum(3.6); 47 sum(); 48 49 注意:js中的函數沒有重載機制 50 在同一個js代碼中,函數名不能重名 51 52 */ 53 function sayHello(){ 54 55 alert("helllo World"); 56 57 } 58 59 sayHello();//js語句,直接暴露在js標簽中 60 61 function sum(a,b){ 62 63 return a+b; 64 65 } 66 function testFun1(){ 67 68 69 70 } 71 72 </script> 73 </head> 74 75 <body> 76 <input type="button" value="sayHello" onclick="sayHello()"> 77 78 <!--NaN:表示Not a Number"--> 79 <!-- 80 js中什么情況下結果是NaN? 81 計算結果本應該返回一個數字,但是結果並不是一個數字,結果就是NaN--> 82 <input type="button" value="sum1" onclick="alert(sum())"> 83 <input type="button" value="sum2" onclick="alert(sum(1,2))"> 84 <input type="button" value="sum3" onclick="alert(sum(1))"> 85 <input type="button" value="sum4" onclick="alert(testFun1())"> 86 87 </body> 88 </html>