JavaScript編程語言 基礎 （1）
問題：什麼是web前端javascript
前端：指界面，計算機（PC）軟件桌面的界面； 計算機端的瀏覽器界面； 移動端的軟件（app）界面； 移動端的瀏覽器界面。css
Html+css+JavaScript 使用網頁技術（Html，css，JavaScript）開發界面；html
Html，css和JavaScript的關係：
前端
HTML:架構師，網頁內容；java
CSS:修飾師：裝飾內容。程序員
JavaScript：魔術師，內容網頁進行交互。web
關於學習方法：編程沒有捷徑；只能多寫，多記，多理解。express
JavaScript歷史：
1. navigator：網景公司，在1995年推出。Livescript很簡單的。完成網頁中基本的交互能。編程
2. 1995 java很火。Write one，run anywhere！！，寫一遍代碼，在各個平臺運行。後端
3 .網景公司和sun公司合做，推出了javascript。
4. 網景公司，招人，Brendan Eich開發Scheme；開發javascript，像極了java，要比java簡單。慪氣加趕工，10天開發出了javascript。推出javascript1.0。
5. 1996年時，將javascript1.1提交給了ECMA組織，做爲js標準。a)提供標準：ECMAScript標準，javascript是實現了ECMAScript標準的語言。
6. 微軟：1996沒有瀏覽器，收購了一家公司，產品：IE，也實現了ECMAScript標準jscript。
7.爲期8年的瀏覽器大戰開始。谷歌，火狐，歐鵬，IE safari。
注意：ECMAscript和JavaScript有什麼區別？
ECMAscript：語言標準，簡稱ES，JavaScript是實現了ECMAscript的編程語言。
關於瀏覽器及其內核
做爲前端開發，熟悉四大內核是很是有必要的。四大內核的解析不一樣使網頁渲染效果更具多樣化。下面總結一下各經常使用瀏覽器所使用的內核。
一、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
二、Chrome瀏覽器內核：統稱爲Chromium內核或Chrome內核，之前是Webkit內核，如今是Blink內核；
三、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
四、Safari瀏覽器內核：Webkit內核；
五、Opera瀏覽器內核：最初是本身的Presto內核，後來是Webkit，如今是Blink內核；
六、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
七、搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；
八、百度瀏覽器、世界之窗內核：IE內核；
九、2345瀏覽器內核：之前是IE內核，如今也是IE+Chrome雙內核；
前五個屬於主流瀏覽器。
一些國內的瀏覽器他們的內核：
搜狗瀏覽器：兼容模式（IE：Trident）和高速模式（webkit）
傲遊瀏覽器：兼容模式（IE：Trident）和高速模式（webkit）
QQ瀏覽器：普通模式（IE：Trident）和極速模式（webkit）
360極速瀏覽器：基於谷歌（Chromium）和IE內核 360安全
什麼是JavaScript？
JavaScript是一門腳本語言。弱數據類型，基於對象，基於事件驅動的語言。
Javascript是解釋執行的。 解釋器是瀏覽器。
JS特色
(1) 腳本語言。JavaScript是一種解釋型的腳本語言，C、C++、java等語言先編譯後執行,而JavaScript是在程序的運行過程當中逐行進行解釋。
(2)基於對象。JavaScript是一種基於對象的腳本語言,它不只能夠建立對象，也能使用現有的對象。
(3)簡單。JavaScript語言中採用的是弱類型的變量類型，對使用的數據類型未作出嚴格的要求，是基於Java基本語句和控制的腳本語言，其設計簡單緊湊。
(4)動態性。JavaScript是一種採用事件驅動的腳本語言，它不須要通過Web服務器就能夠對用戶的輸入作出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操做JavaScript均可直接對這些事件給出相應的響應。
(5)跨平臺性。JavaScript腳本語言不依賴於操做系統，僅須要瀏覽器的支持。所以一個JavaScript腳本在編寫後能夠帶到任意機器上使用，前提上機器上的瀏覽器支持JavaScript腳本語言，目前JavaScript已被大多數的瀏覽器所支持。
JS應用：
網站後端開發：Node.js讓程序員能夠用js自由地寫後端了。
(2) Web app：HTML5提供了不少API支持，能夠實現原生應用擁有的大部分功能，可是性能有待提升。像Firefox OS就是基於web app的移動操做系統。
(3) 混合式應用開發：把原生應用的一部分用前端技術實現，使原生應用更加靈活。不少應用都會這樣作。PhoneGap，React Native之類平臺的出現容許程序員使用js來進行移動應用開發。
JavaScript的構成：
1. ECMAScript語言基礎；（JS基本語法）
(1) JavaScript的歷史
(2) ECMAScript標準
(3) 基本語法
(4) 語句
JavaScript 程序的執行單位爲行（line），也就是一行一行地執行。通常狀況下，每一行就是一個語句。語句（statement）是爲了完成某種任務而進行的操做，好比下面就是一行賦值語句。
var x=1+2;複製代碼
這條語句先用var命令，聲明瞭變量x，而後將1 + 2的運算結果賦值給變量a
1 + 2叫作表達式（expression），指一個爲了獲得返回值的計算式。語句和表達式的區別在於，前者主要爲了進行某種操做，通常狀況下不須要返回值；後者則是爲了獲得返回值，必定會返回一個值。凡是 JavaScript 語言中預期爲值的地方，均可以使用表達式。好比，賦值語句的等號右邊，預期是一個值，所以能夠放置各類表達式。
語句以分號結尾，一個分號就表示一個語句結束。多個語句能夠寫在一行內。
var x=1+2; var y=1+3;複製代碼
分號前面能夠沒有任何內容，JavaScript引擎將其視爲空語句。
;;;複製代碼
上面的代碼就表示3個空語句。
表達式不須要分號結尾。一旦在表達式後面添加分號，則 JavaScript 引擎就將表達式視爲語句，這樣會產生一些沒有任何意義的語句。
1+2;
"abc";複製代碼
上面兩行語句只是單純地產生一個值，並無任何實際的意義。
語句分爲條件語句和 循環語句，
條件語句：JavaScript 提供if結構和switch結構，完成條件判斷，即只有知足預設的條件，纔會執行相應的語句。
if 語句，if else 語句，
switch 語句，
多個if...else連在一塊兒使用的時候，能夠轉爲使用更方便的switch結構。
switch (fruit) {
case "banana":
// ...
break;
case "apple":
// ...
break;
default:
// ...
}
複製代碼
上面代碼根據變量fruit的值，選擇執行相應的case。若是全部case都不符合，則執行最後的default部分。須要注意的是，每一個case代碼塊內部的break語句不能少，不然會接下去執行下一個case代碼塊，而不是跳出switch結構。
三元運算符，
JavaScript 還有一個三元運算符（即該運算符須要三個運算子）?:，也能夠用於邏輯判斷。
(條件) ? 表達式1 : 表達式2
複製代碼
上面代碼中，若是「條件」爲true，則返回「表達式1」的值，不然返回「表達式2」的值。
var even = (n % 2 === 0) ? true : false;
複製代碼
上面代碼中，若是n能夠被2整除，則even等於true，不然等於false。它等同於下面的形式。
var even;
if (n % 2 === 0) {
even = true;
} else {
even = false;
}
複製代碼
這個三元運算符能夠被視爲if...else...的簡寫形式，所以能夠用於多種場合。
var myVar;
console.log(
myVar ?
'myVar has a value' :
'myVar does not have a value'
)
// myVar does not have a value
複製代碼
上面代碼利用三元運算符，輸出相應的提示。若是過變量有 value 值，輸出？前面的值，若是沒有值，輸出後面的值。
var msg = '數字' + n + '是' + (n % 2 === 0 ? '偶數' : '奇數');
複製代碼
上面代碼利用三元運算符，在字符串之中插入不一樣的值。
(5) 變量
1.概念：變量是對「值」的具名引用。變量就是爲「值」起名，而後引用這個名字，就等同於引用這個值。變量的名字就是變量名。（變化的量，在JS程序中，用於存儲數據的容器。）
2.如何在JS程序中使用變量？
a) 聲明變量：告訴瀏覽器，我要使用這個變量；var 變量名稱;//這是聲明變量的語法。
b) 初始化變量：給變量賦值；
變量名稱=值; //=;賦值，將值存儲到變量中；
賦值操做：將等號右邊的值（能夠是變量）賦值給左邊的變量；
c) 聲明並初始化變量
var 變量名稱=值；
注意：變量使用以前必需要聲明；
只聲明不賦值，系統給變量默認值：undefined；
變量名稱用於到內存中存儲數據或者是取數據；
d) 定義多個變量;
var a,b,c; 即var 變量名稱，變量，變量
e) 關鍵字和保留字
關鍵字：在JS程序中，有特定含義的單詞；
保留字：在JS程序中，與特定含義的單詞，可是尚未被JS程序使用。
標識符命名規範：
- 標識符由字母，數字，下劃線，$構成；
- 標識符的首字母不能爲數字：
var 8a；//錯誤 - 標識符不能爲關鍵字或者是保留字；
var var; //錯誤 - 約定俗稱：標識符要見名知意；
- 約定俗成：標識符要使用駝峯式命名；變量使用小駝峯（第一個單詞首字母小寫）;
getElementById //小駝峯 GetElementById //大駝峯
- JS嚴格區分大小寫。
(6) 數據類型 typeOf()
基本數據類型：typeof()變量，獲取變量的數據類型；
a) 數字類型： 整數：十進制：0-9 ； 浮點數（小數）
b) 字符串類型：用單引號或者雙引號括起數據，字符串，由字符（文本）構成；
c) 布爾類型：用於判斷 true:真 false:假
d) 特殊類型
- null：表明空值，通常清除資源的時候用，初始化變量；
- undefined：表明變量未初始化；
- NaN：Not a Number 不是一個整數，非數字之間的運算，結果爲NaN；
- isNaN(s)判斷是否NaN（不是數字）,若是該字符裏不是全數字，則返回true；若是是全數字，則返回false。
a)數組 b) 對象（函數）
(7) 運算符
a) 加法運算符 基本規則：（+）是最多見的運算符，用來求兩個數值的和。1+1 //2
JavaScript 容許非數值的相加 true+true //2 1+true //2
上面代碼中，第一行是兩個布爾值相加，第二行是數值與布爾值相加。這兩種狀況，布爾值 都會自動轉成數值，而後再相加。
比較特殊的是，若是是兩個字符串相加，這時加法運算符會變成鏈接運算符，返回一個新的字 符串，將兩個原字符串鏈接在一塊兒。
"a"+"bc" //"abc"複製代碼
若是一個運算子是字符串，另外一個運算子是非字符串，這時非字符串會轉成字符串，再鏈接在 一塊兒。
1+"a" //"1a"
false+"a" //"false"複製代碼
加法運算符是在運行時決定，究竟是執行相加，仍是執行鏈接。也就是說，運算子的不一樣，導 致了不一樣的語法行爲，這種現象稱爲「重載」（overload）。因爲加法運算符存在重載，可 能執行兩種運算，使用的時候必須很當心。
"3"+4+5 //"345"
3+4+"5" //"75"複製代碼
除了加法運算符，其餘算術運算符（好比減法、除法和乘法）都不會發生重載。它們的規則 是：全部運算子一概轉爲數值，再進行相應的數學運算。
對象的相加 若是運算子是對象，必須先轉成原始類型的值，而後再相加
b) 包括加法運算符在內，JavaScript 共提供10個算術運算符，用來完成基本的算術運算。
- 加法運算符：
x + y
- 減法運算符：
x - y - 乘法運算符：
x * y - 除法運算符：
x / y - 指數運算符：
x ** y - 餘數運算符：
x % y - 自增運算符：
++x或者x++ - 自減運算符：
--x或者x-- - 數值運算符：
+x - 負數值運算符：
-x
餘數運算符（%）返回前一個運算子被後一個運算子除，所得的餘數。須要注意的是，運 算結果的正負號由第一個運算子的正負號決定
-1%2 //-1
1%-2 //1複製代碼
因此，爲了獲得負數的正確餘數值，能夠先使用絕對值函數。
c) 關係運算符 用於比較兩個值的大小，而後返回一個布爾值，表示是否知足指定的條件。
注意，比較運算符能夠比較各類類型的值，不只僅是數值。JavaScript 一共提供了8個比較運算符。
<小於運算符>大於運算符<=小於或等於運算符>=大於或等於運算符==相等運算符（只判斷值是否相等）===嚴格相等運算符（判斷值和數據類型，叫全等或恆等）!=不相等運算符!==嚴格不相等運算符
d) 賦值運算符（Assignment Operators）用於給變量賦值。最多見的賦值運算符，固然就是等號（=）var x=1; var x=y;
賦值運算符還能夠與其餘運算符結合，造成變體。下面是與算術運算符的結合。
x=x+y; <=> x+=y;
x=x-y; <=> x-=y;
x=x*y; <=> x*=y;
x=x/y; <=> x/=y;
x=x%y; <=> x%=y;
x=x**y; <=> x*=y;複製代碼
e) 邏輯運算符
布爾運算符用於將表達式轉爲布爾值，一共包含四個運算符。
- 取反運算符：
! - 且運算符：
&& - 或運算符：
|| - 三元運算符：
?:
(8) 函數
(9) 數組
(10) 字符串
(11) 做用域
(12) 原形
(13) 閉合
(14) JS面向對象設計
2. DOM（文檔對象模型）：對網頁的操做，即對瀏覽器（可看作容器）內的內容進行操做
DOM: Document 整篇文檔 Object 文檔對象 Model 模型
（選項卡，輪播圖，更改文檔結構，購物車，樓梯導航；這些是DOM裏邊最基礎的）
Dom樹（層級嵌套）
3. BOM（瀏覽器對象模型）：對瀏覽器自己進行操做。
Browser Object Model
編寫JavaScript程序
1. 全部的js程序都要寫在script標籤中
2. console.log(「輸出的信息」)
a) 輸出的信息要用引號括起來 b) 每寫完一條語句，要以分號結束
c) 編程中用到的標點符號，都要使用英文的。
3. script標籤：嵌入js代碼
a) script標籤能夠寫在html中的任何地方，而且html中能夠有多個script標籤
b) html中的代碼：都是從上往下逐條執行。
c) script標籤中經常使用的屬性：
i. type：規定腳本語言的類型，text/javascript
ii. src:資源所在的路徑，引入外部的js文件，script中添加的代碼被忽略。
4. 彈出框提示：
window.alert(「提示信息」)：使用窗口的提示框功能輸出提示信息。
注： a) alert阻塞以後的代碼執行。 b) window能夠省略。
c) alert中提示信息的換行
5. 單雙引號： 在提示信息中，顯示引號；內部使用雙引號，外部使用單引號；
console.log('"職位介紹"'); console.log("<input type='text' />");
6. 往網頁中輸出內容：（HTML代碼）
a) document.write(「html代碼」)：將html代碼寫入到網頁中。
i. document:文檔，全部的頁面都是文檔，能夠認爲是網頁
i. write:寫
7. 1. confirm(「提示信息」):出現一個確認框（提示信息、確認按鈕、取消按鈕）;
a) 提示用戶是否肯定對信息的操做。
避免用戶誤操做當點擊肯定的時候，返回一個確認的結果true(真)
當點擊取消的時候，返回一個取消的結果false(假)
confirm("肯定刪除嗎?");//返回真或者假
console.log(confirm("肯定刪除嗎?"));
8. prompt(「提示信息」)：出現一個輸入框，提示用戶輸入信息的。開發時不用。
9. javascript註釋：被瀏覽器忽略不執行的內容。
a) 用來講明代碼的功能
b) 兩種註釋方式： i.單行註釋：// i.多行註釋：/* */
- 1. JavaScript語言基礎
- 2. javascript編程基礎1
- 3. python編程語言基礎
- 4. C 語言編程基礎
- 5. C語言--編程語言的基礎
- 6. Python語言編程基礎
- 7. java編程語言基礎
- 8. 『Python基礎-1 』 編程語言Python的基礎背景知識
- 9. 彙編語言-----（1）基礎知識
- 10. 彙編語言-1-基礎知識
- 更多相關文章...
- • R 語言基礎 - R 語言教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Kotlin學習（一）基本語法
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JavaScript語言基礎
- 2. javascript編程基礎1
- 3. python編程語言基礎
- 4. C 語言編程基礎
- 5. C語言--編程語言的基礎
- 6. Python語言編程基礎
- 7. java編程語言基礎
- 8. 『Python基礎-1 』 編程語言Python的基礎背景知識
- 9. 彙編語言-----（1）基礎知識
- 10. 彙編語言-1-基礎知識