新增 基礎HTML
parent
475c74523e
commit
4683755572
227
%E5%9F%BA%E7%A4%8EHTML.md
Normal file
227
%E5%9F%BA%E7%A4%8EHTML.md
Normal file
|
|
@ -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");
|
||||
```
|
||||
##
|
||||
## 教學開始
|
||||
### 先看全部程式碼
|
||||
```
|
||||
<!--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>
|
||||
|
||||
<!--JS的部分-->
|
||||
<script>
|
||||
function button_click() {
|
||||
console.log('button_click_確認')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
### 按鈕
|
||||
#### 當123這個按鈕觸發後，會呼叫到button_click這個function，按f12即可看到console的參數
|
||||
```
|
||||
<!--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給框架使用
|
||||
|
||||
### 警告視窗
|
||||
#### 彈出視窗，可以用於debug，或是有物品輸入不正確，跳出警示
|
||||
```
|
||||
<button onclick="alert('這是警告文字');">開啟警告視窗</button>
|
||||
```
|
||||
|
||||
|
||||
### 表格
|
||||
#### 基礎布局時最常用到的
|
||||
```
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
##
|
||||
## 與後端撈值
|
||||
### 由於需要大量參數，通常都會跟webapi去索取資料，這邊使用最常用的方式Jquery的AJAX
|
||||
若無jq包，先載入後才能使用以下操作
|
||||
```
|
||||
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
|
||||
```
|
||||
|
||||
### 獲取資料
|
||||
```
|
||||
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)
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
##
|
||||
## 會以上這些後，即可開始製作屬於自己的網站
|
||||
### 最常用的都是以上這些，剩下的就靠練習累積上去了，網站建立其實沒想像的困難
|
||||
|
||||
Loading…
Reference in New Issue
Block a user