Javascript 簡介

[TOC]

JavaScript是一種運行在瀏覽器中的解釋型的編程語言：
將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。

JavaScript組成

核心(ECMAScript)，定義javascript的語法標準
瀏覽器對象模型(BOM)Browse Object Model：提供與瀏覽器交互的方法和接

口(API)

文檔對象模型(DOM)Document Object Model：提供訪問和操作網頁HTML內

容的方法和接口

注意：接口API指的是編程接口，英文全稱是Application Programming
Interface

在HTML中嵌入JavaScript腳本

JavaScript代碼可以直接嵌在網頁的任何地方，必需使用 <script> 標籤將JavaScript嵌入到 HTML 文檔，才能被瀏覽器解釋和執行。

JavaScript 腳本嵌入到 HTML 文檔中方法：

1.通過 <script> 標籤嵌入

<head>
  <script type="text/javascript">
      document.write("這是通過script標籤嵌入的代碼");  
  </script>
</head>

2.引入外部腳本；

可以在同一個頁面中引入多個.js文件，瀏覽器按照順序依次執行

<head>
 <script src="js/demo1.js"></script>
 <script src="js/demo2.js"></script>
</head>

script標籤的 src 表示要引入的外部文件，type 表示腳本語言的類型（現代瀏覽器默認type="text/javascript"），所以script標籤可以不寫type

語法基礎

註釋

註釋是給開發人員看到，JavaScript引擎會自動忽略。
行註釋：

// 這是一行註釋

塊註釋:
塊註釋是用/.../把多行字符包裹起來，把一大“塊”視爲一個註釋

/* 
塊註釋
塊註釋
 */

文檔註釋:

/* 
 * 文檔註釋
 *文檔註釋
 */

標識符和命名規範

標識符就是一個名字。在javascript中，標識符常用於定義變量名和函數名等。

命名規範：
1.在javascript中，標識符由字母,下劃線_和美元符$，數字組成
2.標識符不能以數字開頭
3.標識符區分大小寫：age和Age是不同的標識符，不建議代碼裏出現用大小寫區分不同的標識符
4.變量名或者函數名的標識符不能使用關鍵字或保留字。
5.命名儘量遵守駝峯原則:personInfo,personName,personAge,

關鍵字：

break  case  catch  continue  default  delete  do  else  finally  
for  function  if in  instanceof  new  return  switch  this  
throw  try  typeof  var  void  while  with

保留字：

abstract    enum    int    short  boolean    export    interface    
static byte    extends    long   super   char    final    native    
synchronized  class    float    package    throws  const    goto    
private    transient   debugger    implements    protected    
volatile    double    import    public

語句

語句指的是程序執行行爲的單元，每個語句以分號';'結束。
語句結束的分號可以不寫，瀏覽器解析會自動添加，但建議都加上。

下面是一個完整的賦值語句：
var x = 1; 

var y = 1; var sum= 2; // 不建議一行寫多個語句!，不美觀

語句塊

塊由左花括號開始，由右花括號結束 {...}。
塊的作用是使語句序列一起執行。
語句塊是一組語句的集合。例如下面{...}中的所有語句組成語句塊。

var x=10;
var y=20;
var sum=0;
 {  x=x+5;
    y=y+10;
    sum=x+y;
}

聲明

用關鍵字 var（variable）聲明一個變量或常量（用於存儲數據的容器）

例如：var x; //聲明一個變量,變量名爲x
      var x,y; //可以一次聲明多個變量，變量名用逗號分隔；

常量

常量名習慣用大寫字母表示
常量的值不會通過再賦值改變，也不會再次聲明,通常在初始化的時候被賦值。

var SEX='男';

變量

變量就是可以改變的量，變量的值會通過再賦值改變，也可以再次聲明和賦值。

例如：

// 先聲明，後賦值
var x;
x=1;

// 聲明的同時進行賦值
var x=2;

// 同時聲明多個變量用逗號（ ,）分開
var x,y,s;
x=1;
y=2;
s=3;
// 同時聲明和賦值多個變量，用逗號（ ,）分開
var x=1,y=2,s=3;

表達式

表達式是javascript中的一個短語，表達式指的是可用於計算的式子，即可能產生一個值的式子。
變量名也是一種簡單的表達式，它的值就是賦值給變量的值。複雜的表達式由簡單表達式和運算符組成。

例如：

var x=15;      //表達式x的值是15
var y=20;      //表達式的值是20
var sum=x+y;   //表達式x+y的值的35

數據類型

編程語言最基本的特性就是能夠支持多種數據類型

數據類型分類

Number：數字（整數int，浮點數float）  
String：字符串
Boolean: 布爾類型  
特殊數據類型 Null、Undefined
Object：對象
Array：數組對象 
Function ：函數對象

typeof 操作符返回數據類型：

typeof 操作符:
用來檢測變量的數據類型, 對於值或變量使用 typeof 操作符會返回  
  如下字符串:
  1.Undefined數據類型的值爲: 
    var a; console.log(typeof a); //undefined 未定義
  2.Boolean數據類型的值爲: 
    var a=true; console.log(typeof a); //boolean 布爾值  
  3.String數據類型的值爲: 
    var a='hello world'; console.log(typeof a); //string 字符串  
  4.Number數據類型的值爲: 
  var a=1314; console.log(typeof a);  //number 數字  
  5.Object數據類型的值爲: 
    var a=null; console.log(typeof a); //object null  
    var b={ }; console.log(typeof b); //object 對象 
  6.Function數據類型的值爲: 
    var a=function () {}; console.log(typeof a); //function 函數

Number

Number 數字類型包含兩種數值：整型和浮點型
合法的數字類型Number類型：
整型:

var b = 100;  
console.log(b);
console.log(typeof  b);

浮點類型: 就是該數值中必須包含一個小數點，並且小數點後面必須至少有一位數字

var b = 3.8;
var b = 0.8;
var b = .8; //有效，但不推薦此寫法

由於保存浮點數值需要的內存空間比整型數值大兩倍，因此 ECMAScript
會自動將可以轉換爲整型的浮點數值轉成爲整型。

var a = 8. ;  console.log(a);     //小數點後面沒有值，轉換爲 8
var b = 12.0 ;  console.log(b);  //小數點後面是 0，轉成爲 12

對於那些過大或過小的數值，可以用科學技術法來表示(e 表示法)。用 e 表示該數值的前面 10 的指數次冪。

var box = 4.12e9 ;         //即 4120000000
var box = 0.000000124;    //即 1.24e-7

浮點數值的範圍在：Number.MIN_VALUE ~ Number.MAX_VALUE 之間, 如果數值超過了JavaScript的Number所能表示的最大值或最小值，那麼就先出現 Infinity(正無窮)或-Infinity(負無窮)。

var num=12/0  // Infinity
var num=-12/0 // -Infinity

NaN, 即非數值(Not a Number)是一個特殊的值 ,當無法計算結果時用NaN表示

var b = 0/0 ; //NaN

ECMAScript 提供了 isNaN()函數，用來判斷這個值到底是不是 NaN。如果是返回true，如果不是返回false

console.log(isNaN(NaN));  //true
console.log(isNaN(25));   //false，25 是一個數值
console.log(isNaN('25'));  //false，'25'是一個字符串數值，可以轉成數值
console.log(isNaN('Lee')); //true，'Lee'不能轉換爲數值
console.log(isNaN(true));  //false true 可以轉成成 1

數值的轉換

1.parseInt()    是把string類型或number類型的數據轉換爲整型  
parseInt("10.898797");       //返回 10
parseInt(10.898797);  //返回 10

2.parseFloat()  是把string類型或number類型的數據轉換爲浮點型（小數）
parseFloat("10.898797");     //返回 10.898797
parseFloat("10.898797");     //返回 10.898797

3.Number.toFixed(x) 把數字轉換爲字符串，返回數據小數點後有x位數字
var num = 5.56789;  
var n=num.toFixed(2);  //"5.57"  四捨五入

4.Number.toPrecision(x)  把數字轉換爲字符串,返回數據長度爲x
var num = 13.3714;  
var n=num.toPrecision(3);    //"13.4"  四捨五入


5.Math.round四捨五入
Math.round(3.15) //3
Math.round(3.65) //4

6.Math.ceil 向上取整
Math.ceil(3.15)  //4
Math.ceil(3.65) //4

7.Math.floor向下取整
Math.floor(3.15) //3
Math.floor(3.65)  //3

String

String字符串類型,表示一串字符,可以由雙引號（" "）和單引號（' '）表示。

var str="hello" ;
var str='world' ;
請注意，''或""本身只是一種表示方式，不是字符串的一部分，因此，字符串'hello'只有h，e，l,l,o這5個字符。

Boolean

Boolean 布爾類型只有兩個值：true（真）和 false（假）。
而true一般等於1，false一般等於0。
JavaScript 是區分大小寫的，True和False或者其他都不是Boolean類型的值。

var flag=true;
console.log(typeof flag); //boolean

可以使用轉型函數 Boolean(),將一個值轉換爲其對應的 Boolean 值

var a = 'Hello World!';  
var b = Boolean(a);  
console.log(typeof   b);

Boolean 類型的轉換規則: (牢記)

String:        非空字符串爲true        空字符串爲false  
Number:        非0數值爲true           0或者NaN爲false  
Object:        對象不爲null則爲true    null爲false  
Undefined :    undefined爲false

Undefined

Undefined 類型的值只有一個，就是undefined。當一個變量被聲明，但未被賦值時，它的值就是undefined,代表未定義。

var num;
console.log(typeof num); //undefined
//注意: 我們在定義變量的時候， 儘可能的不要只聲明，不賦值, 而是聲明的同  時初始化一個值。

Null

Null 類型的值只有一個，就是 null。null表示一個空的對象。 typeof 操作符檢測 null 會返回 object。

var b = null;      console.log(typeof   b); //object

undefined 是派生自 null 的，因此 ECMA-262 規定對它們的相等性測試返回 true, 表示值相等。

console.log(undefined == null);   //true

但是兩者的數據類型是不一樣的

var b ; var car = null;
console.log(typeof b== typeof car)     //false

如果定義的變量準備在將來用於保存對象，那麼最好將該變量初始化爲 null 而不是其他值。

var obj=null;
obj={}

對象

JavaScript自定義對象對象是用花括號分隔,由一組由鍵(屬性名)-值(屬性值)組成的無序集合，屬性由逗號分隔，例如：

var obj = {
    name: 'jack',
    age: 18
};

JavaScript對象的鍵(屬性名)和值(屬性值)組成。
屬性名是一個有效的變量名，可以通過.操作符來訪問屬性。
如果屬性名包含特殊字符，就必須用''或者""括起來，訪問這個屬性也無法使用.操作符，必須用['xxx']或者["xxx"]來訪問。

屬性值可以是任意的數據類型。

訪問對象屬性的兩種方式

var name=obj.name;
var age=obj['age'];

數組

數組：多個數據元素按一定順序排列的集合
數組用[]表示，元素之間用','分隔

var array=[1, 1.5,'Hello', null, true]; //數組可以包括任意數據類型。

訪問數組

通過下標索引來獲取和設置數組某個特定的元素。
訪問數組的元素可以通過索引來訪問，索引的起始值爲0：

console.log(array[0]) ;
console.log(array[1]) ;

函數

函數定義方法:
函數由關鍵字'function'，和函數名'functionname',和括號以及花括號組成:

function functionname (參數1,參數2) {
    //這裏寫函數執行的代碼
}

function：關鍵字 function 來聲明函數。
functionname ：函數名稱
(參數1,參數2)：（可選）括號內列出函數的參數，多個參數以','分隔
{...}:花括號之間的代碼是函數體，由若干語句組成。

函數的實例和調用：

function add(x,y){
  var sum=x+y;
  return sum;
}

// var result=add(2,3);
// alert(result);
alert(add(2,3));

注意：JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函數名稱相同的大小寫來調用函數

函數體語句執行到return時，函數就執行完畢，並將結果返回。
如果沒有return語句，函數執行完畢後也會返回結果，只是結果爲undefined。

JavaScript 是弱類型的語言，擁有動態類型，同一個變量可以賦予不同類型的值。變量的類型在賦值時才能確定

  var b;
  b=20;
  b = "張三";
  b={};
  b=[];
  b=function(){ };
  console.log(typeof b);

運算符

算術運算符

+  加法  x=2+3   5
-  減法  x=5-3   2

/ 除法 x=5/2 2.5
% 求餘 x=5 %2 1
++ 自增 var x=3; x++; console.log(x)
-- 自減 var x=3; x--; console.log(x)

前自加：
var x=5;
var num1=++x; // 相當於x=x+1; var num1=x;
console.log('num1='+num1+' x='+x); //num1=6 x=6

後自加:
var x=5;
var num2=x++; // 相當於 var num2=x; x=x+1;
console.log('num2='+num2+' x='+x); //num2=5 x=6

前自減：
var x=5;
var num3=--x; //相當於 x=x-1; var num3=x;
console.log('num3='+num3+' x='+x); //num3=4 x=4

後自減
var x=5;
var num4=x--; //相當於 var num4=x; x=x-1;
console.log('num4='+num4+' x='+x); //num4=5 x=4


- 字符串'+' 遇到字符串，用來連接字符串

// 兩個都是字符串, 直接連接兩個字符串
var result1='hello'+'world';
console.log(result1); //helloworld
console.log(typeof result1);

//如果其中有一個是字符串, 另一個是其他類型, 則會先將其他的類型強制轉換成字符,然後再連接
var result2='hello'+2;
console.log(result2); //hello2
console.log(typeof result2);


####二進制, 八進制, 十進制, 十六進制(擴展)
進制:
在計算機處理器內部只認識二進制, 在內存存儲的數據其實就是大量的開關,  每個開關，可以存儲一個1或0，稱爲一位(1bit)，每八位稱爲1字節(1byte)

1byte = 8位 1KB = 1024byte 1MB = 1024KB
1GB = 1024MB
1TB = 1024GB
..1PB, 1EB
1位 : 是二進制的0或者1


例如: 十進制的23在內存中存儲的是二進制10111  23 -> 10111
00000000 00000000 00000000 00010111(內存中存儲的23)

**進制:**

二進制: 0, 1 (0~1)
八進制: 0, 1, 2, 3, 4, 5, 6, 7 (0~7)
十進制: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 (0~9)
十六進制: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (0~15)


>常用值: 2的次方  2^2 = 4
2^3 = 8
2^4 = 16
2^5 = 32
2^6 = 64
2^7 = 128
2^8 = 256
2^9 = 512
2^10 = 1024
2^11 = 2048

**進制轉換:**
2進制 :101011
轉10進制: (從右往左)1*2^0 + 1*2^1 + 0*2^2 + 1*2^3 +0*2^4 + 1*2^5 =  1+2+0+8+0+32 = 43
轉8進制: (從右往左3個一組 101 011): 1*2^0+0+1*2^2  1*2^0+1*2^1+0  = 53
轉16進制: (從右往左4個一組 0010 1011): 1*2^1  1*2^0+1*2^1+0+1*2^3 = 2B 

10進制: 43
轉2進制: 32+8+2+1 = 101011
轉8進制: 40+3 = 53
轉16進制: 32+11 = 2B

**其他的方法：**
!['轉2進制'](img/j1.jpg '轉2進制')
!['轉8進制'](img/j3.jpg '轉8進制')
!['轉16進制'](img/j2.jpg '轉16進制')

8進制: 53
轉10進制: 3*8^0+5*8^1 = 43

16進制: 2B
轉10進制:  11*16^0+2*16^1  = 32+11 = 43

8進制和16進制轉非10進制,可以先轉換成10進制,再由10進制轉
8進制的53轉16進制：
8進制轉10進制: 3*8^0+5*8^1 = 43
43轉16進制: 32+11 = 2B

Javascript 簡介