sprewell20051116 / javascriptcourse Goto Github PK
View Code? Open in Web Editor NEW讀書會提出問題的平台
讀書會提出問題的平台
原本的例題,這樣是 ok 的
let king = {name: "Mufasa", kids: 1};
let name = king.name;
let kids = king.kids;
console.log(name, kids);
let {nameObj, kidsObj} = king;
console.log(nameObj, kidsObj);
下一個例題,這會造成下面的 error
let son = {name: "Simba", parents: 2};
let name, parents;
{name, parents} = son;
console.log(sonName, parents);
./app/index.js
Module build failed: SyntaxError: Unexpected token (125:16)
123 | let son = {name: "Simba", parents: 2};
124 | let sonName, sonParents;
> 125 | {name, parents} = son;
| ^
126 | ({name, parents} = son); // fix complile error, since name and parents are conflict
127 | console.log(sonName, parents);
128 |
@ multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js
看不出來為什麼~!
OS: Fedora 26
安裝:
#1. 安裝Node.js 和npm 。
https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora
#2. git repos (由影片clone javascript tutorial repos...)
#3. 建立一個*.html file, 開始進入課程。
#4. 撰寫簡易hello, world! 撰寫完成可直接由google chrome打開。
#5. 建立console, 打印console.log() 可以直接看到輸出結果。
#6. 教學影片第三章講的都是語法,可以快速閱過。
補充:
git的5個簡單指令:
執行指令前,可以先選一個free source server, 我這邊使用bitbucket.org, 有1G空間。
可以直接在server建立一個repos, 並由本機利用git clone http://.....
#1. git status: 確認目前更改的file
#2. git add : 加入, 可以git add . , 加入所有東西
#3. git commit: 建立節點,並且寫註解
#4. git push: upload到server
#5. git pull : download 最新的commit
git GUI 軟體推薦:gitkraken, 目前較推薦,免費版,且有持續更新維護
需要更多的資料跟討論。
console.log("Subject 11 Promimse and Asynchronous");
let p = new Promise((resolve, reject) => {
// resolve('Resolved promise data');
// reject("rejected promise data"); //Uncaught (in promise) rejected promise data
setTimeout(() => resolve("resolved promise data"), 3000); // schedule 3 sec
})
p.then(response => console.log(response))
.catch(error => console.log(error)); // rejected promise data
console.log("after promise consumption");
http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/class#Class-%E7%9A%84%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95
如果在一個方法前,加上static關鍵字,就表示該方法不會被實例繼承,而是直接通過類來調用,這就稱為「靜態方法」。
static代表是方法,不是實做
看完影片,還是不懂export default 是啥
找了資料
http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4
這篇很清楚
簡單說就是預設的export ,當你import的時候,不用輸入名稱,就會自動選擇他,還可以任意命名
第一步就 GG
ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (5:2)
3 | import ReactDOM from 'react-dom';
4 | ReactDOM.render(
> 5 | <div> React Application! </div>, document.getElementByID('root');
| ^
6 | );
7 |
不過後續指令可以正常執行
Hey, issue, long time no see...
function* letterMaker() {
yield 'a';
yield 'b';
yield 'c';
}
示範中的 function*
是什麼來著?
原本的示範是這樣
let call = () => {
let secret = "ES6 rocks";
let reveal = () => {
console.log(secret);
}
reveal();
};
然後 call()
會印出 ES6 rocks
很好理解。
但是後來的示範變成是 return 整個 reveal
這個 function point.
let call = () => {
let secret = "ES6 rocks";
let reveal = () => {
console.log(secret);
}
return reveal; // to retrun reveal function entirely
};
先把 call()
assign 給 unveil
的這個區域變數後,再去 call unveil()
可以印出 ES6 rocks
。
這也很好理解
let unveil = call();
unveil(); // ES6 rocks
那問題來了,為什麼直接使用 call()
不能像一開始那樣印出 ES6 rocks
?
let call = () => {
let secret = "ES6 rocks";
let reveal = () => {
console.log(secret);
}
return reveal; // to retrun reveal function entirely
};
call(); // 這邊沒有印東西
$npm run build
Error
GIGIGUNdeMacBook-Pro:es6 GIGIGUN$ npm run build
> [email protected] build /Users/GIGIGUN/es6
> webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "./build" is not an absolute path!
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the es6 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs es6
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls es6
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/GIGIGUN/es6/npm-debug.log
因為通篇的課程都是在 Mac 系統上面執行, 這個 ISSUE 主要是討論 npm 如何在 Windows 作業系統中安裝及使用
https://github.com/nodejs-tw/nodejs-wiki-book/blob/master/zh-tw/node_npm.rst
看起來應該就是做 Class 的擴展的方便用法
課堂中使用的 Wizard Class
function Wizards (name, house, pet) {
this.name = name;
this.house = house;
this.pet = pet;
this.greet = () => `I'm ${this.name} from ${this.house}`;
}
後面想要在這個 Class 中新增一個 Member,可以不用直接去更動到 Wizard Class 的類別宣告,而是使用 prototype
的這個關鍵字來作為擴展
Wizards.prototype.pet_name;
let Harry = new Wizards("Harry Potter", "Gryffindor", "Owl");
Harry.pet_name = "Hedwig"
console.log(Harry);
//Wizards {name: "Harry Potter", house: "Gryffindor", pet: "Owl", pet_name: "Hedwig", greet: ƒ}
// Template Literals
let a = "good";
let greeting_41 = "good morning";
let greeting_41_2 = "${a} morning";
console.log(a);
console.log(greeting_41);
console.log(greeting_41_2);
最後輸出
good
good morning
${a} morning
課程中希望是可以使用 ${a} 來替代前面已經宣告過的 let a = "good"
但是卻沒有成功
## testID 課程專用資料夾
###ID : testID
選擇這個欄位 >> 點選檔案旁的 +
後按 Stage File
,讓 Git 可以去追蹤這個檔案 >> 寫上 Commit Message >> Commit
就可以看到在 Local 端有個一個 commit。
搞定惹
git push
之前請記得再按一次 git pull
,確保 Local 跟 GitHub 上的 Source code 是同步最新的,減少衝突的問題發生。entries()
for Map()
let numArr = [[1, 'one'], [2, 'two'], [3, 'three']];
let valMap = new Map(numArr);
console.log(valMap);
for (let [key, value] of valMap.entries()) {
console.log(`${key} points to ${value}`);
// 1 points to one,
// 2 points to two,
// 3 points to three
}
GOGOGO
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.