javaScript基礎知識

時間 2019-12-10

原文原文鏈接

1 js概述

1.1 javascript歷史

　　1994年，網景公司（Netscape）發佈了Navigator瀏覽器0.9版。這是歷史上第一個比較成熟的網絡瀏覽器，轟動一時。可是，這個版本的瀏覽器只能用來瀏覽，不具有與訪問者互動的能力。......網景公司急需一種網頁腳本語言，使得瀏覽器能夠與網頁互動。javascript

　　34歲的系統程序員Brendan Eich登場了。Brendan Eich的主要方向和興趣是函數式編程，網景公司招聘他的目的，是研究將Scheme語言做爲網頁腳本語言的可能性。Brendan Eich本人也是這樣想的，覺得進入新公司後，會主要與Scheme語言打交道。爲了應付公司安排的任務，他只用10天時間就把Javascript設計出來了。html

javascript設計思路：java

　　（1）借鑑C語言的基本語法；python

　　（2）借鑑Java語言的數據類型和內存管理；程序員

　　（3）借鑑Scheme語言，將函數提高到"第一等公民"（first class）的地位；編程

　　（4）借鑑Self語言，使用基於原型（prototype）的繼承機制。數組

Javascript語言其實是兩種語言風格的混合產物----（簡化的）函數式編程+（簡化的）面向對象編程。這是由Brendan Eich（函數式編程）與網景公司（面向對象編程）共同決定的。瀏覽器

1.2 ECMAScript

　　ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）經過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用普遍，它每每被稱爲JavaScript或JScript，但實際上後二者是ECMA-262標準的實現和擴展。網絡

ECMAScript描述內容:app

語法
類型
語句
關鍵字
運算符
對象(封裝、繼承、多態)基於對象的語言

2 js引入方式

2.1 直接編寫

<script>
    var s = "hello world";
    console.log(s);
</script>

2.2 導入文件

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

index.js

var s = "hello world";
console.log(s);

3 js變量

　　聲明變量時不用聲明變量類型。所有使用var關鍵字；

　　　　var s = "hello world",

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

　　　　var name="jack",age=18;

聲明變量時，能夠不用var；若是不用var，表示全局變量
變量命名，首字符只能是字母，下劃線，$美圓符號；其他爲字母、數字、下劃線的組合。

4 js常量和標識符

　　常量：直接在程序中出現的數據。

　　標識符：

由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成；
經常使用於表示函數、變量等的名稱；
例如：_abc,$abc,abc,abc123是標識符，而1abc不是；
JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符。

5 js數據類型

　　基本數據類型

　　引用數據類型

　　　　number ----- 數值

　　　　boolean ----- 布爾值

　　　　string ----- 字符串

　　　　undefined ----- undefined

　　　　null ----- null

5.1 數字類型

　　不區分整型數值和浮點型數值;

　　全部數字都採用64位浮點格式存儲，至關於Java和C語言中的double格式

　　能表示的最大值是±1.7976931348623157 x 10308

　　能表示的最小值是±5 x 10 -324 　

5.2 字符串類型

　　是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；經常使用特殊字符在字符串中的表達；

　　字符串中部分特殊字符必須加上右劃線\；經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線

5.3 布爾類型

　　Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0

　　布爾值也能夠看做on/off、yes/no、1/0對應true/false

　　Boolean值主要用於JavaScript的控制語句

5.4 undefined類型

Undefined 類型只有一個值，即 undefined。

當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined"。

6 運算符

算術運算符：

+ - * / % ++ --

比較運算符：

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

邏輯運算符：

&& || ！

賦值運算符：

= += -= *= /=

字符串運算符：

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

注意：

+ 除了能夠表示加法運算還能夠用於字符串的鏈接例如："abc"+"def"="abcdef"
js不一樣於python，是一門弱類型語言
NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據

7 流程控制

7.1 順序結構

　　從上向下依次執行

<script>
    console.log("星期一");
    console.log("星期二");
    console.log("星期三");
</script>

7.2 分支結構

7.2.1 if-else結構：

var x= (new Date()).getDay();
//獲取今天的星期值，0爲星期天
var y;
if ( (x==6) || (x==0) ) {
    y="週末";
}else{
    y="工做日";
}
console.log(y);

7.2.2 switch-case結構

　　switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。

var date =new Date();
var x = date.getDay();

switch(x){
    case 1:y="星期一";    break;
    case 2:y="星期二";    break;
    case 3:y="星期三";    break;
    case 4:y="星期四";    break;
    case 5:y="星期五";    break;
    case 6:y="星期六";    break;
    case 7:y="星期日";    break;
    default: y="未定義";
}
console.log(y);

7.3 循環結構

7.3.1 for循環

　　功能說明：實現條件循環，當條件成立時，執行循環體的語句，不然跳出循環體

　　語法規則：

    for(初始表達式;條件表達式;自增或自減)
    {
            執行語句
            ……
    }

7.3.2 while循環

　　功能說明：運行功能和for相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環；一樣支持continue與break語句。

　　語法規則：

    while (條件){
        循環體語句；
        ...
    }

8 JavaScript對象

　　在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。

8.1 String對象

8.1.1 字符串對象建立

var s ="hello world";
var s = new String("hello word");

8.1.2 字符串對象的屬性和函數

var s ="hello world";
console.log(s.length);          // 獲取字符串的長度
console.log(s.toLowerCase());   // 轉爲小寫
console.log(s.toUpperCase());   // 轉爲大寫
console.log(s.trim());          // 去除字符串兩邊空格

// 字符串查詢方法
s.charAt(index)         // 獲取指定位置字符，其中index爲要獲取的字符索引
s.indexOf(findstr,index)// 查詢字符串位置
s.lastIndexOf(findstr)
s.match(regexp)         // match返回匹配字符串的數組，若是沒有匹配則返回null
s.search(regexp)        // search返回匹配字符串的首字符位置索引

var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]);  // 結果爲"world"
alert(str3);     // 結果爲15

// 子字符串處理方法
x.substr(start, length) //start表示開始位置，length表示截取長度
x.substring(start, end) //end是結束位置
x.slice(start, end)     //切片操做字符串

var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);

alert(str2); //結果爲"cd"
alert(str3); //結果爲"efgh"
alert(str4); //結果爲"cdefg"
alert(str5); //結果爲"fg"
x.replace(findstr,tostr)  // 字符串替換

x.split();              //分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//結果爲"二"

x.concat(addstr)        //拼接字符串

8.2 Array對象

8.2.1 數組建立

// 建立方式1:
var arrname = [元素0,元素1,….];           // var arr=[1,2,3];

// 建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

// 建立方式3:
var arrname = new Array(長度);
//  初始化數組對象:
var cnweek=new Array(7);
cnweek[0]="星期日";
...
cnweek[1]="星期一";
cnweek[6]="星期六";

8.2.2 數組對象的屬性和方法

8.2.2.1 join方法

將數組元素拼接成字符串

var arr1=["hello","world"];
var str1=arr1.join("-");
alert(str1);  // 結果爲"hello-world"

8.2.2.2 concat方法

var str1 = ["hello","world"];
var str2=str1.concat("bejing","shangdi") ;
alert(str1.toString());  //返回結果爲hello,world
alert(str2.toString());  //返回結果爲hello,world,bejing,shangdi

8.2.2.3 數組排序-reverse sort

var arr1=[33, 44, 22, 11];
arr1.reverse(); //數組元素反轉
alert(arr1.toString());
//結果爲11,22,44,33

arr1.sort();    //數組元素排序
alert(arr1.toString());
//結果爲11,22,33,44

arr=[10,21,256,101];
function intSort(a,b){
    return a-b;
}
arr.sort(intSort);
alert(arr); // 結果：10,21,101,256

8.2.2.4 數組切片

//x.slice(start, end)
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
alert(arr2.toString());//結果爲"c,d"
alert(arr3.toString());//結果爲"e,f,g,h"
alert(arr4.toString());//結果爲"c,d,e,f,g"

8.2.2.5 數組的push和pop

//push pop這兩個方法模擬的是一個棧操做
//x.push(value, ...)  入棧
//x.pop()             出棧
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除

var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1);//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1); //結果爲"1,2,3,4,5"

8.2.2.6 數組的shift和unshift

//x.unshift(value,...)
//x.shift()
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //結果爲"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //結果爲"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //結果爲"4,5,1,2,3"

8.3 Date對象

8.3.1 建立Date對象

//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2017/10/18 19:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("10/18/17 19:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2017,10,18,19,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示

8.3.2 獲取日期和時間

　　獲取日期和時間

　　　　getDate() 獲取日

　　　　getDay () 獲取星期

　　　　getMonth () 獲取月（0-11）

　　　　getFullYear () 獲取完全年份

　　　　getYear () 獲取年

　　　　getHours () 獲取小時

　　　　getMinutes () 獲取分鐘

　　　　getSeconds () 獲取秒

　　　　getMilliseconds () 獲取毫秒

　　　　getTime () 返回累計毫秒數(從1970/1/1午夜)

8.3.3設置日期和時間

　　設置日期和時間

　　　　setDate(day_of_month) 設置日

　　　　setMonth (month) 設置月

　　　　setFullYear (year) 設置年

　　　　setHours (hour) 設置小時

　　　　setMinutes (minute) 設置分鐘

　　　　setSeconds (second) 設置秒

　　　　setMillliseconds (ms) 設置毫秒(0-999)

　　　　setTime (allms) 設置累計毫秒(從1970/1/1午夜)

8.3.4日期和時間的轉換

　　getTimezoneOffset():8個時區×15度×4分/度=480;

　　　　返回本地時間與GMT的時間差，以分鐘爲單位

　　toUTCString()

　　　　返回國際標準時間字符串

　　toLocalString()

　　　　返回本地格式時間字符串

　　Date.parse(x)

　　　　返回累計毫秒數(從1970/1/1午夜到本地時間)

　　Date.UTC(x)

　　　　返回累計毫秒數(從1970/1/1午夜到國際時間)

8.4 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) 返回角的正切。

9 Function對象

9.1 函數定義

function 函數名 (參數){ <br> 函數體;

return 返回值;

}

　　功能說明：

　　　　可使用變量、常量或表達式做爲函數調用的參數

　　　　函數由關鍵字function定義

　　　　函數名的定義規則與標識符一致，大小寫是敏感的

　　　　返回值必須使用return

　　　　Function 類能夠表示開發者定義的任何函數。

9.2 Function的調用

function func1(a,b){
    alert(a+b);
}

//只要函數名寫對便可,參數怎麼填都不報錯.
func1(1,2);  //3
func1(1,2,3);//3
func1(1);    //NaN
func1();     //NaN

9.3 函數的內置對象arguments

function nxAdd(){
    var result=0;
    for (var num in arguments){
        result+=arguments[num]
    }
    alert(result)
}
nxAdd(1,2,3,4,5)

9.4 匿名函數

// 匿名函數的應用
(function(){
    alert("tony");
})();

(function(arg){
    console.log(arg);
})('123');

10 BOM對象

10.1 介紹window對象

　　全部瀏覽器都支持 window 對象。

　　概念上講:一個html文檔對應一個window對象.

　　功能上講: 控制瀏覽器窗口的.

　　使用上講: window對象不須要建立對象,直接使用便可.

10.2 Window對象方法

　　alert() 顯示帶有一段消息和一個確認按鈕的警告框。

　　confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

　　prompt() 顯示可提示用戶輸入的對話框。

　　open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

　　close() 關閉瀏覽器窗口。

　　setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。

　　clearInterval() 取消由 setInterval() 設置的 timeout。

　　setTimeout() 在指定的毫秒數後調用函數或計算表達式。

　　clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

　　scrollTo() 把內容滾動到指定的座標。

10.3 setInterval，clearInterval

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

　　　　語法：<br> setInterval(code,millisec)

　　其中，code爲要調用的函數或要執行的代碼串。millisec週期性執行或調用 code 之間的時間間隔，以毫秒計。

11 DOM對象

　　DOM Document Object Model（文檔對象模型）

　　DOM 定義了訪問和操做HTML文檔的標準方法

　　DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)

　　畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。

11.1 DOM節點

11.1.1 節點類型

　　HTML 文檔中的每一個成分都是一個節點。

　　DOM 是這樣規定的：
　　　　整個文檔是一個文檔節點
　　　　每一個 HTML 標籤是一個元素節點
　　　　包含在 HTML 元素中的文本是文本節點
　　　　每個 HTML 屬性是一個屬性節點

　　其中，document與element節點是重點。

11.1.2 節點關係

節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）
每一個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素。

11.1.3 節點查找

　　直接查找

　　　　document.getElementById(「idname」)

　　　　document.getElementsByTagName(「tagname」)

　　　　document.getElementsByName(「name」)

　　　　document.getElementsByClassName(「name」)

　　間接查找

　　　　parentElement　　　　　// 父節點標籤元素

　　　　children　　　　　　　　// 全部子標籤

　　　　firstElementChild　　　　// 第一個子標籤元素

　　　　lastElementChild　　　　// 最後一個子標籤元素

　　　　nextElementtSibling　　 // 下一個兄弟標籤元素

　　　　previousElementSibling // 上一個兄弟標籤元素

11.2 事件綁定方式

方式1：

<div id="div" onclick="eventfirst(this)">第一種事件綁定</div>
<script>
    function eventfirst(self){           // 形參不能是this;
        console.log("第一種事件綁定!");
        console.log(self);   
    }
</script>

方式2：

<p id="event2">第二種事件綁定!</p>
<script>
    var ele=document.getElementById("event2");
    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };
</script>