Sign in

Programming of syntax you could be refrence others ,

Most import point , how a feature is done step by step from scratch

程式語法可以參考其他人的成品,

最重要的是一個功能是怎麼從零開始一步步做完的

學習用英文寫工作日誌, : 因為時間很多!! 注意看英文的使用非常自己的style !!

Photo by Amélie Mourichon on Unsplash

What is JavaSix ? _♥♥♥ (*´∀`)~♥♥♥

Is mean Javasex ……..long story ….


進行中的專案:

初學開發者碰到文字排版總是非常頭疼 ,

這關係到RWD , 看起來是不是乾淨 .簡潔 , 舒服 , 大小適當

通常都習慣用 px 作為尺寸設定 . 可是當網頁面及文字非常多的時候, 需要微調會非常麻煩. 尺寸比例不是改一個數值就好. 要整體都看起來有平衡感.

所以我會推薦使用 rem .

因為rem 和 % 很像都是相對參照Root 去改變大小 . 當文字微調時只要改變Root 就可以了 .

名稱為 : Root + em => 1 em 當父(上一層)沒有設定大小的預設是16px

文字排版

文字大小通常建議設定在0.8 rem .

行距間隔 建議設定在 1 rem


看似簡單 …..其實不容易.

但按照下面的步驟去暸解. 一切煩惱都沒了

最容易犯的錯誤就是~~路徑 :非檔案路徑的

C:\1 \2 \ 3.png — →ERRR

C: /1 /2 /3.png — → OK

Thanks give !!!

Now in the index.html.en file you'll want to put the following markup

index.html 的位置去根據每個檔案的插入圖片後的路徑

<span>src="/check_mark.png"</span>
<img src="/check_mark.png" />
<span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
<span>src="subfolder/check_mark.png"</span>
<img src="subfolder/check_mark.png" />
<span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
<span>src="/subfolder/check_mark.png"</span>
<img src="/subfolder/check_mark.png" />
<span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
<span>src="../subfolder/check_mark.png"</span>
<img src="../subfolder/check_mark.png" />
<span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
<span>src="subfolder/subfolder/check_mark.png"</span>
<img src="subfolder/subfolder/check_mark.png" />
<span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
<span>src="/subfolder/subfolder/check_mark.png"</span>
<img src="/subfolder/subfolder/check_mark.png" />
<span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

將下列對應使用陣列 Index 去比對位置

用 TS 去達成 : 陣列 1 =物件 1= true

單純Javascript 寫法 : 字串比較

Javascrip 和 DOM 的方式

進階 Typerscript 寫法

step 1. 參數設定type類型 :特殊用法 Array<string>

function checkInventory(inventory : Arrar<srring> , item: string) { }


介紹 JS和TS差別 :

JS:輕量 , 撰寫程式語言

TS: 重視類型物件的定位確認 , 用編譯器寫語法, 提供適當的版本.

類型 _自動分類 :

可以避免類別或物件(Class & Object)的性質與方法(Property & Method)格式錯誤。


React _ 學習歷程

React.js

組件排版的方式. 頁面看起來容易讀簡潔.

如果讓不懂程式的也能讀懂內容.

Wonderful !!

2021年展望前端開發趨勢:
Javascript 有轉變為 Typescript 趨勢
react.js 依然是美國核心技術前端語言Redux

特色:
採用funcation 組件

優點:
更簡潔-編碼環境

https://github.com/DoungBarry/facebook-clone-react.jsgitHub
https://cool-remote.firebaseapp.com
臉書留言(已完成)

https://github.com/DoungBarry/amazon_challenage-BarryYu.git
亞馬遜購物車仿造(未完成)

https://www.loom.com/share/5e8b53a29c0d4478877723cf1fe5f7ea
錄製 react map() 迴圈:用數字轉換陣列 -有本人camara

https://www.loom.com/share/3b741c3dfbf34101af55b063ab20b8bd
錄製 : Redux function component .

https://www.loom.com/share/f870d10e560a4875a185cf12f3054d8e
錄製: currency-format

https://www.loom.com/share/6a7ab31da69c43038ef19a982ed5df84
錄製:套件 : react-router-dom 頁面路由使用方式

https://www.loom.com/share/a328b81c23ca42a6bac90a45a140b2d8
錄製:SASS預設處理器 :變數


回顧:編寫 [委派監聽-互動視窗] 流程 Part.2

在編寫Part 2 ,使用 event.target 抓取了整個 button.btn-show-movie 的 template。

分析問題 &拆解問題 :

  1. 試著在存取 Index API 的資料時,將電影的 id 一併放進 template 裡。

2. 當按鈕被點擊時,就能把 id 指定出來, 用devTool 的console可以看到id

3. 從API-data清單的id 與show API 給予物件的id 及 id的URL , matches

4. 測試觸及MORE按鈕開啟互動視窗後, 是否會出現詳細資料

尋找答案 及方法:

目的:

當按鈕被點擊時,就能把API 回應的物件 id 指定出來, 並用devTool 的console及DOM操空, 可以看到id是否成功

  1. Dataset 語法 :

編寫dataset- 目標- id 在按鈕上抓取特定API的物件i …


編寫流程:虛擬碼(Pseudocode)費波那契(Fibonacci )函式

在過去有記錄編碼是用『 流程圖 - 演算法 』:

適合用簡單的運算式.

當現在越是複雜的演算出現時, 就取而代之的出現了

虛擬碼 Pseudocode

「 主要目的還是為了邏輯的表達與溝通. 」

「 虛擬碼只是幫助我們思考解題的一個步驟 」

它是一種思考的過程與表達方法

基本上也沒有規定一定要怎麼寫.

虛擬碼的撰寫重點

參考註解方式 「 虛擬碼 (Pseudocode):

  1. 以英文撰寫
  2. 一句話對應到一個程式指令
  3. 關鍵字大寫(比如 IF, ELSE, FOR 等)
  4. 使用縮排,表達前後兩句陳述的推進關係

5. 沒有硬性規定一定要怎麼寫


本章節重點是

1. 如何設定委派監聽 ” 去判斷點擊到物件是否包含到指定電影的“ 按鈕 ”

2 . 當按鈕的點擊事件了,但是,該怎麼知道被點擊的電影 ID 是什麼呢?

Step1. 分析問題 ( 續 part 2)

清單及搜尋已經完成後, 使用者需要知道電影介紹內容.

經團隊討論後, 增加點擊按鈕會彈跳出新視窗並顯示 「電影詳細內容介紹 」

Step2 . 拆解問題:

  1. 跳出視窗顯示出 ( Part 1 .已完成 )
  2. 該如何在API取得的上百部電影, 每一個按鈕都增設監聽器?

3. 如何從彈跳出視窗內有電影詳細內容 ?

Step3. 尋找答案 及方法:

  1. 在DOM 插入的內容新增“ 按鈕 ” , ( part 1已完成)
  2. 引入 Bootstrap 的 Modal 元件製作互動視窗 (Part1已完成)
  3. 使用事件委派 (event delegation) 是在API的電影清單設定監聽, 當觸發事件時會確認是否與按鈕相同(本篇實作)
  4. 運用 dataset 將特定資訊標註到 HTML 標籤上,再用 JavaScript 取出(本篇實作 …

當我們看到印度裔朋友, 總是第一個反應是程式很厲害!

或數學很厲害.

背誦複習 = 定義經驗 =程式厲害

其實印度和台灣小學教育數學方式一樣. 差別在於印度朋友們背誦更辛苦

— 台灣人程式數學基本上不輸給印度 ㄧ

用數學乘法舉例 :

小時候讀書, 常常要背誦九九乘法.

台灣人 :

2X2 2X3 2X4 2X5…9x9 =81

管他的邏輯 . 背完九九乘法就能出去玩比較要緊, 我要下課玩

數學題庫 同樣的題目一直做一直做…

印度人 :

2X2 2X3 2X4 ~~~19X19

背背~背背背背背背背背背背背背

什麼因素我不知道…

Barry YU

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