【JavaScript（一）】JavaScript基礎

【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操作符】

JavaScript操作符

條件運算符：
variablename=(condition)?value1:value2

比較運算符
邏輯運算符
【JavaScript關鍵字】
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()可以將字符串轉換為數字。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容