互聯(lián)網(wǎng)發(fā)展的早期，JavaScript就已經(jīng)成為支持網(wǎng)頁內容交互體驗的基礎技術。隨著時間推移，JavaScript業(yè)已升級成為互聯(lián)網(wǎng)的核心技術。

長期以來，我都在學習JavaScript。學習JS一時爽，一直學習一直爽。

在學習過程中，接觸很多學習資料，圖書、視頻等不一而足。

今天給大家介紹兩個線上教程，都是廣受好評的，相信你一定也看過。

1 Mozilla 開發(fā)者社區(qū) JavaScript 教程

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

教程內容：

• 對于完全初學者
• JavaScript 第一步
• JavaScript 基本結構
• 介紹JavaScript 對象
• JavaScript 指南
• 中級內容
• 客戶端 Web API
• 重新介紹 JavaScript（JS 教程）
• JavaScript 數(shù)據(jù)結構
• 如何使用比較操作符
• 閉包
• 高級內容
• 繼承和原型鏈
• 嚴格模式
• JavaScript 類型數(shù)組
• 內存管理
• 并發(fā)模型以及事件循環(huán)

2 現(xiàn)代 JavaScript 教程

https://zh.javascript.info/

教程內容：

第 一 部分 JavaScript 編程語言

在這兒我們將從頭開始學習 JavaScript，也會學習 OOP 等相關高級概念。

第 二 部分 瀏覽器：文檔，事件，接口

學習如何管理瀏覽器頁面：添加元素，操縱元素的大小和位置，動態(tài)創(chuàng)建接口并與訪問者互動。

第 三 部分 其他文章

教程的前兩部分未涉及的其他主題的內容列表。此處沒有明確的層次結構，你可以按你需要的順序閱讀文章。

avaScript概述

• 1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執(zhí)行的語言)
• Netscape(網(wǎng)景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產(chǎn)品中開發(fā)出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
• 微軟隨后模仿在其IE3.0的產(chǎn)品中搭載了一個JavaScript的克隆版叫Jscript.
• 為了統(tǒng)一三家,ECMA(歐洲計算機制造協(xié)會)定義了ECMA-262規(guī)范.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現(xiàn)的基礎。EcmaScript是規(guī)范.

二 JavaScript的基礎

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

1、聲明變量時不用聲明變量類型. 全都使用var關鍵字;

var a;<br>a=3;

2、一行可以聲明多個變量.并且可以是不同類型

var name="yuan", age=20, job="lecturer";

3、聲明變量時 可以不用var. 如果不用var 那么它是全局變量

4、變量命名,首字符只能是字母,下劃線,$美元符 三選一，余下的字符可以是下劃線、美元符號或任何字母或數(shù)字字符且區(qū)分大小寫，x與X是兩個變量　

常量 ：直接在程序中出現(xiàn)的數(shù)據(jù)值

標識符：

1. 由不以數(shù)字開頭的字母、數(shù)字、下劃線(_)、美元符號($)組成
2. 常用于表示函數(shù)、變量等的名稱
3. 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
4. JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符

2.3.1 數(shù)字類型(number)

• 不區(qū)分整型數(shù)值和浮點型數(shù)值;
• 所有數(shù)字都采用64位浮點格式存儲，相當于Java和C語言中的double格式
• 能表示的最大值是±1.7976931348623157 x 10308
• 能表示的最小值是±5 x 10 -324 　

整數(shù)：
在JavaScript中10進制的整數(shù)由數(shù)字的序列組成
精確表達的范圍是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范圍的整數(shù)，精確度將受影響
浮點數(shù)：
使用小數(shù)點記錄數(shù)據(jù)
例如：3.4，5.6
使用指數(shù)記錄數(shù)據(jù)
例如：4.3e23 = 4.3 x 1023

16進制和8進制數(shù)的表達:
16進制數(shù)據(jù)前面加上0x，八進制前面加0;16進制數(shù)是由0-9,A-F等16個字符組成;8進制數(shù)由0-7等8個數(shù)字組成

16進制和8進制與2進制的換算:

2.3.2 字符串類型(string)

是由Unicode字符、數(shù)字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；常用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；常用的轉義字符 \n:換行 \':單引號 \":雙引號 \:右劃線

2.3.3 布爾類型(boolean)

Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用于JavaScript的控制語句，例如：

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

2.3.4 Null & Undefined類型

Undefined類型

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

當函數(shù)無明確返回值時，返回的也是值 "undefined";

Null類型

另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數(shù)或方法要返回的是對象，那么找不到該對象時，返回的通常是 null

2.4 運算符

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

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

邏輯運算符：
     &&   ||   ！

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

字符串運算符：
    +  連接，兩邊操作數(shù)有一個或兩個是字符串就做連接運算

2.4.1 算術運算符

注意1: 自加自減

假如x=2，那么x++表達式執(zhí)行后的值為3，x--表達式執(zhí)行后的值為1；i++相當于i=i+1，i--相當于i=i-1；
遞增和遞減運算符可以放在變量前也可以放在變量后：--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

注意2: 單元運算符

- 除了可以表示減號還可以表示負號 例如：x=-y

+ 除了可以表示加法運算還可以用于字符串的連接 例如："abc"+"def"="abcdef"

注意3: NaN

    var d="yuan";
    d=+d;
    alert(d);//NaN:屬于Number類型的一個特殊值,當遇到將字符串轉成數(shù)字無效時,就會得到一個NaN數(shù)據(jù)
    alert(typeof(d));//Number

    //NaN特點:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=

2.4.2 比較運算符

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

2.4.3 邏輯運算符

if (2>1 && [1,2]){
    console.log("條件與")
}

// 思考返回內容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

2.5 流程控制

• 順序結構(從上向下順序執(zhí)行)
• 分支結構
• 循環(huán)結構

2.5.1 順序結構

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

2.5.1 分支結構

if-else結構：

if (表達式){
   語句１;
   ......
   } else{
   語句２;
   .....
   }

功能說明：如果表達式的值為true則執(zhí)行語句1,否則執(zhí)行語句2

if-elif－else結構：

if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

switch-case結構

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

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="未定義";
}

2.5.2 循環(huán)結構

for循環(huán)：

語法規(guī)則：

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

功能說明：實現(xiàn)條件循環(huán)，當條件成立時，執(zhí)行語句1，否則跳出循環(huán)體

for( 變量 in 數(shù)組或對象)
    {
        執(zhí)行語句
        ……
    }

while循環(huán)：

語法規(guī)則：

while (條件){
    語句1；
    ...
}

功能說明：運行功能和for類似，當條件成立循環(huán)執(zhí)行語句花括號{}內的語句，否則跳出循環(huán)；同樣支持continue與break語句。

2.5.3 異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行。
    //e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
     //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執(zhí)行。
}

三 JavaScript的對象

在JavaScript中除了null和undefined以外其他的數(shù)據(jù)類型都被定義成了對象，也可以用創(chuàng)建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數(shù)功能都是基于對象實現(xiàn)的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數(shù)字對象獲取可表示最大數(shù)
var bb=new String("hello JavaScript"); 
//創(chuàng)建字符串對象
var cc=new Date();
//創(chuàng)建日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數(shù)組對象
</script>

3.1 String對象

字符串對象創(chuàng)建

字符串創(chuàng)建(兩種方式)
① 變量 = “字符串”
② 字串對象名稱 = new String (字符串)

var str1="hello world";

var str1= new String("hello word");

字符串對象的屬性和函數(shù)

       x.length         －－－－獲取字符串的長度

 x.toLowerCase()        －－－－轉為小寫
 x.toUpperCase()        －－－－轉為大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數(shù)組，如果沒有匹配則返回null
x.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)         －－－－    拼接字符串

3.2 Array對象

3.2.1 數(shù)組創(chuàng)建

創(chuàng)建數(shù)組的三種方式：

　HTML、CSS、Javascript是前端Web開發(fā)的主要語言，但是學生們經(jīng)常混淆Javascript和HTML。因此，今天我們在這里討論這兩種最重要的編程語言之間的差異。

　　Javascript簡介

　　Javascript 是一種基于文本的編程語言，主要用于Web開發(fā)。它是WWW(萬維網(wǎng))的核心技術之一。

　　通過使用 Javascript，程序員可以創(chuàng)建交互式和響應式Web元素并增強網(wǎng)站的UI。Javascript 在客戶端Web開發(fā)中非常流行，以至于互聯(lián)網(wǎng)上超過97%的網(wǎng)站都將其用于客戶端行為。彈出窗口、圖像滑塊、站點導航菜單、選項卡、表單驗證是用于Web開發(fā)的Javascript的一些示例。

　　HTML簡介

　　HTML是超文本標記語言的首字母縮寫，它是用于創(chuàng)建網(wǎng)頁和Web應用程序的標準標記語言。HTML描述了網(wǎng)頁的結構，瀏覽器從服務器接收HTML頁面，然后將文檔呈現(xiàn)到屏幕上。

　　HTML包含多個元素，這些元素告訴瀏覽器內容的外觀。例如，<p>標簽定義了一個段落，<title>定義了web文檔的標題，<body>定義了可見的頁面內容，<table>定義了一個表格等等。HTML可以嵌入腳本程序如JS程序 會影響網(wǎng)頁的內容和行為。此外，它可以包含 CSS(層疊樣式表)來改善網(wǎng)頁的布局和外觀。

　　Javascript與HTML：主要區(qū)別是什么?

　　句法

　　HTML是一種標記語言，它有多種標簽，如表格標簽、換行標簽、圖片標簽、標題標簽等。同時，Javascript具有不同的功能，可以使網(wǎng)頁具有交互性和動態(tài)性。HTML語法更容易學習和理解。與HTML相比，Javascript是一種復雜的語言。

　　動態(tài)規(guī)劃

　　Javascript使網(wǎng)站動態(tài)化，它可以更改用戶操作的HTML標記的值和屬性，它主要包含在HTML代碼中以制作交互式網(wǎng)頁。

　　另一方面，僅HTML無法制作動態(tài)網(wǎng)頁，因此，無法動態(tài)更改代碼。程序員可以在HTML代碼中包含Javascript來制作動態(tài)網(wǎng)頁。

　　兼容性

　　兼容性是Javascript與HTML的主要關注問題之一。每個瀏覽器都支持HTML，它的標簽可以在每個瀏覽器上毫無問題地呈現(xiàn)，但是，Javascript并不總是與每個瀏覽器兼容。

　　例如，一些Javascript函數(shù)在Chrome或Firefox中運行良好，但在Internet Explorer 中運行不佳，這就是為什么一些網(wǎng)站提到兼容瀏覽器列表以確保在客戶端瀏覽器中正確查看網(wǎng)站。

　　客戶端和服務器端Web開發(fā)

　　HTML用于對網(wǎng)頁的客戶端進行編碼，程序員不能使用它來編寫服務器端代碼。相比之下，Javascript可以在網(wǎng)站的客戶端和服務器端使用，服務器端 Javascript(SSJS)是核心javascript的擴展版本。

　　例如，NodeJS是一個開源和跨平臺的Javascript運行時環(huán)境，允許程序員使用 javascript編寫服務器端代碼。在NodeJS的幫助下，Javascript代碼可以在瀏覽器之外運行。

　　JavaScript與HTML的比較

　　總結

　　我們已經(jīng)討論了有關Javascript與HTML的所有內容。HTML用于創(chuàng)建網(wǎng)頁，它由瀏覽器解釋并以文本和圖像的形式顯示在屏幕上，而javascript主要用于使網(wǎng)頁具有交互性。Javascript是一種比HTML更先進、更復雜的語言，這兩種語言一起使用來制作優(yōu)秀的網(wǎng)站。