2020年7月8日 星期三

Message Mixer

先建立一個有名子的空物件,把我想打包的函數都作為他的性質存起來。
如果函數都是 function Name(){*}這副德行,我該怎麼做 ?
我的作法是就是 Name: function(){*},看過Hint就知道我錯了。

函數當成Object.PropertyName ( === function's Name) = Anonymous Function
MessageMixer = {};
Message.Name = function(){*}

sentence.split(" ").join(character + " ")
const character = '&';
const sentence = "My name is Chung Hao Yang.";
sentence.split(" ") 
Array ["My", "name", "is", "Chung", "Hao", "Yang."]
按照空白,拆解 string 成 array

.join() 回傳 拼接成的字串,.join(character + " ") = "&_",底線代表空白。

console.log(sentence.split(" ").join(character + " "));
=> "My&_name&_ is&_ Chung&_Hao&_Yang."

module.exports 和 export default 之間的差異
module.exports = ObjectName;
let VariableName = require('Path')

export default ObjectName;
import ObjectName from 'Path'

Node.js 支援 module.exports 和 require(),ES6 支援 export default / import  from,後者可讀性及彈性高。


現在遇到一個問題
let availableAirplanes = [ {name: 'AeroJet', fuelCapacity: 800, availableStaff: ['pilots', 'flightAttendants', 'engineers', 'medicalAssistance', 'sensorOperators'], maxSpeed: 1200, minSpeed: 300 }, {name: 'SkyJet', fuelCapacity: 500, availableStaff: ['pilots', 'flightAttendants'], maxSpeed: 800, minSpeed: 200 } ]; function displayFuelCapacity() { availableAirplanes.forEach(function(element) { console.log('Fuel Capacity of ' + element.name + ': ' + element.fuelCapacity); }); }
element.name 為什麼不能改成 element["name"] ?
可以,是我剛剛打錯成 element.[name] ,正確是 element["name"]

displayFuelCapacity();

================================

console.log(MessageMixer.palindrome());
  console.log(MessageMixer.pigLatin()); //我怎麼知道我要傳什麼參數




2020年7月7日 星期二

Build A Library

reduce 會執行使用者提供的函數,稱作 reducer function ,最後回傳一個值。
至於是什麼值,就看你的 reducer function如何寫了。

子類別繼承父類別,但 super(argumentName)    引用 父類別的建構子,要包覆在 子類別的建構子裏頭。

arrayName.push(element1,element2,....)    雖然可以添加多個元素進去 array裏頭,但在今天的例子裏頭,卻受限於 addRating(ratings)內的 array.push(ratings),固然一次只能添加一個元素進去。

我在class 裏頭犯最多的錯誤就是沒有加this。

以下為什麼出問題?
let sum = 0;
const reducer = (acc, cur) => { acc + cur }; <=== 這裡我忘了加 return 
const reducer = (acc, cur) => { return acc + cur };
arrayName.reduce(reducer, sum);
 

2020年7月6日 星期一

Command Line

無法cp檔案到當前路徑,譬如說:
 $pwd >> home/cc/drama/hospital
cp drama/fire.txt hospital/ >> Error

無法Tab 出 parrent directory,譬如說:
cc/ drama music tea 三個資料夾
當你要改變工作路徑到 tea/, 你輸入 cd ../mus 按 Tab,不會出現 自動出現music 

萬用字元(Wildcard)
* is a wildCard
cp * safe/ 複製所有檔案,但不包含 directory,明明 cp(copy) 可以複製 file 和 directory。

clear 清理 bash 畫面
cls 清理 window command prompt

rm(remove)
可刪除 file 及 directory,但碰上directory要加上 option -r 才可刪除之。
__________________________________________

Command Line (二)

水管(pipe) 左手邊 stdout ( stand out )
                   右手邊 stdin (stand in ) 
解讀順序 從左至右,i.e. stdout => stdin

< : 右手邊作為 stdin ,stdout去左手邊程式。

>> ( append 附加 ) 
> ( overwrite 複寫 )  


uniq : 消除相鄰重複,
範例 : sort deserts.txt | uniq > uniq-deserts.txt,
從左至右,先將 deserts.txt 裡的條目先排序,後由 pipe | 導入 uniq ,消除相鄰重複,後導入 uniq-deserts.txt ,若碰上 工作目錄沒有 uniq-deseerts.txt 就先建立uniq-deserts.txt 後導入內容。

grep ( global regular expression print ), 範例: grep Moun mountains.txt,
從 mountains.txt 裏頭,搜尋每一行有 Mount 開頭的單字,並印在螢幕上,i.e. 輸出結果的每一行都有 Mount 起首的字。
範例 : grep -i Moun mountains.txt > chung-hao.txt,不分大小寫搜尋有 moun 起首的單字結果,並導入 chung-hao.txt裏頭。

grep -R Arctic /home/ccuser/workspace/geography    -R(recursive_遞迴,每個檔案不放過的搜尋)
搜尋 geography,所有包含 "Arctic" 的檔案名稱及其包含該字串的那一行。

grep -R Arctic    搜尋當前路徑的所有檔案 
grep -Rl Arctic     只列出符合結果的檔案名稱

sed ( stream editor),
舉例: sed 's/snow/rain/' forests.txt    ,'s/(substitution)/snow(目標字串)/rain(替代字串)/',
把forests.txt裏頭的snow取代成 rain,但是如果遇到 某一行有兩個snow時只會替換到從左邊數來第一個遇到的 snow而已,可以透過 's/snow/rain/g(global)' 替換掉所有的snow。
注意: 's/snow/rain/'要加斜線/,不然ERROR。

2020年7月5日 星期日

React 一

JSX 就是出現在 .js檔案裏頭的HTML語法。

JSX expressions 一行不用小括號圍起來,但基本上都超過一行。
    小括號內又要用 <div></div>或是其他的區塊元素圍起來。

Javacript的函數庫(library) 就是 官方提供的 module(通常是object),裏頭包覆的函數就叫做"方法"。

Render(渲染) 就是將效果呈現在螢幕上。
    JSX expressions 要render,要透過 



Piano_Keys

 <div></div> 是區塊元素 ( style.default_display = 'block')
<section></section>也是區塊元素
div只用來做CSS花樣, section 除了花樣之外,兼有文章、論文以上具備小標題的段落。


MDN

Event reference    https://developer.mozilla.org/en-US/docs/Web/Events

2020年7月4日 星期六

Chore Door!

gameOver('win') 

const gameOver = (status) => {
    if (status === 'win' ){
        startButton.inner = 'Good luck!' ;
    }
}

以上無法 hoisting,跑不出結果。

但是  gameOver('win') 是包覆在其他 "函數體內"是OKay的。

_________________________________________________

const numClosedDoors = 3;    <------改成 let numClosedDoors = 3;

const playDoor = ( ) => {
    numClosedDoors --;    <--------------- const numClosedDoors 常數無法 --
    if (numClosedDoors === 0) {
        gameOver('win')
    }
}




學習 CSS 版面配置 一

https://zh-tw.learnlayout.com/display.html

block 區塊元素、 inline 行內元素: a-tag 、 span-tag


margin(外邊距): 元素外框和周圍元素的距離
An element's margin controls the amount of space between an element's border and surrounding elements. <freecodecamp>

一次給值 margin: 上下 左右 

分開給值 margin-
  • left  
  • right
  • top
  • bottom

margin: 0 auto >> auto 代表水平置中


padding(內邊距):假若元素內部有文字,則文字與元素外框距離就是內邊距。