1在html中添加js代碼的三種方式以及js中變量,函數


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM