JavaScriptJavaScript入門

備註

JavaScript(不要與Java混淆)是一種動態的,弱類型的語言,用於客戶端和服務器端腳本。

JavaScript是一種區分大小寫的語言。這意味著該語言認為大寫字母與小寫字母不同。 JavaScript中的關鍵字都是小寫的。

JavaScript是ECMAScript標準的通用引用實現。

除非另有說明,否則此標記中的主題通常是指在瀏覽器中使用JavaScript。瀏覽器無法直接運行JavaScript文件;有必要將它們嵌入HTML文檔中。如果您有一些想要嘗試的JavaScript代碼,可以將其嵌入到像這樣的佔位符內容中,並將結果保存為example.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

版本

發布日期
1 1997年6月1日
2 1998年6月1日
3 1998-12-01
E4X 2004-06-01
2009-12-01
5.1 2011-06-01
6 2015年6月1日
7 2016年6月14日
8 2017年6月27日

使用console.log()

介紹

所有現代Web瀏覽器,NodeJ以及幾乎所有其他JavaScript環境都支持使用一套日誌記錄方法將消息寫入控制台。這些方法中最常見的是console.log()

在瀏覽器環境中, console.log() 函數主要用於調試目的。


入門

在瀏覽器中打開 JavaScript控制台,鍵入以下內容,然後按Enter鍵

console.log("Hello, World!"); 

這會將以下內容記錄到控制台:

Google Chrome中的控制台日誌輸出

在上面的例子中, console.log() 函數打印Hello, World! 到控制台並返回undefined (在控制台輸出窗口中顯示)。這是因為console.log() 沒有顯式的返回值


記錄變量

console.log() 可用於記錄任何類型的變量;不僅是字符串。只需傳入要在控制台中顯示的變量,例如:

var foo = "bar";
console.log(foo);
 

這會將以下內容記錄到控制台:

console.log()可以與變量一起使用

如果要記錄兩個或更多值,只需用逗號分隔即可。在連接期間,每個參數之間將自動添加空格:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
這會將以下內容記錄到控制台:

控制台Concat


佔位符

您可以將console.log() 與占位符結合使用:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 

這會將以下內容記錄到控制台:

在此處輸入圖像描述


記錄對象

下面我們看到記錄對象的結果。這對於從API調用記錄JSON響應通常很有用。

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

這會將以下內容記錄到控制台:

在控制台中記錄對象


記錄HTML元素

您可以記錄DOM中存在的任何元素。在這種情況下,我們記錄body元素:

console.log(document.body);
 

這會將以下內容記錄到控制台:

在此處輸入圖像描述


結束註釋

有關控制台功能的更多信息,請參閱控制台主題。

使用DOM API

DOM代表D ocument O bject M odel。它是XMLHTML等結構化文檔的面向對象表示。

設置ElementtextContent 屬性是在網頁上輸出文本的一種方法。

例如,請考慮以下HTML標記:

<p id="paragraph"></p>
 

要更改其textContent 屬性,我們可以運行以下JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";
 

這將選擇具有id paragraph 的元素並將其文本內容設置為“Hello,World”:

<p id="paragraph">Hello, World</p>
 

(另見本演示)


您還可以使用JavaScript以編程方式創建新的HTML元素。例如,考慮具有以下正文的HTML文檔:

<body>
   <h1>Adding an element</h1>
</body> 
 

在我們的JavaScript中,我們創建一個帶有textContent 屬性的新<p> 標籤,並將其添加到html主體的末尾:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

這會將您的HTML正文更改為以下內容:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

請注意,為了使用JavaScript操作DOM中的元素,必須在文檔中創建相關元素之後運行JavaScript代碼。這可以通過將JavaScript <script> 標記放在所有其他<body> 內容之後來實現。或者,您也可以使用事件監聽器來監聽例如。 windowonload 事件 ,將代碼添加到該事件監聽器將延遲運行代碼,直到加載了頁面上的整個內容。

確保加載所有DOM的第三種方法是使用0 ms的超時函數包裝DOM操作代碼 。這樣,這個JavaScript代碼在執行隊列的末尾重新排隊,這使得瀏覽器有機會完成一些非JavaScript事情,這些事情在參與這個新的JavaScript之前一直在等待完成。

使用DOM API(帶圖形文本:Canvas,SVG或圖像文件)

使用canvas元素

HTML提供了用於構建基於柵格的圖像的canvas元素。

首先構建一個用於保存圖像像素信息的畫布。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然後選擇畫布的上下文,在本例中為二維:

var ctx = canvas.getContext('2d');
 

然後設置與文本相關的屬性:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

然後將canvas 元素插入頁面以使其生效:

document.body.appendChild(canvas);
 

使用SVG

SVG用於構建可縮放的基於矢量的圖形,可以在HTML中使用。

首先創建一個尺寸為SVG的元素容器:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

然後構建一個具有所需定位和字體特徵的text 元素:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
 

然後添加要顯示到text 元素的實際文本:

text.textContent = 'Hello world!';
 

最後將text 元素添加到我們的svg 容器中,並將svg 容器元素添加到HTML文檔中:

svg.appendChild(text);
document.body.appendChild(svg);
 

圖像文件

如果您已有包含所需文本的圖像文件並將其放在服務器上,則可以添加圖像的URL,然後將圖像添加到文檔中,如下所示:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

使用window.alert()

alert 方法在屏幕上顯示可視警報框。 alert方法參數以文本顯示給用戶:

window.alert(message);
 

因為window 是全局對象,所以你也可以調用以下簡寫:

alert(message);
 

那麼window.alert() 做什麼呢?好吧,我們來看下面的例子:

alert('hello, world');
 

在Chrome中,會生成如下彈出窗口: 警報

筆記

alert 方法在技術上是window 對象的屬性,但由於所有window 屬性都是自動全局變量,我們可以使用alert 作為全局變量而不是window 的屬性 - 這意味著你可以直接使用alert() 而不是window.alert()

與使用console.log 不同, alert 用作模態提示,這意味著代碼調用alert 將暫停,直到響應提示。傳統上,這意味著在解除警報之前不會執行任何其他JavaScript代碼

alert('Pause!');
console.log('Alert was dismissed');
 

但是,即使仍然顯示模式對話框,規範實際上也允許其他事件觸發的代碼繼續執行。在這樣的實現中,可以在顯示模態對話框時運行其他代碼。

有關alert 方法用法的更多信息,請參閱模態提示主題。

通常不鼓勵使用警報,以支持不阻止用戶與頁面交互的其他方法 - 以便創建更好的用戶體驗。不過,它對調試很有用。

從Chrome 46.0開始, window.alert()<iframe> 被阻止, 除非其沙箱屬性的值為allow-modal

使用window.confirm()

window.confirm() 方法顯示一個帶有可選消息的模式對話框和兩個按鈕,OK和Cancel。

現在,我們來看以下示例:

result = window.confirm(message);
 

這裡, message是要在對話框中顯示的可選字符串, result是一個布爾值,表示是選擇了OK還是Cancel(true表示OK)。

window.confirm() 通常用於在執行危險操作之前請求用戶確認,例如在控制面板中刪除某些內容:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

該代碼的輸出在瀏覽器中如下所示:

確認對話框非常簡單:消息,確定,取消

如果您需要它以供以後使用,您只需將用戶交互的結果存儲在變量中:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

筆記

  • 該參數是可選的,並且不是規範要求的。
  • 對話框是模態窗口 - 它們阻止用戶訪問程序界面的其餘部分,直到對話框關閉。因此,您不應過度使用任何創建對話框(或模態窗口)的函數。無論如何,有充分的理由避免使用對話框進行確認。
  • 從Chrome 46.0開始,此方法在<iframe> 被阻止,除非其沙箱屬性的值為allow-modal。
  • 通常接受通過刪除窗口符號來調用confirm方法,因為窗口對象始終是隱式的。但是,建議明確定義窗口對象,因為預期的行為可能會因較低範圍級別的實現而使用類似命名的方法進行更改。

使用window.prompt()

從用戶獲取輸入的簡單方法是使用prompt() 方法。

句法

prompt(text, [default]);
  • text :提示框中顯示的文本。
  • default :輸入字段的默認值(可選)。

例子

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

提示框

如果用戶單擊“ 確定”按鈕,則返回輸入值。否則,該方法返回null

prompt 的返回值始終是一個字符串,除非用戶單擊Cancel ,在這種情況下它返回null 。 Safari是一個例外,當用戶單擊“取消”時,該函數返回一個空字符串。從那裡,您可以將返回值轉換為另一種類型,例如整數

筆記

  • 當顯示提示框時,由於對話框是模態窗口,因此阻止用戶訪問頁面的其他部分。
  • 從Chrome 46.0開始,此方法在<iframe> 被阻止,除非其沙箱屬性的值為allow-modal。