diff --git a/%E5%9F%BA%E7%A4%8EHTML.md b/%E5%9F%BA%E7%A4%8EHTML.md new file mode 100644 index 0000000..cc5c354 --- /dev/null +++ b/%E5%9F%BA%E7%A4%8EHTML.md @@ -0,0 +1,227 @@ +# 前端(Html-Javascript-Css) +## 介紹 +### 三大元素構成：HTML、CSS、JavaScript +- HTML ：網頁內容的描述語言，負責建立網頁的主結構。 +- CSS ：網頁外觀形態的描述語言，負責美化網頁。 +- JavaScript ：一門函式先行的直譯式程式語言，經常用在呈現網頁動態效果。負責描述網頁如何與用戶互動。 +### HTML是一種DOM元素 + 是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。 + DOM 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。 +### 這邊先以如何用JS去跟HTML做溝通 +- 透過 DOM API 取得節點 +``` +// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。 +document.getElementById("xxx"); +// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件 [註1] +document.getElementsByTagName("xxx"); + +// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。 +document.getElementsByClassName("xxx"); + +// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。 +document.querySelector("xxx"); +document.querySelectorAll("xxx"); +``` +## +## 教學開始 +### 先看全部程式碼 +``` + + + + + +

Demo

+
+ +
+
+ + + +
+ +
+
+ +
+
+ + + + + + + + + + + + + +
First nameLast name
JohnDoe
JaneDoe
+
+ + + + + + + + + + +``` +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%871.png) + +### 按鈕 +#### 當123這個按鈕觸發後，會呼叫到button_click這個function，按f12即可看到console的參數 +``` + + + + + +``` +### 輸入框 +#### 當輸入框有參數時，觸發"測試按鈕"會呼叫text_click這個function，將輸出框的參數改得與輸入框相同 +``` + + + + + + +``` +其中包含使用DOM，這邊可以好好熟悉這塊，雖然無論是呼叫Name或是Id都可以獲得正確參數，但這邊建議使用Id，有時候寫入框架的時候，會遇到框架本身會需要呼叫某元件，因此將Name給框架使用 + +### 警告視窗 +#### 彈出視窗，可以用於debug，或是有物品輸入不正確，跳出警示 +``` + +``` +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%872.png) + +### 表格 +#### 基礎布局時最常用到的 +``` + + + + + + + + + + + + + +
First nameLast name
JohnDoe
JaneDoe
+``` +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%873.png) + +## +## 與後端撈值 +### 由於需要大量參數，通常都會跟webapi去索取資料，這邊使用最常用的方式Jquery的AJAX +若無jq包，先載入後才能使用以下操作 +``` + +``` + +### 獲取資料 +``` +function get_data(){ + $.ajax({ + type: "GET", //選擇格式(GET，POST，PUT，DELETE) + url: "/api/get_data", //換取網址 + data: {}, + contentType: "application/json",//指定格式(就抱持這樣即可) + success: function (Model) { + console.log(Model) + } + }); +} +``` +### 新增資料 +``` +function post_data(){ + var obj = { parking_spaces_name: '第一停車場', parking_spaces_total_num: "20", longitude: "23.156", latitude: "120.123" } + var stringify_obj = JSON.stringify(obj); + $.ajax({ + type: "POST", + url: "http:/x.x.x.x:7777/api/test", //API網址 + data: stringify_obj, //資料包 + contentType: "application/json", + success: function (msg) { + console.log(msg) + } + }); + } +``` +### 刪除資料 +``` +function delet_data(){ + $.ajax({ + type: "DELETE", + url: "http:/x.x.x.x:7777/api/test", //API網址, + data: {}, + contentType: "application/json", + success: function (msg) { + console.log(msg) + } + }); +} +``` +### 更新資料 +``` +function put_data(){ + $.ajax({ + type: "PUT", + url: "http:/x.x.x.x:7777/api/test", //API網址, + data: stringify_obj, + contentType: "application/json", + success: function (Model) { + console.log(Model) + } + }); +} +``` +## +## 會以上這些後，即可開始製作屬於自己的網站 +### 最常用的都是以上這些，剩下的就靠練習累積上去了，網站建立其實沒想像的困難 +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%874.png) \ No newline at end of file