js教程--從入門到精通 第一篇 js的前世此生以及js中基本數據類型和引入方式
一、Javascript前世此生
1.一、什麼是Javascript
Javascript運行於Javascript 【解釋器/引擎】中的解釋性腳本語言
Javascript運行環境：
一、Javascript解釋器 ：NodeJS
二、嵌入在瀏覽器中的內核(引擎)
1.一、什麼是Javascript
Javascript運行於Javascript 【解釋器/引擎】中的解釋性腳本語言
Javascript運行環境：
一、Javascript解釋器 ：NodeJS
二、嵌入在瀏覽器中的內核(引擎)
1.二、Javascript 發展
一、1992年 Nombas公司 開發了一款腳本語言 ScriptEase ,能夠嵌入在網頁中
大概在 1992 年，一家稱做 Nombas 的公司開發了一種叫作 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背後的理念很簡單：一個足夠強大能夠替代宏操做（macro）的腳本語言，同時保持與 C （和 C ++）足夠的類似性，以便開發人員能很快學會。這個腳本語言捆綁在一個叫作 CEnvi 的共享軟件中，它首次向開發人員展現了這種語言的威力。
Nombas 最終把 Cmm 的名字改爲了 ScriptEase，緣由是後面的部分（mm）聽起來過於消極，同時字母 C 「使人懼怕」。
如今 ScriptEase 已經成爲了 Nombas 產品背後的主要驅動力。
二、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 爲 [ˈnævɪgeɪtə(r)]Navigator2.0瀏覽器開發了一款腳本語言 LiveScript ,
爲了趕時髦 將其命名爲 Javascript。Javascript與Java沒有一點關係
三、1996年，Microsoft[maikrisouft] ，爲了IE3.0，發佈了一個Javascript克隆版本 JScript
四、1997年 Javascript1.1 做爲草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
一、1992年 Nombas公司 開發了一款腳本語言 ScriptEase ,能夠嵌入在網頁中
大概在 1992 年，一家稱做 Nombas 的公司開發了一種叫作 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背後的理念很簡單：一個足夠強大能夠替代宏操做（macro）的腳本語言，同時保持與 C （和 C ++）足夠的類似性，以便開發人員能很快學會。這個腳本語言捆綁在一個叫作 CEnvi 的共享軟件中，它首次向開發人員展現了這種語言的威力。
Nombas 最終把 Cmm 的名字改爲了 ScriptEase，緣由是後面的部分（mm）聽起來過於消極，同時字母 C 「使人懼怕」。
如今 ScriptEase 已經成爲了 Nombas 產品背後的主要驅動力。
二、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 爲 [ˈnævɪgeɪtə(r)]Navigator2.0瀏覽器開發了一款腳本語言 LiveScript ,
爲了趕時髦 將其命名爲 Javascript。Javascript與Java沒有一點關係
三、1996年，Microsoft[maikrisouft] ，爲了IE3.0，發佈了一個Javascript克隆版本 JScript
四、1997年 Javascript1.1 做爲草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
1.3 Javascript (JS)的組成:
一、核心(ECMAScript, ES)
二、文檔對象模型(DOM,Document Object Model) 一套操做頁面元素的API
DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做
三、瀏覽器對象模型(BOM,Borowser Object Model) 彈出框、控制瀏覽器跳轉、獲取分辨率等 一套操做瀏覽器功能的API.
1.4 Javascript特色
一、任何編輯工具均可以編寫Javascript,語法相似於Java,C,...
二、無需編譯
三、弱類型語言
由值來決定數據類型
一、任何編輯工具均可以編寫Javascript,語法相似於Java,C,...
二、無需編譯
三、弱類型語言
由值來決定數據類型
強數據類型：由數據類型 決定值
1.5 基於對象的編程語言
萬物皆對象
1.6 Javascript的用途
JavaScript的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。
最初的目的是爲了處理表單的驗證操做。
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的區別
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: 能夠用來控制網頁內容，給網頁增長動態的效果
二、使用javaScript
2.1 瀏覽器說明
瀏覽器是指能夠顯示網頁服務器或者文件系統的HTML文件內容，並讓用戶與這些文件交互的一種軟件。
通俗的講:能夠顯示頁面的一個軟件,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最常用到的客戶端程序。
經常使用的五大瀏覽器：chrome，firefox，Safari，ie，opera
咱們用chrome(谷歌瀏覽器)
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.四、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/
2. CSS: 用來美化網頁
3. JavaScript: 能夠用來控制網頁內容，給網頁增長動態的效果
二、使用javaScript
2.1 瀏覽器說明
瀏覽器是指能夠顯示網頁服務器或者文件系統的HTML文件內容，並讓用戶與這些文件交互的一種軟件。
通俗的講:能夠顯示頁面的一個軟件,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最常用到的客戶端程序。
經常使用的五大瀏覽器：chrome，firefox，Safari，ie，opera
咱們用chrome(谷歌瀏覽器)
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.四、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/
/*
console.log();
/*window.alert();
document.write()*/
console.log();*/
三、變量
內存 : 臨時性保存據算計程序在【運行過程當中】要用到的數據。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬盤 : 永久性保存數據
0x000000000000000000a13247aaccxx
3.一、什麼是變量
就是內存中的一段空間，用於保存程序運行過程當中要用到的數據。就是存儲數據的容器。
3.二、爲何要使用變量
使用變量能夠方便的獲取或者修改內存中的數據
3.三、什麼是變量名
內存空間的一個別名，爲了方便記憶。即變量的名字。
3.四、如何使用變量 到內存中開闢一段空間用於保存數據
語法：var 聲明變量
var age;
變量的賦值
將數據保存進變量
運算符：= 賦值運算符
語法：
變量名=值;
var name;
name="張無忌";
初始化：聲明變量並賦值
var 變量名稱=值;
console.log();
/*window.alert();
document.write()*/
console.log();*/
三、變量
內存 : 臨時性保存據算計程序在【運行過程當中】要用到的數據。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬盤 : 永久性保存數據
0x000000000000000000a13247aaccxx
3.一、什麼是變量
就是內存中的一段空間，用於保存程序運行過程當中要用到的數據。就是存儲數據的容器。
3.二、爲何要使用變量
使用變量能夠方便的獲取或者修改內存中的數據
3.三、什麼是變量名
內存空間的一個別名，爲了方便記憶。即變量的名字。
3.四、如何使用變量 到內存中開闢一段空間用於保存數據
語法：var 聲明變量
var age;
變量的賦值
將數據保存進變量
運算符：= 賦值運算符
語法：
變量名=值;
var name;
name="張無忌";
初始化：聲明變量並賦值
var 變量名稱=值;
注意：沒有被賦值的變量自動取值爲undefined
var name;
var age;
var hobby;
一條語句中聲明多個變量:
var name,age,hobby;
var name="張三丰",age=30;
3.五、變量名命名規範
一、要求
一、不容許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
二、命名規範
a、能夠包含字母、數字、下劃線 _、$
b、不能以數字開頭
var name;
var name1;
var 1name;錯誤
c、不容許重複
d、儘可能見名知意
var name;
var age;
var age;
var hobby;
一條語句中聲明多個變量:
var name,age,hobby;
var name="張三丰",age=30;
3.五、變量名命名規範
一、要求
一、不容許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
二、命名規範
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
下面哪些變量名不合法
var xingming,nianling;
e、推薦採用
匈牙利命名法
控件縮寫+功能
txtName
rdoGender
chkHobby
selCity
下劃線命名法
_功能名稱
_name;
_age;
駝峯命名法
若是變量名稱由多個單詞組成，第一個單詞所有小寫，第二個單詞開始，首字符變大小
userName
txtusernmae --> txtUserName
下面哪些變量名不合法
```
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.六、變量使用注意問題
一、未初始化變量的使用
只定義未賦值，值爲undefined
未定義，使用，錯誤，not defined
二、在可能的狀況下，聲明變量時儘可能初始化
var age=10;
var name="張三";
var isHappy=true;
三、將變量的聲明和賦值分開操做
var name;
var age;
name="";
age=18;
四、對變量進行的存取操做
一、設置變量的值(賦值，存)
=
var name="張三丰";//張三丰
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.六、變量使用注意問題
一、未初始化變量的使用
只定義未賦值，值爲undefined
未定義，使用，錯誤，not defined
二、在可能的狀況下，聲明變量時儘可能初始化
var age=10;
var name="張三";
var isHappy=true;
三、將變量的聲明和賦值分開操做
var name;
var age;
name="";
age=18;
四、對變量進行的存取操做
一、設置變量的值(賦值，存)
=
var name="張三丰";//張三丰
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山
name = name+""; ==> name+="";
特殊：
var i=10;
i++;
++i; ==> i=i+1;
注意：賦值時，=的左邊必定是變量
二、獲取變量的值(取值)
var uname="張無忌";
console.log(uname);
特殊：
var i=10;
i++;
++i; ==> i=i+1;
注意：賦值時，=的左邊必定是變量
二、獲取變量的值(取值)
var uname="張無忌";
console.log(uname);
var newName = uname;
uname : 取值操做(=右邊使用)
newName : 賦值操做(=左邊使用)
四、運算符
一、算數運算符
+,-,*,/,%
%:取餘(模),計算兩個數字相除後的餘數
5%2 結果爲 1
3%5 結果爲 3
uname : 取值操做(=右邊使用)
newName : 賦值操做(=左邊使用)
四、運算符
一、算數運算符
+,-,*,/,%
%:取餘(模),計算兩個數字相除後的餘數
5%2 結果爲 1
3%5 結果爲 3
經常使用場合：
一、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
二、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否爲 0?
一、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
二、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否爲 0?
78 是 3的倍數嗎？？
78 % 3 結果是否爲 0 ？
+ ：
一、求和：數字類型的數值求和
二、"" 與 +聯用 ,做用是追加
"張無忌" + 123 結果爲:張無忌123
123 + "張無忌" 結果爲:123張無忌
12+25 結果爲：37
"12"+25 結果爲：1225
'12'+25 結果爲：1225
注意：由算數運算符 與 操做數 組成的表達式，稱爲 算數表達式
五、數據類型
一、什麼是數據類型
保存在內存中的數據的類型，根據不一樣的類型內存中所開闢的空間也不同
二、數據類型
一、原始類型 (基本類型)
一、number 類型
數字
能夠表示 32 位 (4字節)的整數，或64位(8字節)的浮點數
浮點數：小數
'12'+25 結果爲：1225
注意：由算數運算符 與 操做數 組成的表達式，稱爲 算數表達式
五、數據類型
一、什麼是數據類型
保存在內存中的數據的類型，根據不一樣的類型內存中所開闢的空間也不同
二、數據類型
一、原始類型 (基本類型)
一、number 類型
數字
能夠表示 32 位 (4字節)的整數，或64位(8字節)的浮點數
浮點數：小數
var age;
age=12; //number
age=24.5;//number
age=12; //number
age=24.5;//number
二、string 類型
字符串
一系列的文本數據
注意：賦值時，必須使用 " " 或 ' ' 擴起
var name="張三丰";//string
var age = "12"; //string
字符串
一系列的文本數據
注意：賦值時，必須使用 " " 或 ' ' 擴起
var name="張三丰";//string
var age = "12"; //string
特殊字符，能夠經過轉移字符實現 "Hello World" console.log(""Hello World"");錯誤 \ 做爲開始 \" : 表示一個 " \' : ' \n : 換行 \t : 製表符 \\ : \ console.log("Hello World"); 三、boolean 類型 布爾 只表示 確定(真) 或 否認(假)的數據 值：true(真) 和 false(假) 使用場合：做爲程序的條件(判斷、循環) 在與 number 類型作運算時，true=1，false=0 四、null 類型 空 五、undefined 類型 未定義 表示 不存在的數據 二、引用類型 Object Number Boolean String Date ...
相關文章
- 1. JS基礎篇（一）：JS的簡介及引入方式
- 2. 從精通JS到golang入門 - 基礎入門
- 3. 前端js入門——JavaScript 數據類型
- 4. JS基礎入門篇（ 一 ）
- 5. JS基礎入門篇（一）
- 6. SpringCloud從入門到精通教程/SpringCloud Alibaba從入門到精通教程
- 7. JS基本數據類型
- 8. js——引用類型和基本類型
- 9. js介紹,入門,js引入,變量,值類型,運算符
- 10. 前端JS基礎篇（二）JS基本數據類型和引用數據類型及檢測數據類型方法
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
