問題：什么是web前端

前端：指界面，計算機（PC）軟件桌面的界面； 計算機端的瀏覽器界面； 移動端的軟件（app）界面； 移動端的瀏覽器界面。

Html+css+JavaScript 使用網頁技術（Html，css，JavaScript）開發界面；

Html，css和JavaScript的關系：

HTML:架構師，網頁內容；

CSS:修飾師：裝飾內容。

JavaScript：魔術師，內容網頁進行交互。

關于學習方法：編程沒有捷徑；只能多寫，多記，多理解。

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的編程語言。

關于瀏覽器及其內核

作為前端開發，熟悉四大內核是非常有必要的。四大內核的解析不同使網頁渲染效果更具多樣化。下面總結一下各常用瀏覽器所使用的內核。?

1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；?

2、Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；?

3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；

4、Safari瀏覽器內核：Webkit內核；

5、Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；?

6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；?

7、搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；?

8、百度瀏覽器、世界之窗內核：IE內核；?

9、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應用：

(1) 網站開發：? 網站前端開發：給網頁添加動態的效果。?

?網站后端開發：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.多行注釋：/* */

總結

以上是生活随笔為你收集整理的JavaScript编程语言 基础 （1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。