Sign in

第二週的作業是進行四則運算並將結果存到 LocalStorage,這次的作業在實作上並沒有太大的問題,但還是有幾個討論點。

keyvalue 的資料型態是 string,在使用上會發現,將值透過 setItem() 指定為物件,再透過 getItem() 取值,得到的會是 [object Object],原因是因為在存放時,會對非字串型態的值做


這次又是看到六角的公益課程所以來練練手,段落分為

  • 過程中運用到的觀念
  • 過程中的卡關
  • 從其他人的 code 學到的技巧
  • 成果

過程中運用到的觀念

起手式

Vue 2 Vue 3 在起手式就不同,用 Vue.createApp() 取代 new Vue()

Vue 的指令

  • v-model:和 html 雙向綁定 data 資料(會同步兩邊資料)。
  • v-bind:在 h …

視窗畫面

這次目的是練習 Sass,實作上在四個部分花了比較多時間。

  • 找字體

每次要找字體就是一個前期噩夢相信大家都有過,這次找了些時間除了免費能獲得的字體,Helvetica Neue 找了類似的平替,看起來效果也沒問題。

  • 對於數字標題定位的認知錯誤

原本以為數字標題跟單行算式是同樣的 container 裡去做處理,做了一陣子後發現將數字標題 position: absolute 處理起來比較單純。

  • :nth-child(n+3)

在要如何只對中間行做 margin 卡關了一段時間,到底要怎麼表示 n>4,括號內好像不能直接做布林判斷,後來一度自暴自棄,把原本外層的 margin: 80px 0; 換成 margin: 60px 0;.rectdiv 則是全都變成 margin: 20px 0;,全部都加,不用判斷,皆大歡喜太棒了 🎊

能解決問題的方法都是好解法辣 讚辣

後來是在看其他學員的心得筆記中發現做法,一邊嘲笑自己一邊做調整

  • 消失的 60px

大概是今天練習下來最讓人覺得離奇詭異的地方,全部的樣式尺寸都是對的,還拿了計算機出來按明明是對的,但畫面最後的高度卻少了 60px,找了半天沒找到暫且放一旁,拜託如果有發現的大大告訴我我是哪裡耍蠢了 QAQ

一些心得

第一次用 Sass 寫 CSS,剛開始前看了 SCSS 跟 Sass 覺得,當然是沒有 {} 比較帥!用 Sass 才知道 VS code 要用 Sass 單純裝 Live SCSS Compiler 還不夠,還要自己裝 Sass 的插件才能跑。

目前覺得優點是可以使用 $ 做變數設定很方便,也可以像 ES6 Template Literals 一樣在字串中插入變數,但當 Sass 階層一多就可能在縮排上會有差錯、也會有種對到要脫窗的感覺,可能是因為第一次使用,或許之後更熟練後會好一點。

因為同時也在練習 JavaScript30, 所以在 JS 的實作上會希望也能運用到在 JavaScript30 學到的一些想法觀念,但除了 ES6 的 Template Literals ${…} 就直覺地做完了,看了一樣在練習的學員的 Medium 有用到 reduce() slice() 去完成,又學到了一招 😎


公司開了一個 VUE 的內訓課程,順手把一年多前就說要練、但直到 VUE 3 都釋出了卻一直沒有開始的 VUE 抓起來學了。

講師使用 VUE 2 + Element,給了個登入畫面的作業,啃著 Element 的官方文件算是簡單就可以完成的小練習。

一開始跟著文件打,不知道為什麼要加 :model ,打開 dev-tools 一看,發現 data 值的獲取就是靠著這個屬性與 data 裡的物件直接進行綁定,當格子裡的值改了,取到的值也會立刻不同。

因為沒有打算加 label,原本想把外層的 <el-form-item> 拔掉只寫 <el-input>,但發現 css 會不太一樣之外,在 Element 中form 的 prop 都要綁在 <el-form-item> 上。

<el-input> 做驗證的時候 blur 了半天都沒效果,還想說會不會是要寫在父層、子元件不行,但又覺得不可能會是這麼繞的設計,結果後來發現是自己 <el-form> 的屬性 :rules 少加了個 s 才吃不到效果。

<el-form> 驗證的時候抓的是 formref ,語法是 this.$refs[formName].validate() ,沒注意用成了 this.$refs(formName).validate() ,拿去餵狗了半天才後知後覺是自己在開玩笑 XD

今天粗淺嘗試的幾個心得

  1. 練習的過程中一直需要自己打 Element 的 tag 很滅火,但後來有找到 plugin,或許能愉快地玩耍
  2. 做表單時都要有 <el-form-item> ,當表單格子一多程式碼會變得很龐雜
  3. 做置中的時候花了一些時間,跟 flex 還是沒有很熟需要再多花時間熟練

最後附上這次練習的程式碼,感謝看完的大家 👐


邏輯運算子包含

  • 邏輯或 |, ||
  • 邏輯且&, &&
  • 邏輯互斥 ^

那為什麼邏輯或及邏輯且有兩種不同運算子? | 與 || 及 & 與 && 又有什麼不同?

If you want to get an English version, please click here.

| 與 || 都是「邏輯或」運算子,差別在於如果 || 左邊的運算式可以決定結果,就不會運行右邊的運算式,比如:

輸出

使用 | 的運算結果:true
運算後 i 的內容:4
運算後 k 的內容:6
使用 || 的運算結果:true
運算後 i 的內容:3
運算後 k 的內容:6

在第 11 行中,由於|| 運算子左邊的邏輯判斷為 true,因此不需要看右邊的運算式就可以得知結果為 true,所以 i++ == j 這個運算式不會被執行,i 不會遞增。

同理於「邏輯且」,& 與 && 都是「邏輯且」運算子,在 && 左邊的運算式即可決定運算結果時,就不會運行右邊的運算式,比如:

輸出

使用 | 的運算結果:false
運算後 i 的內容:4
運算後 j 的內容:5
運算後 k 的內容:6
使用 || 的運算結果:false
運算後 i 的內容:4
運算後 j 的內容:5
運算後 k 的內容:5

在第 13 行中,由於&& 運算子左邊的邏輯判斷為 false,因此不需要看右邊的運算式就可以得知結果為 false,所以 k++ == l 這個運算式不會被執行,k 不會遞增。

|| 及 && 又稱為條件運算子(Conditional Operator),其取捷徑、不執行右邊運算式的行為又稱為短路(Short Circuit),所以又分別被稱為 Short-circuit OR 及 Short-circuit AND。

以上是關於邏輯運算子 - 或、且的一些練習,如果有任何建議,請讓我知道,謝謝 🙌 🙌


最近開始重讀 Java,這篇文章是寫一些關於邏輯運算子 - XOR 的實作。

如果你想閱讀英文版本,可以點 這裡

XOR

XOR 的全名是 exclusive orexclusive disjunction,中文稱為互斥或,也就是當兩個輸入不同時輸出才為 true。以下為 XOR 的真值表。

與其它邏輯運算子不同,XOR 具有可逆性,舉個例子,

Set X = 0010, Y = 1001, Z = X XOR Y
Z = X XOR Y = 0010 XOR 1001 = 1011
Z XOR X = 1011 XOR 0010 = 1001 = Y
Z XOR Y = 1011 XOR 1001 = 0010 = X

利用其特性,有以下幾種運用。

  • 加密

輸入 / 輸出

Please enter a password with a length of 6–12
jifjiVNE45
Password:jifjiVNE45
Encryption:W⁰}pb
Decrypt:jifjiVNE45

  • 變數值互換

輸入 / 輸出

Please enter two integer.
15 89
89 15

以上是有關XOR的一些練習,如果有任何建議,歡迎在下面留言讓我知道,謝謝 🙌 🙌

Zhao Chen

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store