Frontend/前端_基礎HTML/README.md

202 lines
5.2 KiB
Markdown
Raw Normal View History

2024-04-23 19:59:31 +08:00
# 基礎網頁
2024-04-23 19:56:27 +08:00
### 先看全部程式碼
2024-06-24 13:01:10 +08:00
``` HTML
2024-04-23 19:56:27 +08:00
<!--CSS的部分-->
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
<!--HTML的部分-->
<body>
<h1>Demo</h1>
<div>
<button onclick="button_click()">123</button>
<br>
<br>
<input id="text_in_id"/>
<button onclick="text_click()">測試按鈕</button>
<input id="text_out_id"/>
<br>
<br>
<br>
<button onclick="alert('這是警告文字');">開啟警告視窗</button>
<br>
<br>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
</div>
</body>
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
<!--JS的部分-->
<script>
function button_click() {
console.log('button_click_確認')
}
</script>
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
<script>
function text_click() {
var in_text = document.getElementById("text_in_id").value
console.log(in_text)
document.getElementById('text_out_id').value = in_text
}
</script>
```
![](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)
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
### 按鈕
#### 當123這個按鈕觸發後會呼叫到button_click這個function按f12即可看到console的參數
2024-06-24 13:01:10 +08:00
``` HTML
2024-04-23 19:56:27 +08:00
<!--HTML-->
<button onclick="button_click()">123</button>
<!--JS-->
<script>
function button_click() {
console.log('button_click_確認')
}
</script>
```
### 輸入框
#### 當輸入框有參數時,觸發"測試按鈕"會呼叫text_click這個function將輸出框的參數改得與輸入框相同
```
<!--HTML-->
<input id="text_in_id"/>
<button onclick="text_click()">測試按鈕</button>
<input id="text_out_id"/>
<!--JS-->
<script>
function text_click() {
var in_text = document.getElementById("text_in_id").value
console.log(in_text)
document.getElementById('text_out_id').value = in_text
}
</script>
```
其中包含使用DOM這邊可以好好熟悉這塊雖然無論是呼叫Name或是Id都可以獲得正確參數但這邊建議使用Id有時候寫入框架的時候會遇到框架本身會需要呼叫某元件因此將Name給框架使用
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
### 警告視窗
#### 彈出視窗可以用於debug或是有物品輸入不正確跳出警示
```
<button onclick="alert('這是警告文字');">開啟警告視窗</button>
```
![](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)
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
### 表格
#### 基礎布局時最常用到的
2024-06-24 13:01:10 +08:00
```HTML
2024-04-23 19:56:27 +08:00
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
```
![](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)
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
##
## 與後端撈值
### 由於需要大量參數通常都會跟webapi去索取資料這邊使用最常用的方式Jquery的AJAX
若無jq包先載入後才能使用以下操作
2024-06-24 13:01:10 +08:00
``` javascript
2024-04-23 19:56:27 +08:00
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
```
2024-04-23 18:57:58 +08:00
2024-04-23 19:56:27 +08:00
### 獲取資料
2024-06-24 13:01:10 +08:00
```javascript
2024-04-23 19:56:27 +08:00
function get_data(){
$.ajax({
type: "GET", //選擇格式(GETPOSTPUTDELETE)
url: "/api/get_data", //換取網址
data: {},
contentType: "application/json",//指定格式(就抱持這樣即可)
success: function (Model) {
console.log(Model)
}
});
}
```
### 新增資料
2024-06-24 13:01:10 +08:00
```javascript
2024-04-23 19:56:27 +08:00
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)
}
});
}
```
### 刪除資料
2024-06-24 13:01:10 +08:00
```javascript
2024-04-23 19:56:27 +08:00
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)
}
});
}
```
### 更新資料
2024-06-24 13:01:10 +08:00
```javascript
2024-04-23 19:56:27 +08:00
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)