您現在的位置是：首頁 > 垂釣
JavaScript 常用功能介紹 JS變數、資料型別、語句等使用說明
- 由 小焱2018 發表于 垂釣
- 2022-10-20
undefined的js怎麼處理
JavaScript 簡介
JavaScript 是世界上最流行的程式語言。
這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。
JavaScript 是指令碼語言
JavaScript 是一種輕量級的程式語言。
JavaScript 是可插入 HTML 頁面的程式設計程式碼。
JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
JavaScript 很容易學習。
您將學到什麼
下面是您將在本教程中學到的主要內容。
JavaScript：寫入 HTML 輸出
例項
document。write（“
This is a heading
”）；document。write（“This is a paragraph
”）；提示：您只能在 HTML 輸出中使用 document。write。如果您在文件載入後使用該方法，會覆蓋整個文件。
JavaScript：對事件作出反應
例項
alert（） 函式在 JavaScript 中並不常用，但它對於程式碼測試非常方便。
onclick 事件只是您即將在本教程中學到的眾多事件之一。
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
例項
x=document。getElementById（“demo”） //查詢元素x。innerHTML=“Hello JavaScript”； //改變內容
您會經常看到 document。getElementByID（“
some id
”）。這個方法是 HTML DOM 中定義的。
DOM（文件物件模型）是用以訪問 HTML 元素的正式 W3C 標準。
您將在本教程的多個章節中學到有關 HTML DOM 的知識。
JavaScript：改變 HTML 影象
本例會動態地改變 HTML
The Light bulb
點選燈泡就可以開啟或關閉這盞燈
JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。
JavaScript：改變 HTML 樣式
改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。
例項
x=document。getElementById（“demo”） //找到元素x。style。color=“#ff0000”； //改變樣式
JavaScript：驗證輸入
JavaScript 常用於驗證使用者的輸入。
例項
if isNaN（x） {alert（“Not Numeric”）}；
您知道嗎？
提示：JavaScript 與 Java 是兩種完全不同的語言，無論在概念還是設計上。
Java（由 Sun 發明）是更復雜的程式語言。
ECMA-262 是 JavaScript 標準的官方名稱。
JavaScript 由 Brendan Eich 發明。它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。
JavaScript 使用
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
JavaScript 輸出
JavaScript 通常用於操作 HTML 元素。
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document。getElementById（
id
） 方法。
請使用 “id” 屬性來標識 HTML 元素：
例子
透過指定的 id 來訪問 HTML 元素，並改變其內容：
<！DOCTYPE html>
My First Web Page
My First Paragraph
JavaScript 由 web 瀏覽器來執行。在這種情況下，瀏覽器將訪問 id=“demo” 的 HTML 元素，並把它的內容（innerHTML）替換為 “My First JavaScript”。
寫到文件輸出
下面的例子直接把
元素寫到 HTML 文件輸出中：
例項
<！DOCTYPE html>
My First Web Page
警告
請使用 document。write（） 僅僅向文件輸出寫內容。
如果在文件已完成載入後執行 document。write，整個 HTML 頁面將被覆蓋：
例項
<！DOCTYPE html>
My First Web Page
My First Paragraph。
Windows 8 中的 JavaScript
提示：微軟支援透過 JavaScript 建立 Windows 8 app。
對於因特網和視窗作業系統，JavaScript 都意味著未來。
JavaScript 語句
JavaScript 語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什麼。
下面的 JavaScript 語句向 id=“demo” 的 HTML 元素輸出文字 “Hello World”：
document。getElementById（“demo”）。innerHTML=“Hello World”；
分號 ；
分號用於分隔 JavaScript 語句。
通常我們在每條可執行的語句結尾新增分號。
使用分號的另一用處是在一行中編寫多條語句。
提示：您也可能看到不帶有分號的案例。
在 JavaScript 中，用分號來結束語句是可選的。
JavaScript 程式碼
JavaScript 程式碼（或者只有 JavaScript）是 JavaScript 語句的序列。
瀏覽器會按照編寫順序來執行每條語句。
本例將操作兩個 HTML 元素：
例項
document。getElementById（“demo”）。innerHTML=“Hello World”；document。getElementById（“myDIV”）。innerHTML=“How are you？”；
JavaScript 程式碼塊
JavaScript 語句透過程式碼塊的形式進行組合。
塊由左花括號開始，由右花括號結束。
塊的作用是使語句序列一起執行。
JavaScript 函式是將語句組合在塊中的典型例子。
下面的例子將執行可操作兩個 HTML 元素的函式：
例項
function myFunction（）{document。getElementById（“demo”）。innerHTML=“Hello World”；document。getElementById（“myDIV”）。innerHTML=“How are you？”；}
您將在稍後的章節學到更多有關函式的知識。
JavaScript 對大小寫敏感。
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函式 getElementById 與 getElementbyID 是不同的。
同樣，變數 myVariable 與 MyVariable 也是不同的。
空格
JavaScript 會忽略多餘的空格。您可以向指令碼新增空格，來提高其可讀性。下面的兩行程式碼是等效的：
var name=“Hello”；var name = “Hello”；
對程式碼行進行折行
您可以在文字字串中使用反斜槓對程式碼行進行換行。下面的例子會正確地顯示：
document。write（“Hello \World！”）；
不過，您不能像這樣折行：
document。write \（“Hello World！”）；
您知道嗎？
提示：JavaScript 是指令碼語言。瀏覽器會在讀取程式碼時，逐行地執行指令碼程式碼。而對於傳統程式設計來說，會在執行前對所有程式碼進行編譯。
JavaScript 註釋
JavaScript 註釋可用於提高程式碼的可讀性。
JavaScript 註釋
JavaScript 不會執行註釋。
我們可以添加註釋來對 JavaScript 進行解釋，或者提高程式碼的可讀性。
單行註釋以 // 開頭。
例子
下面的例子使用單行註釋來解釋程式碼：
// 輸出標題：document。getElementById（“myH1”）。innerHTML=“Welcome to my Homepage”；// 輸出段落：document。getElementById（“myP”）。innerHTML=“This is my first paragraph。”；
JavaScript 多行註釋
多行註釋以 /
開始，以
/ 結尾。
下面的例子使用多行註釋來解釋程式碼：
例子
/*下面的這些程式碼會輸出一個標題和一個段落並將代表主頁的開始*/document。getElementById（“myH1”）。innerHTML=“Welcome to my Homepage”；document。getElementById（“myP”）。innerHTML=“This is my first paragraph。”；
使用註釋來阻止執行
例子 1
在下面的例子中，註釋用於阻止其中一條程式碼行的執行（可用於除錯）：
//document。getElementById（“myH1”）。innerHTML=“Welcome to my Homepage”；document。getElementById（“myP”）。innerHTML=“This is my first paragraph。”；
例子 2
在下面的例子中，註釋用於阻止程式碼塊的執行（可用於除錯）：
/*document。getElementById（“myH1”）。innerHTML=“Welcome to my Homepage”；document。getElementById（“myP”）。innerHTML=“This is my first paragraph。”；*/
在行末使用註釋
在下面的例子中，我們把註釋放到程式碼行的結尾處：
例子
var x=5； // 宣告 x 並把 5 賦值給它var y=x+2； // 宣告 y 並把 x+2 賦值給它
JavaScript 變數
變數是儲存資訊的容器。
例項
var x=2；var y=3；var z=x+y；
就像代數那樣
x=2y=3z=x+y
在代數中，我們使用字母（比如 x）來儲存值（比如 2）。
透過上面的表示式 z=x+y，我們能夠計算出 z 的值為 5。
在 JavaScript 中，這些字母被稱為變數。
提示：您可以把變數看做儲存資料的容器。
JavaScript 變數
與代數一樣，JavaScript 變數可用於存放值（比如 x=2）和表示式（比如 z=x+y）。
變數可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age， sum， totalvolume）。
變數必須以字母開頭
變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
變數名稱對大小寫敏感（y 和 Y 是不同的變數）
提示：JavaScript 語句和 JavaScript 變數都對大小寫敏感。
JavaScript 資料型別
JavaScript 變數還能儲存其他資料型別，比如文字值 （name=“Bill Gates”）。
在 JavaScript 中，類似 “Bill Gates” 這樣一條文字被稱為字串。
JavaScript 變數有很多種型別，但是現在，我們只關注數字和字串。
當您向變數分配文字值時，應該用雙引號或單引號包圍這個值。
當您向變數賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文字來處理。
例子
var pi=3。14；var name=“Bill Gates”；var answer=‘Yes I am！’；
宣告（建立） JavaScript 變數
在 JavaScript 中建立變數通常稱為“宣告”變數。
我們使用 var 關鍵詞來宣告變數：
var carname；
變數宣告之後，該變數是空的（它沒有值）。
如需向變數賦值，請使用等號：
carname=“Volvo”；
不過，您也可以在宣告變數時對其賦值：
var carname=“Volvo”；
例子
在下面的例子中，我們建立了名為 carname 的變數，並向其賦值 “Volvo”，然後把它放入 id=“demo” 的 HTML 段落中：
var carname=“Volvo”；document。getElementById（“demo”）。innerHTML=carname；提示：一個好的程式設計習慣是，在程式碼開始處，統一對需要的變數進行宣告。
一條語句，多個變數
您可以在一條語句中宣告很多變數。該語句以 var 開頭，並使用逗號分隔變數即可：
var name=“Gates”， age=56， job=“CEO”；
宣告也可橫跨多行：
var name=“Gates”，age=56，job=“CEO”；
Value = undefined
在計算機程式中，經常會宣告無值的變數。未使用值來宣告的變數，其值實際上是 undefined。
在執行過以下語句後，變數 carname 的值將是 undefined：
var carname；
重新宣告 JavaScript 變數
如果重新宣告 JavaScript 變數，該變數的值不會丟失：
在以下兩條語句執行後，變數 carname 的值依然是 “Volvo”：
var carname=“Volvo”；var carname；
JavaScript 算數
您可以透過 JavaScript 變數來做算數，使用的是 = 和 + 這類運算子：
例子
y=5；x=y+2；
您將在本教程稍後的章節學到更多有關 JavaScript 運算子的知識。
JavaScript 資料型別
字串、數字、布林、陣列、物件、Null、Undefined
JavaScript 擁有動態型別
JavaScript 擁有動態型別。這意味著相同的變數可用作不同的型別：
例項
var x // x 為 undefinedvar x = 6； // x 為數字var x = “Bill”； // x 為字串
JavaScript 字串
字串是儲存字元（比如 “Bill Gates”）的變數。
字串可以是引號中的任意文字。您可以使用單引號或雙引號：
例項
var carname=“Bill Gates”；var carname=‘Bill Gates’；
您可以在字串中使用引號，只要不匹配包圍字串的引號即可：
例項
var answer=“Nice to meet you！”；var answer=“He is called ‘Bill’”；var answer=‘He is called “Bill”’；
您將在本教程的高階部分學到更多關於字串的知識。
JavaScript 數字
JavaScript 只有一種數字型別。數字可以帶小數點，也可以不帶：
例項
var x1=34。00； //使用小數點來寫var x2=34； //不使用小數點來寫
極大或極小的數字可以透過科學（指數）計數法來書寫：
例項
var y=123e5； // 12300000var z=123e-5； // 0。00123
您將在本教程的高階部分學到更多關於數字的知識。
JavaScript 布林
布林（邏輯）只能有兩個值：true 或 false。
var x=truevar y=false
布林常用在條件測試中。您將在本教程稍後的章節中學到更多關於條件測試的知識。
JavaScript 陣列
下面的程式碼建立名為 cars 的陣列：
var cars=new Array（）；cars［0］=“Audi”；cars［1］=“BMW”；cars［2］=“Volvo”；
或者 （condensed array）：
var cars=new Array（“Audi”，“BMW”，“Volvo”）；
或者 （literal array）：
例項
var cars=［“Audi”，“BMW”，“Volvo”］；
陣列下標是基於零的，所以第一個專案是 ［0］，第二個是 ［1］，以此類推。
您將在本教程稍後的章節中學到更多關於陣列的知識。
JavaScript 物件
物件由花括號分隔。在括號內部，物件的屬性以名稱和值對的形式 （name ： value） 來定義。屬性由逗號分隔：
var person={firstname：“Bill”， lastname：“Gates”， id：5566}；
上面例子中的物件 （person） 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。宣告可橫跨多行：
var person={firstname ： “Bill”，lastname ： “Gates”，id ： 5566}；
物件屬性有兩種定址方式：
例項
name=person。lastname；name=person［“lastname”］；
您將在本教程稍後的章節中學到更多關於物件的知識。
Undefined 和 Null
Undefined 這個值表示變數不含有值。
可以透過將變數的值設定為 null 來清空變數。
例項
cars=null；person=null；
宣告變數型別
當您宣告新變數時，可以使用關鍵詞 “new” 來宣告其型別：
var carname=new String；var x= new Number；var y= new Boolean；var cars= new Array；var person= new Object；
JavaScript 變數均為物件。當您宣告一個變數時，就建立了一個新的物件。
我建了一個前端學習群，有興趣學習的同學可以關注我：
前端學習交流 - 知乎