7,前端-js簡介-數據類型-運算符-類型轉換-流程控制

前端-js簡介-數據類型-運算符-類型轉換-流程控制

Javascript介紹

Web前端有三層：

• HTML：從語義的角度，描述頁面結構

• CSS：從審美的角度，描述樣式（美化頁面）

• JavaScript：從交互的角度，描述行爲（提高用戶體驗）

JavaScript歷史背景介紹

 

布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。

一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript。

同時期還有其餘的網頁語言，好比VBScript、JScript等等，可是後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScript

 

JavaScript和ECMAScript的關係

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。

JavaScript是由公司開發而成的，問題是不便於其餘的公司拓展和使用。因此歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAScript。

簡單來講，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。

ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了不少新特性）。

JavaScript的發展：蒸蒸日上

http://2004.sina.com.cn/

http://2008.sina.com.cn/

http://2012.sina.com.cn/

上面三個網站能夠感覺一下網頁技術的發展。

 

JavaScript入門易學性

• JavaScript對初學者比較友好。

• JavaScript是有界面效果的（好比C語言只有白底黑字）。

• JavaScript是弱變量類型的語言，變量只須要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。

好比Java中須要定義以下變量：

    int a;
    float a;
    double a;
    String a;
    boolean a;

而JavaScript中，只用定義一個變量：

   var a;

JavaScript是前臺語言

JavaScript是前臺語言，而不是後臺語言。

JavaScript運行在用戶的終端網頁上，而不是服務器上，因此咱們稱爲「前臺語言」。JavaScript就是一個簡單的製做頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操做數據庫。

後臺語言是運行在服務器上的，好比PHP、ASP、JSP等等，這些語言都可以操做數據庫，都可以對數據庫進行「增刪改查」操做。Node.js除外。

 

JavaScript的組成

JavaScript基礎分爲三個部分：

• ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。

• DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。

• BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

PS：JS機械重複性的勞動幾乎爲0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重複勞動。

JavaScript的特色

（1）簡單易用：可使用任何文本編輯工具編寫，只須要瀏覽器就能夠執行程序。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標

 

Javascript代碼

在頁面中，咱們能夠在body標籤中放入<script type=」text/javascript」></script>標籤對兒，<script type=」text/javascript」></script>標籤對兒

<script type="text/javascript">

</script>

alert語句

<script type="text/javascript">
       alert("哈哈哈");
</script>

alert（英文翻譯爲「警報」）的用途：彈出「警告框」。

就是彈出一個框,顯示本身輸入的內容.

語法規則

 

（1）JavaScript對換行、縮進、空格不敏感。

      備註：每一條語句末尾要加上分號，雖然分號不是必須加的，可是爲了程序從此要壓縮，若是不加分號，壓縮以後將不能運行。

（2）全部的符號，都是英語的。好比括號、引號、分號。

（3）JavaScript的註釋：

　　單行註釋：

// 我是註釋

　　多行註釋：　

/*
    多行註釋1
    多行註釋2
*/

備註：sublime中，單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+/。

控制檯輸出：console.log("")

console.log("")表示在控制檯中輸出。console表示「控制檯」，log表示「輸出」。

<script type="text/javascript">
        // alert('哈哈哈');
        var a=2;
        var b='abc'
        console.log(a)
</script>

在網頁裏面顯示:2

控制檯在Chrome瀏覽器的F12中(左邊第二個:Console)。控制檯是工程師、程序員調試程序的地方。程序員常用這條語句輸出一些東西，來測試程序是否正確。

用戶輸入：prompt()語句

prompt()就是專門用來彈出可以讓用戶輸入的對話框。

代碼以下：

<script type="text/javascript">
        var a = prompt('今天是什麼天氣？');
        console.log(a);
</script>

上方代碼中，用戶輸入的內容，將被傳遞到變量 a 裏面。

顯示以下,輸入內容,回車,會輸出輸入的內容.

prompt()語句中，用戶無論輸入什麼內容，都是字符串。

alert和prompt的區別：

alert("輸入什麼彈出什麼");                //直接使用，不須要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

直接量：數字和字符串

「直接量」即常量，也稱爲「字面量」。看見什麼，它就是什麼。

簡單的直接量有2種：數字、字符串。

（1）數值的直接量的表達很是簡單，寫上去就好了，不須要任何的符號。例如：

alert(886);  //886是數字，因此不須要加引號。

（2）字符串也很簡單，但必定要加上引號。能夠是單詞、句子等。

 

變量

變量的定義和賦值

   var a = 100;

var是英語「variant」變量的縮寫。後面要加一個空格，空格後面的東西就是「變量名」，

• 定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面必定要有空格隔開。

• 變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。

• 變量名：咱們能夠給變量任意的取名字。

在JavaScript中，永遠都是用var來定義變量，這和C、Java等語言不一樣(有興趣的同窗能夠看一下es6)

變量要先定義，才能使用。好比，咱們不設置變量，直接輸出：控制檯會報錯,(xx is not defined)

 

能夠把定義和賦值寫在一塊兒:

var a = 100;    //定義，而且賦值100
console.log(a);  //輸出100

變量的命名規範

變量名有命名規範：只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字。

下列的單詞，叫作保留字，就是說不容許當作變量名，不用記：

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

大寫字母是可使用的，可是區分大小寫。也就是說A和a是兩個變量。

    var A = 250;    //變量1
    var a = 888;    //變量2

變量的類型

變量裏面可以存儲數字、字符串等。變量會自動的根據存儲內容的類型不一樣，來決定本身的類型。

數值型：number

 若是一個變量中，存放了數字，那麼這個變量就是數值型的

typeof:顯示變量的類型.

    var a = 100;            //定義了一個變量a，而且賦值100
    console.log(typeof a);  //輸出a變量的類型

typeof()表示「獲取變量的類型」，語法爲：

typeof 變量

在JavaScript中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的。

 

字符串型：string

var a = "abcde";
var b = "路飛";
var c = "123123";


console.log(typeof a);
console.log(typeof b);

連字符和加號的區別

鍵盤上的+多是連字符，也多是數字的加號。以下：

   console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
   console.log("我+愛+你");           //原樣輸出
   console.log(1+2+3);             //輸出6

控制檯顯示:
我愛你
我+愛+你
6

總結：若是加號兩邊都是數值，此時是加。不然，就是連字符（用來鏈接字符串）。

還能夠實現數字型跟字符型的相加,相加後的結果是字符型的.

<script type="text/javascript">
    var a=12+'34'
    console.log(a)
    console.log(typeof a);           //原樣輸出
        console.log(1+2+3);      
</script>

數字型跟字符型的相加

 

變量值的傳遞（賦值）

語句：

   a = b;

把b的值賦給a，b不變。

將等號右邊的值，賦給左邊的變量；等號右邊的變量，值不變。

舉個特殊的例子：

var a = "3";
var b = 2;
console.log(a-b);

效果：（注意，字符串 - 數值 = 數值）

 

變量格式轉換

用戶的輸入

prompt()就是專門用來彈出可以讓用戶輸入的對話框。輸入的類型都是字符串的.

parseInt()：字符串轉數字

parseInt()能夠將字符串轉數字。parse表示「轉換」，Int表示「整數」（注意Int的拼寫）。例如：

字符串轉數字的方法：

 parseInt(「5」);

<script type="text/javascript">        
        var b = '123';
        console.log(b)
        // 字符型轉整型
        var a=parseInt(b)
        // 查看變量類型
        console.log(typeof a) 
        // 已經改爲數值型了  
        console.log(a)
</script>

 

 

parseInt()還具備如下特性：

（1）帶有自動淨化的功能；只保留字符串最開頭的數字，後面的中文自動消失。例如：

<script type="text/javascript">
　　var b = '123你們好';
　　console.log(b);
　　console.log(parseInt('123你們好'));
</script>

對比輸入結果查看.

（2）自動帶有截斷小數的功能：取整，不四捨五入。

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
輸出:9

 var a = parseInt(5.8 + 4.7);
 console.log(a);
輸出:10

 

數據類型

數據類型包括：基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值

1;基本數據類型:

number,string,boolean,null,undefined

2;引用數據類型:

function,object,array,date,

基本數據類型

• number

var a = 123;
//typeof 檢查當前變量是什麼數據類型
console.log(typeof a)
//特殊狀況
var a1 = 5/0;
console.log(typeof e1) //Infinity 無限大. number類型

• string

var str  = '123'
console.log(typeof str)

 

• boolean

var b1 = false;
console.log(typeof b1)

 

• null

var c1 = null;//空對象. object
console.log(c1)

布爾值爲False

 

• undefined

var d1;
//表示變量未定義
console.log(typeof d1)

 

運算符

js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

1.賦值運算符

以var x = 12,y=5來演示示例|

 

2.算數運算符

var a = 5,b=2

注意有自增跟自減的,要留意.

* 使用i++時，i先將自身的值賦值給變量a，而後再自增1 
* 使用++i時，i先將自身的值自增1,再將自增後的值賦值給變量a

https://blog.csdn.net/hjb2722404/article/details/50423804

3.比較運算符

var x = 5;

注意:有三個等號的,比較的是值跟類型 .

4.特殊狀況

字符串拼接+字符串運算 特殊狀況。python中有拼接字符串中更簡便的辦法，其實在js中也有，es6模板字符串。（擴展）

<script type="text/javascript">        
        var a='你們晚上好';
        var b='我們要抓緊學習';
        console.log(a+b);
</script>

可是不能對字符串進行別的運算,只能拼接.(python還能夠進行乘運算,相似:'a'*3,)

<script type="text/javascript">        
        var a='你們晚上好';
        var b='我們要抓緊學習';
        console.log(a-b);
</script>
輸出:NaN,也就是:not a number 是number類型

看另外一個示例,

<script type="text/javascript">        
        /*var a='你們晚上好';
        var b='我們要抓緊學習';
        console.log(typeof(a-b));*/
        var b1 = 'one';
        var b2  = 'two';
        console.log(b1*b2)
        console.log(typeof(b1*b2))
</script>

輸出:
NaN
number
這裏能夠看出:NaN的類型是數值型的.

 

數據類型轉換

將數值類型轉換成字符串類型

隱式轉換

<script type="text/javascript">        
        var n1 = 123;
        var n2 = '123';
        var n3 = n1+n2;
        // 隱式轉換
        console.log(n3)
        console.log(typeof n3);
</script>
輸出:
123123
string

強制類型轉換

var num = 234;
console.log(num.toString());
console.log(typeof(num.toString()));   s必須大寫
輸出:
234
string(證實已經轉成了字符型)

var n1=345;    
var str1=String(n1);    s必須大寫
console.log(typeof str1);
輸出:
string

 

將字符串類型轉換成數值類型

var n1='123,abc';    
var num=Number(n1);
console.log(num)
console.log(typeof num);

輸出:
NaN   (強制類型轉換後的不是數據型的)
number  (NaN的類型是數值型的.)

 

parseInt能夠解析應該字符串,而後返回一個整數.

<script type="text/javascript">    
        var  stringNum = '789.123wadjhkd';
        var num2 =  Number(stringNum);
        console.log(num2)
        console.log(parseInt(stringNum))
        console.log(parseFloat(stringNum));
</script>
輸出:
NaN  (num2的數據類型不是數字)
789 (把整數取出來了)
789.123(取出帶小數的數字.)

 

任何數據類型均可以轉換爲boolean類型

<script type="text/javascript">    
        var a=0;
        console.log(Boolean(a));  輸出:false
        var b=1;
        console.log(Boolean(b));  輸出:true
        var c='';
        console.log(Boolean(c));  輸出:false
        var d=Infinity;
        console.log(Boolean(d));  輸出:true
        var e=NaN;
        console.log(Boolean(e));  輸出:false
        var f=null;
        console.log(Boolean(f));  輸出:false
</script>

 流程控制

1.if 、if-else、if-else if-else

<script type="text/javascript">
        var ji=21;
        if(ji>20){
            console.log('這裏能夠直接輸出內容')
        }
        alert('alex')
        
</script>

注意書寫的格式,與python對比,

var a=20;
        if(a>15){
            console.log(a)
        }else{
            console.log('這是一個較小的數')
        }

if-else模式

if (true) {
   //執行操做
}else if(true){
    //知足條件執行            
}else if(true){
   //知足條件執行        
}else{
  //知足條件執行
}

if-else if-else模式

注意：瀏覽器解析代碼的順序 是從上往下執行，從左往右

 

2.邏輯與&&、邏輯或||

邏輯與&&:兩個條件都成立時,值爲True

邏輯或||:有;一個成立時,值就爲True

<script type="text/javascript">
        var a=10,b=20;
        if(a<b&&b>a){
            console.log(a)
        }else{
            console.log(b)
        }        
</script>
輸出:
10

3.switch

case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。

若是某個條件中不寫break,那麼直到該程序遇到下一個break中止,default是都會執行的.

<script>
        var gameScore='better'
        switch (gameScore) {
            case 'hhh':
                // statements_1
                console.log('是hhh')
                break;
            case 'lll':
                console.log('輸出什麼呢')
            default:
                // statements_def
                console.log('結束了')
                // break;
            console.log('沒有遇到break')
        }

</script>

4.while循環

循環的三個步驟:

1,初始化循環變量;2,判斷循環條件;3更新循環變量.

<script>
    var i = 1; //初始化循環變量
    while(i<=9){ //判斷循環條件
        console.log(i);
        i = i+1; //更新循環條件
        }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var a=1;
        while(a<101){
            if(a%2==0){
                console.log(a);
            }
            a=a+1;
        }
    </script>
</body>
</html>
<tab></tab>

1-100內的偶數

5.do_while

無論有沒有知足while中的條件do裏面的代碼都會執行依次.

<script>
    var i=3;
    do{
        console.log(i);
        i++;
    }while(i<2)
</script>
輸出:
3

先執行一次,輸出i的值,執行到while處,判斷條件不成立,結束運行.

6.for循環

i++,先讓i的值參與運算,而後在執行自加一,

<script>
        for(var i=1;i<10;i++){
            console.log(i)
        }
</script>

var i=1;會進行變量提高,可是循環完一遍後不會再進行從新賦值.

 

 

輸出三角形的問題.

 

 

經常使用內置對象

所謂內置對象就是ECMAScript提供出來的一些對象，咱們知道對象都是有相應的屬性和方法.

數組Array

1.數組的建立方式

(1),字面量方式建立

<script>
    var color=['red',123,'hhh']
    console.log(color)
</script>

輸出:

1. (3) ["red", 123, "hhh"]
1. 0:"red"
2. 1:123
3. 2:"hhh"
4. length:3
5. __proto__:Array(0)

(2)使用構造函數的方式建立,使用new關鍵詞對構造函數進行建立對象

  var colors2 = new Array();

2.數組的賦值:經過下標進行賦值

var arr = [];
//經過下標進行一一賦值
arr[0] = 123;
arr[1] = '是嗎';
arr[2] = '是的'

3.數組的經常使用方法

3.1數組的合併concat()

<script>
    var arr1=['a','b','c']
    var arr2=[1,2,3]
    var arr=arr1.concat(arr2)  (此處能夠互換兩個數組的位置,輸出結果不同)
    console.log(arr)
</script>
輸出;

["a", "b", "c", 1, 2, 3]

3.2 join() 將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串

var arr1=['a','b','c']
var str=arr1.join('_')
console.log(str)
輸出:
a_b_c

3.3 將數組轉換成字符串 toString()

var arr=[12,34,45,67];
var str=arr.toString();
console.log(str)
輸出:
12,34,45,67

3.4 slice(start,end); 返回數組的一段，左閉右開(顧首不顧尾)

var arr=[12,34,45,67];
var arr1=arr.slice(1,3)
console.log(arr1)
輸出;
[34,45]

3.5 pop 移除數組的最後一個元素

注意於python對比記憶,python的列表pop後接到的是被"彈出"的值

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.pop();
console.log(newArr);//["張三", "李四"，"王文"]

 

3.6添加元素

var arr = ['張三','李四','王文','趙六'];
arr.push('sb')
console.log(arr)

 

待完成.