JavaScript可以提供漂亮的網頁、令用戶滿意的上網體驗。
1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)
2.實現頁面與用戶之間的實時、動態交互(如:用戶注冊、登陸驗證等)
引用JavaScript:
一、使用<script>標簽在HTML文件中添加JavaScript代碼,如圖:
二、HTML文件和JS代碼分開,并單獨創建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js,然后將JS代碼直接寫在JS文件中。
注意:在JS文件中,不需要<script>標簽,直接編寫JavaScript代碼就可以了。
JS文件不能直接運行,需嵌入到HTML文件中執行,我們需在HTML中添加如下代碼,就可將JS文件嵌入HTML文件中。
<script src="script.js"></script>
我們可以將JavaScript代碼放在html文件中任何位置,但是我們一般放在網頁的head或者body部分。
放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素,瀏覽器解析head部分就會執行這個代碼,然后才解析頁面的其余部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。
注意:?javascript作為一種腳本語言可以放在html頁面中任何位置,但是瀏覽器解釋html時是按先后順序的,所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面,因為初始化都要求提前進行(如給頁面body設置css等);而如果是通過事件調用執行的function那么對位置沒什么要求的。
語句和符號:
JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。
每一句JavaScript代碼格式:?語句;
先來看看下面代碼
<script type="text/javascript">
alert("hello!");
</script>
例子中的alert("hello!");
就是一個JavaScript語句。
一行的結束就被認定為語句的結束,通常在結尾加上一個分號";"
來表示語句的結束。
看看下面這段代碼,有三條語句,每句結束后都有";",按順序執行語句。
<script type="text/javascript">document.write("I");document.write("love");document.write("JavaScript");
</script>
注意:
1.?“;”分號要在英文狀態下輸入,同樣,JS中的代碼和符號都要在英文狀態下輸入。
2.?雖然分號“;”也可以不寫,但我們要養成編程的好習慣,記得在語句末尾寫上分號。
注釋:
注釋能提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的JavaScript代碼,注釋的內容不會在網頁中顯示。注釋可分為單行注釋與多行注釋兩種。
我們為了方便閱讀,注釋內容一般放到需要解釋語句的結尾處或周圍。
單行注釋,在注釋內容前加符號 “//”。
<script type="text/javascript">document.write("單行注釋使用'//'"); // 我是注釋,該語句功能在網頁中輸出內容
</script>
多行注釋以"/*"開始,以"*/"結束。
<script type="text/javascript">document.write("多行注釋使用/*注釋內容*/");/*多行注釋養成書寫注釋的良好習慣*/
</script>
變量:
從字面上看,變量是可變的量;從編程角度講,變量是用于存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子,為了區分盒子,可以用BOX1,BOX2等名稱代表不同盒子,BOX1就是盒子的名字(也就是變量的名字)。
定義變量使用關鍵字var,語法如下:
var 變量名
變量名可以任意取名,但要遵循命名規則:
? ? 1.變量必須使用字母、下劃線(_)或者美元符($)開始。
? ? 2.然后可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。
? ? 3.不能使用JavaScript關鍵詞與JavaScript保留字。
變量要先聲明再賦值,如下:
var mychar;
mychar="javascript";
var mynum = 6;
變量可以重復賦值,如下:
var mychar;
mychar="javascript";
mychar="hello";
注意:
1. 在JS中區分大小寫,如變量mychar與myChar是不一樣的,表示是兩個變量。
2. 變量雖然也可以不聲明,直接使用,但不規范,需要先聲明,后使用。
判斷語句:
if...else語句是在指定的條件成立時執行代碼,在條件不成立時執行else后的代碼。
語法:
if(條件)
{ 條件成立時執行的代碼 }
else
{ 條件不成立時執行的代碼 }
假設我們通過年齡來判斷是否為成年人,如年齡大于等于18歲,是成年人,否則不是成年人。代碼表示如下:
<script type="text/javascript">
var myage = 18;if(myage>=18) //myage>=18是判斷條件
{ document.write("你是成年人。");}
else //否則年齡小于18
{ document.write("未滿18歲,你不是成年人。");}
</script>
函數:
函數是完成某個特定功能的一組語句。如沒有函數,完成任務可能需要五行、十行、甚至更多的代碼。這時我們就可以把完成特定功能的代碼塊放到一個函數里,直接調用這個函數,就省重復輸入大量代碼的麻煩。
如何定義一個函數呢?基本語法如下:
function 函數名()
{函數代碼;
}
說明:
1. function定義函數的關鍵字。
2. "函數名"你為函數取的名字。
3. "函數代碼"替換為完成特定功能的代碼。
我們來編寫一個實現兩數相加的簡單函數,并給函數起個有意義的名字:“add2”,代碼如下:
function add2(){var sum = 3 + 2;alert(sum);
}
函數調用:函數定義好后,是不能自動執行的,所以需調用它,只需直接在需要的位置寫函數就ok了,代碼如下(單擊按鈕后,調用函數onclick):
輸出內容:
警告對話框:
我們在訪問網站的時候,有時會突然彈出一個小窗口,上面寫著一段提示信息文字。如果你不點擊“確定”,就不能對網頁做任何操作,這個小窗口就是使用alert實現的。
語法:
alert(字符串或變量);
看下面的代碼:
<script type="text/javascript">var mynum = 30;alert("hello!");alert(mynum);
</script>
注:alert彈出消息對話框(包含一個確定按鈕)。
結果:按順序彈出消息框
注意:
1. 在點擊對話框"確定"按鈕前,不能進行任何其它操作。
2. 消息對話框通常可以用于調試程序。
3. alert輸出內容,可以是字符串或變量,與document.write 相似。
確認對話框:
confirm 消息對話框通常用于允許用戶做選擇的動作,如:“你對嗎?”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
語法:
confirm(str);
參數說明:
str:在消息對話框中要顯示的文本
返回值: Boolean值
返回值:
當用戶點擊"確定"按鈕時,返回true
當用戶點擊"取消"按鈕時,返回false
注:?通過返回值可以判斷用戶點擊了什么按鈕
看下面的代碼:
<script type="text/javascript">var mymessage=confirm("你喜歡JavaScript嗎?");if(mymessage==true){ document.write("很好,加油!"); }else{ document.write("JS功能強大,要學習噢!"); }
</script>
結果:
注: 消息對話框是排它的,即用戶在點擊對話框按鈕前,不能進行任何其它操作。
提問對話框:
prompt
彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框(包含一個確定按鈕、取消按鈕與一個文本輸入框)。
語法:
prompt(str1, str2);
參數說明:
str1: 要顯示在消息對話框中的文本,不可修改
str2:文本框中的內容,可以修改
返回值:
1. 點擊確定按鈕,文本框中的內容將作為函數返回值
2. 點擊取消按鈕,將返回null
看看下面代碼:
var myname=prompt("請輸入你的姓名:");
if(myname!=null){ alert("你好"+myname); }
else{ alert("你好 my friend."); }
結果:
注:在用戶點擊對話框的按鈕前,不能進行任何其它操作。
打開新窗口:
open() 方法用于打開一個新的窗口。
語法:
window.open(<URL>, <窗口名稱>, <參數字符串>)
參數說明:
URL:打開窗口的網址或路徑。
窗口名稱:被打開窗口的名稱。可以是"_top"、"_blank"、"_selft"等。
參數字符串:設置窗口參數,各參數用逗號隔開。
參數表:
例如:打開http://www.imooc.com網站,大小為300px * 200px,無菜單,無工具欄,無狀態欄,有滾動條窗口:
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
注意:
1.參數之間逗號及等號前后有空格,該字符串無效,只有刪除空格才能正常運行。
2.運行結果考慮瀏覽器兼容問題。
關閉窗口:
close()關閉窗口
用法:
window.close(); //關閉本窗口
或
<窗口對象>.close(); //關閉指定的窗口
例如:關閉新建的窗口。
<script type="text/javascript">var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象,存儲在變量mywin中mywin.close();
</script>
注意:上面代碼在打開新窗口的同時,關閉該窗口,看不到被打開的窗口。
————————————————————————————————————————————————————————————————
以上內容參考自慕課網:http://www.imooc.com