【JavaScript顯示數據】
JavaScript 可以通過不同的方式來輸出數據:
- 使用window.alert()彈出警告框。
- 使用document.write()方法將內容寫到 HTML 文檔中。
- 使用innerHTML寫入到 HTML 元素。
- 使用console.log()寫入到瀏覽器的控制臺。
【JavaScript字面量】
數字(Number)字面量:
1001
123e5 //科學計數
字符串(String)字面量:
“Don for gen”
表達式字面量:
5 + 6
5 * 10
數組(Array)字面量:
[40, 100, 1, 5]
對象(Object)字面量:
{
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
函數(Function)字面量:
function myFunction(a, b) {
return a * b;
}
【JavaScript變量】
JavaScript 使用關鍵字var來定義變量, 使用等號來為變量賦值。
變量聲明之后,該變量是空的(其值實際上是 undefined)。
變量可以通過變量名訪問。在指令式語言中,變量通常是可變的。字面量是一個恒定的值。變量是一個名稱。字面量是一個值。
- 變量必須以字母開頭
- 變量也能以 $ 和 _ 符號開頭(不過我們不推薦這么做)
- 變量名稱對大小寫敏感(y 和 Y 是不同的變量)
【JavaScript操作符】
條件運算符:
variablename=(condition)?value1:value2
【JavaScript關鍵字】
【JavaScript 注釋】
單行注釋以 // 我不會執行
多行注釋以 /* 開始,以 */ 結尾。
[【JavaScript 數據類型】
在 JavaScript 中有 5 種不同的數據類型:
- string
- number
- boolean
- object
- function
3 種對象類型:
- Object
- Date
- Array
2 個不包含任何值的數據類型:
- null
- undefined
Undefined 這個值表示變量不含有值。可以通過將變量的值設置為 null 來清空變量。
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 通過對象字面量賦值
【對代碼行進行折行】
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示:
document.write("你好
\世界!");
不過,不能像這樣折行:
document.write \
("你好世界!");
【JavaScript對象】
JavaScript 對象是擁有屬性和方法的數據。
鍵值對在 JavaScript 對象通常稱為對象屬性。
對象鍵值對的寫法類似于:
- PHP 中的關聯數組
- Python 中的字典
- C 語言中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的哈希表
對象定義:
varperson = {
//定義對象屬性
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue",
//定義對象方法
methodName : function() { code lines }
};
//訪問屬性
//實例1
person.firstName;
//實例2
person["lastName"];
//訪問對象方法
objectName.methodName()
【JavaScript函數】
//普通函數
function functionname() {
執行代碼
}
//帶參數的函數
function myFunction(var1, var2) {
代碼
}
//帶返回值的函數
function myFunction() {
var x=5;
return x;
}
【JavaScript事件】
事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。
//
<button onclick='getElementById("demo").innerHTML=Date()'>現在的時間是??</button>
//
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
//
<button onclick="displayDate()">現在的時間是?</button>
onload: 網頁加載時要觸發的事件
onunload: 關閉網頁或刷新時要觸發的事件
onclick: 單擊某控件時觸發
ondblclick: 雙擊某控件時觸發
onsubmit: 在表單提交前進行驗證,該事件只能在<form>元素中使用
onchange: 文本框內容改變事件
onmouseover: 把鼠標放在元素上時觸發
onmouseout: 把鼠標從該元素移開時觸發
onmousemove: 鼠標在某個元素上移動時持續觸發
onmousedown: 按任何一個鼠標按鍵時觸發
onmouseup: 釋放任意一個鼠標按鍵時觸發
onreset: 當表單被重置
onselect: 當元素被選中
onblur: 當元素失去焦點時觸發
onfocus: 當元素獲得焦點時觸發
onkeydown: 鍵盤鍵被按時觸發,如果一直按著某鍵則會不斷觸發
onkeypress: 按鍵盤鍵并產生一個字符時發生,當按shift或alt等按鍵時不會觸發,如果一直按按鍵會不斷觸發
onkeyup: 釋放鍵盤上的按鍵時觸發
onabort: 載入對象被中斷時觸發
onerror: 出現錯誤時觸發
onscroll: 在任何帶滾動條的元素或窗口上滾動時觸發
JavaScript 可以做什么?
事件可以用于處理表單驗證,用戶輸入,用戶行為及瀏覽器動作:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 用戶點擊按鈕執行動作
- 驗證用戶輸入內容的合法性
- 等等 ...
可以使用多種方法來執行 JavaScript 事件代碼:
- HTML 事件屬性可以直接執行 JavaScript 代碼
- HTML 事件屬性可以調用 JavaScript 函數
- 你可以為 HTML 元素指定自己的事件處理程序
- 你可以阻止事件的發生。
- 等等 ...
【JavaScript字符串】
在 JavaScript 中,字符串寫在單引號或雙引號來中。
可以使用內置屬性length來計算字符串的長度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
你可以使用索引位置來訪問字符串中的每個字符:
var carname = "Volvo XC60";
var character = carname[7];
可以在字符串添加轉義字符來使用特殊符號:
也可以使用 new 關鍵字將字符串定義為一個對象:
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // ?返回 Object
不要創建 String 對象。它會拖慢執行速度,并可能產生其他副作用
字符串屬性和方法
屬性:
constructor //返回創建字符串屬性的函數
length //返回字符串的長度
prototype //允許您向對象添加屬性和方法
方法:
charAt() //返回指定索引位置的字符
charCodeAt() //返回指定索引位置字符的 Unicode 值
concat() //連接兩個或多個字符串,返回連接后的字符串
fromCharCode() //將 Unicode 轉換為字符串
indexOf() //返回字符串中檢索指定字符第一次出現的位置
lastIndexOf() //返回字符串中檢索指定字符最后一次出現的位置
localeCompare() //用本地特定的順序來比較兩個字符串
match() //找到一個或多個正則表達式的匹配
replace() //替換與正則表達式匹配的子串
search() //檢索與正則表達式相匹配的值
slice() //提取字符串的片斷,并在新的字符串中返回被提取的部分
split() //把字符串分割為子字符串數組
substr() //從起始索引號提取字符串中指定數目的字符
substring() //提取字符串中兩個指定的索引號之間的字符
toLocaleLowerCase() //根據主機的語言環境把字符串轉換為小寫,只有幾種語言(如土耳其語)具有地方特有的大小寫映射
toLocaleUpperCase() //根據主機的語言環境把字符串轉換為大寫,只有幾種語言(如土耳其語)具有地方特有的大小寫映射
toLowerCase() //把字符串轉換為小寫
toString() //返回字符串對象值
toUpperCase() //把字符串轉換為大寫
trim() //移除字符串首尾空白
valueOf() //返回某個字符串對象的原始值
【typeof 操作符】
可以使用 typeof 操作符來檢測變量的數據類型。
typeof"John"http:// 返回 string
typeof3.14// 返回 number
typeoffalse// 返回 boolean
typeof[1,2,3,4]// 返回 object
typeof{name:'John', age:34}// 返回 object
typeofundefined// undefined
typeofnull// object
null=== undefined// false
null== undefined// true
【constructor 屬性】
constructor屬性返回所有 JavaScript 變量的構造函數。
"John".constructor// 返回函數 String() { [native code] }(3.14).constructor// 返回函數 Number() { [native code] }
false.constructor// 返回函數 Boolean() { [native code] }[1,2,3,4].constructor// 返回函數 Array() { [native code] }
{name:'John', age:34}.constructor// 返回函數 Object() { [native code] }
newDate().constructor // 返回函數 Date() { [native code] }
function() {}.constructor // 返回函數 Function(){ [native code] }
【JavaScript 類型轉換】
JavaScript 變量可以轉換為新變量或其他數據類型:
- 通過使用 JavaScript 函數
- 通過 JavaScript 自身自動轉換
轉換為字符串
全局方法String()可以轉換為字符串。該方法可用于任何類型的數字,字母,變量,表達式。
方法toString()也是有同樣的效果。
將字符串轉換為數字
全局方法Number()可以將字符串轉換為數字。