1. 程式人生 > >JavaScript的一些重要知識點(不定時更新)

JavaScript的一些重要知識點(不定時更新)

這裡記錄我學習JavaScript過程中覺得比較重要的知識點,會隨著學習不定時更新,歡迎收藏

目錄

1.重新宣告 JavaScript 變數

2.Undefined 和 Null

輸出結果:

3.宣告變數型別

4.JavaScript 變數的作用域

        區域性 JavaScript 變數

        全域性 JavaScript 變數

        JavaScript 變數的生存期

        向未宣告的 JavaScript 變數來分配值

5.JavaScript 賦值運算子

6.JavaScript 標籤

語法

例項

執行結果:

7.JavaScript 測試和捕捉

例項

執行結果:

Throw 語句

例項

執行結果:

8.建立 JavaScript 物件

建立直接的例項

例項

使用物件構造器

例項

9.JavaScript 數字

所有 JavaScript 數字均為 64 位

精度

八進位制和十六進位制

10.Boolean 物件

11.瀏覽器頁面後退前進

Window History Back

例項

Window History Forward

例項


 

 

1.重新宣告 JavaScript 變數

如果重新宣告 JavaScript 變數,該變數的值不會丟失:

在以下兩條語句執行後,變數 carname 的值依然是 "Volvo":

var carname="Volvo";
var carname;

2.Undefined 和 Null

Undefined 這個值表示變數不含有值。

可以通過將變數的值設定為 null 來清空變數。

<!DOCTYPE html>
<html>
<body>

<script>
var person;
var car="Volvo";
document.write(person + "<br />");
document.write(car + "<br />");
var car=null
document.write(car + "<br />");
</script>

</body>
</html>

輸出結果:

undefined
Volvo
null

3.宣告變數型別

當您宣告新變數時,可以使用關鍵詞 "new" 來宣告其型別:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 變數均為物件。當您宣告一個變數時,就建立了一個新的物件。

4.JavaScript 變數的作用域

        區域性 JavaScript 變數

            在 JavaScript 函式內部宣告的變數(使用 var)是區域性變數,所以只能在函式內部訪問它。(該變數的作用域是區域性的)。您可以在不同的函式中使用名稱相同的區域性變數,因為只有宣告過該變數的函式才能識別出該變數。只要函式執行完畢,本地變數就會被刪除。

        全域性 JavaScript 變數

           在函式外宣告的變數是全域性變數,網頁上的所有指令碼和函式都能訪問它。

        JavaScript 變數的生存期

           JavaScript 變數的生命期從它們被宣告的時間開始。

           區域性變數會在函式執行以後被刪除。

           全域性變數會在頁面關閉後被刪除。

        向未宣告的 JavaScript 變數來分配值

           如果您把值賦給尚未宣告的變數,該變數將被自動作為全域性變數宣告。

           這條語句:

carname="Volvo";

          將宣告一個全域性變數 carname,即使它在函式內執行。

5.JavaScript 賦值運算子

賦值運算子用於給 JavaScript 變數賦值。

給定 x=10 和 y=5,下面的表格解釋了賦值運算子:

6.JavaScript 標籤

如需標記 JavaScript 語句,請在語句之前加上冒號:

label:
語句
break 和 continue 語句僅僅是能夠跳出程式碼塊的語句。

語法

break labelname;

continue labelname;

continue 語句(帶有或不帶標籤引用)只能用在迴圈中。

break 語句(不帶標籤引用),只能用在迴圈或 switch 中。

通過標籤引用,break 語句可用於跳出任何 JavaScript 程式碼塊:

例項

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list;
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 
}
</script>

</body>
</html>

執行結果:

BMW
Volvo
Saab

7.JavaScript 測試和捕捉

try 語句允許我們定義在執行時進行錯誤測試的程式碼塊。

catch 語句允許我們定義當 try 程式碼塊發生錯誤時,所執行的程式碼塊。

JavaScript 語句 try 和 catch 是成對出現的。

例項

在下面的例子中,我們故意在 try 塊的程式碼中寫了一個錯字。

catch 塊會捕捉到 try 塊中的錯誤,並執行程式碼來處理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

執行結果:

Throw 語句

throw 語句允許我們建立自定義錯誤。

正確的技術術語是:建立或丟擲異常(exception)。

如果把 throw 與 try 和 catch 一起使用,那麼您能夠控制程式流,並生成自定義的錯誤訊息。

例項

<!DOCTYPE html>
<html>
<body>

<script>
function myFunction()
{
try
{ 
var x=document.getElementById("demo").value;
if(x=="")    throw "值為空";
if(isNaN(x)) throw "不是數字";
if(x>10)     throw "太大";
if(x<5)      throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="錯誤:" + err + "。";
}
}
</script>

<h1>我的第一個 JavaScript 程式</h1>
<p>請輸入 5 到 10 之間的數字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">測試輸入值</button>
<p id="mess"></p>

</body>
</html>

執行結果:

8.建立 JavaScript 物件

建立直接的例項

這個例子建立了物件的一個新例項,並向其添加了四個屬性:

例項

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

使用物件構造器

本例使用函式來構造物件:

例項

<!DOCTYPE html>
<html>
<body>

<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

9.JavaScript 數字

所有 JavaScript 數字均為 64 位

JavaScript 不是型別語言。與許多其他程式語言不同,JavaScript 不定義不同型別的數字,比如整數、短、長、浮點等等。

JavaScript 中的所有數字都儲存為根為 10 的 64 位(8 位元),浮點數。

精度

整數(不使用小數點或指數計數法)最多為 15 位。

小數的最大位數是 17,但是浮點運算並不總是 100% 準確

八進位制和十六進位制

如果字首為 0,則 JavaScript 會把數值常量解釋為八進位制數,如果字首為 0 和 "x",則解釋為十六進位制數。

10.Boolean 物件

下面的所有的程式碼行均會建立初始值為 false 的 Boolean 物件。

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

下面的所有的程式碼行均會創初始值為 true 的 Boolean 物件:

var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

11.瀏覽器頁面後退前進

Window History Back

history.back() 方法載入歷史列表中的前一個 URL。

這與在瀏覽器中點選後退按鈕是相同的:

例項

在頁面上建立後退按鈕:

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward

history forward() 方法載入歷史列表中的下一個 URL。

這與在瀏覽器中點選前進按鈕是相同的:

例項

在頁面上建立一個向前的按鈕:

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>