JS + CSS Clock

From 19f51e2559b4696911b75e815df9e4b36e2d979a Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Wed, 14 Dec 2016 00:05:47 +0800 Subject: [PATCH 01/25] day2 --- 02 - JS + CSS Clock/index-FINISHED.html | 4 ---- 02 - JS + CSS Clock/index-START.html | 30 ++++++++++++++++--------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index d4cb3b56a8..f4deacda97 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -5,8 +5,6 @@ JS + CSS Clock - -

@@ -14,8 +12,6 @@

- - - From 12e2beb525bef7477f6e235552922c80f3a628f8 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Wed, 14 Dec 2016 00:14:52 +0800 Subject: [PATCH 02/25] add record list on readme --- readme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/readme.md b/readme.md index 5a1eaa18c8..8692203cc2 100644 --- a/readme.md +++ b/readme.md @@ -15,3 +15,7 @@ These are meant to be 1:1 copies of what is done in the video. If you found a be The starter files + solutions will be updated if/when the videos are updated. Thanks! + +# Records + +- 2016/12/13 Day2 complete! \ No newline at end of file From fdf04ce54200424047230c244f3e38d0691f9779 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Wed, 14 Dec 2016 00:17:53 +0800 Subject: [PATCH 03/25] renamed: readme.md -> readme-base.md --- readme.md => readme-base.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) rename readme.md => readme-base.md (93%) diff --git a/readme.md b/readme-base.md similarity index 93% rename from readme.md rename to readme-base.md index 8692203cc2..510bd5915c 100644 --- a/readme.md +++ b/readme-base.md @@ -14,8 +14,4 @@ These are meant to be 1:1 copies of what is done in the video. If you found a be The starter files + solutions will be updated if/when the videos are updated. -Thanks! - -# Records - -- 2016/12/13 Day2 complete! \ No newline at end of file +Thanks! \ No newline at end of file From 644190b428544a78c081f34a90c60e962ae4b396 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Wed, 14 Dec 2016 00:26:58 +0800 Subject: [PATCH 04/25] Create README.md --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000000..36dde3f023 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# JavaScript30 +30 Day Vanilla JS Challenge + +記錄是為了逼自己天天寫。（？ + +- Day1 -- 我有寫但放在別台電腦沒commit哈哈 +- Day2 -- 2016/12/13 complete! From ab0de0d995e147c09b6f0d90df36b24f8acfd759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Trina=20Lu=20=28=E9=99=B8=E9=A0=A4=E7=8F=8A=29?= Date: Thu, 15 Dec 2016 12:14:34 +0800 Subject: [PATCH 05/25] 'day1' --- 01 - JavaScript Drum Kit/index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..47f08962f8 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@

From 6d2270ab2481c3a5a0aaa70a83649498d353ef83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Trina=20Lu=20=28=E9=99=B8=E9=A0=A4=E7=8F=8A=29?= Date: Thu, 15 Dec 2016 16:36:34 +0800 Subject: [PATCH 06/25] 'day3' --- 03 - CSS Variables/index-START.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..6d1eb6f49c 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -48,6 +48,28 @@

Update CSS Variables with JS

From c3ea1cc557a367dd5bb6188bf33525ba4a474e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Trina=20Lu=20=28=E9=99=B8=E9=A0=A4=E7=8F=8A=29?= Date: Thu, 15 Dec 2016 16:41:35 +0800 Subject: [PATCH 07/25] day3 readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 36dde3f023..1c403491fd 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,6 @@ - Day1 -- 我有寫但放在別台電腦沒commit哈哈 - Day2 -- 2016/12/13 complete! +- Day3 -- 2016/12/15 + 用 css variable 這招倒是完全沒想到 (跟它壓根兒不熟)，相比之下我整個大輸XD。 + 偷偷筆記起來。不過就是瀏覽器支援度還很差，近期可能還無法在production環境中使用吧…… From 6b77c5c1affe02bea4036ed0995e63280e409420 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Trina=20Lu=20=28=E9=99=B8=E9=A0=A4=E7=8F=8A=29?= Date: Wed, 21 Dec 2016 18:33:40 +0800 Subject: [PATCH 08/25] 'day4' --- 04 - Array Cardio Day 1/index-START.html | 26 ++++++++++++++++++++++++ README.md | 3 +++ 2 files changed, 29 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..97fb97566e 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,17 +33,30 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + let bornIn1500s = inventors.filter((man) => man.year >= 1500 && man.year < 1600); + console.table(bornIn1500s); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorsNames = inventors.map((man) => `${man.first} ${man.last}`); + console.log(inventorsNames); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortBirth = inventors.sort((man, manNext) => man.year < manNext.year ? -1 : 1); + console.table(sortBirth); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const ageSum = inventors.reduce((sum, man) => man.passed - man.year + sum, 0); + console.log(ageSum); // 5. Sort the inventors by years lived + const sortAge = inventors.sort((man, manNext) => (man.passed - man.year) > (manNext.passed - manNext.year) ? -1 : 1); + console.table(sortAge); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -51,10 +64,23 @@ // 7. sort Exercise // Sort the people alphabetically by last name + const sortPeople = people.sort((p, p2) => { + const [firstName, lastName] = p.split(', '); + const [firstName2, lastName2] = p2.split(', '); + return (lastName > lastName2) ? 1 : -1; + }); + console.log(sortPeople); + // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const dataCount = data.reduce((obj, item) => { + obj[item] = obj[item] || 0; + obj[item]++; + return obj; + }, {}); + console.log(dataCount); diff --git a/README.md b/README.md index 1c403491fd..f4ba718eec 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,6 @@ - Day3 -- 2016/12/15 用 css variable 這招倒是完全沒想到 (跟它壓根兒不熟)，相比之下我整個大輸XD。偷偷筆記起來。不過就是瀏覽器支援度還很差，近期可能還無法在production環境中使用吧…… +- Day4 -- 2016/12/21 + 不小心偷懶好久(爆) + 這篇剛好可以趁機回憶一下前陣子看的[教學影片](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)！(講師超有趣XD) From e88c50cedc55d6e986d7f4fa9238846d3b5c390e Mon Sep 17 00:00:00 2001 From: tri613 Date: Fri, 23 Dec 2016 11:58:04 +0800 Subject: [PATCH 09/25] day5 --- 05 - Flex Panel Gallery/index-START.html | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..47df05ff91 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,11 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -41,6 +43,10 @@ font-size: 20px; background-size:cover; background-position:center; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; } @@ -54,7 +60,21 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + flex-direction: column; + justify-content: center; } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel p { text-transform: uppercase; @@ -68,6 +88,10 @@ .panel.open { font-size:40px; + flex: 5; + } + .panel.open-active > * { + transform: translateY(0%); } .cta { @@ -107,6 +131,19 @@ From 6d0c7cbbd8cb73de92af3be580d40376418464e5 Mon Sep 17 00:00:00 2001 From: tri613 Date: Fri, 23 Dec 2016 11:59:13 +0800 Subject: [PATCH 10/25] day5 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f4ba718eec..d0840c8fdd 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,5 @@ - Day4 -- 2016/12/21 不小心偷懶好久(爆) 這篇剛好可以趁機回憶一下前陣子看的[教學影片](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)！(講師超有趣XD) +- Day5 -- 2016/12/26 + 寫是寫完了不過要來好好認真看一下flex才行QQ From a6fdf4aef1e8d6298ea861b5f861130904ca0233 Mon Sep 17 00:00:00 2001 From: tri613 Date: Tue, 3 Jan 2017 19:07:08 +0800 Subject: [PATCH 11/25] day6 --- 06 - Type Ahead/index-START.html | 35 ++++++++++++++++++++++++++++++++ README.md | 3 +++ 2 files changed, 38 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..87024452a5 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,41 @@ diff --git a/README.md b/README.md index d0840c8fdd..78fc15ad91 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,6 @@ 這篇剛好可以趁機回憶一下前陣子看的[教學影片](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)！(講師超有趣XD) - Day5 -- 2016/12/26 寫是寫完了不過要來好好認真看一下flex才行QQ +- Day6 -- 2017/01/03 + 年末總是在忙著慶祝嘛！(爆) + From 6c358bb5d6f21703d4bf175578ba4a79d315ff60 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Tue, 3 Jan 2017 19:19:54 +0800 Subject: [PATCH 12/25] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 78fc15ad91..3ef2d78f26 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,6 @@ 寫是寫完了不過要來好好認真看一下flex才行QQ - Day6 -- 2017/01/03 年末總是在忙著慶祝嘛！(爆) + - fetch + - regular expression From 007b4703686d2a99ba4b893c6e9ef70807384358 Mon Sep 17 00:00:00 2001 From: tri613 Date: Wed, 4 Jan 2017 11:42:47 +0800 Subject: [PATCH 13/25] day07 + 08 --- 07 - Array Cardio Day 2/index-START.html | 13 ++++++- 08 - Fun with HTML5 Canvas/index-START.html | 41 +++++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..a3e26ab81c 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,26 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + const atLeastOne = people.some(person => new Date().getFullYear() - person.year >= 19); + console.log({atLeastOne}); // Array.prototype.every() // is everyone 19? + const everyone = people.every(person => new Date().getFullYear() - person.year >= 19); + console.log({everyone}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => comment.id === 823423); + const newComment = [ + ...comments.slice(0,index), + ...comments.slice(index+1) + ]; + console.table(newComment); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..defd1dc153 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -6,7 +6,48 @@

+ diff --git a/README.md b/README.md index 5792ecab64..cb214b7779 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,18 @@ - 這章好重要，前陣子也有認真看了一下JS裡面`by value`跟`by reference`的問題，另外開一個區塊寫XD - Day15 -- 2017/01/28 （新年寫code...廠廠) - `JSON.parse(null)`是ＯＫ的，但`JSON.parse(undefined)`就會跳error。 +- Day16 -- 2017/01/28 + - 如果在捕捉滑鼠移動位置事件時，假如被掛上listener的元素裡面還有子元素的話， + 記得要另外加上子元素和父元素的相對位置。 + ```javascript + let x = e.target.offsetX; + let y = e.target.offsetY; + if (this !== e.target) { + x = x + e.target.offsetLeft; + y = y + e.target.offsetTop; + } + ``` + 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) ## Notes From e24c72e93e92fc888face02c8ca7c4cf3fde1d40 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Sun, 29 Jan 2017 01:29:25 +0800 Subject: [PATCH 21/25] Update README.md --- README.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index cb214b7779..98ad35c047 100644 --- a/README.md +++ b/README.md @@ -31,16 +31,18 @@ - `JSON.parse(null)`是ＯＫ的，但`JSON.parse(undefined)`就會跳error。 - Day16 -- 2017/01/28 - 如果在捕捉滑鼠移動位置事件時，假如被掛上listener的元素裡面還有子元素的話， - 記得要另外加上子元素和父元素的相對位置。 - ```javascript - let x = e.target.offsetX; - let y = e.target.offsetY; - if (this !== e.target) { - x = x + e.target.offsetLeft; - y = y + e.target.offsetTop; - } - ``` - 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) + 記得要另外加上子元素和父元素的相對位置。 + + ```javascript + let x = e.target.offsetX; + let y = e.target.offsetY; + if (this !== e.target) { + x = x + e.target.offsetLeft; + y = y + e.target.offsetTop; + } + ``` + + 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) ## Notes From cd0e76826e60bbe1e432e4eb0d007deed0555cc7 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Thu, 16 Mar 2017 10:55:54 +0800 Subject: [PATCH 22/25] Update README.md --- README.md | 108 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 56 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 98ad35c047..ad383808a9 100644 --- a/README.md +++ b/README.md @@ -66,58 +66,60 @@ 2. By Reference - 如果是 `array` 或者 `object`，則會以 `by reference` 的方式傳遞。 +如果是 `array` 或者 `object`，則會以 `by reference` 的方式傳遞。 + +```javascript +let person1 = { + name: "Trina", + age: 100, + gender: "female" +}; +let person2 = person1; + +console.log(person1, person2); +//Object {name: "Trina", age: 100, gender: "female"}, Object {name: "Trina", age: 100, gender: "female"} + +person2.name = "Sherry"; +console.log(person2.name); //"Sherry" +console.log(person1.name); //"Sherry" --> person1 has been changed too! +``` + +Array 也是一樣的道理： + +```javascript +let players = ["Trina", "Sherry", "Pisuke", "Kuma"]; +let team = players; +console.log(players, team); +// ["Trina", "Sherry", "Pisuke", "Kuma"], +// ["Trina", "Sherry", "Pisuke", "Kuma"] + +team[3] = "Usagi"; +console.log(players); +// ["Trina", "Sherry", "Pisuke", "Usagi"] --> players has been changed too! +``` + +要解決這個問題，就必須把`Object`或`Array`直接Copy一份才行。 + +- Copying an array ```javascript - let person1 = { - name: "Trina", - age: 100, - gender: "female" - }; - let person2 = person1; - - console.log(person1, person2); - //Object {name: "Trina", age: 100, gender: "female"}, Object {name: "Trina", age: 100, gender: "female"} - - person2.name = "Sherry"; - console.log(person2.name); //"Sherry" - console.log(person1.name); //"Sherry" --> person1 has been changed too! + //以下幾種方式皆可行 + const teamCopy1 = players.slice(); + const teamCopy2 = [].concat(players); + const teamCopy3 = [...players]; //es6 + const teamCopy4 = Array.from(players); ``` - - Array 也是一樣的道理： +- Copying an object ```javascript - let players = ["Trina", "Sherry", "Pisuke", "Kuma"]; - let team = players; - console.log(players, team); - // ["Trina", "Sherry", "Pisuke", "Kuma"], - // ["Trina", "Sherry", "Pisuke", "Kuma"] - - team[3] = "Usagi"; - console.log(players); - // ["Trina", "Sherry", "Pisuke", "Usagi"] --> players has been changed too! + const personCopy = Object.assign({}, person, { + newProperty: "some additional property for personCopy" + }); ``` - 要解決這個問題，就必須把`Object`或`Array`直接Copy一份才行。 - - - Copying an array - - ```javascript - //以下幾種方式皆可行 - const teamCopy1 = players.slice(); - const teamCopy2 = [].concat(players); - const teamCopy3 = [...players]; //es6 - const teamCopy4 = Array.from(players); - ``` - - Copying an object - - ```javascript - const personCopy = Object.assign({}, person, { - newProperty: "some additional property for personCopy" - }); - ``` - 要注意的是以上的方法是 `Shallow copy`，如果 Object 本身是`二維`以上的話，使用上面的方式還是會有 `By reference`的情況發生。 - - ```javascript + + 要注意的是以上的方法是 `Shallow copy`，如果 Object 本身是`二維`以上的話，使用上面的方式還是會有 `By reference`的情況發生。 + + ```javascript let me = { name: "Trina", age: 24, @@ -132,10 +134,12 @@ console.log(me.social); //{twitter: "@nomoney", github: "tri613"} --> Changed! - ``` - 這種情況需要靠`Deep clone`來解決，最簡單 (但效率表現沒那麼好) 的方式是直接使用JSON格式encode再decode的方式解決。 + ``` + + 這種情況需要靠`Deep clone`來解決，最簡單 (但效率表現沒那麼好) 的方式是直接使用JSON格式encode再decode的方式解決。 - ```javascript - const meCopy = JSON.parse(JSON.stringify(me)); - ``` - 其他的方式可以參考stackoverflow上面的[這篇](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript)。 + ```javascript + const meCopy = JSON.parse(JSON.stringify(me)); + ``` + + 其他的方式可以參考stackoverflow上面的[這篇](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript)。 From ba08e69cd706d65f4ac49a50193e6189c461ca81 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Thu, 16 Mar 2017 10:58:19 +0800 Subject: [PATCH 23/25] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ad383808a9..99623eea93 100644 --- a/README.md +++ b/README.md @@ -41,8 +41,8 @@ y = y + e.target.offsetTop; } ``` - - 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) + +延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) ## Notes From b9a4c5ed3df3980c7bb43424cabbfd4aaf936b1d Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Thu, 16 Mar 2017 10:59:13 +0800 Subject: [PATCH 24/25] Update README.md --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 99623eea93..2f21d5edad 100644 --- a/README.md +++ b/README.md @@ -34,15 +34,15 @@ 記得要另外加上子元素和父元素的相對位置。 ```javascript - let x = e.target.offsetX; - let y = e.target.offsetY; - if (this !== e.target) { - x = x + e.target.offsetLeft; - y = y + e.target.offsetTop; - } + let x = e.target.offsetX; + let y = e.target.offsetY; + if (this !== e.target) { + x = x + e.target.offsetLeft; + y = y + e.target.offsetTop; + } ``` - -延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) + + 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) ## Notes @@ -56,13 +56,13 @@ 一般來說只要是 strings, numbers 和 booleans，都可以說是 `by value`。 - ```javascript - let a = "string"; - let b = a; - console.log(a, b); // "string", "string" - b = "another string"; - console.log(a, b); // "string", "another string" - ``` +```javascript +let a = "string"; +let b = a; +console.log(a, b); // "string", "string" +b = "another string"; +console.log(a, b); // "string", "another string" +``` 2. By Reference From 8d23a4d20efbcbf82ffa7e5f2f4f7df94a4fdad1 Mon Sep 17 00:00:00 2001 From: Trina Lu Date: Thu, 16 Mar 2017 10:59:43 +0800 Subject: [PATCH 25/25] Update README.md --- README.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 2f21d5edad..964c112e60 100644 --- a/README.md +++ b/README.md @@ -120,20 +120,20 @@ console.log(players); 要注意的是以上的方法是 `Shallow copy`，如果 Object 本身是`二維`以上的話，使用上面的方式還是會有 `By reference`的情況發生。 ```javascript - let me = { - name: "Trina", - age: 24, - social: { - twitter: "@tri613", - github: "tri613" - } - }; - - let me2 = Object.assign({}, me); - me2.social.twitter = "@nomoney"; - - console.log(me.social); - //{twitter: "@nomoney", github: "tri613"} --> Changed! + let me = { + name: "Trina", + age: 24, + social: { + twitter: "@tri613", + github: "tri613" + } + }; + + let me2 = Object.assign({}, me); + me2.social.twitter = "@nomoney"; + + console.log(me.social); + //{twitter: "@nomoney", github: "tri613"} --> Changed! ``` 這種情況需要靠`Deep clone`來解決，最簡單 (但效率表現沒那麼好) 的方式是直接使用JSON格式encode再decode的方式解決。