前端知識簡單總結

阿新 • • 發佈：2019-02-15

本文是自學HTML EJS CSS JavaScript DOM jQuery AJAX JSON 後做的簡單總結，自學內容來源於 w3cschool。

HTML

HTML 很簡單，是一種標籤語言，我把標籤看做一個結構體或物件，它可以有很多屬性。標籤不是任意的，每個標籤都有自己的意義。
點選檢視 HTML 標籤列表，根據標籤列表，至少能看懂網頁的原始碼。

EJS 模板引擎

還有其他的模板引擎 Jade / Swig 等，但是我的部落格主題是用這一種寫的，我也就學的這一種。
這種模板引擎很簡單，入門資料請見官網，或者我的搭建部落格文章。

CSS

CSS 也很容易理解，就是匹配標籤中的標籤名、id、class 或屬性，來對標籤新增不同的樣式。

點選檢視 CSS 樣式屬性列表，根據屬性列表，就能知道原始碼中應用了哪些樣式。

在 CSS 中顏色用的特別多，特意附上RGB 配色表

插入樣式表有3種方法：外部樣式表、內部樣式表、內聯樣式。
外部樣式表在 <head> 標籤中用 <link> 標籤引入。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

內部樣式表在 <head> 標籤中用 <style> 標籤定義。

<head>
<style 
 type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

JavaScript

JavaScript 原理也很簡單，用 <script>

標籤標識。

JavaScript 實現

指令碼可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。
通常的做法是把函式放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。

例子：

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能夠直接寫入 HTML 輸出流中：
</p>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果您在文件已載入後使用它（比如在函式中），會覆蓋整個文件。
</p>

</body>
</html>

上面例子中的 JavaScript 語句，會在頁面載入時執行。
通常，我們需要在某個事件發生時執行程式碼，比如當用戶點選按鈕時。
如果我們把 JavaScript 程式碼放入函式中，就可以在事件發生時呼叫該函式。

JavaScript 輸出

JavaScript 通常用於操作 HTML 元素。

方式：操作 HTML 元素、寫到文件輸出。

1. document.getElementById("demo").innerHTML="My First JavaScript";  
2. document.write("<p>My First JavaScript</p>");

注意：如果在文件已完成載入後執行 document.write，整個 HTML 頁面將被覆蓋。

JavaScript 變數

當您向變數分配文字值時，應該用雙引號或單引號包圍這個值。當您向變數賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文字來處理。

JavaScript 擁有動態型別。這意味著相同的變數可用作不同的型別：

var x                // x 為 undefined
var x = 6;           // x 為數字
var x = "Bill";      // x 為字串

JavaScript 變數均為物件。當您宣告一個變數時，就建立了一個新的物件。

JavaScript 函式語法

函式就是包裹在花括號中的程式碼塊，前面使用了關鍵詞 function：

例子：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">點選這裡</button>
</body>
</html>

當呼叫該函式時，會執行函式內的程式碼。
可以在某事件發生時直接呼叫函式（比如當用戶點選按鈕時），並且可由 JavaScript 在任何位置進行呼叫。

JavaScript 物件

JavaScript 中的所有事物都是物件：字串、數值、陣列、函式… 此外，JavaScript 允許自定義物件。
JavaScript 是面向物件的語言，但 JavaScript 不使用類。在 JavaScript 中，不會建立類，也不會通過類來建立物件。

訪問物件的屬性,訪問物件的方法和 java 語言一樣。

建立 JavaScript 物件

建立直接的例項(略)，使用物件構造器如下：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

把屬性新增到 JavaScript 物件

您可以通過為物件賦值，向已有物件新增新屬性：假設 personObj 已存在 - 您可以為其新增這些新屬性：firstname、lastname、age 以及 eyecolor

person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

把方法新增到 JavaScript 物件

方法只不過是附加在物件上的函式。在構造器函式內部定義物件的方法：

<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
    this.lastname=name;
    }
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</script>

JS HTML DOM

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。

HTML DOM 樹

通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

查詢 HTML 元素

通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過 id 找到 HTML 元素
通過標籤名找到 HTML 元素
通過類名找到 HTML 元素

var x=document.getElementById(“intro”);
var y=x.getElementsByTagName(“p”);
var y=x.getElementsByClassName(“xxx”);

改變 HTML 輸出流

document.write(Date());

改變 HTML 內容

document.getElementById(id).innerHTML=new HTML

改變 HTML 屬性

document.getElementById(id).attribute=new value

改變 HTML 樣式

document.getElementById(id).style.property=new style

對事件做出反應

HTML 事件的例子：

當用戶點選滑鼠時
當網頁已載入時
當影象已載入時
當滑鼠移動到元素上時
當輸入欄位被改變時
當提交 HTML 表單時
當用戶觸發按鍵時

如需向 HTML 元素分配事件，您可以使用事件屬性。
在下面的例子中，名為 changetext 的函式將在按鈕被點選時執行。

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="謝謝!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請點選該文字</h1>
</body>
</html>

onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。

onchange 事件常結合對輸入欄位的驗證來使用。

onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。

onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。

新增和刪除節點（HTML 元素）

建立新的 HTML 元素
如需向 HTML DOM 新增新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素。

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須首先獲得該元素的父元素：

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

JavaScript 框架（庫）

JavaScript 高階程式設計（特別是對瀏覽器差異的複雜處理），通常很困難也很耗時。
為了應對這些調整，許多的 JavaScript (helper) 庫應運而生。這些 JavaScript 庫常被稱為 JavaScript 框架。
在本教程中，我們將瞭解到一些廣受歡迎的 JavaScript 框架：

jQuery
Prototype
MooTools

所有這些框架都提供針對常見 JavaScript 任務的函式，包括動畫、DOM 操作以及 Ajax 處理。

jQuery 是目前最受歡迎的 JavaScript 框架。它使用 CSS 選擇器來訪問和操作網頁上的 HTML 元素（DOM 物件）。jQuery 同時提供 companion UI（使用者介面）和外掛。

DOM

DOM 很簡單，程式碼格式很固定。

JavaScript 參考手冊中有 JavaScript 物件，Browser 物件，HTML DOM 物件的屬性和方法。檢視原始碼時，參照這個很有用。

jQuery

jQuery 是一個 JavaScript 函式庫(作用是被呼叫)。jQuery 極大地簡化了 JavaScript 程式設計。

jQuery 庫包含以下特性：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

例子：

<head>
<script type="text/javascript" src="jquery.js"></script>    <!-- 引入 jQuery 庫，相當於 java 中 import 語句 -->
<script type="text/javascript">
$(document).ready(function(){      //程式碼中 ready,click,hide 都是事件屬性，本質上還是屬性。不是函式。
  $("p").click(function(){         //事件屬性的特點是，事件發生時，會執行相應的功能，即函式。
  $(this).hide();
  });
});
</script>
</head>

jQuery 是為事件處理特別設計的。jQuery 事件處理方法是 jQuery 中的核心函式。
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。術語由事件“觸發”（或“激發”）經常會被使用。
通常會把 jQuery 程式碼放到 <head> 部分的事件處理方法中。

總結:
由於 jQuery 是為處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的程式碼會更恰當且更易維護：

把所有 jQuery 程式碼置於事件處理函式中
把所有事件處理函式置於文件就緒事件處理器中
把 jQuery 程式碼置於單獨的 .js 檔案中
如果存在名稱衝突，則重新命名 jQuery 庫

jQuery - AJAX

AJAX 是與伺服器交換資料的藝術，它在不過載全部頁面的情況下，實現了對部分網頁的更新。
AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不過載整個網頁的情況下，AJAX 通過後臺載入資料，並在網頁上進行顯示。

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。

語法：

$(selector).load(URL,data,callback);

必需的 URL 引數規定您希望載入的 URL。
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的 callback 引數是 load() 方法完成後所執行的函式名稱。

可選的 callback 引數規定當 load() 方法完成後所要允許的回撥函式。
回撥函式可以設定不同的引數：

responseTxt - 包含呼叫成功時的結果內容
statusTXT - 包含呼叫的狀態
xhr - 包含 XMLHttpRequest 物件

下面的例子會在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示“外部內容載入成功！”，而如果失敗，則顯示錯誤訊息：

例子：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容載入成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

jQuery $.get() 方法

$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。

語法：

$.get(URL,callback);

必需的 URL 引數規定您希望請求的 URL。
可選的 callback 引數是請求成功後所執行的函式名。
下面的例子使用 $.get() 方法從伺服器上的一個檔案中取回資料：

例項：

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

jQuery $.post() 方法

$.post() 方法通過 HTTP POST 請求從伺服器上請求資料。

語法：

$.post(URL,data,callback);

必需的 URL 引數規定您希望請求的 URL。
可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。

AJAX

XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

建立 XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：

variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject。

如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

方法	描述
open(method,url,async)	規定請求的型別、URL 以及是否非同步處理請求。method：請求的型別；GET 或 POSTurl：檔案在伺服器上的位置async：true（非同步）或 false（同步）
send(string)	將請求傳送到伺服器。string：僅用於 POST 請求

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字串形式的響應資料。
responseXML	獲得 XML 形式的響應資料。

onreadystatechange 事件

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 物件的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。0: 請求未初始化1: 伺服器連線已建立2: 請求已接收3: 請求處理中4: 請求已完成，且響應已就緒
status	200: “OK” 404: 未找到頁面

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button>

</body>
</html>

JSON

**JSON 是儲存和交換文字資訊的語法，類似 XML。**JSON 比 XML 更小、更快，更易解析。

例子：

{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

JSON 物件在花括號中書寫，一對花括號就表示一個物件(匿名的)。