爬蟲不得不學之 JavaScript 入門篇

sergiojune發表於2019-02-13

現在的爬蟲越來越難了,不再和之前的那樣,隨便抓個包就可以找到相關的 url ,然後 post 一下或者 get 一下資料就出來了。還有一個可能就是可能你以前用來學習的爬蟲網站太簡單了,還沒有看見過那些猛的。上兩週我就想弄弄知乎登陸,引數的加密算是把 js 程式碼扣出來了,但是隻能在瀏覽器上執行,一換到 Python 執行就各種報錯,你不會 JavaScript 就什麼都調不了,所以二話不說,開啟了新的大陸。那就開始吧!

1. JavaScript 介紹

JavaScript 是執行在 客戶端的語言,和你們說的 Java 是很不一樣的, Java 通常用於伺服器端的。但是他們兩者也有相似之處,比如 JavaScript 的命名規範和名稱和 Java 相似。其他的好像就沒有什麼了,哈哈。

JavaScript 也是一門指令碼語言,和 python 一樣,都是解釋性語言,即每執行一行程式碼就解釋一行,只不過 JavaScript 的直譯器在瀏覽器內部。

JavaScript 最初被應用是為了處理與表單相關的驗證,現在應用就更加廣了,可以說是幾乎無所不能,比如用來做服務端開發,命令列工具、桌面程式和遊戲開發等。

我在學了之後也跟著弄了兩個小的頁面遊戲,懷念童年。

爬蟲不得不學之 JavaScript 入門篇

爬蟲不得不學之 JavaScript 入門篇


2.JavaScript組成

爬蟲不得不學之 JavaScript 入門篇


  • EcmaScript:JavaScript 的核心,定義了 JavaScript 的基本語法和資料型別,也是我們今天所學的內容。

  • DOM:document odject model, 文件物件模型,用於操作網頁中的頁面元素的,比如可以控制相關元素的增刪改查。

  • BOM:browser object model,, 瀏覽器物件模型, 用於操作瀏覽器視窗,比如彈出框,控制頁面滑動等。


3.JavaScript 變數

在瞭解變數之前,先要知道 JavaScript 程式碼寫在那裡:

  1. 行內,即寫在 html 的元素中,不建議

  2. 嵌入,即寫在 <script>標籤內,這個練習時可以使用,但當程式碼量大的時候也不建議

  3. 外部,即 js 程式碼都在另一個檔案內,用連結的方式接入 html 檔案即可,推薦使用這種方式。


還有註釋:

  1. 單行註釋: // 註釋內容

  2. 多行註釋: /* 註釋內容 */

3.1 變數的定義以及作用

變數是計算機記憶體中儲存資料的識別符號,根據變數名稱可以獲取到記憶體中儲存的資料。

使用變數我們可以更方便的獲取或修改記憶體中的資料。

3.2 定義變數

使用 var 關鍵字來宣告變數,和 python 差不多,都是弱型別的語言,只不過 python 不需要使用關鍵字來宣告。

爬蟲不得不學之 JavaScript 入門篇

注:console.log()這個方法只是在控制檯列印一下變數而已。

3.3 變數的命名規則和規範

1):規則-必須遵守的,不遵守就會報錯,就好比人類的法律

  • 由字母、數字、下劃線和 $ 組成,但是不能以數字開頭,如:12asd 這個名字就會報錯

  • 不能是關鍵字或保留字,比如 var、for等

  • 嚴格區分大小寫,就是說大寫和小寫都是不一樣的變數

2):規範-建議遵守的,但不遵守也不會報錯,比如人類的道德

  • 變數名必須有意義,因為這樣別人才能看得懂,而且也利於維護,沒有意義的就像我們需要破解相關引數時看到的 js 混淆,想想就頭痛。

  • 遵守駝峰命名法,首字母小寫,後面單詞的首字母大寫,如:userName

3.4 小案例

瞭解完變數之後可以做個小案例:交換兩個值


爬蟲不得不學之 JavaScript 入門篇


4. 資料型別

JavaScript 的資料型別分兩種,一個為簡單資料型別,另一個為複雜資料型別。

簡單資料型別有 Number、String、Boolean、undefined 和 null。一共五種

複雜資料型別比如 object,這個以後遇到再說,慢慢來。

4.1 Number

Number 為數值固定的表示法,用來表示整數和浮點數的。它的字面量就是數值,那字面量是什麼意思呢?字面量就是這個變數表示的值,

爬蟲不得不學之 JavaScript 入門篇

比如上面變數 a 的字面量就是 12,b 的字面量就是 45。

我們還可以使用 typeof 關鍵字來判斷這個資料型別

爬蟲不得不學之 JavaScript 入門篇

除了使用上面的十進位制來賦值,我們還可以使用八進位制和十六進位制

爬蟲不得不學之 JavaScript 入門篇

八進位制的數是以 0 開頭的,而十六進位制的是以 0x 開頭的,其他的進位制就不討論了。

無論你寫何種進位制,它的儲存還是以二進位制來儲存的,所以這樣就弄成了浮點數的儲存精確度,浮點數只能精確到17位小數

爬蟲不得不學之 JavaScript 入門篇

可以看到 兩個浮點數的相加不是很準確,所以不要在有浮點數的運算下做判斷,有可能會有你想不到的結果,如

爬蟲不得不學之 JavaScript 入門篇

浮點數除了直接表示我們還可以使用科學計數法,當然,整數也是一樣可以使用的。

爬蟲不得不學之 JavaScript 入門篇

Number 資料型別是有範圍的,但是不需要我們刻意去計,記住它的關鍵字就可以了。

爬蟲不得不學之 JavaScript 入門篇

最後再說一個關鍵字:NaN:not a number,這個表示不是數值,當有兩個資料運算時,運算失敗就會返回這個值。我們也可以判斷一個資料型別是不是 NaN,使用 isNaN() 方法即可。

爬蟲不得不學之 JavaScript 入門篇

4.2 String

String 型別就是用單引號或雙引號括起來的內容就是了,和 python 的字串型別也是差不多的。

爬蟲不得不學之 JavaScript 入門篇

length 屬性是獲取字串的長度。

連線兩個字串可以使用 + 進行連線, + 號兩邊不需要全是 String 型別也可以進行連線

爬蟲不得不學之 JavaScript 入門篇

思考:如何列印出下列字串

  1. 我是一個"帥哥"

  2. 我喜歡"學‘python’"

這裡面有單引號和雙引號,如果直接進行列印的話就會出錯,這時候我們就需要把這些有意義的字元給轉義符,轉成普通的字元

爬蟲不得不學之 JavaScript 入門篇

根據上面的轉義符,就可以寫出下面語句了

爬蟲不得不學之 JavaScript 入門篇

4.3 Boolean

boolean 型別,字面量只有 truefalse,表示真假,即表示計算機的 1 和 0。

當我們描述只有兩種結果的事物是可以使用這個。

4.4 undefined 和 null

  1. undefined 表示一個宣告瞭沒有賦值的變數,所以變數的預設值就是undefined。

  2. null 只是表示為空,如果要想把該值設為 null, 只能手動賦值。


5. 資料型別轉換

5.1 其他型別轉 String 型別

  • 使用 toString() 方法


爬蟲不得不學之 JavaScript 入門篇

需要注意:undefined 和 null 型別不能使用這個方法

  • 使用 String() 強轉,這個對任何型別都適用

爬蟲不得不學之 JavaScript 入門篇

  • 使用 + 連線符 連線空字元,這是最方便的,也是支援所有型別

爬蟲不得不學之 JavaScript 入門篇

5.2 其他型別轉 Number 型別

  • 使用 Number() ,當轉不了的時候會返回 NaN,說明不是數值,在將 Boolean 型別轉 Number 時,true會轉為 1, false 會轉為 0。這個方法不支援將數字開頭帶有其它字元的字串轉為數值型別,如 "12df"

爬蟲不得不學之 JavaScript 入門篇

  • 使用 parseInt() ,只能轉為整數,而且轉不了Boolean。但是可以轉以數字開頭而帶有字元的字串。這個就可以應用在比如需要將 "16px" 轉為數值,就可以使用這個。轉不了時也會返回 NaN。

  • 使用 parseFloat() 可以轉為浮點數,當字串為整數時也可以轉為整數。需要注意的是:當字串中有兩個小數點的時候,只會轉第二個小數點之前的數字,後面的都當作字串

爬蟲不得不學之 JavaScript 入門篇

  • 使用 + 或 - 來將值取正或取負。這個的功能和 Number 差不多。

爬蟲不得不學之 JavaScript 入門篇

  • 使用 - 來進行減法運算來轉。這個使用運算子就會先把左右兩邊的型別先轉為數值型別再運算,所以可以用來相減 0。至於 + 不行,是因為這個用來做字串的拼接了。

爬蟲不得不學之 JavaScript 入門篇

5.3 其他型別轉 Boolean 型別

這個使用 Boolean() 來轉就可以了,所有型別都可以轉。轉為 false 的情況為 null、undefined、NaN、0 和 空字串,其他情況均為 true。

其實這個還可以使用隱式轉換,就是不需要自己手動轉,直譯器會自動幫我們轉,隱式轉換通常用在判斷語句的情況,隱式轉換可以減少程式碼的書寫,等說到判斷語句再說,下面就有!


6. 操作符

操作符就是用來對資料型別進行操作的符號,每個語言的操作符都差不多,這裡再說下可以更深刻一點!

6.1 算術運算子

+ - * / % 五個,任何一個數 除 0 都為為無窮大,模 0 為 NaN

爬蟲不得不學之 JavaScript 入門篇

6.2 一元運算子

一元運算子就是隻需要一個運算元的運算子,有 ++、-- 和 !

  • 前置++:如 a++,變數在前,這個是先將變數的結果返回再對自身加 1

  • 後置++:如 ++a,變數在後,這個是先將變數進行自身加 1,再把結果返回

還有 -- 也是一樣的,只是 它是自身減 1,在運算中需要注意變數在一元運算子的順序。

  • ! 就是對運算元取反,而且返回的是 Boolean 型別

爬蟲不得不學之 JavaScript 入門篇

6.3 邏輯運算子

邏輯運算子有 && 、|| 和 !,! 因為只對一個運算元操作所以也屬於一元運算子。

  • &&:這個是與運算子,只有當兩邊都為 true 的時候才會返回 true,其他情況都返回 false。

  • ||:這個是或運算子,只有當兩邊都為 false 的時候才返回 false, 其他情況都返回 true。

爬蟲不得不學之 JavaScript 入門篇

6.4 關係運算子

關係運算子有 < > <= >= == != === 和 !==。運算完都是返回 Boolean 型別的,這裡就不細說了,都差不多的,只說下 == 和 === 的區別,還有 !== 和 != 的區別。== 只判斷兩值的字面量相等不相等,不會判斷資料型別,而 === 會先去判斷資料型別再判斷字面量,!= 和 !== 的區別也是這樣。

爬蟲不得不學之 JavaScript 入門篇

6.5 賦值運算子

賦值運算子有 += -= *= /= %= = 六個。

+= 就是把左右兩邊的值相加起來再賦值給左邊的值,其他的也一樣,就不多說了。

爬蟲不得不學之 JavaScript 入門篇

6.6 運算子優先順序從高到低(運算順序)

  1. ()

  2. 一元運算子

  3. 算術運算子,同級時先 * / 再 + -

  4. 關係運算子:> >= < <=

  5. 相等運算子:== === != !==

  6. 邏輯運算子:同級時先 && 再 ||

  7. 賦值運算子


7. 流程結構

JavaScript 的流程結構有三種,分別是順序結構,分支結構和迴圈結構,這個也和 python 差不多的。

順序結構就是程式碼是按順序從上到下執行的,分支結構就是按照給定條件的是否成立而執行不同的語句,迴圈結構就是重複執行某一段程式碼。

順序結構就不多說了,我們剛才執行的程式碼就是順序結構的,現在先說下分支結構。

7.1 分支結構

使用分支結構可以使用 if 和 else 組成的語句,寫法和 python 差不多。

爬蟲不得不學之 JavaScript 入門篇

單獨 if 語句

說到判斷,就有個隱式轉換,就是 if 括號裡面的值會將任意型別的值隱式轉換成 Boolean 型別。如下:

爬蟲不得不學之 JavaScript 入門篇

另一種形式的分支語句:

爬蟲不得不學之 JavaScript 入門篇

if-else 一起用

這個 if-else 合用還有個簡單點的寫法,叫做三元運算子,語法為

爬蟲不得不學之 JavaScript 入門篇

當表示式1 為 true 的時候,就會把 表示式2 的值給返回,否則返回 表示式3 的值,這個有一個缺陷,就是必須要有結果返回

爬蟲不得不學之 JavaScript 入門篇

還有一種形式的分支語句:

爬蟲不得不學之 JavaScript 入門篇

if-else if-if 三個合用

上面的 三個合用我們也可以使用 switch 語句來改寫,這個是選擇關鍵詞。語法為

爬蟲不得不學之 JavaScript 入門篇

改寫後:

爬蟲不得不學之 JavaScript 入門篇

因為 case 的值只能是一個值,不能是範圍,所以用了個除法來解決,要不然需要寫大量的 case,還需要注意一點是一定需要記得寫 break,否則在匹配到相應的值之後它會一直往下執行不管 case 值是否對應,直到遇到 break 或者 全部執行完

7.2 迴圈結構

JavaScript 的迴圈結構也有 while for語句,但他還有 do-while語句。

  • for語句:一般在確定了迴圈的次數就會使用這個比較方便,語法為:

爬蟲不得不學之 JavaScript 入門篇

這個先去執行初始化表示式1, 然後去執行判斷表示式2,符合條件就會執行迴圈體,迴圈體執行完之後就執行自增表示式3,再去判斷,接下來就是重複剛才的動作,直到不滿足判斷表示式2

爬蟲不得不學之 JavaScript 入門篇

  • while 語句:在無法確定迴圈次數的時候就可以用這個,使用這個需要注意迴圈結束的條件,以免寫了死迴圈。語法為:

爬蟲不得不學之 JavaScript 入門篇

滿足迴圈條件之後就執行迴圈體,然後再去執行迴圈條件,接下來就是重複剛才的動作直到不滿足條件

爬蟲不得不學之 JavaScript 入門篇

  • do-while 語句:這個也是在不知道迴圈次數的時候使用,但是當迴圈體無論如何都需要執行一次的話就可以選擇使用這個。語法為:

爬蟲不得不學之 JavaScript 入門篇

先去執行迴圈體,再去判斷迴圈條件,接下來就是重複剛才的動作直到迴圈條件不滿足

在迴圈結構中還可以使用 break 和 continue 來對迴圈進行跳出的操作。break 就是跳出整個迴圈,就是迴圈結束,而 continue 是跳出本次迴圈,接著下一次的迴圈

學習了迴圈之後,我們也可以嘗試著自己列印一個三角形,或者 99 乘法表來滿足一下自己。

爬蟲不得不學之 JavaScript 入門篇


爬蟲不得不學之 JavaScript 入門篇

這兩個的思路都是差不多的,只要你搞定了第一個三角形的思路,下面的乘法表自然就迎刃而解了,這裡就不多說了。

下篇就開始進入複雜的資料型別了,即 object,準備好了嗎?


爬蟲不得不學之 JavaScript 入門篇


相關文章