[JavaScript教程]JavaScript基本語法

時間 2020-07-08

原文原文鏈接

學習本文前你須要你掌握html基礎知識，沒有也問題不大
經過這篇文章你將會學到JavaScript的基礎語法
做者：王志超

JavaScript簡介

JavaScript基本介紹

JavaScript一種在瀏覽器中解釋運行的腳本語言，它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，是普遍用於客戶端的腳本語言javascript

最先是在HTML網頁上使用，用來給HTML（HTML5）網頁增長動態功能。html

在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。由於Netscape與Sun合做，Netscape管理層但願它外觀看起來像Java，所以取名爲JavaScript。java

能夠實現：用戶交互（表單驗證）、網頁特效（漂浮的廣告）、客戶端的顯示（頁面內容，速度快）、網頁遊戲、地圖搜索、股市信息查詢、web聊天等git

發展趨勢:
當今和將來是移動優先時代，騰訊系、百度系、阿里系、Facebook、韓國kakaotalk等巨頭紛紛鉅額投入，遊戲、網購、社交、視頻、直播、分享經濟等
傳統經濟搭乘移動互聯快車，健身、嬰兒用品、餐飲、洗浴、休閒旅遊等傳統行業紛紛建本身的移動平臺。
智能設備、傳統電器的智能化，車聯網的普及github

JavaScript組成

ECMAScript：是一種由Ecma國際(前身爲歐洲計算機制造商協會),定立ECMA-262標準化的腳本程序設計語言。規定了JavaScript 腳本的核心語法，如數據類型、關鍵字、保留字、運算符、對象和語句等。web

BOM：定義了 JavaScript 操做瀏覽器的接口，提供了訪問某些功能（如瀏覽器窗口大小、版本信息、瀏覽歷史記錄等）的途徑以及操做方法。chrome

DOM：定義了 JavaScript 操做 HTML 文檔的接口，提供了訪問 HTML 文檔（如body、form、div、textarea等）的途徑以及操做方法。編程

編寫及運行JavaScript

JS初識

HTML裏的 <script> 標籤用於嵌入或引用可執行腳本

注：JS大小寫敏感
案例1-JS初識瀏覽器

JS基礎

1、`script`標籤

能夠寫在HTML中任意位置，可出現多個，通常會寫在<head>標籤中

src 表示要引入的外部文件
type 表示腳本語言的類型webstorm

2、使用script標籤引入外部javaScript文件

<script type="text/javascript" src="demo1.js" ></script>

注意：
一、引入文件不可使用單標

<script type="text/javascript" src="demo1.js「/ >

二、引入文件不能夠在標籤中寫代碼

<script src="demo1.js">alert('xxxx')</script>

3、註釋

單行註釋 //
多行註釋 /* */
文檔註釋 /** */

4、運行順序

Javascript和HTML代碼在同一個文件中寫，它們的執行順序是從上朝下，誰在前先執行誰。

5、編輯工具和運行環境

編輯工具：如：dreamweaver，vscode、webstorm
運行環境：如：IE，firefox，chrome

案例2：JS註釋、JS與HTML運行順序

JavaScript變量

js變量聲明

變量用來在計算機中存儲和表示數據。
變量定義（聲明）：

var age; //var 是關鍵字，age是變量

賦值：

age = 20; //20是數據 「=」是賦值

定義的同時賦值：

var age=20；

能夠一次定義多個變量：

var myname=「劉德華", age=18，weight=138;

使用變量：

alert(myname);

注：
1.變量也能夠不定義，但強烈不推薦。
2.變量必須先賦值再使用

案例4：變量的定義、賦值、使用

JS變量的類型

最新的 ECMAScript 標準定義了 8 種數據類型:

Undefined類型
Undefined類型只有一個值undefined，它是變量未被賦值時的值。

Null類型
Null類型也只有一個值null。Null類型的語義是「一個空的對象引用」，注意和空字符串區別開。

Boolean類型
布爾有兩種取值true和false，表示真或假。

String類型
又叫字符串類型，用雙（單）引號括起來的一串字符。

Number類型
包含整數± 9007199254740992 和浮點數±1.7976931348623157 × 10的308次方。

Object類型
JavaScript中最爲複雜的類型就是Object，它是一系列屬性的無序集合。(Array以及date())

BigInt
BigInt是一種數字類型的數據，它能夠表示任意精度格式的整數。而在其餘編程語言中，能夠存在不一樣的數字類型，例如:整數、浮點數、雙精度數或大斐波數。

Symbol
數據類型 「symbol」 是一種原始數據類型，該類型的性質在於這個類型的值能夠用來建立匿名的對象屬性

使用typeof關鍵字查看變量類型

var age=20;
alert(typeof age);

案例5：演示各類類型的定義，賦值，tepyof顯示類型(F12查看結果)

JS變量的命名規則和關鍵字

1、變量命名規則

不以數字開頭，數字、字母以及下劃線都可用來組成變量名，但不能使用關鍵字及保留字

2、關鍵字及保留字

abstract	arguments	boolean	break	byte
case	catch	char	class`*`	const
continue	debugger	default	delete	do
double	else	enum`*`	eval	export`*`
extends`*`	false	final	finally	float
for	function	goto	if	implements
import`*`	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super`*`	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

* 標記的關鍵字是 ECMAScript5 中新添加的。

JavaScript運算符

1、算數（數學）運算符

由算數運算符組成的式子叫算數表達式，結果是數值類型
給定 y=5

解釋++y（先自加再運算）和y++（先運算再自加）的區別
案例6：演示數學運算符

2、賦值運算符

給定 x=10 和 y=5

案例7：演示賦值運算符

3、字符串鏈接符，字符串拼接表達式

+ 運算符用於把文本值或字符串變量加起來（鏈接起來）。
例:

var str='java';
var str=str+'script';

結果是 javascript

var str1='蘋果單價:';
var str1=str1+5; //把數值類型與字符串類型鏈接，結果會獲得字符串
類型

結果是 蘋果單價:5

案例8：演示字符串拼接

4、關係運算符

由關係運算符組成的式子叫關係表達式，關係表達式返回的結果是布爾類型

案例9：演示關係運算符

JavaScript變量的類型轉換

JS是弱類型語言

1）變量聲明時不須要指明類型

var age;
age=20;

2）變量的類型在使用中可變

age='年齡:'+age;

注：JS變量的類型由其存放的數據類型肯定

JS的類型轉換

1）隱式（自動）轉換，不一樣的數據類型參與表達式運算過程時將會轉換爲統一類型進行運算
字符串與數值類型運算的隱式轉換規則：
1.字符串加數字,數字就會轉成字符串。
2.數字減字符串，字符串轉成數字。若是字符串不是純數字就會轉成NaN。字符串減數字也同樣。兩個字符串相減也先轉成數字。
3.乘，除，大於，小於跟減的轉換也是同樣。

2）顯示（手動）轉換
字符串轉數值：
parseInt()、parseFloat()、Number()
數值轉字符串:
toString()
注：NaN表示不是數字,可是還是數值類型， not a number，NaN是Number類型。

案例10：演示變量類型隱式轉換