2. 程式人生 > >Javascript 初識

Javascript 初識

阿新 • • 發佈：2018-12-18

--------------------------------沒有人放棄你,除了你自己.

 

javascript 簡介

由 alexbro 建立，小路依依 最後一次修改 2015-09-27

JavaScript 簡介

JavaScript 是網際網路上最流行的指令碼語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。

JavaScript 是指令碼語言

JavaScript 是一種輕量級的程式語言。

JavaScript 是可插入 HTML 頁面的程式設計程式碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript 很容易學習。

您將學到什麼

下面是您將在本教程中學到的主要內容。

JavaScript：直接寫入 HTML 輸出流

例項

document.write("<h1>這是一個標題</h1>"); 
document.write("<p>這是一個段落。</p>");
嘗試一下 »

lamp 您只能在 HTML 輸出中使用 document.write。如果您在文件載入完成後使用該方法，會覆蓋整個文件。

JavaScript：對事件的反應

例項

<button type="button" onclick="alert('歡迎!')">點我!</button>
嘗試一下 »

alert() 函式在 JavaScript 中並不常用，但它對於程式碼測試非常方便。

onclick 事件

只是您即將在本教程中學到的眾多事件之一。

JavaScript：改變 HTML 內容

使用 JavaScript 來處理 HTML 內容是非常強大的功能。

例項

x=document.getElementById("demo")  //查詢元素 
x.innerHTML="Hello JavaScript";    //改變內容
嘗試一下 »

您會經常看到 document.getElementById("some id")。這個方法是 HTML DOM 中定義的。

DOM (Document Object Model)（文件物件模型）是用於訪問 HTML 元素的正式 W3C 標準。

您將在本教程的多個章節中學到有關 HTML DOM 的知識。

JavaScript：改變 HTML 影象

本例會動態地改變 HTML 影象的來源（src）：

點亮燈泡

點選燈泡就可以開啟或關閉這盞燈


嘗試一下 »

JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。

例項

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改變樣式
嘗試一下 »

JavaScript：驗證輸入

JavaScript 常用於驗證使用者的輸入。

例項

if isNaN(x) {alert("不是數字")};
嘗試一下 »

您知道嗎？

lamp JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。 
Java（由 Sun 發明）是更復雜的程式語言。 

ECMA-262 是 JavaScript 標準的官方名稱。 

JavaScript 由 Brendan Eich 發明。它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。

javaScript和ECMAScript的關係

ECMAScript是歐洲計算機制造商協會通過ECMA-262標準化的指令碼程式設計語言。

JavaScript 已經由 ECMA 通過 ECMAScript 實現語言的標準化。

 

 

JavaScript 用法

由 alexbro 建立，Carrie 最後一次修改 2017-12-27 17:12:54

JavaScript 用法

HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。

指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

<script> 標籤

如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標籤。

<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。

<script> 和 </script> 之間的程式碼行包含了 JavaScript:

<script> alert("我的第一個 JavaScript");
</script>

您無需理解上面的程式碼。只需明白，瀏覽器會解釋並執行位於 <script> 和 </script>之間的 JavaScript 程式碼 

lamp 那些老舊的例項可能會在 <script> 標籤中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的預設指令碼語言。

<body> 中的 JavaScript

在本例中，JavaScript 會在頁面載入時向 HTML 的 <body> 寫文字：

例項

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");
</script>
.
.
</body>
</html>
嘗試一下 »

JavaScript 函式和事件

上面例子中的 JavaScript 語句，會在頁面載入時執行。

通常，我們需要在某個事件發生時執行程式碼，比如當用戶點選按鈕時。

如果我們把 JavaScript 程式碼放入函式中，就可以在事件發生時呼叫該函式。

您將在稍後的章節學到更多有關 JavaScript 函式和事件的知識。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文件中放入不限數量的指令碼。

指令碼可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。

通常的做法是把函式放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。

<head> 中的 JavaScript 函式

在本例中，我們把一個 JavaScript 函式放置到 HTML 頁面的 <head> 部分。

該函式會在點選按鈕時被呼叫：

例項

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一個 JavaScript 函式";
}
</script>
</head>

<body>

<h1>我的 Web 頁面</h1>

<p id="demo">一個段落</p>

<button type="button" onclick="myFunction()">嘗試一下</button>

</body>
</html>


嘗試一下 »

<body> 中的 JavaScript 函式

在本例中，我們把一個 JavaScript 函式放置到 HTML 頁面的 <body> 部分。

該函式會在點選按鈕時被呼叫：

例項

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 頁面</h1>

<p id="demo">一個段落</p>

<button type="button" onclick="myFunction()">嘗試一下</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一個 JavaScript 函式";
}
</script>

</body>
</html>


嘗試一下 »

提示：我們把 JavaScript 放到了頁面程式碼的底部，這樣就可以確保在 <p> 元素建立之後再執行指令碼。


外部的 JavaScript

也可以把指令碼儲存到外部檔案中。外部檔案通常包含被多個網頁使用的程式碼。

外部 JavaScript 檔案的副檔名是 .js。

如需使用外部檔案，請在 <script> 標籤的 "src" 屬性中設定該 .js 檔案：

例項

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
嘗試一下 »

你可以將指令碼放置於 <head> 或者 <body>中 實際執行效果與您在 <script> 標籤中編寫指令碼完全一致。

 

 

JavaScript 語法

由 alexbro 建立，Carrie 最後一次修改 2018-01-10 12:08:51

JavaScript 語法

JavaScript 是一個程式語言。語法規則定義了語言結構。

JavaScript 語法

JavaScript 是一個指令碼語言。

它是一個輕量級，但功能強大的程式語言。

JavaScript 字面量

在程式語言中，一個字面量是一個常量，如 3.14。

數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)。

3.14 

1001 

123e5
嘗試一下 »

字串（String）字面量 可以使用單引號或雙引號 :

"John Doe" 

'John Doe'
嘗試一下 »

表示式字面量 用於計算：

5 + 6 

5 * 10
嘗試一下 »

陣列（Array）字面量 定義一個數組：

[40, 100, 1, 5, 25, 10]

物件（Object）字面量 定義一個物件：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函式（Function）字面量 定義一個函式：

function myFunction(a, b) { return a * b;}

JavaScript 變數

在程式語言中，變數用於儲存資料值。

JavaScript 使用關鍵字 var 來定義變數， 使用等號來為變數賦值：

var x, length 

x = 5 

length = 6
嘗試一下 »

變數可以通過變數名訪問。在指令式語言中，變數通常是可變的。字面量是一個恆定的值。

Note 變數是一個名稱。字面量是一個值。

JavaScript 操作符

JavaScript使用 算術運算子 來計算值:

(5 + 6) * 10 
嘗試一下 »

JavaScript使用賦值運算子給變數賦值：

x = 5 
y = 6 
z = (x + y) * 10
嘗試一下 »

JavaScript語言有多種型別的運算子：

Type 例項 描述
賦值，算術和位運算子 =  +  -  *  / 在 JS 運算子中描述
條件，比較及邏輯運算子 ==  != <  >  在 JS 比較運算子中描述

JavaScript 語句

在 HTML 中，JavaScript 語句向瀏覽器發出的命令。瀏覽器通過 JavaScript 語句明白要執行什麼操作。

語句是用分號分隔：

x = 5 + 6; 
y = x * 10;

JavaScript 關鍵詞

JavaScript 語句通常以關鍵詞為開頭。 var 關鍵詞告訴瀏覽器建立一個新的變數：

var x = 5 + 6; 
var y = x * 10;

JavaScript 識別符號

和其他任何程式語言一樣，JavaScript 保留了一些識別符號為自己所用。

JavaScript 同樣保留了一些關鍵字，這些關鍵字在當前的語言版本中並沒有使用，但在以後 JavaScript 擴充套件中會用到。

JavaScript 識別符號必須以字母、下劃線（_）或美元符（$）開始。

後續的字元可以是字母、數字、下劃線或美元符（數字是不允許作為首字元出現的，以便 JavaScript 可以輕易區分開識別符號和數字）。

以下是 JavaScript 中最​​重要的保留字（按字母順序）：

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

JavaScript 註釋

不是所有的 JavaScript 語句都是"命令"。雙斜槓 // 後的內容將會被瀏覽器忽略：

// 我不會執行

JavaScript 資料型別

JavaScript 有多種資料型別：數字，字串，陣列，物件等等：

var length = 16;                                  // Number 通過數字字面量賦值 
var points = x * 10;                              // Number 通過表示式字面量賦值 
var lastName = "Johnson";                         // String 通過字串字面量賦值 
var cars = ["Saab", "Volvo", "BMW"];              // Array  通過陣列字面量賦值 
var person = {firstName:"John", lastName:"Doe"};  // Object 通過物件字面量賦值

資料型別的概念

程式語言中，資料型別是一個非常重要的內容。

為了可以操作變數，瞭解資料型別的概念非常重要。

如果沒有使用資料型別，以下例項將無法執行：

16 + "Volvo"

16 加上 "Volvo" 是如何計算呢? 以上會產生一個錯誤還是輸出以下結果呢？

"16Volvo"

你可以在瀏覽器嘗試執行以上程式碼檢視效果。

在接下來的章節中你將學到更多關於資料型別的知識。

JavaScript 函式

JavaScript 語句可以寫在函式內，函式可以重複引用：

引用一個函式 = 呼叫函式(執行函式內的語句)。

function myFunction(a, b) { 
    return a * b;                                // 返回 a 乘於 b 的結果 
}

JavaScript 對大小寫敏感。

JavaScript 對大小寫是敏感的。

當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。

函式 getElementById 與 getElementbyID 是不同的。

同樣，變數 myVariable 與 MyVariable 也是不同的。

提示：在本站的程式設計實戰中，你可以通過練習理解JavaScript變數的大小寫敏感性。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆蓋了所有的字元，包含標點等字元。

如需進一步瞭解，請學習我們的 完整 Unicode 參考手冊。

您知道嗎?

Note JavaScript 中，常見的是駝峰法的命名規則，如 lastName (而不是lastname)。
Note JavaScript 是指令碼語言。瀏覽器會在讀取程式碼時，逐行地執行指令碼程式碼。而對於傳統程式設計來說，會在執行前對所有程式碼進行編譯。
lamp 外部指令碼不能包含 <script> 標籤

相關推薦

JavaScript初識

font logs bsp 必須 類型檢查 驅動 語句 客戶 發送 JavaScript 是網景(Netscape)公司開發的一種基於客戶端瀏覽器、面向對象、事件驅動式的網頁腳本語言。JavaScript語言的前身叫作Livescript。 JavaScript與Java的

JavaScript初識(二)

padding -c custom 解析過程 rem 什麽 adding dom line 接上一篇: 九丶偽數組 arguments 　　arguments代表的是實參.有個講究的地方是:arguments只在函數中使用 　　(1)返回函數實參的個數:argumen

Javascript初識之資料型別

一、JavaScript概述 1、ECMAScript和JavaScript的關係 1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。 次年，ECMA釋出262

Javascript 初識

--------------------------------沒有人放棄你,除了你自己.   javascript 簡介 由 alexbro 建立，小路依依 最後一次修改 2015-09-27

WEB前端學習 Day 6（Javascript 初識+變數+邏輯判斷+資料型別）

什麼叫做Javascript，首先，它跟Java無關。它是一種在瀏覽器上執行的指令碼語言，用來通過邏輯判斷，迴圈操作等來控制HTML的節點，獲取HTML節點的資訊。比如說表單驗證，如果使用者沒有輸入，就要彈一個框出來告訴使用者沒有輸入。這樣的操作都是跟使用者互動

JavaScript對象及初識面向對象

技術 strong com color scrip ava 面向 cnblogs ron JavaScript對象及初識面向對象： JavaScript對象及初識面向對象

初識JavaScript

嵌套if bject 信息 定義變量 重復 導致 src 匈牙利 als 寫在前面： 經過前段時間對於H5語言的學習，開始慢慢適應現在的生活節奏和代碼語言。從一開始的毫無頭緒到現在可以大概地寫出部分的網站靜態頁面，用了兩個周的時間。作為一個之前從未接觸過

JavaScript--我發現，原來你是這樣的JS（初識、源泉）

pac 發現 .com -- rip php script album 原來 http://pic.cnhubei.com/space.php?uid=4614&do=album&id=1384727http://pic.cnhubei.com/space.

JavaScript對象及初識OOP

image ont 自定義對象 inf ron 分享 t對象 bubuko font JavaScript自定義對象 　　 　　 JavaScript構造函數 　　 　　 原型對象 　　 　　 JavaScript繼承 　原型鏈 　　 　　 　　 　借用構造函數 　　 　　

JavaScript學習總結 初識JS

1、什麼是 JavaScript？ 　　JavaScript 是一門跨平臺、面向物件的動態的弱型別的輕量級解釋型語言，是一種基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。應用於 HTML 文件能夠在網站上提供動態的互動能力，他不同於 Java。簡單說就是基於瀏覽器處理 HTML

初識JavaScript DOM

JavaScript DOM D代表“Document”， 文件 ， 它將網頁文件轉換為文件物件。 由“文件”引入“物件” O代表“Object” ， 物件 ， 即一種自足的資料集合。 物件分為三種類型 使用者定義物件：使用者自行建立。 內建物件：內嵌於JavaSc

深入學習JavaScript之初識this

  JavaScript是一個詞法作用域的程式語言，詞法作用域和動態作用域的區別我也說過了，具體在我的《深入理解JavaScript之詞法域》https://blog.csdn.net/qq_41889956/article/details/83061472中有介紹，   總

你知道JS的“三座大山”嗎？帶你初識前端JavaScript經典內容

作用域及閉包 講到作用域，你會想到什麼？當然是執行上下文。每個函式都有自己的 excution context，和 variable object。這些環境用於儲存上下文中的變數，函式宣告，引數等。 this 本質上來說，在 js 裡 this 是一個指向函式執行環境的指標。this 永

HTML-JavaScript物件及初識面向物件

物件是什麼 物件是包含相關屬性和方法的集合體（屬性）（方法） 什麼是面向物件 1.面向物件僅僅是一個概念或者程式設計思想 2.通過一種叫做原型的方式來實現面向物件程式設計 JavaScript中的基本資料型別： number（數值型別） string（字串型

JavaScript物件及初識面向物件

自定義物件   基於Object物件的方式建立物件     var 物件名稱=new Object( ); var flower=new Object();     flower.name="長春花";     flower.genera="夾竹桃科 長春花屬";    

JS學習之初識JavaScript

1、什麼是JavaScript JavaScript是一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的解析器被稱為了JavaScript引擎，它是瀏覽器中的一部分，廣泛用於web開發，最早是在HTML頁面上進行使用，給HTML增加動態的功能。 一個完整的Jav

初識JavaScript正則表示式

RegExp:正則表示式的作用：匹配特殊字元或有特殊搭配原則的字元的最佳選擇。 正則表示式的兩種新建方式； 1.直接量 var reg = /pattern/attributes 引數 pattern 是一個字串，指定了正則表示式的模式或其他正則表示式。 引數

初識javaScript(慕課網學習筆記)

js輸出 window.alert() 警告框 document.write() 寫到HTML文件中 innerHTML 寫到HTML元素 console.log() 寫到瀏覽器的控制檯 <!DOCTYPE html> <html l

JavaScript中this初識

本文就是綜合網上的文章對this有個初步的認識。 推薦文章，另一個角度理解this：https://www.imooc.com/article/1758#comment 上面文章總結：通過我這篇文章，我希望學會通過把一個函式呼叫替換成funcName.call的形式，從而理解執行

深入理解javascript物件系列第一篇——初識物件

前面的話 　　javascript中的難點是函式、物件和繼承，前面已經介紹過函式系列。從本系列開始介紹物件部分，本文是該系列的第一篇——初識物件 物件定義 　　javascript的基本資料型別包括undefined、null、boolean、string、number和object。物件和其他基本