# 基礎網頁 ### 先看全部程式碼 ``` HTML

Demo








First name Last name
John Doe
Jane Doe
``` ![](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的參數 ``` HTML ``` ### 輸入框 #### 當輸入框有參數時,觸發"測試按鈕"會呼叫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) ### 表格 #### 基礎布局時最常用到的 ```HTML
First name Last name
John Doe
Jane Doe
``` ![](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包,先載入後才能使用以下操作 ``` javascript ``` ### 獲取資料 ```javascript function get_data(){ $.ajax({ type: "GET", //選擇格式(GET,POST,PUT,DELETE) url: "/api/get_data", //換取網址 data: {}, contentType: "application/json",//指定格式(就抱持這樣即可) success: function (Model) { console.log(Model) } }); } ``` ### 新增資料 ```javascript 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) } }); } ``` ### 刪除資料 ```javascript 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) } }); } ``` ### 更新資料 ```javascript 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)