JS 之基本語法 & html結合
JS之 基本語法 & 與html相結合 & JS的可變引數arguments |
|---|
一、關於JavaScript
概述:
1.簡單性 JavaScript是一種指令碼編寫語言，它採用小程式段的方式實現程式設計， 像其它指令碼語言一樣，JavaScript同樣已是一種解釋性語言，它提供了一個簡易的開發過程。 2.動態性 JavaScript是動態的，它可以直接對使用者或客戶輸入做出響應，無須經 過Web服務程式。它對使用者的反映響應，是採用以事件驅動的方式進行的。 所謂事件驅動，就是指在主頁中執行了某種操作所產生的動作，就稱為“事件”。 比如按下滑鼠、移動視窗、選擇選單等都可以視為事件。 當事件發生後，可能會引起相應的事件響應。 3.跨平臺性 JavaScript是依賴於瀏覽器本身，與操作環境無關， 只要能執行瀏覽器的計算機，並支援JavaScript的瀏覽器就可以正確執行。 4.節省CGI的互動時間 隨著WWW的迅速發展有許WWW伺服器提供的服務要與瀏覽者進 行交流，確瀏覽的身份、需服務的內等等， 這項工作通常由CGI/PERL編寫相應的介面程式與使用者進行互動來完成。 5.JavaScript是一種基於客戶端瀏覽器的語言，使用者在瀏覽中填表、 驗證的互動過程只是通過瀏覽器對調入HTML文件中的JavaScript原始碼進行解釋執行來完成 的，即使是必須呼叫CGI的部分， 瀏覽器只將使用者輸入驗證後的資訊提交給遠端的伺服器，大大減少了伺服器的開銷。
(一)、javaScript的變數型別：
數值型別： number short int long float double
字串型別： string
物件型別： object
布林型別： boolean
函式型別： function
javascript裡特殊的值：
undedined 表示未定義
null 表示為空值
NAN 表示非數字（not a number）
JS中的定義變數格式：
var 變數名;
var 變數名 = 值;
二JS的作用和用法
快捷鍵： Shift+Ctrl+C 在JavaScript中註釋
1、JavaScript和html程式碼的結合方式
2、一個Script標籤要麼用來定義javaScript程式碼，要麼用來引入單獨的js檔案
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>the script effect</title> <script type="text/javascript"> //script標籤作用一 alert("我是script標籤 我的作用之一是定義 js程式碼~~"); </script> <script type="text/javascript" src="alert2.js"> //script作用之二 引入了js檔案 alert2.js 執行引入檔案js內容（寫入檔案路徑） </script> </head> <body> <font color="blue" size="3" >我是<body>標籤 此html引入了別的地方的js</font> </body> </html>
2、JavaScript和html程式碼的結合方式
<1>只需要在head 標籤中，或者在body標籤中，使用script 標籤 可以定義JavaScript程式碼
<2>使用Script 標籤引入 單獨的JavaScript程式碼檔案
三、script的變數 關係 和 可變引數
<1>變數無型別限制所有型別均可用var 關鍵字來建立
<2>同一個變數可以接受容易的值取最後一次賦的值
<3>script不支援過載 過載即為覆蓋
<4> 0 、null、 undefined、”“(空串) 都認為是 false；
<5> 兩個物件做比較 == ==== 分別是判斷 字面值 和 （字面值以及型別）
(一)、測試Var 建立的物件 和賦值的改變過程以及型別判斷
<script type="text/javascript">
var object;
alert("我在頁面載入完成前定義了一個變數未賦值它的預設值
是"+object+"預設型別是："+ typeof(object))
window.onload=function(){
object=88;
alert("此時頁面載入完成給未賦值的object賦值int型別88 它會改變為"+object+"此時型別是："+ typeof(object));
object="hellow";
alert("重新給object賦值為String型別的'hellow' 它會改變為："+object+"此時型別是："+ typeof(object))
var a=88;
var b="88";
alert("比較a==b結果為:"+(a==b)+" 比較a===b結果為:"+(a===b));
</script>
(二)、javascript中的 && 運算和 ||運算
<1>、&& 與運算。
有兩種情況：
第一種：當表示式全為真的時候。返回最後一個表示式的值。
第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值
var a = "abc";
var b = true;
var d = false;
var c = null;
// 示例
alert( a && b ); // true
alert( b && a ); // abc
alert( d && b ); // false
alert( c && b ); // null
alert( b && c ); // null
<2>、&& 與運算。
|| 或運算
第一種情況：當表示式全為假時，返回最後一個表示式的值
第二種情況：只要有一個表示式為真。就會返回第一個為真的表示式的值
||或運算在js實際開發的時候，經常用來防止重複定義，重複定義會覆蓋掉前面所有的定義
並且 && 與運算 和 ||或運算 有短路。
短路就是說，當這個&&或||運算有結果了之後 。後面的表示式不再執行
var a = "abc";
var b = true;
var d = false;
var c = null;
alert( d || c ); // null
alert( c || d ); // false
alert( a || d ); // abc
alert( b || d ); // true
<3>Js 中的陣列：
格式：
var 陣列名 = [];
var arr = []; // 定義一個空的陣列
alert(arr.length); // 長度 0
arr[0] = 1;
// javaScript的陣列的賦值的取值，和java一樣，都是通過陣列的下標進行運算
alert(arr[0]); // 數值：1
/*
在javaScript中，當我們通過陣列下標給陣列元素進行賦值的時候
javaScript的陣列會自動的根據賦值的最大下標自動的做擴容的操作。
*/
alert(arr.length); //長度 1
arr[2] = "222";
alert(arr.length); //長度 為 3
alert(arr[1]); // undefined 第二個沒有值但是長度已經闊為3
//陣列的遍歷
for (var i = 0; i < arr.length; i++) {
alert("陣列的第" + (i + 1 ) + "個元素值為：" + arr[i]);
}
var arr2 = ["abc",12,true];
alert(arr2.length); // 長度為3
arr2[4] = 12;
alert(arr2.length); // 長度為5
}
</script>
</head>
<body>
<font color="red" size="4px">我是<body>注意：標籤 script一般不再這裡定義使用</font>
</body>
</html>
四 JS之可變引數arguments
1、arguments相對於Java 中的可變長引數
public void fun( Object … params ){} params是一個接收引數的陣列
2、在function內可用arguments[i]來獲取傳入的可變引數
arguments在函式體內可以直接使用，不需要我們去定義。
3、它可以接收所有的函式引數值，arguments的值跟陣列一樣
4、在JavaScript中函式在呼叫的時候，傳遞的引數會從左到右，依次對函式的引數進行賦值
沒有 被賦到值的引數預設值為undefined
如下舉例：傳入可變個引數
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sum(){
//定義一個變數儲存相加的和
var result = 0;
// 遍歷陣列arguments
for (var i = 0; i < arguments.length; i++ ) {
// 獲取每一個變數相加
var p = arguments[i];
alert(typeof(p)+" 值 "+p);
if ( typeof(p) == "number" ) {
result += p;
}
}
return result;
}
var result = sum(12,88,"100",50);
alert("所求的和為傳入的number型別資料之和："+result);
</script>
</head>
<body>
</body>
</html>