奇怪的高鐵付費網頁

晚上幫姊姊支付中秋節回程高鐵票時又遇到這個問題, 實在不吐不快. 在查詢訂票後按信用卡付費鈕, 正要輸入卡號才想到剛剛的班次資訊沒核對, 就按上一頁回去看, 核對沒問題再按付費鈕結果出現 "請再等 15 分鐘" 訊息, 即使關掉網頁重來也一樣 :

之前曾有一次因為這樣等啊等就忘記了, 過了 12 點姊姊好不容易訂到的大學生優惠票被取消, 真的好棒棒! 造成的不便我是要怎要見諒? 請問這是委託哪家公司設計的系統?

2020 年第 38 周記事

上個月鄉下家一隻常出現在豬舍的野貓生了一隻小花貓, 大概一個月大母貓就跑了, 小貓每天喵喵叫, 爸就拿肉鬆拌飯給它吃, 居然住下來了, 由於睫毛下垂, 看起來像是衰尾道人模樣, 上上次菁菁回鄉下時給它起名 "小雖貓", 最近睫毛不再明顯下垂, 所以我都叫它 "小貓貓". 晚上我在晒穀場散步, 它也會跟前跟後找我玩, 尖牙利爪但都不伸爪.

至於養在高雄的萬萬與小咪, 只要我在房間寫程式, 這兩隻在客廳窮極無聊就會進來窩在床頭櫃陪我, 嗯, 我覺得養貓蠻療癒的, 我應該不會得精神病, 哈 !

本周因為買的 Mac mini 寄來了, 所以花了點時間玩 macOS, 並開始學習 Swift 程式設計. 每一種程式語言其實都差不多, 有資料型態, 分支, 迴圈, 函數, 類別等等, 學一種新語言只要弄清楚這些基本語法的格式就差不多了.

最近在愛奇藝看的韓劇是林秀香主演的 "我最漂亮的時候", 目前看到第 10 集, 但在預告時似乎看到後面哥哥會出意外 (賽車?), 這讓我有點不想往下看. Line TV 也可看 :

# https://www.linetv.tw/drama/11506/eps/1

明天是 921, 也是母親仙遊六周年紀念.

蘋果 macOS Catalina 操作心得整理

在露天買的 Mac Min 2012 late 昨天到貨後, 我將它放在輝達的 Jetson Nano 下面, 插上鍵鼠組的 USB 與壁掛螢幕的 HDMI 馬上就能使用了. 這台雖然已經是七年前的機器了, 但 16GB DRAM 加上 512GB SSD 效能超好, 而且 SSD 靜悄悄又不發燙. 

不過 macOS 操作介面與 Win10 差異很大, 一開始比較讓人抓狂的是例如中英文輸入切換, 在 Windows 是用 SHIFT 鍵切換, 但在 macOS 則是 STRL+SPACE, 書上說大概需要兩周學習才會熟悉. 茲將學習心得記錄如下 : 

1. 切換中英文輸入 : CTRL + SPACE 會在英文與注音之間切換. 
2. Safari 瀏覽器將網站加入我的最愛 :
   (1). 滑鼠移到網址列最前方的 + 圖示, 按右鍵點選 "喜好項目" (最快).
   (2). 按 Safari 左上角 < > 右邊的按鈕開啟左側邊欄, 將網址列拉到側邊欄內, 若要網站修改名稱, 點選後選 "重新命名" 加以修改. 
3. 更改螢幕字型大小 : 
   從底下 Docker 進入 "系統偏好設定" (齒輪圖示), 點選 "選示器", 點選 "解析度" 項下的 "縮放", 選擇一個解析度較小的設定即可. 
4. 關閉英文大小寫 Caps Lock 的輸入法切換功能 : macOS 預設把 Caps Lock 鍵當成輸入法切換鍵 (用 CTRL+SPACE 就好了啊), 結果在輸入大寫英文字母時按此鍵卻進入注音輸入法, 解決方式是由 Docker 進入 "系統偏好設定" (齒輪圖示), 點選 "鍵盤/輸入方式/ABC", 取消勾選第二項 "使用大寫鎖定鍵來切換 ABC 及目前輸入方式". 
5. 螢幕截圖 : Command +Shift + 4. 

~進行中~

momo 買書兩本 (數學 & 貝氏統計學)

 今天是 momo 買書 68 折截止日, 我又買了兩本數學的書 : 

# 機器學習的數學：用數學引領你走進AI的神秘世界 $580 元折後 395 元

# 寫給大家的統計學｜秒懂機率與統計，你也可以是人生勝利組 $480 元折後 327 元

總定價 1060 元,  折後 722 元, 約 68 折. 本來想加購 399 元的 MK220 羅技鍵鼠組, 但又覺得目前不需要 (Mac Mini 已經用明誠路燦坤開幕買的那組 mk235 了), 所以就沒加購了. 

市圖還書 3 本

本周市圖還書 3 本 :

1. jQuery最強圖解實戰講座 =Lectures and exercises
2. Make:一讀就懂micro:bit : 給程式新手的開發板入門指南 
3. 經濟與財務數學 :使用R語言

第一本書有許多 jQuery 實用範例, 我已大致看完, 因有人預約故須先還. 第二本也是 MicroPython 版的, 以後再借; 第三本值得買起來 (但五南的書很貴).

Javascript 函數傳回 return false 的問題

在 Javascrip/jQuery 的事件處理函數中常看到最後用 return false 結尾的用法, 常令人疑惑其用意是甚麼, 其實這是不要讓 HTML 元素執行其預設動作的方法, 例如超連結 a 元素的預設動作是將網頁導向 href 所指之位置; 而 form 元素的預設動作是提交表單 :

• href="#" : 表示導向該網頁中的一個錨點 (anchor)
• href="hello.htm" : 表示導向此網站的另一個網頁 hello.htm
• href="http://www.foo.com/bar.htm" : 表示導向另一個網站之網頁

如果在 a 元素的 click 事件處理函數中最後傳回 false, 則 a 元素預設的連結導向動作會被取消, 例如下面範例中的兩個 a 元素都連結到本網頁之錨點 "#" :

  <a href="#" id="a1">a1</a>

  <a href="#" id="a2">a2</a>

其中的 id=a2 的超連結有特別掛上 click 事件處理器, 並且傳回 false, 而 id=a1 則沒有 : 

$("#a2").on("click", function(){

  return false;

  });

按 a1 超連結後網址列最後會多出一個 "#" 表示網頁會回到網頁的最上方, 但按 a2 超連結則不會, 參考 :

測試 1 : 超連結導向本網頁錨點 href="#" [看原始碼]

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="cache-control" content="no-cache">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>jQuery test</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

  <a href="#" id="a1">a1</a>

  <a href="#" id="a2">a2</a>

  <script>

    $(function(){

      $("#a2").on("click", function(){

        return false;

        });

      });    

  </script>

</body>

</html>

傳回 false 常見於將 a 元素當作按鈕用時, 當按下按鈕會執行事件處理函數, 如果不禁止其執行預設之網頁重導向動作, 事件處理函數執行完後網頁會回到網頁最上方 (href="#" 的預設動作), 造成網頁移動的不好觀感, 例如 : 

測試 2 : 超連結當作按鈕時使用 return false 停止預設動作 [看原始碼]

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="cache-control" content="no-cache">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>jQuery test</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">

  <style>

    body {font-family: Arial, Helvetica, sans-serif;}

    .ui-widget {font-size:80%;}

  </style>

</head>

<body>

  <div style="height: 1000px;"></div>

  <a href="#" id="a1">a1</a>

  <a href="#" id="a2">a2</a>

  <script>

    $(function(){

      $("#a1").button();

      $("#a2").button();

      $("#a1").on("click", function(){

        alert("你按了 a1");

        });

      $("#a2").on("click", function(){

        alert("你按了 a2");

        return false;

        });

      });    

  </script>

</body>

</html>

此例中使用一個高度為 1000px 的 div 元素將按鈕推到網頁底下, 可見按 a1 按鈕後因為沒有垂回 false 導致執行 href="#" 的預設動作 (回到網頁最上方), 但按 a2 按鈕則網頁不會移動

但是在 "jQuery 應用程式設計極速上手" (Jay Blanchard, 上奇) 這本書裡的第 1-15 頁提到, 使用 return false 來停止預設動作可能會有問題, 因為 return false 實際上會先後呼叫事件物件 e 的e.preventDefault() 與 e.stopPropogation() 函數, 前者會停止預設動作, 後者會停止事件上升 (bubble up) 功能, 因此會把之後加入之超連結的 click 事件給阻擋掉, 使得預期的功能沒有出現.

比較妥當的做法應該是呼叫 preventDefault() 即可而不是 return false :

$("#a2").on("click", function(e){

   e.preventDefault();

  });

參考下面這篇文章, 作者清楚描述了 return false 的作用, 如果只是要停掉預設動作, 那就呼叫事件物件 e 的 preventDefault() 就好, 不要使用 return false : 

# preventDefault()、stopPropagation()、return false 之間的區別

jQuery 中的 this 與 $(this)

在許多 jQuery 範例中常出現 this 與 $(this), 甚麼時候該用 this, 甚麼時候該用 $(this), 很多人時常會被搞混,  在 jQuery 語法中 this 是被選取器選取的 DOM 物件, 而 $(this) 才是此 DOM 物件經過包裹後的 jQuery 物件, 因此如果要存取 DOM 物件的屬性或方法時須用 this; 而要存取 jQuery 物件之屬性與方法時則須用 $(this), 參考 :

# 淺談jQuery this和$(this)的區別及獲取$(this)子元素物件的方法

在 jQuery 敘述中可以用 $(this) 來避免重複使用選擇器選取元素, 例如對於按鈕元素 button :

&lt;button id="btn"&gt;OK&lt;/button&gt;

用 jQuery 監聽 click 事件, 每按一次顯示已按次數 :

var cnt=0;
$("#btn").on("click", function(){
  $("#btn").html("你按了" + (++cnt) + "次");
  });

此例中的事件處理函式需要再一次存取按鈕之 jQuery 物件, 若用 $("#btn") 就重複使用選擇器兩次, 應該改為 :

var cnt=0;
$("#btn").on("click", function(){
  $(this).html("你按了" + (++cnt) + "次");
  });

完整程式碼參考 :

測試 1 : this 與 $(this) [看原始碼]

一般常犯的錯誤例如在存取表單時, this.val() 是錯誤的, 因為 DOM 物件沒有 val() 方法, 要 jQuery 物件才有, 即應該是 $(this).val() 才對. 

Blogger 新版上線

 昨天關掉 blogger 視窗重開後發現 Google 強制使用新版編輯器了, 底下原先有的切回舊版超連結已消失, 所以舊版 Blogger 編輯器一關掉就回不去了, 這熟悉的舊介面很好用啊為啥要換?  舊版的網址列格式如下 :

# https://www.blogger.com/blogger.g?blogID=yourID&useLegacyBlogger=true#allposts

新版 Blogger 介面最令人討厭的缺點是超連結編輯視窗, 你必須多按幾次 Enter 把超連結往上頂, 這樣才能按到底下的套用按鈕, 沒按套用鈕根本就編輯無效. 但新版的優點是可以直接將 HTML 碼貼進去, 它會自動轉成 Entity, 以前舊版必須先在記事本進行人工轉換. 

momo 買 iOS 13 書籍兩本

 因為買了二手的 Mac mini, 想要開始學習很久以前就想涉獵的 Apple Swift 語言, 所以上 momo 找 iOS 13 的書, 發現 Apple 真的是小眾耶, 市面上 iOS 的書真的不多, 只找到下面兩本還不錯的 : 

# iOS 13程式設計實戰－ Swift 5.1／SwiftUI框架｜快速上手的開發技巧200＋ $580 折後 $395

# iOS 13 App程式開發實務心法：30個製作專業級iOS App完全實戰攻略 $850 折後 $578

兩本定價共 1430 元, 折後 973 元, 相當於 68 折, 扣掉 momo 幣 183 元, 實付 790 元, 相當於 55 折, 真是太划算了! 所以在 momo 買書還是要刷 momo 卡才能加速累積 momo 幣. 

好書 : Javascript & jQuery 網站互動設計程式進化之道

 最近從市圖借到一本好書 :

# Javascript & jQuery 網站互動設計程式進化之道 (2017, 碁峰)

Source : 博客來

此書分成兩半部, 前半部講純粹的 Javascript 網頁操作; 後半部則介紹 jQuery 以及它如何減輕純粹用 Javascript 開發的負荷, 編排體例清晰, 左邊是原理說明, 右邊是程式範例, 而且搭配精心繪製的圖表, 令人一目瞭然, 是非常適合初學者的學習教材, 例如關於 jQuery 的四個插入元素的方法, 書中的圖示就描述得很清楚 :  

此書譯自 John & Wiley 出版的 "Javascript & jQuery : Interactive Front-End Web Development" 一書, 書範例程式碼可在下列網站下載 :

# http://www.javascriptbook.com/code/