This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

前端(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)
        }
    });
}