js教程--從入門到精通 第一篇 js的前世今生以及js中基本數據類型和引入方式
阿新 • • 發佈：2019-01-07
美國 ros 發布 命令行工具 相似性 百度瀏覽器 個數字 網頁瀏覽 實現 1、Javascript前世今生
1.1、什麽是Javascript
Javascript運行於Javascript 【解釋器/引擎】中的解釋性腳本語言
Javascript運行環境：
1、Javascript解釋器 ：NodeJS
2、嵌入在瀏覽器中的內核(引擎) 1.2、Javascript 發展
1、1992年 Nombas公司 開發了一款腳本語言 ScriptEase ,可以嵌入在網頁中
大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背後的理念很簡單：一個足夠強大可以替代宏操作（macro）的腳本語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個腳本語言捆綁在一個叫做 CEnvi 的共享軟件中，它首次向開發人員展示了這種語言的威力。
Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是後面的部分（mm）聽起來過於消極，同時字母 C “令人害怕”。
現在 ScriptEase 已經成為了 Nombas 產品背後的主要驅動力。
2、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 為 [?n?v?ge?t?(r)]Navigator2.0瀏覽器開發了一款腳本語言 LiveScript ,
為了趕時髦 將其命名為 Javascript。Javascript與Java沒有一點關系
3、1996年，Microsoft[maikrisouft] ，為了IE3.0，發布了一個Javascript克隆版本 JScript
4、1997年 Javascript1.1 作為草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
1.3 Javascript (JS)的組成:
1、核心(ECMAScript, ES)
2、文檔對象模型(DOM,Document Object Model) 一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作
3、瀏覽器對象模型(BOM,Borowser Object Model) 彈出框、控制瀏覽器跳轉、獲取分辨率等 一套操作瀏覽器功能的API. 1.4 Javascript特點
1、任何編輯工具都可以編寫Javascript,語法類似於Java,C,...
2、無需編譯
3、弱類型語言
由值來決定數據類型 強數據類型：由數據類型 決定值
1.5 基於對象的編程語言
萬物皆對象
1.6 Javascript的用途
JavaScript的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
最初的目的是為了處理表單的驗證操作。 ### JavaScript現在的意義(應用場景) JavaScript 發展到現在幾乎無所不能。 1. 網頁特效 客戶端數據計算 表單驗證 非空驗證 數據範圍驗證 瀏覽器事件的觸發和處理
2. 服務端開發(Node.js) 服務器的異步數據提交（ajax）
3. 命令行工具(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物聯網(Ruff)
7. 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別 1. HTML：提供網頁的結構，提供網頁中的內容
2. CSS: 用來美化網頁
3. JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
2、使用javaScript
2.1 瀏覽器說明
瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，並讓用戶與這些文件交互的一種軟件。
通俗的講:可以顯示頁面的一個軟件,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程序。
常用的五大瀏覽器：chrome，firefox，Safari，ie，opera
我們用chrome(谷歌瀏覽器)
2.2、JavaScript初體驗（JavaScript的書寫位置）
CSS：行內樣式、嵌入樣式、外部樣式
A:寫在行內
<input type="button" value="按鈕" onclick="alert(‘Hello World‘)" />
B:寫在script標簽中
<head>
<script>
alert(‘Hello World!‘);
</script>
</head>
C: 寫在外部js文件中，在頁面引入
<script src="main.js"></script>
註意點
引用外部js文件的script標簽中不可以寫JavaScript代碼
2.3語句
被Javascript引擎所解釋執行的一句代碼
組成：
表達式、關鍵字、運算符
運算符：+，-，*，/，%，> ....
表達式：由一個或多個運算符以及一個或多個操作數組成的。 如：1+2，
特點：以分號表示結束
console.log();
document.write();
window.alert();
習慣:一行只寫一條語句
註意：嚴格區分大小寫
console.log();
console.Log();
2.4、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/ /*
console.log();
/*window.alert();
document.write()*/
console.log();*/
3、變量
內存 : 臨時性保存據算計程序在【運行過程中】要用到的數據。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬盤 : 永久性保存數據
0x000000000000000000a13247aaccxx
3.1、什麽是變量
就是內存中的一段空間，用於保存程序運行過程中要用到的數據。就是存儲數據的容器。
3.2、為什麽要使用變量
使用變量可以方便的獲取或者修改內存中的數據
3.3、什麽是變量名
內存空間的一個別名，為了方便記憶。即變量的名字。
3.4、如何使用變量 到內存中開辟一段空間用於保存數據
語法：var 聲明變量
var age;
變量的賦值
將數據保存進變量
運算符：= 賦值運算符
語法：
變量名=值;
var name;
name="張無忌";
初始化：聲明變量並賦值
var 變量名稱=值; 註意：沒有被賦值的變量自動取值為undefined var name;
var age;
var hobby;
一條語句中聲明多個變量:
var name,age,hobby;
var name="張三豐",age=30;
3.5、變量名命名規範
1、要求
1、不允許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
2、命名規範
a、可以包含字母、數字、下劃線 _、$
b、不能以數字開頭
var name;
var name1;
var 1name;錯誤
c、不允許重復
d、盡量見名知意
var name;
var age; var a,b,c,d,....aa,ab,ac,ad;
var xingming,nianling;
e、推薦采用
匈牙利命名法
控件縮寫+功能
txtName
rdoGender
chkHobby
selCity
下劃線命名法
_功能名稱
_name;
_age;
駝峰命名法
如果變量名稱由多個單詞組成，第一個單詞全部小寫，第二個單詞開始，首字符變大小
userName
txtusernmae --> txtUserName
下面哪些變量名不合法 ```
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.6、變量使用註意問題
1、未初始化變量的使用
只定義未賦值，值為undefined
未定義，使用，錯誤，not defined
2、在可能的情況下，聲明變量時盡量初始化
var age=10;
var name="張三";
var isHappy=true;
3、將變量的聲明和賦值分開操作
var name;
var age;
name="";
age=18;
4、對變量進行的存取操作
1、設置變量的值(賦值，存)
=
var name="張三豐";//張三豐
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山 name = name+""; ==> name+="";
特殊：
var i=10;
i++;
++i; ==> i=i+1;
註意：賦值時，=的左邊一定是變量
2、獲取變量的值(取值)
var uname="張無忌";
console.log(uname); var newName = uname;
uname : 取值操作(=右邊使用)
newName : 賦值操作(=左邊使用)
4、運算符
1、算數運算符
+,-,*,/,%
%:取余(模),計算兩個數字相除後的余數
5%2 結果為 1
3%5 結果為 3 常用場合：
1、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
2、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否為 0?
78 是 3的倍數嗎？？
78 % 3 結果是否為 0 ？
+ ：
1、求和：數字類型的數值求和
2、"" 與 +聯用 ,作用是追加
"張無忌" + 123 結果為:張無忌123
123 + "張無忌" 結果為:123張無忌 12+25 結果為：37 "12"+25 結果為：1225
‘12‘+25 結果為：1225
註意：由算數運算符 與 操作數 組成的表達式，稱為 算數表達式
5、數據類型
1、什麽是數據類型
保存在內存中的數據的類型，根據不同的類型內存中所開辟的空間也不一樣
2、數據類型
1、原始類型 (基本類型)
1、number 類型
數字
可以表示 32 位 (4字節)的整數，或64位(8字節)的浮點數
浮點數：小數 var age;
age=12; //number
age=24.5;//number 2、string 類型
字符串
一系列的文本數據
註意：賦值時，必須使用 " " 或 ‘ ‘ 擴起
var name="張三豐";//string
var age = "12"; //string 特殊字符，可以通過轉移字符實現
"Hello World"
console.log(""Hello World"");錯誤
\ 作為開始
\" : 表示一個 "
\‘ : ‘
\n : 換行
\t : 制表符
\\ : \
console.log("Hello World");
3、boolean 類型
布爾
只表示 肯定(真) 或 否定(假)的數據
值：true(真) 和 false(假)
使用場合：作為程序的條件(判斷、循環)
在與 number 類型做運算時，true=1，false=0
4、null 類型
空
5、undefined 類型
未定義
表示 不存在的數據
2、引用類型
Object
Number
Boolean
String
Date
...
1.1、什麽是Javascript
Javascript運行於Javascript 【解釋器/引擎】中的解釋性腳本語言
Javascript運行環境：
1、Javascript解釋器 ：NodeJS
2、嵌入在瀏覽器中的內核(引擎) 1.2、Javascript 發展
1、1992年 Nombas公司 開發了一款腳本語言 ScriptEase ,可以嵌入在網頁中
大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背後的理念很簡單：一個足夠強大可以替代宏操作（macro）的腳本語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個腳本語言捆綁在一個叫做 CEnvi 的共享軟件中，它首次向開發人員展示了這種語言的威力。
Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是後面的部分（mm）聽起來過於消極，同時字母 C “令人害怕”。
現在 ScriptEase 已經成為了 Nombas 產品背後的主要驅動力。
2、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 為 [?n?v?ge?t?(r)]Navigator2.0瀏覽器開發了一款腳本語言 LiveScript ,
為了趕時髦 將其命名為 Javascript。Javascript與Java沒有一點關系
3、1996年，Microsoft[maikrisouft] ，為了IE3.0，發布了一個Javascript克隆版本 JScript
4、1997年 Javascript1.1 作為草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
1.3 Javascript (JS)的組成:
1、核心(ECMAScript, ES)
2、文檔對象模型(DOM,Document Object Model) 一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作
3、瀏覽器對象模型(BOM,Borowser Object Model) 彈出框、控制瀏覽器跳轉、獲取分辨率等 一套操作瀏覽器功能的API. 1.4 Javascript特點
1、任何編輯工具都可以編寫Javascript,語法類似於Java,C,...
2、無需編譯
3、弱類型語言
由值來決定數據類型 強數據類型：由數據類型 決定值
1.5 基於對象的編程語言
萬物皆對象
1.6 Javascript的用途
JavaScript的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
最初的目的是為了處理表單的驗證操作。 ### JavaScript現在的意義(應用場景) JavaScript 發展到現在幾乎無所不能。 1. 網頁特效 客戶端數據計算 表單驗證 非空驗證 數據範圍驗證 瀏覽器事件的觸發和處理
2. 服務端開發(Node.js) 服務器的異步數據提交（ajax）
3. 命令行工具(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物聯網(Ruff)
7. 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別 1. HTML：提供網頁的結構，提供網頁中的內容
2. CSS: 用來美化網頁
3. JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
2、使用javaScript
2.1 瀏覽器說明
瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，並讓用戶與這些文件交互的一種軟件。
通俗的講:可以顯示頁面的一個軟件,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程序。
常用的五大瀏覽器：chrome，firefox，Safari，ie，opera
我們用chrome(谷歌瀏覽器)
2.2、JavaScript初體驗（JavaScript的書寫位置）
CSS：行內樣式、嵌入樣式、外部樣式
A:寫在行內
<input type="button" value="按鈕" onclick="alert(‘Hello World‘)" />
B:寫在script標簽中
<head>
<script>
alert(‘Hello World!‘);
</script>
</head>
C: 寫在外部js文件中，在頁面引入
<script src="main.js"></script>
註意點
引用外部js文件的script標簽中不可以寫JavaScript代碼
2.3語句
被Javascript引擎所解釋執行的一句代碼
組成：
表達式、關鍵字、運算符
運算符：+，-，*，/，%，> ....
表達式：由一個或多個運算符以及一個或多個操作數組成的。 如：1+2，
特點：以分號表示結束
console.log();
document.write();
window.alert();
習慣:一行只寫一條語句
註意：嚴格區分大小寫
console.log();
console.Log();
2.4、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/ /*
console.log();
/*window.alert();
document.write()*/
console.log();*/
3、變量
內存 : 臨時性保存據算計程序在【運行過程中】要用到的數據。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬盤 : 永久性保存數據
0x000000000000000000a13247aaccxx
3.1、什麽是變量
就是內存中的一段空間，用於保存程序運行過程中要用到的數據。就是存儲數據的容器。
3.2、為什麽要使用變量
使用變量可以方便的獲取或者修改內存中的數據
3.3、什麽是變量名
內存空間的一個別名，為了方便記憶。即變量的名字。
3.4、如何使用變量 到內存中開辟一段空間用於保存數據
語法：var 聲明變量
var age;
變量的賦值
將數據保存進變量
運算符：= 賦值運算符
語法：
變量名=值;
var name;
name="張無忌";
初始化：聲明變量並賦值
var 變量名稱=值; 註意：沒有被賦值的變量自動取值為undefined var name;
var age;
var hobby;
一條語句中聲明多個變量:
var name,age,hobby;
var name="張三豐",age=30;
3.5、變量名命名規範
1、要求
1、不允許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
2、命名規範
a、可以包含字母、數字、下劃線 _、$
b、不能以數字開頭
var name;
var name1;
var 1name;錯誤
c、不允許重復
d、盡量見名知意
var name;
var age; var a,b,c,d,....aa,ab,ac,ad;
var xingming,nianling;
e、推薦采用
匈牙利命名法
控件縮寫+功能
txtName
rdoGender
chkHobby
selCity
下劃線命名法
_功能名稱
_name;
_age;
駝峰命名法
如果變量名稱由多個單詞組成，第一個單詞全部小寫，第二個單詞開始，首字符變大小
userName
txtusernmae --> txtUserName
下面哪些變量名不合法 ```
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.6、變量使用註意問題
1、未初始化變量的使用
只定義未賦值，值為undefined
未定義，使用，錯誤，not defined
2、在可能的情況下，聲明變量時盡量初始化
var age=10;
var name="張三";
var isHappy=true;
3、將變量的聲明和賦值分開操作
var name;
var age;
name="";
age=18;
4、對變量進行的存取操作
1、設置變量的值(賦值，存)
=
var name="張三豐";//張三豐
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山 name = name+""; ==> name+="";
特殊：
var i=10;
i++;
++i; ==> i=i+1;
註意：賦值時，=的左邊一定是變量
2、獲取變量的值(取值)
var uname="張無忌";
console.log(uname); var newName = uname;
uname : 取值操作(=右邊使用)
newName : 賦值操作(=左邊使用)
4、運算符
1、算數運算符
+,-,*,/,%
%:取余(模),計算兩個數字相除後的余數
5%2 結果為 1
3%5 結果為 3 常用場合：
1、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
2、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否為 0?
78 是 3的倍數嗎？？
78 % 3 結果是否為 0 ？
+ ：
1、求和：數字類型的數值求和
2、"" 與 +聯用 ,作用是追加
"張無忌" + 123 結果為:張無忌123
123 + "張無忌" 結果為:123張無忌 12+25 結果為：37 "12"+25 結果為：1225
‘12‘+25 結果為：1225
註意：由算數運算符 與 操作數 組成的表達式，稱為 算數表達式
5、數據類型
1、什麽是數據類型
保存在內存中的數據的類型，根據不同的類型內存中所開辟的空間也不一樣
2、數據類型
1、原始類型 (基本類型)
1、number 類型
數字
可以表示 32 位 (4字節)的整數，或64位(8字節)的浮點數
浮點數：小數 var age;
age=12; //number
age=24.5;//number 2、string 類型
字符串
一系列的文本數據
註意：賦值時，必須使用 " " 或 ‘ ‘ 擴起
var name="張三豐";//string
var age = "12"; //string 特殊字符，可以通過轉移字符實現
"Hello World"
console.log(""Hello World"");錯誤
\ 作為開始
\" : 表示一個 "
\‘ : ‘
\n : 換行
\t : 制表符
\\ : \
console.log("Hello World");
3、boolean 類型
布爾
只表示 肯定(真) 或 否定(假)的數據
值：true(真) 和 false(假)
使用場合：作為程序的條件(判斷、循環)
在與 number 類型做運算時，true=1，false=0
4、null 類型
空
5、undefined 類型
未定義
表示 不存在的數據
2、引用類型
Object
Number
Boolean
String
Date
...
js教程--從入門到精通 第一篇 js的前世今生以及js中基本數據類型和引入方式