0210-網頁前端設計與開發運用培訓班
===
###### tags: `德鍵`
---
Javascript
---

一、 todo list 1
---
## 起手式
程式想法：
1. 建立待辦項目資料
2. 顯示資料
3. 新增資料
4. 編輯資料
5. 刪除資料

1. todos list 1
2. 對資料做 新增、編輯、查詢、刪除
3. 官網：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript
4. 相關指令 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array

二、 todo list 2
---
## Function 函式

三、 todo list 3
---
## Object 物件

1. 在JavaScript裡，"物件"是一個擁有自己的屬性、型別、獨立的實體
2. variables (變數) are properties(屬性). function 變成 methods(方法)

var car = {
  color : "紅色",
  displayCar : function(){
    console.log("我的汽車顏色：",this.color);
  }
}
//car.color;
//car.displayCar();

3. 線上資料

[Big Boy-Object](https://ithelp.ithome.com.tw/articles/10191306)

[卡斯伯-Object](https://wcc723.github.io/javascript/2017/12/09/javascript-object/)

[官方文件-object](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects)

四、 todo list 4
---
加上一個狀態，判斷 status

五、 todo list 5
---

1. todo list 5
2. 改善顯示介面
3. status true 顯示 (x)選項
status false 顯示 ()選項
4. 如果沒有資料，顯示「目前無資料」
5. 顯示資料，可以使用 迴圈for 來撈
6. 判斷有無資料，可用 if

​
強制轉型（coercion）
​
Types 類別
​
== VS === (比對類別)
​
[談談JavaScript的coercion](https://pjchender.blogspot.com/2016/01/javascriptcoercion.html)
​
[官方文件-Type Coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion)
​
[Types In Javascript and what should you care](https://jcemer.com/types-in-javascript-what-you-should-care.html)
​
[Equality Comparison and Samneess](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
​

六、 todo list 6
---

七、
---
1. 官網：https://jqueryvalidation.org/
2. 引入：必須先引入 jquery

    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

3. 調用函式

    <script>
      $(function(){
        $("#myForm").validate();//請根據 form 的 id
      })    
    </script>

4. 在 form 的 標籤 的class 加上「required」
[說明1：](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/270803/)
[說明2：](https://www.minwt.com/webdesign-dev/js/21536.html)

(1)required:true 必輸欄位 
(2)remote:"check.shtml" 使用ajax方法呼叫check.shtml驗證輸入值 
(3)email:true 必須輸入正確格式的電子郵件(只能驗證格式,不保證有效性) 
(4)url:true 必須輸入正確格式的網址 
(5)date:true 必須輸入正確格式的日期 
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 
(7)number:true 必須輸入合法的數字(負數，小數) 
(8)digits:true 必須輸入整數 
(9)creditcard: 必須輸入合法的信用卡號 
(10)equalTo:"#field" 輸入值必須和#field相同 
(11)accept: 輸入擁有合法字尾名的字串（上傳檔案的字尾） 
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元) 
(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元) 
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元) 
(15)range:[5,10] 輸入值必須介於 5 和 10 之間 
(16)max:5 輸入值不能大於5 
(17)min:10 輸入值不能小於10

cart1
---
https://github.com/webugm/cart1

程式碼 gs
---

//試算表變數
var SpreadsheetAppId = "SpreadsheetAppId";
var sheetName = '接收表單';

//用id取得試算表
var ss = SpreadsheetApp.openById(SpreadsheetAppId);  
//用工作表名稱設定工作表
var sheet = ss.getSheetByName(sheetName);

function doGet(e) {

  var param = e.parameter;
  var order = param.order;
  //---時間戳記	訂單編號	雞腿飯-90元	雞排飯-80元	排骨飯-70元	備註 合計
  var replyMsg = '你的訂單編號是：' + order;
  var row = onSearch(order);//取得訂單row
  var lastColumn = sheet.getLastColumn();
  //----取得標題
  var rowTitle = [];
  //----取得值  
  var rowValue = [];
  //----合計
  var total = 0;
  for(var i=0 ; i < lastColumn ; i++){
    rowTitle[i] = sheet.getSheetValues(1, i+1, 1,1);
    rowValue[i] = sheet.getSheetValues(row, i+1, 1,1);
    
    if(rowTitle[i] == "雞腿飯-90元" || rowTitle[i] == "雞排飯-80元" || rowTitle[i] == "排骨飯-70元"){
      var title = rowTitle[i].toString();
      var subTotal = title.split("-");
      total += parseInt(subTotal[1]) * rowValue[i];
    }
    //----寫入合計 
    if(rowTitle[i] == "合計" && total > 0){
      rowValue[i] = total;
      sheet.getRange(row, i+1).setValue(total);
    }
  }
  
  sendToLine(rowTitle,rowValue);//LineNotify通知
     
  
  //return ContentService.createTextOutput(replyMsg);
  //return HtmlService.createTemplateFromFile('index').evaluate();
  //return HtmlService.createHtmlOutput("<h1>我是一個網頁！</h1>");
  var t = HtmlService.createTemplateFromFile('index');
  
  t.order = order;
  t.title = sheet
      .getRange(1, 1, 1, lastColumn)
      .getValues();
  t.value =  sheet
      .getRange(row, 1, 1, lastColumn)
      .getValues();
  return t.evaluate();

}


function onSearch(searchString)
{   
  
    var column =2; //column Index   
    var columnValues = sheet.getRange(2, column, sheet.getLastRow()).getValues(); //1st is header row
    var searchResult = columnValues.findIndex(searchString); //Row Index - 2

    if(searchResult != -1)
    {
        //searchResult + 2 is row index.
        //sheet.setActiveRange(sheet.getRange(searchResult + 2, 1))
        return searchResult + 2;
    }
}

Array.prototype.findIndex = function(search){
  if(search == "") return false;
  for (var i=0; i<this.length; i++)
    if (this[i] == search) return i;

  return -1;
} 

  
//填入Line Notify 權杖
var lineToken = "lineToken";  
function sendToLine(rowTitle,rowValue){
  //整理   
  var message = "\n"; 
    
  rowTitle.forEach(function(item,index){
    if(index == 0){
      rowValue[index] = Utilities.formatDate(new Date(rowValue[index]),"GMT+08:00","yyyy/MM/dd/ H:mm");
    }
    message += item + " : " + rowValue[index] + "\n";
  });
  
  var options =
  {
      method  : "post",
      payload : "message=" + message,
      headers : {"Authorization" : "Bearer "+ lineToken},
      muteHttpExceptions : true
  };  
  
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

index.html
---

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body>
    <div class='container'>
      <h1 class='text-center'>訂 購 單</h1>
      <div> 你的訂單編號是：<?= order ?></div>
      <table class="table table-striped table-bordered table-hover table-sm">
        <? for (var i = 0; i < title.length; i++) { ?>
          <tr>
            <? for (var j = 0; j < title[i].length; j++) { ?>
              <td><?= title[i][j] ?></td>
            <? } ?>
          </tr>
        <? } ?>
        <? for (var i = 0; i < value.length; i++) { ?>
          <tr>
            <? for (var j = 0; j < value[i].length; j++) { ?>
              <td <? if(j==2 || j==3 || j==4 || j==6){ ?> class='text-right' <? } ?> ><?= value[i][j] ?></td>
            <? } ?>
          </tr>
        <? } ?>
      </table>
    </div>
    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>