Frontend/前端_基礎HTML
2024-06-24 13:01:10 +08:00
..
static img 2024-04-23 20:38:09 +08:00
templates 基礎HTML 2024-04-23 18:57:58 +08:00
main.py 基礎HTML 2024-04-23 18:57:58 +08:00
README.md 更新 前端_基礎HTML/README.md 2024-06-24 13:01:10 +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>

<!--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", //選擇格式(GETPOSTPUTDELETE)
            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)
        }
    });
}

會以上這些後,即可開始製作屬於自己的網站

最常用的都是以上這些,剩下的就靠練習累積上去了,網站建立其實沒想像的困難