1. 程式人生 > >1在html中添加js代碼的三種方式

1在html中添加js代碼的三種方式

abc cti 浮點 fine 時間 4.0 完成 span 作用域

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>

1在html中添加js代碼的三種方式