JavaScript基礎語法是怎樣的

本篇文章為大家展示了JavaScript基礎語法是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

JavaScript發展歷史（JS）

1994年，網景公司(Netscape)發布了Navigator瀏覽器0.9版，這是世界上第一款比較成熟的網絡瀏覽器，轟動一時。但是這是一款名副其實的瀏覽器--只能瀏覽頁面，瀏覽器無法與用戶互動,當時解決這個問題有兩個辦法，一個是采用現有的語言,許它們直接嵌入網頁。另一個是發明一種全新的語言。liveScript ==> javaScript ==> ECMAscript

HTML ：標記語言

JavaScript ：編程語言

2. 1995年Sun公司將Oak語言改名為Java，正式向市場推出。Sun公司大肆宣傳，許諾這種語言可以"一次編寫，到處運行"(Write Once, Run Anywhere)，它看上去很可能成為未來的主宰。3. 網景公司動了心，決定與Sun公司結成聯盟4. 34歲的系統程序員Brendan Eich登場了。1995年4月，網景公司錄用了他,他只用10天時間就把Javascript設計出來了。（多態語言）5. (1)借鑒C語言的基本語法; (2)借鑒Java語言的數據類型和內存管理; (3)借鑒Scheme語言，將函數提升到"第一等公民"(first class)的地位; (4)借鑒Self語言，使用基于原型(prototype)的繼承機制。

JavaScript能干什么

1. 常見的網頁效果【表單驗證，輪播圖。。。】

2. 與H5配合實現游戲【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】

3. 實現應用級別的程序【http://naotu.baidu.com】

4. 實現統計效果【http://echarts.baidu.com/examples/】

5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】

6. 在線學編程【https://codecombat.163.com/play/】

7. js可以實現人工智能【面部識別】

8. 。。。

JavaScript的組成

1. ECMASCRIPT: 定義了javascript的語法規范,描述了語言的基本語法和數據類型2. BOM (Browser Object Model): 瀏覽器對象模型- 有一套成熟的可以操作瀏覽器的 API，通過 BOM 可以操作瀏覽器。比如： 彈出框、瀏覽器跳轉、獲取分辨率等3. DOM (Document Object Model): 文檔對象模型- 有一套成熟的可以操作頁面元素的 API，通過 DOM 可以操作頁面中的元素。比如： 增加個 div，減少個 div，給div 換個位置等

總結： JS 就是通過固定的語法去操作 瀏覽器 和 標簽結構 來實現網頁上的各種效果

JavaScript代碼的書寫位置

· 和 css 一樣，我們的 js 也可以有多種方式書寫在頁面上讓其生效

· js 也有多種方式書寫，分為 行內式， 內嵌式，外鏈式

行內式 JS 代碼（不推薦）

· 寫在標簽上的 js 代碼需要依靠事件（行為）來觸發

// 我是 index.js 文件alert('我是一個彈出層')

<!-- 寫在 a 標簽的 href 屬性上 --><a href="javascript:alert('我是一個彈出層');">點擊一下試試</a>

<!-- 寫在其他元素上 --><div onclick="alert('我是一個彈出層')">點一下試試看</div>

<!--     注：onclick 是一個事件（點擊事件），當點擊元素的時候執行后面的 js 代碼-->

內嵌式 JS 代碼

· 內嵌式的 js 代碼會在頁面打開的時候直接觸發

<!-- 在 html 頁面書寫一個 script 標簽，標簽內部書寫 js 代碼 --><script type="text/javascript">

    alert('我是一個彈出層')</script>

<!--     注：script 標簽可以放在 head 里面也可以放在 body 里面-->

外鏈式 JS 代碼（推薦）

· 外鏈式 js 代碼只要引入了 html 頁面，就會在頁面打開的時候直接觸發

· 新建一個 .js 后綴的文件，在文件內書寫 js 代碼，把寫好的 js 文件引入 html 頁面

<!-- 我是一個 html 文件 -->

<!-- 通過 script 標簽的 src 屬性，把寫好的 js 文件引入頁面 --><script src="index.js"></script>

<!-- 一個頁面可以引入多個 js 文件 --><script src="index1.js"></script><script src="index2.js"></script><script src="index3.js"></script>

JS 中的注釋

· 學習一個語言，先學習一個語言的注釋，因為注釋是給我們自己看的，也是給開發人員看的

· 寫好一個注釋，有利于我們以后閱讀代碼

單行注釋

· 一般就是用來描述下面一行代碼的作用

· 可以直接寫兩個 / ，也可以按 ctrl + /

// 我是一個單行注釋// 下面代碼表示在瀏覽器里面出現一個彈出層alert('我是一個彈出層')

多行注釋

· 一般用來寫一大段話，或者注釋一段代碼

· 可以直接寫 /**/ 然后在兩個星號中間寫注釋，也可以按 shift + alt + a

/*    我是一個多行注釋*//*    注釋的代碼不會執行    alert('我是一個彈出層')    alert('我是一個彈出層')*/alert('我是一個彈出層')

變量（重點）

· 變量指的是在程序中保存數據的一個容器

· 變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據

· 也就是說，我們向內存中存儲了一個數據，然后要給這個數據起一個名字，為了是我們以后再次找到他

· 語法： var 變量名 = 值

定義變量及賦值

// 定義一個變量var num;// 給一個變量賦值num = 100;// 定義一個變量的同時給其賦值var num2 = 200;

· 注意：

00001. 一個變量名只能存儲一個值

00002. 當再次給一個變量賦值的時候，前面一次的值就沒有了

00003. 變量名稱區分大小寫（JS 區分大小寫）

變量的命名規則和命名規范

· 規則： 必須遵守的，不遵守就是錯

00001. 一個變量名稱可以由 數字、字母、英文下劃線（_）、美元符號（$） 組成

00002. 嚴格區分大小寫

00003. 不能由數字開頭，不要使用中文漢字命名

00004. 不能是 保留字 或者 關鍵字

00005. 不要出現空格

· 規范： 建議遵守的（開發者默認），不遵守不會報錯

00001. 變量名盡量有意義（語義化）

00002. 遵循駝峰命名規則，由多個單詞組成的時候，從第二個單詞開始首字母大寫

數據類型（重點）

· 是指我們存儲在內存中的數據的類型

· 我們通常分為兩大類 基本數據類型 和 復雜數據類型

基本數據類型

1、數值類型（number）

· 一切數字都是數值類型（包括二進制，十進制，十六進制等）

· NaN（not a number），一個非數字

2、字符串類型（string）

· 被引號包裹的所有內容（可以是單引號也可以是雙引號）

3、布爾類型（boolean）

· 只有兩個（true 或者 false）

4、null類型（null）

· 只有一個，就是 null，表示空的意思

5、undefined類型（undefined）

· 只有一個，就是 undefined，表示沒有值的意思

復雜數據類型

00001. 對象類型（object）

00002. 函數類型（function）

00003. 。。。

判斷數據類型

· 既然已經把數據分開了類型，那么我們就要知道我們存儲的數據是一個什么類型的數據

· 使用 typeof 關鍵字來進行判斷

// 第一種使用方式var n1 = 100;console.log(typeof n1);// 第二種使用方式var s1 = 'abcdefg';console.log(typeof(s1));

判斷一個變量是不是數字

· 可以使用 isNaN 這個方法來判斷一個變量是不是數字

· isNaN ：is not a number

// 如果變量是一個數字var n1 = 100;console.log(isNaN(n1)); //=> false// 如果變量不是一個數字var s1 = 'Jack'console.log(isNaN(s1)); //=> true

數據類型轉換

· 數據類型之間的轉換，比如數字轉成字符串，字符串轉成布爾，布爾轉成數字等

其他數據類型轉成數值

1、Number(變量)

· 可以把一個變量強制轉換成數值類型

· 可以轉換小數，會保留小數

· 可以轉換布爾值

· 遇到不可轉換的都會返回 NaN

2、parseInt(變量)

· 從第一位開始檢查，是數字就轉換，知道一個不是數字的內容

· 開頭就不是數字，那么直接返回 NaN

· 不認識小數點，只能保留整數

3、parseFloat(變量)

· 從第一位開始檢查，是數字就轉換，知道一個不是數字的內容

· 開頭就不是數字，那么直接返回 NaN

· 認識一次小數點

4、除了加法以外的數學運算

· 運算符兩邊都是可運算數字才行

· 如果運算符任何一遍不是一個可運算數字，那么就會返回 NaN

· 加法不可以用

其他數據類型轉成字符串

1、變量.toString()

· 有一些數據類型不能使用 toString() 方法，比如 undefined 和 null

2、String(變量)

· 所有數據類型都可以

3、使用加法運算

· 在 JS 里面，+ 由兩個含義

· 字符串拼接： 只要 + 任意一邊是字符串，就會進行字符串拼接

· 加法運算：只有 + 兩邊都是數字的時候，才會進行數學運算

其他數據類型轉成布爾

00001. Boolean(變量)

· 在 js 中，只有 ''、0、null、undefined、NaN，這些是 false，其余都是 true

運算符

· 就是在代碼里面進行運算的時候使用的符號，不光只是數學運算，我們在 js 里面還有很多的運算方式

數學運算符

1、+

· 只有符號兩邊都是數字的時候才會進行加法運算

· 只要符號任意一邊是字符串類型，就會進行字符串拼接

2、-

· 會執行減法運算

· 會自動把兩邊都轉換成數字進行運算

3、*

· 會執行乘法運算

· 會自動把兩邊都轉換成數字進行運算

4、/

· 會執行除法運算

· 會自動把兩邊都轉換成數字進行運算

5、%

· 會執行取余運算

· 會自動把兩邊都轉換成數字進行運算

賦值運算符

1、=

· 就是把 = 右邊的賦值給等號左邊的變量名

· var num = 100

· 就是把 100 賦值給 num 變量

· 那么 num 變量的值就是 100

2、+=

var a = 10;a += 10;console.log(a); //=> 20

· a += 10 等價于 a = a + 10

3、-=

var a = 10;a -= 10;console.log(a); //=> 0

· a -= 10 等價于 a = a - 10

4、*=

var a = 10;a *= 10;console.log(a); //=> 100

· a *= 10 等價于 a = a * 10

5、/+

var a = 10;a /= 10;console.log(a); //=> 1

· a /= 10 等價于 a = a / 10

6、%=

var a = 10;a %= 10;console.log(a); //=> 0

· a %= 10 等價于 a = a % 10

比較運算符

1、==

· 比較符號兩邊的值是否相等，不管數據類型

· 1 == '1'

· 兩個的值是一樣的，所以得到 true

2、===

· 比較符號兩邊的值和數據類型是否都相等

· 1 === '1'

· 兩個值雖然一樣，但是因為數據類型不一樣，所以得到 false

3、!=

· 比較符號兩邊的值是否不等

· 1 != '1'

· 因為兩邊的值是相等的，所以比較他們不等的時候得到 false

4、!==

· 比較符號兩邊的數據類型和值是否不等

· 1 !== '1'

· 因為兩邊的數據類型確實不一樣，所以得到 true

5、>=

· 比較左邊的值是否 大于或等于 右邊的值

· 1 >= 1 true

· 1 >= 0 true

· 1 >= 2 false

6、<=

· 比較左邊的值是否 小于或等于 右邊的值

· 1 <= 2 true

· 1 <= 1 true

· 1 <= 0 false

7、>

· 比較左邊的值是否 大于 右邊的值

· 1 > 0 true

· 1 > 1 false

· 1 > 2 false

8、<

· 比較左邊的值是否 小于 右邊的值

· 1 < 2 true

· 1 < 1 false

· 1 < 0 false

邏輯運算符

1、&&

· 進行 且 的運算

· 符號左邊必須為 true 并且右邊也是 true，才會返回 true

· 只要有一邊不是 true，那么就會返回 false

· true && true true

· true && false false

· false && true false

· false && false false

2、||

· 進行 或 的運算

· 符號的左邊為 true 或者右邊為 true，都會返回 true

· 只有兩邊都是 false 的時候才會返回 false

· true || true true

· true || false true

· false || true true

· false || false false

3、!

· 進行 取反 運算

· 本身是 true 的，會變成 false

· 本身是 false 的，會變成 true

· !true false

· !false true

自增自減運算符（一元運算符）

1、++

· 進行自增運算

· 分成兩種，前置++ 和 后置++

· 前置++，會先把值自動 +1，再返回

var a = 10;console.log(++a);// 會返回 11，并且把 a 的值變成 11

· 后置++，會先把值返回，在自動+1

var a = 10;console.log(a++);// 會返回 10，然后把 a 的值變成 11

2、--

· 進行自減運算

· 分成兩種，前置-- 和 后置--

· 和 ++ 運算符道理一樣

上述內容就是JavaScript基礎語法是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。