V06_在Vue之前_必備的JS基礎(3)_DOM元件及樣版文字的操作

今天來了解一下將陣列及物件的操作
應用在網頁DOM的操作上，並結合jQuery的語法

DOM的操作

首先要使用jQuery, 先要載入jQuery的套件
以下有4個CDN的來源，只是特別列出來作一個對照

來自 Google Hosted Libraries
https://developers.google.com/speed/libraries?hl=zh-tw#jquery
也就是 Google 的CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

來自 UNPKG
https://unpkg.com/
<script src="https://unpkg.com/jquery@3.7.0/dist/jquery.js"></script>

來自 jsdelivr
https://www.jsdelivr.com/
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

來自 cdnjs
https://cdnjs.com/libraries/jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

另外 jQuery的官網 https://jquery.com/
可以查閱jQuery提供的功能

有時在網路上會看到一些訊息，提到jQuery與其他的網頁技術的比較，
我比較站在各項技術有其當時發展出來的背景與目的，
新技術開發出來，也有其要解決的問題，
因此只要善用並整合各項技術的特點就好了，
以及視不同專案的特性，搭配合適的技術就可以了，
我們學習的重點就在於了解並掌握該技術的特點及用法。

還有，有時一些技術本身的官網資料已經整理的很詳細了，
但是為什麼好像還是需要google更多的資料
我想基本上的問題就是有時文件無法看到完整專案的全貌，
造成不知用在專案的什麼區塊，以及如何與其他套件整合起來，
這就需要先有一個完整的輪廓，當進到各個細部的說明的時候，
才知道是在講哪一個部份。

這也是我想分享給大家，我的學習程式設計的方法，
1. 先了解這個技術發展的目的及背景
2. 了解技術的架構與流程及特點
3. 了解一些先備知識，以及基本的完整流程的操作
4. 各個細部功能的探索與練習
5. 完整的小專案的練習

//-----------------------
接下來 關於DOM的操作，重點若在與陣列有關的操作

表單FORM的輸入欄位數值的讀取

首先是表單FORM的輸入欄位數值的讀取，同時上傳到php

  <form id="myForm">
    Name: <input type="text" name="uname"><br>
    E-mail: <input type="text" name="email"><br>
    <button>SEND1</button>
  </form>

  <script>

    // Prevent the default form submission
    $("#myForm").submit(function(event) {
      event.preventDefault();  //-- 關掉原本按下即送出的功能，改成由$.post()執行送出動作

      let formData = $(this).serialize();
      console.log(formData);
      $.post("welcome.php", formData, function(response) {
        console.log(response);
      });

   });
  </script>

主要是有用到 $(this).serialize(); 的語法，來讀取全部的表單的欄位資料

let formData = $(this).serialize();
console.log(formData);  //-- uname=Jason%20Lee&email=jasonlee%40gmail.com

若輸入欄位是

uname: Jason Lee
email: jasonlee@gmail.com

$(this).serialize(); 的回傳值是 uname=Jason%20Lee&email=jasonlee%40gmail.com
這樣就可以讀取全部欄位資料並將資料轉換成URL的字串格式

若是要轉換成物件格式

$("#myForm input").each((i, e)=>{
  console.log(i+", "+e.name+": "+e.value);
});

其中 each() 是回傳<form id="myForm">中的每個<input>元件
在(i, e) 中，e是每個<input>元件，i是index索引值
e.name，e.value 為<input>元件的name值及value值

讀取表單欄位資料的方法

以下是幾種讀取表單欄位資料的方法及執行的結果

$("#myForm").submit(function(event) {
  event.preventDefault();  //-- 關掉原本按下即送出的功能，改成由$.post()執行送出動作
  
  console.log($(this));  //-- form的jQuery物件
  console.log($(this)[0]);  //-- form的JS物件
  console.log($(this)[0]["uname"]);  //-- name為uname的<input>物件
  console.log($(this)[0]["email"]); //-- name為email的<input>物件

  let formData = $(this).serialize();
  console.log(formData);  //-- uname=Jason%20Lee&email=jasonlee%40gmail.com

  let urlParams = new URLSearchParams(formData);
  console.log(urlParams.toString());  //-- uname=Jason+Lee&email=jasonlee%40gmail.com
  console.log("# "+urlParams.get("uname"));  //-- # Jason Lee
  console.log("# "+urlParams.get("email"));  //-- # jasonlee@gmail.com

  //----------
  let url = "http://localhost/index.html?uname=Jason%20Lee&email=jasonlee%40gmail.com";
  let urlParams2 = new URLSearchParams(url.split("?")[1]);
  console.log(urlParams2.toString());  //-- uname=Jason+Lee&email=jasonlee%40gmail.com
  console.log(". "+urlParams2.get("uname"));  //-- . Jason Lee
  console.log(". "+urlParams2.get("email"));  //-- . jasonlee@gmail.com

  //----------
  $(this).find("input").each((i, e)=>{
    console.log(i+", "+e.value);  //-- 0, Jason Lee
  });

  $("#myForm input").each((i, e)=>{
    console.log(i+", "+e.name+": "+e.value);  //-- 0, uname: Jason Lee
  });
  
  //----------
  let ar2 = [];
  $("#myForm input").each((i, e)=>{
    let o1 = {};
    o1[e.name] = e.value;
    ar2.push(o1);
  });
  console.log(ar2);  //-- {uname: 'Jason Lee'}
  
  //----------
  let ar3 = $(this).serializeArray();
  console.log(ar3);  //-- {name: 'uname', value: 'Jason Lee'}

  let obj2 = {};
  $("#myForm").serializeArray().forEach((e) => {
    obj2[e.name] = e.value;
  });
  let formData2 = JSON.stringify(obj2);
  console.log(obj2);  //-- {uname: 'Jason Lee', email: 'jasonlee@gmail.com'}
  console.log(formData2);
  

  //-- 使用JSON格式上傳資料
  $.post("welcome2.php", {data:formData2}, function(response) {
    console.log(response);
  });

  //-- 使用序列資料格式上傳
  $.post("welcome.php", formData, function(response) {
    console.log(response);
  });
  
});

welcome.php

<?php
// Get form data from $_POST or $_GET
$name = $_POST["uname"];
$email = $_POST["email"];

// Do something with the data
echo "Hello, $name. Your email is $email.";
?>

welcome2.php

<?php
$data = $_POST['data']; // 取得傳送的資料
$obj = json_decode($data); // 轉換為物件
$uname = $obj->uname;
$email = $obj->email;

// Do something with the data
echo "Hello, $uname. Your email is $email.";
?>

$("#myForm").submit() 代表在按下送出鍵時要執行的事情，但還不會馬上送出，
直到執行到 $.post() 時才會送出

序列化的資料格式

送出的資料格式可以是 序列化的資料格式，也可以是JSON物件的格式
序列化的資料 就是從 $(this).serialize() 取得
像是這樣的格式 uname=Jason%20Lee&email=jasonlee%40gmail.com

因為是在 $("#myForm").submit( function(event) { }); 的區塊執行
所以 $(this) 就代表是 <form> 元件
$("#myForm") 也可以取得 id為 myForm 的<form> 元件

let urlParams ＝ URLSearchParams(formData); 則是將序列化格式的資料拆解成(參數:數值)的資料對
這樣就可以用 urlParams.get("uname") 讀取 uname 欄位的資料了

$(this).find("input") 及 $("#myForm input") 都可以取得form的input元件
並且是以陣列方式回傳
所以可以利用陣列的方法

$("#myForm input").each((i, e)=>{ }); 來讀取傳一個input元件
若要將欄位資料以物件格式加入陣列中
如下

let o1 = {}; //-- 先建立一個空的物件
o1[e.name] = e.value;  //-- 設定物件的參數名稱 o1[e.name] 及 數值 e.value
ar2.push(o1); //-- 加入到陣列 ar2 中

也可以用 $(this).serializeArray(); 的方式，
直接將 表單資料轉成 物件陣列格式

整理一下，物件陣列格式

序列格式 uname=Jason%20Lee&email=jasonlee%40gmail.com

物件格式有以下3種
1. [{uname: 'Jason Lee'}, {email: 'jasonlee@gmail.com'}] 物件陣列格式
2. [{name: 'uname', value: 'Jason Lee'}, {name: 'email', value: 'jasonlee@gmail.com'}] 物件陣列格式
3. {uname: 'Jason Lee', email: 'jasonlee@gmail.com'} JSON物件格式

//--------------------------

樣版文字

接著來學習樣版文字
可以參考 MDN的 Template literals 文件說明
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals

let st1 = "ABC"; 
let st2 = 'DEF';

let st3 = '<input type="text" name="email">';  //-- 內含網頁標籤屬性

let email = "jasonlee@gmail.com";
let st4 = '<input type="text" name="'+ email +'">'; //-- 組合字串

let st5 = `<input type="text" name="${email}">`;  //-- 樣版文字

一般若有變數要加到字串中的話，需要將字串分段，再用 + 號 串接起來，
但若是有很多變數要加到字串的話，字串會被分成更多段，會變成不太好維護
因此產生了樣版文字的語法，
可以用反引號將要呈現的文字列出來，再用 ${email} 格式代換要變動的文字，
這樣字串就不用分成很多段了。

順便提一下，在Vue中，要替換的文字的格式是 {{ email }}

以下是樣版文字的進階用法

1. 在 ${ } 格式中，可以進行運算

let a = 1;
let b = 3;
let st6 = `a+b= ${ a+b }`;
console.log(st6);

2. 在 ${ } 格式中，可以換行
   原本的用法是

let st71 = "這是第1行，\n這是2行";
console.log(st71); 

let st72 = 
`這是第1行，
這是2行`;
console.log(st72); 

3. 在 ${ } 格式中，可以有條件式

let ca = 150;
let c1 = `color is ${ (ca<10)? "black" : "white"}`;
console.log(c1);