Javascript 簡介

Twait發表於2019-02-16

Javascript 簡介

JavaScript是一種執行在瀏覽器中的解釋型的程式語言:
將文字格式的字元程式碼傳送給瀏覽器由瀏覽器解釋執行。

JavaScript組成

  1. 核心(ECMAScript),定義javascript的語法標準
  2. 瀏覽器物件模型(BOM)Browse Object Model:提供與瀏覽器互動的方法和接

口(API)

  1. 文件物件模型(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






相關文章