普通文組 2.5

自主練習專案「grid-template-areas generator」技術記錄

總結

微型專案「grid-template-areas generator」是為了不想要手動輸入多種 grid-template-areas 設定的產物；輸入 column 與 row 的始末後，按下 generate 按鈕即可產生能直接使用的 grid-template-areas 設定，並提供一鍵複製的功能。

成品

codepen 展示：

See the Pen grid-template-areas generator by Charlie (@Charlie7779) on CodePen.

版本與環境

Google Chrome: 89.0.4389.90 (Official Build) (64-bit)
os: Windows_NT 10.0.18363 win32 x64

CSS 內容

使用::before與linear-gradient()畫圖示

  • 先選取.label的::before部位，設定position: absolute;與top: 8px;、left: 4px;來讓圖示預定繪製的範圍離.label左邊框 4px 遠，並垂直置中
  • background如果設定多個linear-gradient()，原始碼從上到下會分別對應圖層從上到下繪製的內容

    • 以 cell start 的圖示為例：

      See the Pen linear-gradient() by Charlie (@Charlie7779) on CodePen.

      - 其他欄位的圖示原理相同，僅是修改色塊位置或縮小覆蓋區域

<textarea>換行上色效果

  • 使用repeating-linear-gradient來重複製造淺綠／白色相間的色塊背景
  • 將文字的高度設定成與色塊背景高度一致，並在background加上local參數，讓背景隨著滑鼠滾輪捲動，視覺上更為自然

JS 內容

return與break的差別

  • 一開始在第 13 行與 23 行使用不正確的關鍵字break來脫離迴圈；break儘代表「跳脫現在的迴圈」，卻會繼續執行接下來的程式碼。故第 13 行使用break離開後，接下來會去執行第 21 行的程式碼（而不是脫離整個 function）。
  • 改用return後，第 13 行與 23 行的意義變為「印出錯誤訊息後，就離開 function，不會繼續走完 function 接下來的程式碼」。

Regular Expressions 筆記

  • 使用方式：先設定包覆在//中的pattern（有需要的話也可指定modifiers），再搭配test()來判定變數是否帶有 pattern 內容；以下為步驟解析：
    • let r = /^\+?[1-9][0-9]*$/中，pattern 的內容是「^\+?[1-9][0-9]*$」
    • ^：「開頭須包含」
    • \+與?：加號前面的斜線為跳脫字元，?代表可以有 0 個或 1 個\+
    • [1-9]：內容範圍涵蓋 1 到 9
    • [0-9]與*：代表可以擁有 0 個（含）以上的[0-9]字元
    • $：「結尾須包含」
  • 翻譯成白話文：「開頭需有 1-9 任一數字，可以有+號，接著可以有任意數量的 0-9」
  • pattern 並無包含數字以外字元的內容，故如果是「123a321」這樣夾雜數字以外的字串，r.test(x)會回傳false
  • 最後並沒有採用正規表示式來判定輸入內容是否為正整數，而是改用parseInt()，因為parseInt()可以同時處理String轉換為Number的工作

參考文件