JavaScript-基礎知識

時間 2019-11-13

標籤 javascript 基礎知識欄目 JavaScript 简体版

原文原文鏈接

1、JavaScript-簡介

Web前端有三層：javascript

HTML：從語義的角度，描述頁面結構前端
CSS：從審美的角度，描述樣式（美化頁面）java
JavaScript：從交互的角度，描述行爲（提高用戶體驗）python

JavaScript歷史背景介紹

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

開始JavaScript叫作LiveScript，後更名爲JavaScript正則表達式

JavaScript和ECMAScript的關係

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

ECMAScript不是一門語言，而是一個標準json

JavaScript的發展：

2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。數組

JavaScript在移動頁面中，也是不可或缺的。瀏覽器

HTML5推出了一個東西叫作Canvas（畫布），工程師能夠在Canvas上進行遊戲製做，利用的就是JavaScript。

2011年，Node.js誕生，使JavaScript可以開發服務器程序了。

JavaScript入門易學性

JavaScript是有界面效果的，是弱變量類型的語言，變量只須要用var來聲明

JavaScript是前臺語言，而不是後臺語言。JavaScript運行在用戶的終端網頁上

JavaScript的組成

JavaScript基礎分爲三個部分：

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

JavaScript的特色

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

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

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

2、JavaScript基礎

1.JS的引入方式

1 直接編寫
    <script>
        alert('abc')
    </script>
2 導入文件
    <script src="index.js"></script>

2.JS的變量

　1.聲明使用var關鍵字

var a;
a=3;

2.一行能夠聲明多個變量.而且能夠是不一樣類型

var name="alex", age=20, job="teacher";

3.變量命名:

首字符只能是字母,下劃線,$美圓符三選一
餘下的字符能夠是下劃線/美圓符字母/數字/ 且區分大小寫,經常使用
常見用法Camel 標記法，首字母是小寫的，接下來的字母都以大寫字符開頭。例如： 3 var myTestValue = 0, mySecondValue = "hi";

4.「直接量」即常量，也稱爲「字面量」。

　　簡單的直接量有2種：數字、字符串。例如：alert(886);

3.語法規則

（1）JavaScript對換行、縮進、空格不敏感。備註：每一條語句末尾要加上分號

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

（3）JavaScript的註釋：

// 我是單行註釋


/*
    我是多行註釋
    我是多行註釋
*/

4.JavaScript在網頁中輸出信息的寫法

彈出警告框：alert("")

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

用戶輸入：prompt()

alert和prompt的區別：

alert("從前有座山");                //直接使用，不須要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

5.JS的數據類型

數據類型有：

number     -----  數值
boolean    -----  布爾值
string     -----  字符串
undefined  -----  undefined
null       -----   null

typeof()表示「獲取變量的類型」

數值型：number

不區分整型數值和浮點型數值。只要是數，就是數值型

字符串類型（string）:

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起

var a = "abcde";
    var b = "路飛";
    var c = "123123";
    var d = "哈哈哈哈哈";
    var e = "";     //空字符串

布爾類型（bolean）:

Boolean類型僅有兩個值：true和false
Boolean值主要用於JavaScript的控制語句

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

Undefined類型

1.Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

2.當函數無明確返回值時，返回的也是值 "undefined";

Null類型

另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。

不一樣：undefined 是聲明瞭變量但未初始化時賦值，null 則用於表示尚不存在的對象。

6.變量值的傳遞（賦值）

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

7.變量格式轉換

prompt()就是專門用來彈出可以讓用戶輸入的對話框。重要的是：用戶無論輸入什麼，都是字符串。

將number轉化爲string類型：用函數 String() toString()

將字符串轉換成number類型，可用number。

parseInt()能夠將字符串轉數字。取整，只保留數字部分

parseFloat()能夠將字符串轉數字。保留小數部分的數值

八、運算符

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符：
     &&   ||   ！

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算

算術運算符：自增，自減

++i:先計算後賦值
i++：先賦值後計算

比較運算符：

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

比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型.

比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較.

== 比較的是值的相同
console.log(x==y);//返回true

=== 比較的是值和數據類型（內存地址）
console.log(x===y);//返回false

邏輯運算符

&&表示與  兩個條件都成立的時候 才成立
||表示或有一個條件成立的時候 就成立

九、流程控制

if語句

var age = 20;
if(age>18){
    //{}至關於做用域
    console.log('成年');
}
alert('alex'); //下面的代碼照樣執行

if-else語句

var age = 20;
if(age>18){
    //{}至關於做用域
    console.log('成年');
}else{
    console.log('好好學習');
}
alert('alex'); //下面的代碼照樣執行

if-else if -else

var age = 18;
if(age==18){
    //{}至關於做用域
    console.log('成年);
}else if(age==30){
    console.log('而立');
}else{
    console.log('11')
}
alert('alex'); //下面的代碼照樣執行

邏輯與&&、邏輯或|| 與if語句結合

//1.模擬  若是總分 >400 而且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){
    console.log('清華大學錄入成功')
}else{
    alert('高考失利')
}

//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或  只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
    alert('被複旦大學錄入')
}else{
    alert('高考又失利了')

switch 語句

case 表示一個條件，知足這個條件就會輸出，直到遇到break跳出

若是不寫break,程序會遇到下一個break中止。這個就是 'case穿透'

var gameSore = 'n';

        switch(gameSore){
            case 'good':
                console.log('玩的很好');
                break;
            case 'better':
                console.log('玩的更好');
                break;
            case 'best':
                console.log('玩的最好');
                break;
            default:
                console.log('很遺憾，淘汰');
                break;
        }

while循環

初始化循環變量
判斷循環條件
更新循環變量

// 例子：打印 1~9之間的數
var i = 1; //初始化循環變量

while(i<=9){ //判斷循環條件
    console.log(i);
    i = i+1; //更新循環條件
}

練習：將1~100全部是2的倍數在控制檯打印。使用while循環

var i = 1;
while(i <= 100){
    if(i%2==0){
        console.log(i);
    }
    i +=1;
}

do-while循環

//無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{

    console.log(i)
    i++;//更新循環條件

}while (i<10) //判斷循環條件

for循環

for循環遍歷列表是最經常使用的對數據的操做

//輸出1~10之間的數
for(var i = 1;i<=10;i++){
     console.log(i)
 }

練習：輸入1~100之間全部數之和

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum);

for循環嵌套練習

for(var i=1;i<=3;i++){

 　　for(var j=0;j<6;j++){
        document.write('*')//document.write(''); 往瀏覽器文檔中寫
    }

   document.write('<br>')
 }

十、經常使用內置對象

在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量。

String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的

數組Array

字面量方式建立

var colors = ['red','green','yellow'];

使用構造函數（後面會講）的方式建立使用new關鍵詞對構造函數進行建立對象,構造函數與後面的面向對象有關係

var colors = new Array();
//經過下標進行賦值
colors[0] = 'red';
colors[1] = 'green';
colors[2] = 'yellow';
console.log(colors);

數組的經常使用方法

數組的合併 concat()

var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];

var newCity = north.concat(south);
console.log(newCity)

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

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//"98|78|76|100|0"

slice(start,end); 返回數組的一段記錄，顧頭不顧尾

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

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

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

push() 向數組最後添加一個元素

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

reverse() 翻轉數組

var names = ['alex','xiaoma','tanhuang','angle'];
//4.反轉數組
names.reverse();
console.log(names);

sort對數組排序

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

判斷是否爲數組：isArray()

布爾類型值 = Array.isArray(被檢測的值) ;

字符串string

chartAt() 返回指定索引的位置的字符

var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l

concat 返回字符串值，表示兩個或多個字符串的拼接

var str1 = 'al';
var str2  = 'ex';
console.log(str1.concat(str2,str2));//alexex

replace(a,b) 將字符串a替換成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");//舊的，新的
console.log(newStr);//123****755

indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣

var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

slice(start，end) 左閉右開分割字符串

var str = '小馬哥';
console.log(str.slice(1,2));//馬

split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度

var str3 = 'SAKDjlaakljfadfhajdk';
        console.log(str3.split('a',3));

toLowerCase()轉小寫

var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage

toUpperCase()轉大寫

var str = 'xiaomage';
console.log(str.toUpperCase());//XIAOMAGE

Math內置對象

 // Math內置對象
        //1.向上取整(小數點向上加1)，天花板函數
        var x = 1.3142;
        var a = Math.ceil(x);
        console.log(a);//2
        //能夠用於分頁
        var pageNum = 12345/6;
        console.log(Math.ceil(pageNum));//2058
        console.log(pageNum);//2057.5

        //2.地板函數（即小數點前面的數值，保持不變）
        console.log(x);//1.3142;
        console.log(Math.floor(x));//1

        //3.求兩個數的最大值與最小值
        console.log(Math.max(2,5));//最大值 5
        console.log(Math.min(2,5));//最小值 2

        //4.取隨機數Math.random() [0-1),初始值是0
        console.log(Math.random());

        //取200-500之間的隨機數 公式：min+Math.random()*(max-min)
        console.log(200+Math.random()*(500-200));

函數

函數：就是把將一些語句進行封裝，而後經過調用的形式，執行這些語句。

函數的做用：

解決大量的重複性的語句
簡化編程，讓編程模塊化

//1.普通函數，聲明函數
        function add(x,y) {
            return x+y;
        }
        alert(add(1,2));//能夠在任何地方調用函數

        //2.函數對象
        var add = function(x,y){
            return x+y;
        }//函數類型的
        console.log(add(3,4));

function：是一個關鍵字。中文是「函數」、「功能」。
函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。
參數：後面有一對小括號，裏面是放參數用的。
大括號裏面，是這個函數的語句。

js中建立對象的方式

//1.使用Object或者對象字面量建立對象
        var person = Object();
        console.log(person);
        console.log(typeof person);

        //給對象賦值
        person.name='alex';
        person.age=20;
        console.log(person);

        var favfn = function () {
            //this 指的是當前的對象 跟python中的self相似
            console.log(this.name);
        }
        var person2={
            name:'wusir',
            age:26,
            fav:favfn
        }
        console.log(person2);
        person2.fav();

//4.原型模型式建立對象 propotype 它是當前對象的父類
        function Person(name,age){
            this.name=name;
            this.age=age;
        }
        
        Person.prototype.alertName = function () {
            alert(this.name);
        };

        var p1 = new Person('alex',20);
        var p2 = new Person('alex1',23);
        //內存地址與值
        console.log(p1===p2);
        p1.alertName();
        p2.alertName();

僞數組 arguments

arguments表明的是實參，只在函數中使用。

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //獲取形參的個數
        console.log(arguments.length);  //獲取實參的個數

        console.log("----------------");
    }

arguments能夠修改元素，但不能改變數組的長短

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //將實參的第一個數改成99
        arguments.push(8);  //此方法不經過，由於沒法增長元素
    }

清空數組的幾種方式：

var array = [1,2,3,4,5,6];
    array.splice(0);      //方式1：刪除數組中全部項目
    array.length = 0;     //方式2：length屬性能夠賦值，在其它語言中length是隻讀
    array = [];           //方式3：推薦

Date日期對象

建立日期對象只有構造函數一種方式，使用new關鍵字

//建立了一個date對象
var myDate = new Date();

//返回本地時間
console.log(myDate().toLocalString());

//內置函數
        var myDate = new Date();
        console.log(myDate);
        //獲取月份中的第幾天，1-31
        console.log(myDate.getDate());

        //getMonth() 獲取指定日期對象的月份（0-11），須要加一
        console.log(myDate.getMonth()+1);

        //返回四位數的年 2019
        console.log(myDate.getFullYear());

        //getDay 返回一星期的周幾，0代指的是星期日
        console.log(myDate.getDay());

        //getMinutes()獲取分鐘數，getSecond() 獲取秒數
        console.log(myDate.getMinutes());
        console.log(myDate.getSeconds());

        //經常使用：返回本地時間,2019/2/24 上午8:45:53
        console.log(myDate.toLocaleString())

json

//json 是個輕量級的數據交換格式，json有兩種結構：對象與數組
        //1.對象：
        var person={
            name:'zhangsan'
        };

        var packJSON={
            "name":"alex",//字符串鍵值對須要加上引號
            "pwd":123
        };
        console.log(packJSON);//是個對象

        //2.數組 是值的有序的集合
        var packJSON=[{ "name":"alex","pwd":123},{ "name":"wu","pwd":123}];
        console.log(packJSON);
        //json對象和json字符串轉換，在數據傳輸中，JSON一般是字符串形式傳遞的
        //js常見操做json對象，全部json對象和json字符串轉換很是重要的,用parse內置函數
        var jsonStr = '{"name":"alex","pwd":123}';
        var jsonobject = JSON.parse(jsonStr);//json要大寫
        console.log(jsonobject);

        //(2).將json對象 轉爲 json字符串
        var jsonStr2 = JSON.stringify(jsonobject);
        console.log(jsonStr2);//{"name":"alex","pwd":123}

        //3.遍歷JSON對象與JSON數組
        //(1).遍歷json對象,使用for in
        var packJson = {"name":"alex","pwd":123};
        for (var k in packJson){
            //k指的是鍵值對的key值
            console.log( k + ' ' +packJson[k])
        }
        //(2).遍歷JSON數組
        var packJson = [{"name":"alex","pwd":123},{"name":"wusir","pwd":123}];
        for (var i in packJson){
            console.log(i + ' '+ packJson[i].name+' '+packJson[i].pwd);
        }

正則表達式：
對象 RegExp 正則表達式：檢索字符串用來規定文本檢索的內容

//1.-----------建立正則表達式---
        //1.1構造函數 new RegExp(檢測文本，修飾符) i 不區分大小寫 g:全局匹配
        var str = "luffy 2018";
        var reg = new RegExp("l","ig");

        //1.2  字面量方式建立
        var reg1 = /y/ig;  //不區分大小寫，全局匹配

        //2.檢索方式：
        //2.1 test() 檢索字符串中是否包含定義字符模式，返回布爾
        // 要檢索的字符在不在str中存在  在 返回true  不在 返回flase
        console.log(reg1.test(str));

        //2.2 exec()  是檢測字符串中正則表達式 的匹配
        //若是匹配到了  那麼就返回一個存放有結果的數組，若是沒有匹配就返回一個null
        console.log(reg1.lastIndex);//0  保存一次匹配時開始的下標
        console.log(reg1.exec(str)); // 返回個數組結果，若無，則返回null
        console.log(reg1.lastIndex);// 5


        //經常使用方法：
        //1.match  字符串.match（正則）
        var str = "hello world";
        var reg = /o/g;
        //使用 正則表達式模式對字符串執行查找，並將包含查找的的結果做爲數組返回
        console.log(str.match(reg)); //["o","o"]


        //2.replace 替換  replace(被替換的，替換的)
        console.log(str.replace(reg,"*"));

        //3.search()
        console.log(str.search(reg));//查詢字符串 在字符串中出現的下標

        //4. split 以匹配的規則分割
        console.log(str.split(reg));

元字符:一些匹配的規則

 //1  . 匹配除換行符之外的任意字符
        window.onload=function(){
            var str = "luffyCity 2018";
            var reg = /./g; //默認檢索第一個字符
            console.log(reg.exec(str));//l
        };

        //若是不想讓字符有其餘意義  轉移\  \.表明匹配
        str = "www.baidu.com";
        var reg = /www\......\.com/g;
        console.log(reg.exec(str));//www.baidu.com

        //2. []:匹配[]裏面的任意一個字符
        var str1 = "hello";
        var reg1 = /[a-zA-z0-9]/g;//a-z 小寫，A-Z大寫，0-9數字
        console.log(reg1.exec(str1));//h

        var str2= 'a1343';
        var reg2 = /[0-9][0-9][0-9]/g;
        console.log(reg2.exec(str2));//134
        //3. [^] 全部不在這個範圍的字符
        var str3 = "abd123";
        var reg3 = /[^a-z][^A-Z]/g; //匹配條件 之外的字符，兩個字符兩個字符的匹配
        console.log(reg3.exec(str3));//12
        //4.\d:匹配數字  對立 \d：匹配非數字
        var str4="web";
        var reg4 = /\d/g;  //匹配數字
        var reg5 = /\D/g; //非數字
        console.log(reg4.exec(str4));//null
        console.log(reg5.exec(str4));//w

        //5.\w:匹配數字 字母 下劃線  \w:匹配除數字、字母，下劃線之外的任意字符
        var reg6 = /\w/g; //匹配數字  字母 下劃線
        var reg7 = /\W/g; //匹配 \w 之外的任意字符（非\w）
        console.log(reg6.exec(str4));//w
        console.log(reg7.exec(str4));//null

        //6.\s:匹配空格 trim()
        var str5 = ' luffy';
        var reg8 = /\s/g;//空格
        var reg9 = /\S/g; //非空白字符
        console.log(reg8.exec(str5)); // ' '
        console.log(reg9.exec(str5));// l

        //7.^:以什麼開頭   $：是以什麼結尾
        var str6 = "www.luffy.com";
        var reg10 = /^www/g; //^字符
        console.log(reg10.exec(str6));//www
        var reg11 = /^www\......\.com$/g; //字符$
        console.log(reg11.exec(str6));//www.luffy.com
//-------------------------------------------------------------------
        //重複的字符
        //7. ?:匹配字符第一個字符 結果返回：空或'1'；
        var str7 = "webr44546ere";
        var reg12 = /[0-9]?/g;
        console.log(reg12.exec(str7));//"1"

        //8.*:首位是否符合條件，不符合返回空；符合，則看首位一直向後符合的位數
        var reg13 = /[a-z]*/g; //匹配小寫字母，0個或者多個
        console.log(reg13.exec(str7));//' ',

        //9.+:匹配數字，至少匹配一次
        var reg14 = /\d+/g;
        console.log(reg14.exec(str7));//123

        //10.匹配連續的10個字符
        //11.{min,max} 至少min個最多max個