前端基礎之JavaScript

標籤：單行   win   arch   display   from   get   長度   開始   esc   

JavaScript概述JavaScript的曆史

• 1992年Nombas開發出C-minus-minus(C--)的嵌入式指令碼語言(最初綁定在CEnvi軟體中).後將其改名ScriptEase.(用戶端執行的語言)
• Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的指令碼語言.Sun和Netscape共同完成.後改名叫Javascript
• 微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的複製版叫Jscript.
• 為了統一三家,ECMA(歐洲電腦製造協會)定義了ECMA-262規範.國際標準組織及國際電子電機委員會（ISO/IEC）也採納 ECMAScript 作為標準（ISO/IEC-16262）。從此，網頁瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.

ECMAScript

儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

• 核心（ECMAScript） 
• 文件物件模型（DOM） Document object model (整合js，css，html)
• 瀏覽器物件模型（BOM） Broswer object model（整合js和瀏覽器）
• Javascript 在開發中絕大多數情況是基於對象的.也是物件導向的.

簡單地說，ECMAScript 描述了以下內容：

• 文法 
• 類型 
• 語句 
• 關鍵字 
• 保留字 
• 運算子 
• 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.

JavaScript引入方式Script標籤內寫代碼

<script>  // 在這裡寫你的JS代碼</script>

引入額外的JS檔案

<script src="myscript.js"></script>

JavaScript語言規範注釋

// 這是單行注釋/**這是多行注釋**/

結束符

JavaScript中的語句要以分號（;）為結束符。

JavaScript語言基礎變數聲明

1. JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。
2. 聲明變數使用 var 變數名; 的格式來進行聲明

var name = "Alex";var age = 18;

 

注意：

變數名是區分大小寫。

推薦使用駝峰式命名規則。

JavaScript資料類型

JavaScript擁有動態類型

var x;  // 此時x是undefinedvar x = 1;  // 此時x是數字var x = "Alex"  // 此時x是字串 

數字類型

JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;var b = 20;var c = 123e5;  // 12300000var d = 123e-5;  // 0.00123

常用方法：

parseInt("123")  // 返回10parseInt("ABC")  // 返回NaNparseFloat("123.456")  // 返回123.456

 

字串

var a = "Hello"var b = "world;var c = a + b; console.log(c);  // 得到Helloworld

常用方法：

方法	說明
obj.length	返回長度
obj.trim()	移除空白
obj.trimLeft()	移除左邊的空白
obj.trimRight()	移除右邊的空白
obj.charAt(n)	返回第n個字元
obj.concat(value, ...)	拼接
obj.indexOf(substring, start)	子序列位置
obj.substring(from, to)	根據索引擷取子序列
obj.slice(start, end)	切片
obj.toLowerCase()	小寫
obj.toUpperCase()	大寫
obj.split(delimiter, limit)	分割

 

拼接字串一般使用“+”

布爾類型

區別於Python，true和false都是小寫。

var a = true;var b = false;

數組

類似於Python中的列表。

var a = [123, "ABC"];console.log(a[1]);  // 輸出"ABC"

 常用方法：

方法	說明
obj.length	數組的大小
obj.push(ele)	尾部追加元素
obj.pop()	擷取尾部的元素
obj.unshift(ele)	頭部插入元素
obj.shift()	頭部移除元素
obj.slice()	切片
obj.reverse()	反轉
obj.join(seq)	將數組元素串連成字串
obj.concat(val, ...)	串連數組
obj.sort()	排序

遍曆數組中的元素：

var a = [10, 20, 30, 40];for (var i=0;i<a.length;i++) {  console.log(i);}

對象

類似於Python中的欄位資料類型

var a = {"name": "Alex", "age": 18};console.log(a.name);console.log(a["age"]);

遍曆對象中的內容：

var a = {"name": "Alex", "age": 18};for (var i in a){  console.log(i, a[i]);}

null和undefined

• undefined表示的是當聲明的變數未初始化時，該變數的預設值是undefined
• null表示值不存在

undefined表示聲明了變數，但是還沒有賦值。null聲明了變數並且變數是空值。

類型查詢

typeof("abc")  // "string"type(null)  // "object"typeof(true)  // "boolean"typeof(123) // "number"

運算子算數運算子

+ - * / % ++ --

 

比較子

> >= < <= != == === !==

注意：

1 == “1”  // true1 === "1"  // false

 

邏輯運算子

&& || !

 

賦值運算子

= += -= *= /=

流程式控制制if-else

var a = 10;if (a > 5){  console.log("yes");}else {  console.log("no");}

 

if-else if-else 

var a = 10;if (a > 5){  console.log("a > 5");}else if (a < 5) {  console.log("a < 5");}else {  console.log("a = 5");}

 

switch

var day = new Date().getDay();switch (day) {  case 0:  console.log("Sunday");  break;  case 1:  console.log("Monday");  break;default:  console.log("...")}

while

var i = 0;while (i < 5) {  console.log(i);  i++;}

三元運算

var a = 1;var b = 2;var c = a > b ? a : b

函數函數定義

JavaScript中的函數和Python中的非常類似，只是定義方式有點區別。

// 普通函數定義function sum(a, b){  return a + b;}sum(1, 2)// 匿名函數方式var sum = function(a, b){  return a + b;}sum(1, 2)// 立即執行函數(function(a, b){  return a + b;})(1, 2);

 

函數的全域變數和局部變數

全域變數：定義在函數外部，並且推薦使用var進行顯示聲明

局部變數：定義在函數內容，並且必須使用var進行顯示聲明

範圍

首先在函數內部尋找變數，找不到則到外層函數尋找，逐步找到最外層，即windows對象。

常用模組和方法Date

var d = new Date(); //getDate()                 擷取日//getDay ()                 擷取星期//getMonth ()               擷取月（0-11）//getFullYear ()            擷取完整年份//getYear ()                擷取年//getHours ()               擷取小時//getMinutes ()             擷取分鐘//getSeconds ()             擷取秒//getMilliseconds ()        擷取毫秒//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON

var str1 = ‘{"name": "Alex", "age": 18}‘;var obj1 = {"name": "Alex", "age": 18};// JSON字串轉換成對象var obj = JSON.parse(str1); // 對象轉換成JSON字串var str = JSON.stringify(obj1);

 

RegExp

//RegExp對象    // 在表單驗證時使用該對象驗證使用者填入的字串是否符合規則.    //建立正則對象方式1  參數1 Regex  參數2 驗證模式  g global / i 忽略大小寫. //參數2一般填寫g就可以，也有“gi”.    // 使用者名稱 首字母必須是英文, 除了第一位其他只能是英文數字和_ . 長度最短不能少於6位 最長不能超過12位    //----------------------------建立方式1    /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");    //    //驗證字串    var str = "bc123";    alert(reg1.test(str));// true        //----------------------------建立方式2  /填寫Regex/匹配模式;    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;        alert(reg2.test(str));// true     */    //-------------------------------正則對象的方法-------------------        //test方法  ==>  測試一個字串是否複合 正則規則. 傳回值是true 和false.        //-------------------------String 中與正則結合的4個方法------------------.    // macth search split replace    var str = "hello world";        //alert(str.match(/o/g)); //尋找字串中 複合正則的 內容.    //alert(str.search(/h/g));// 0  尋找字串中符合Regex的內容位置    //alert(str.split(/o/g)); // 按照Regex對字串進行切割. 返回數組;    alert(str.replace(/o/g, "s")); // hells wsrld  對字串按照正則進行替換.

View Code

 

Math

abs(x)    返回數的絕對值。exp(x)    返回 e 的指數。floor(x)對數進行下舍入。log(x)    返回數的自然對數（底為e）。max(x,y)    返回 x 和 y 中的最高值。min(x,y)    返回 x 和 y 中的最低值。pow(x,y)    返回 x 的 y 次冪。random()    返回 0 ~ 1 之間的隨機數。round(x)    把數四捨五入為最接近的整數。sin(x)    返回數的正弦。sqrt(x)    返回數的平方根。tan(x)    返回角的正切。

Math

 

前端基礎之JavaScript