JavaScript學習基礎篇【第1篇】: JavaScript 入門

時間 2019-11-09

標籤 javascript 學習基礎第1篇入門欄目 JavaScript 简体版

原文原文鏈接

JavaScript

快速入門javascript

JavaScript代碼能夠直接嵌在網頁的任何地方，不過一般咱們都把JavaScript代碼放到<head>中，由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行。第二種方法是把JavaScript代碼放到一個單獨的.js文件，而後在HTML中經過<script src="..."></script>引入這個文件。html

例一：放在head內java

<html>
<head>
  <script> alert('Hello, world'); </script>
</head>
<body> ... </body>
</html>

例二：單獨的JS文件調用web

<html>
<head>
  <script src="/static/js/abc.js"></script>
</head>
<body> ... </body>
</html>

把JavaScript代碼放入一個單獨的.js文件中更利於維護代碼，而且多個頁面能夠各自引用同一份.js文件。數組

還能夠在同一個頁面中引入多個.js文件，還能夠在頁面中屢次編寫<script> js代碼... </script>，瀏覽器按照順序依次執行。瀏覽器

語法函數

JavaScript的語法和Java語言相似，每一個語句以;結束，語句塊用{...}。可是，JavaScript並不強制要求在每一個語句的結尾加;，瀏覽器中負責執行JavaScript代碼的引擎會自動在每一個語句的結尾補上，但注意：讓JavaScript引擎自動加分號在某些狀況下會改變程序的語義，致使運行結果與指望不一致。學習

花括號{...}內的語句具備縮進，一般是4個空格。縮進不是JavaScript語法要求必須的，但縮進有助於咱們理解代碼的層次，因此編寫代碼時要遵照縮進規則。{...}還能夠嵌套，造成層級結構。spa

註釋設計

1. 以//開頭直到行末的字符被視爲行註釋，註釋是給開發人員看到，JavaScript引擎會自動忽略。

// 這是一行註釋
alert('hello'); // 這也是註釋

2. 另外一種塊註釋是用/*...*/把多行字符包裹起來，把一大「塊」視爲一個註釋：

/* 從這裏開始是塊註釋 仍然是註釋 仍然是註釋 註釋結束 */

數據類型

Number

JavaScript不區分整數和浮點數，統一用Number表示，如下都是合法的Number類型：

123; // 整數123
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000，等同於1234.5
-99; // 負數
NaN; // NaN表示Not a Number，當沒法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示爲Infinity

計算機因爲使用二進制，因此，有時候用十六進制表示整數比較方便，十六進制用0x前綴和0-9，a-f表示，例如：0xff00，0xa5b4c3d2，等等，它們和十進制表示的數值徹底同樣。

Number能夠直接作四則運算，規則和數學一致：

1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5 ,是求餘運算。%

字符串

字符串是以單引號'或雙引號"括起來的任意文本，好比'abc'，"xyz"等等。請注意，''或""自己只是一種表示方式，不是字符串的一部分，所以，字符串'abc'只有a，b，c這3個字符。

布爾值

布爾值和布爾代數的表示徹底一致，一個布爾值只有true、false兩種值，要麼是true，要麼是false，能夠直接用true、false表示布爾值，也能夠經過布爾運算計算出來。

&& 運算是與運算、|| 運算是或運算、! 運算是非運算

比較運算符

當咱們對Number作比較時，能夠經過比較運算符獲得一個布爾值：

2 > 5; // false
5 >= 2; // true
7 == 7; // true

實際上，JavaScript容許對任意數據類型作比較：

false == 0; // true
false === 0; // false

要特別注意相等運算符==。JavaScript在設計時，有兩種比較運算符：

第一種是==比較(兩個等號)，它會自動轉換數據類型再比較，不少時候，會獲得很是詭異的結果；

第二種是===比較(三個等號)，它不會自動轉換數據類型，若是數據類型不一致，返回false，若是一致，再比較。

因爲JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。

另外一個例外是NaN這個特殊的Number與全部其餘值都不相等，包括它本身：

NaN === NaN; // false

惟一能判斷NaN的方法是經過isNaN()函數：

isNaN(NaN); // true

最後要注意浮點數的相等比較：

1 / 3 === (1 - 2 / 3); // false

這不是JavaScript的設計缺陷。浮點數在運算過程當中會產生偏差，由於計算機沒法精確表示無限循環小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined

null表示一個「空」的值，它和0以及空字符串''不一樣，0是一個數值，''表示長度爲0的字符串，而null表示「空」。

在其餘語言中，也有相似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。可是，在JavaScript中，還有一個和null相似的undefined，它表示「未定義」。

JavaScript的設計者但願用null表示一個空的值，而undefined表示值未定義。事實證實，這並無什麼卵用，區分二者的意義不大。大多數狀況下，咱們都應該用null。undefined僅僅在判斷函數參數是否傳遞的狀況下有用。

數組

數組是一組按順序排列的集合，集合的每一個值稱爲元素。JavaScript的數組能夠包括任意數據類型。例如：

[1, 2, 3.14, 'Hello', null, true];

上述數組包含6個元素。數組用[]表示，元素之間用,分隔。

另外一種建立數組的方法是經過Array()函數實現：

new Array(1, 2, 3); // 建立了數組[1, 2, 3]

然而，出於代碼的可讀性考慮，強烈建議直接使用[]。

數組的元素能夠經過索引來訪問。請注意，索引的起始值爲0：

var arr = [1, 2, 3.14, 'Hello', null, true]; arr[0]; // 返回索引爲0的元素，即1
arr[5]; // 返回索引爲5的元素，即true
arr[6]; // 索引超出了範圍，返回undefined

對象

JavaScript的對象是一組由鍵-值組成的無序集合，【就是Python中的字典】例如：

var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', hasCar: true, zipcode: null };

JavaScript對象的鍵都是字符串類型，值能夠是任意數據類型。上述person對象一共定義了6個鍵值對，其中每一個鍵又稱爲對象的屬性，例如，person的name屬性爲'Bob'，zipcode屬性爲null。

要獲取一個對象的屬性，咱們用對象變量.屬性名的方式：

person.name; // 'Bob'
person.zipcode; // null

變量

變量的概念基本上和初中代數的方程變量是一致的，只是在計算機程序中，變量不只能夠是數字，還能夠是任意數據類型。

變量在JavaScript中就是用一個變量名錶示，變量名是大小寫英文、數字、$和_的組合，且不能用數字開頭。變量名也不能是JavaScript的關鍵字，如if、while等，變量名也能夠用中文，可是，請不要給本身找麻煩。。

申明一個變量用var語句，好比：

var a; // 申明瞭變量a，此時a的值爲undefined
var $b = 1; // 申明瞭變量$b，同時給$b賦值，此時$b的值爲1
var s_007 = '007'; // s_007是一個字符串
var Answer = true; // Answer是一個布爾值true
var t = null; // t的值是null

使用等號=進行賦值，且能夠進行屢次賦值(甚至能夠賦值爲不一樣的類型)，可是隻能使用var進行聲明一次。

var a = 123; // a的值是整數123
a = 'ABC'; // a變爲字符串

這種變量自己類型不固定的語言稱之爲動態語言，與之對應的是靜態語言。靜態語言在定義變量時必須指定變量類型，若是賦值的時候類型不匹配，就會報錯。例如Java是靜態語言，賦值語句以下：

int a = 123; // a是整數類型變量，類型用int申明
a = "ABC"; // 錯誤：不能把字符串賦給整型變量

和靜態語言相比，動態語言更靈活，就是這個緣由。

strict模式

JavaScript在設計之初，爲了方便初學者學習，並不強制要求用var申明變量。這個設計錯誤帶來了嚴重的後果：若是一個變量沒有經過var申明就被使用，那麼該變量就自動被申明爲全局變量：

i = 10; // i如今是全局變量

在同一個頁面的不一樣的JavaScript文件中，若是都不用var申明，剛好都使用了變量i，將形成變量i互相影響，產生難以調試的錯誤結果。

使用var申明的變量則不是全局變量，它的範圍被限制在該變量被申明的函數體內（函數的概念將稍後講解），同名變量在不一樣的函數體內互不衝突。

爲了修補JavaScript這一嚴重設計缺陷，ECMA在後續規範中推出了strict模式，在strict模式下運行的JavaScript代碼，強制經過var申明變量，未使用var申明變量就使用的，將致使運行錯誤。

啓用strict模式的方法是在JavaScript代碼的第一行寫上：

'use strict';

這是一個字符串，不支持strict模式的瀏覽器會把它當作一個字符串語句執行，支持strict模式的瀏覽器將開啓strict模式運行JavaScript。

不用var申明的變量會被視爲全局變量，爲了不這一缺陷，全部的JavaScript代碼都應該使用strict模式。咱們在後面編寫的JavaScript代碼將所有采用strict模式。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。