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(內邊距):假若元素內部有文字,則文字與元素外框距離就是內邊距。

2020年6月27日 星期六

進度

[ CodeCademy ]
<div class=""> 很常用
<p></p> 裏頭特別凸顯的文字,用<span></span>配上 .css來修飾。

.css_font-family,用得是Windows 字體,系統字體全都在 C:\Windows\Fonts 裏頭。
若是遇到系統沒有得字體,font-family就沒有用,得先去 下載 字體回來放進Fonts這個資料夾裏頭。例如: 系統沒有 'Work Sans'這種字體,就google搜尋_Work Sans ttf(副檔名ttf的檔案就是字體檔),下載並安裝。

[記概 OCW]
第一週完

[Create a Front-End App with React]

2020年6月26日 星期五

線上資源

我還不知道它的功用
https://repl.it/

Atom 安裝說明

如何有效閱讀 JS文件



Enumerability and ownership of properties

原文:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties

Enumerable properties whose internal enumerable flag is set to true

enumerable flag 是 預設給 透過 simple assignment 或是 property initializer 所做出來的 properties

Enumerable properties show up (出現 ?) 在 for...in loops unless the properties's key is a symbol.
意思是: if..not 替換 unless ,假若 properties的key不是一個symbol,這個key就會出現在 for...in loop裏頭。

MDN文件

CodeCademy 提及MDN文件:

Practice your documentation reading skills and check out: MDN’s object instance documentation.

To read more about either arrow functions or the global object check out the MDN documentation of the global object and arrow functions.

開放式課程

交大電機學院OCW
演算法  江蕙如老師
https://ocw.nctu.edu.tw/course_detail.php?bgid=8&gid=0&nid=493

計算機概論與程式設計 溫宏斌老師
https://ocw.nctu.edu.tw/course_detail.php?bgid=8&gid=0&nid=192&page=3

物件導向程式設計 溫宏斌老師
https://ocw.nctu.edu.tw/course_detail.php?bgid=8&gid=0&nid=343&page=3

C/C++ 資源

進度條線上課程
https://ww.youtube.com/channel/UCx9zGDevKEZ21ihod8A0i-w
其中的影片都是簡單介紹,重要或是進階的部分還是當作商品做販賣。

C++自學專區
https://sites.google.com/site/skydaycomputer/home/c-zi-xue-zhuan-qu
某個高中老師做的教學網站