Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
📌 首先，我們先來談談什麼是 DOM 和 Javascript ＆DOM 之間的關係吧！
DOM 的中文全名為文件物件模型 (英文：Document Object Model)，它可以被理解成網頁的標準程式介面 (API)，也可以被想像成一張族譜，裡頭的樹狀結構表示著一層又一層的物件。
根據 W3C （全球資訊網協會），DOM 的定義：
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
簡言之，DOM 就是個被完整定義的介面，以便檔案的日後動態修改和更新。
深入解釋：DOM所管理的每一筆資料都是一個節點(Node)，節點有分為元素節點、文字節點和屬性節點，而每一個物件導向的節點都擁有各自的屬性 (property) 以及方法 (method)，我們也可以透過 DOM 的屬性與方法來進一步改變網頁內容、架構和風格。
下圖為 DOM 的樹狀結構，由圖可見，層級結構嚴謹、隸屬明確（上層為父、下層為子、左右為手足節點），因此之後當瀏覽器載入網頁時，Javascript 需要存取檔案或是增減、搜尋網頁中的元素也相對輕鬆容易。
DOM 最常用於 HTML 模組中，這裡直接來舉個例：
<!DOCTYPE html> <html> <head> <title>Welcome to Paradise!</title> </head> <body> <section> <a href="https://blog.happycoding.today/javascript-%e5%ad%b8%e7%bf%92%e6%97%a5%e8%a8%98%ef%bd%9ciris-%e7%a8%8b%e5%bc%8f%e5%b0%8f%e7%99%bd-%ef%bc%834/">Blog</a> </section> </body> </html>
如果有寫過 HTML 的程式白白們應該會知道基本寫法，像是有<html>、<head>、<body>、<section> 等等標籤（標籤需有對稱的前後兩組，用以包夾文字或是代碼）。以上舉的例子則是最基礎簡潔的幾行程式碼，有慧根的白白應該有發現這幾行程式碼暗藏的 DOM 層級概念。最上層為 <html>，緊接著是 <head> 和 <body>。在 <head> 底下有 <title>，<title> 底下有文字：Welcome to Paradise!；另外一邊則是在 <body> 之下先是一個分區 <section> ，分區下有個超連結 <a>，<a> 裡頭附著一段網址：（不要懷疑～就是我的部落格連結！）😝
最後，<a> 之下再有一層文字：Blog。螢幕上你將會看到如以下的顯示結果👇
註🖋：一個大標：Welcome to Paradise! ，下一行跟著超連結化的 Blog 文字，而此超連結連結至我的第四章日記！
白白們要注意的是，我們初學需要特別著墨 DOM 架構的原因無它，就是要清楚整體資料節點的邏輯架構，以優化我們未來撰寫程式的流暢度、加深我們對於 JS 的了解和協助我們更不容易在層級方面出 bug。
📌 你有聽過 Javascript ES6 嗎？如果有，那你知道 ES6 確切是什麼嗎～ES6 和 Javascript 之間究竟有什麼關聯？
這就讓我娓娓道來😎 坐穩不要跟丟嘍！
ES6 其實是我們口頭上的簡稱，這樣的說法並不精確。正確來說， ES6 僅為泛稱，指的是ES5.1 版以後的新一代 JavaScript 語言標準，其中涵蓋了 ES2015, ES2016, ES2017 等等。
ES20✕✕ 才為正式稱號，英文：ECMAScript 20✕✕ (✕ edition)，專指某年度發佈的語言標準。譬如常見的 ES6，指的是 ES2015，全名為 ECMAScript 6，為 JavaScript 語言新一代的「標準」，於 2015 年 6 月正式發佈。
小結：
關於 ES…
ES （或是 ECMAScript ）和 Javascript 相似，都是都是一種通用程式語言(general-purpose programming language)。之前於日記第一篇有提及， Javascript 是由一個叫做 Eich 的科技學家創建，創建後的隔年網景公司就把 Javascript 提交給 Ecma International 做標準化。標準化內容由TC39 委員審核公佈後，記錄於「ECMA-262 規範書」中，其中包括了對於 ECMAScript 語法、介面、特性等等的規範與限制。
到現在 2020 年，ECMA-262 已經出到了第 11 版的更新，過程中經歷了第四版的廢棄、第五版的「嚴格模式」(strict mode) 翻新，可謂風風雨雨… 不容易呀！但這些為的都是能夠讓 Javascript 的使用者和開發者能夠安心、無後顧之憂地順暢寫程式💪
🏋♀ 歷史小惡補 part 1： Ecma International 是一個旨在制訂國際性資訊和電信標準制度的非營利組織，不同於其他國際性制度訂定團體，Ecma 採會員制，並引入市場機制，使標準制定上能夠符合效率、公平、公開三原則。截至目前為止，Ecma 已經公開發佈了超過 400 份標準和超過 200 份科技報告，亦廣泛被市場接受。
🏋♀ 歷史小惡補 part 2：Ecma International 於 1994年，因為組織日漸國際化和資訊活動日益頻繁等因素，改名為今日我們所認識的全小寫 Ecma（不是縮寫唷！）。在這個大改變之前 Ecma 可是 ECMA，為「歐洲電腦製造商協會」（European Computer Manufacturers Association）之簡稱。
📌 講完歷史典故，回到現實來看看 ES6 語法如何使 JavaScript 變得更完美吧！
以是小白🙆♀我整理的三大 ES6 特性，我也會負責一一介紹，一起看下去吧～
1. let & const 的使用
首先，為什麼已經有 var（給變數）功能還要用 let 或是 const 呢？
因為 var 有個獨特的功能，就是在賦值後仍能任意更改（弱型別語言），即可重複定義。因此當我們在撰寫時容易在不知覺的情況下覆蓋到原資料，造成資料的遺失。
這時改版就加上了 let 和 const 功能，讓我們能在花括號 { } 中自由擺放變數，而不影響到整個大範圍程式碼。
var weight = 100; var weight = 50; console.log(weight); // 50
由此可見，在 var 定義下變數的值能夠輕易改變，印證上頭我所提及的 var 特性。再來我將用兩組例子來進一步闡明 var 和 let ＆ const 之間的差異
function getWeight() {
var weight = 100;
console.log(weight);
} // 100 function getWeight() {
var weight = 100;
}
console.log(weight); // ReferenceError: weight is not defined 我們從以上兩組程式碼能看出，當我們把 console.log 擺在全局和函式內部的差異。由此可知 var 的作用範圍僅限 function 內部，不會另外對於整體變數做定義。
🦖 恐龍君小補充：兩個 `（反引號）之中可嵌入字串，${…} 中可嵌入變數，如此寫法有利於撰寫上的簡潔！
var weight = 100; // kg
var height = 200; // cm
if (weight > 50) {
var BMI = weight / (height/100 * height/100);
console.log(`My secret is ` + BMI);
} var weight = 100;
var height = 200;
if (weight > 50) {
const secret = weight / (height/100 * height/100);
console.log(`My secret is ` + secret);
} 第二組程式碼的比較之下，我們不難發現唯一的差別即是 var 和 const，單單從結果論，上下兩個解法是沒有太大的差異，但是，當我們要寫大量程式碼時，養成在區域中使用 let 和 const 就格外重要。如此一來，該放在函式中定義的變數就使用 var，該有區域性的變數就用 let 和 const 定義，就會大大降低出錯率，也會使不同人在交接程式碼時原先的變數免於因為一時疏忽而被更動。
總結：var 屬於 function scope（函式作用域）； let 和 const 屬於 block scope （塊值作用域） 。當把 var 放進函式後，var 即被鎖在函式之中；換句話說，函式之外的區域都不會有 var 的蹤跡。因此，若我們想短暫定義一個值（使用「臨時變量」），又不想動到全局變量時， let 和 const 就會是我們的好幫手，幫助我們自由在花括號 { } 之中定義我們的變數而不影響其餘變數的值。
2. 箭頭函式 Arrow Functions
就我看來，箭頭函數實在是個造福懶人的寫法（懶人舉手🙋♀
從ES6 開始，寫函式不再需要寫 function，直接使用 => 即可，可謂簡潔、簡潔、再簡潔！
來看看示範吧！
var shrink= function (a,b) {
return a / b;
} var shrink = (a,b) => a / b;
仔細比對上下，箭頭函數除了取代 function，更隱藏了 return。這樣寫起來是不是很省力呀！
但如果你覺得如此爾爾，箭頭函數綁定 this 的功能會讓你帶開眼界，以下例證：
在 ES6 之前當我們遇到以下狀況：
一個獨立運行的函式如果無特別操作，會指向 window ，所以才會有 undefined 的錯誤結果。
function Iris() {
this.weight = 10;
setInterval(function growWeight() {
// 這邊的 this 會指向 window（window 也是物件），造成程式錯誤
this.weight++;
}, 87);
}
var I = new Iris(); 我們以往的解法：
多定義一個 self，讓 this 指向變數 self。 如此 this 就會改指向 Iris 了
function Iris() {
// 先將正確的 this reference 存到一個變數中
var self = this;
self.weight = 10;
setInterval(function growWeight() {
// self 變數會正確的指向 Iris 物件
self.weight++;
}, 87);
} 在 ES6 出現後我們的新解：（顯示結果在以下console版）
箭頭函式直接取代 function，綁定 this。this自然而然指向對的物件
function Iris() {
this.weight = 10;
// 定義該 Arrow Functions 時的環境，是在 Iris 物件中
setInterval(() => {
// this 才會正確指向 Iris 物件
this.weight++;
}, 87);
}
var I = new Iris();
3. 陣列的分開賦值 Array Destructuring
const weights = [55,48,65]; const iris = weights[0]; const dora = weights[1]; const olivia = weights[2]; console.log(iris,dora,olivia); // 55,48,65
以往我們對於陣列快速賦值的方式大多採用以上做法，先給予 weights 一串陣列值，緊接著定義三個不同變數（iris、dora、olivia），分別對應到 weights 變數陣列值串的不同相對位置。
🦖 恐龍君小補充：陣列從零開始編號！
如果換成 ES6 情況就簡化許多了，可使用解構賦植請看以下
const [iris,dora,olivia] = [55,48,65]; console.log(iris,dora,olivia); // 55,48,65
作法：直觀性地把陣列對印到要賦予的值串
在寫程式如果能用較簡潔的方式表達，我們通常會選用簡潔但一樣清楚的表示法，這也是 ES6 出現的原因～
🧠 知識惡補站 🧠 你知道 Coding 和 Programming 的差異嗎？
中文上，Coding 譯作編碼；Programming 譯作編程。定義上，Coding 是將自然語言(natural language) 藉由中介程式語言將指令翻譯成機器能懂的語言 (machine language) 的過程，簡單來說，編碼就是利用個機器能懂的程式語言來發出指令，讓電腦能夠對應執行。Programming 則是開發一套完整能夠運作的軟體解決方法的過程，當中需要的是邏輯思考、分析推演、識別問題癥結等能力。因此， Programming 不僅僅限於對程式語法的了解，更需要的是和具體化想法的判斷、思考力。
文字不夠清楚，就讓我們看圖說故事吧吧 👀
🔥下集預告🔥
這次終於有機會和大家聊到 JS ES6 的部分（好興奮呀～）下集小白🙆♀我將為大家帶來 React 入門相關知識😍 敬請期待唷！
怕你們上次沒聽清楚～所以在和你們說一次我的恩師Glove😏
如果對於 ReactJS 有興趣，或是想增進 JS 技能的人（或深入了解），這裡連結我會放上 Glove 的部落格，歡迎和我一樣自認上進的人上去翻翻
Glove 另外也有在 Udemy 上開設 JS 課程 和 React課程歐，想快速練功的人很適合唷😎！（中文教學）
上次推過Codcaedemy後，這次來跟大家介紹 W3Schools，上面資源豐富（應有盡有），重點是大部分免費唷（不過是英文網站，有關 language barriar 的部分在這裡就不為大家解惑嘍）！
希望以上心得筆記和資訊有助於大家更了解JS的運作～ 如果覺得獲益良多歡迎繼續關注我！
有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣
那～我們下禮拜見嘍！👋👋👋
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
references 參考資料：
疫情之下，原本實體活動全都改成線上，活動分享全都在網路上很容易錯過，這邊整理了幾個跟數位教學相關的活動資訊給大家參考，分享順序為活動時間⏰ 1. Google Workspace技術整合術 Google Workspace for Education (原 G Suite 教育版) 能透過 Gmail、Google Drive、Google Calender、Google Meet 和 Classroom 等通訊與協作應用程式創造輕鬆與順暢的學習環境，並促進協同合作以提升數位學習與教學成效，而且還會為學校資料提供雲端安全性防護…
實體的教室變成一格一格的畫面，原本吵雜的下課時間也變成掛斷通話的系統聲。原本在班級中的歸屬感慢慢消失了，久而久之，孩子的對於學習，不再有群體的感覺，只是孤軍一人學習、複習、考試，甚至是畢業典禮都少了一份臨場感。因此，今天要和大家介紹一款現在在教育界還很少被提到的軟體-Gather。 Gather 如果你還不知道Gather，或是直覺的把Gather與虛擬會議室連結在一起，不妨先看看Gather裡的特色： 介面是像素型RPG 每個人自由創建一個角色 上下左右輕易控制角色 走道其他角色旁邊能互相討論 小遊戲battle 光是這五點特色，就足以推派它成為遠距教學的工具，除了打造不同空間的地圖外，最特別的是Gahter打造前所未有的臨場感，人與人之間只有靠近到一定距離，才能聽到彼此說話聲音，而相對應的，離開後聲音就會漸漸聽不到，就連白噪音的設計也是如此，非常的逼真。 不知道老師們會不會因為搭建地圖覺得麻煩，或是看到2D介面怕學生當遊戲在玩而不考慮這款軟體，換個角度思考，藉由不同地區的老師們集思廣益，打造出最適合學生學習的環境，像是不同學科的教室、戶外自然生態區、操場、籃球場等等....都可以更貼近真實校園，而像素的介面正好提高學生的學習意願，老師們擔心學生過於沉迷時，也能用全體廣播放上課鐘聲，或是讓學生們聚集在同一區，鏡頭站起來動一動 (另外推薦Active Arcade -> 趣味運動的APP )，就像早操一樣很真實。 線上教學缺乏臨場感，Gather可以創造了讓大家「一起在一個遊戲世界」的凝聚力。縱使Google Meet、Teams 雖然也可以進行討論，但若要每堂課要穿梭在不同會議間，節奏不流暢，使用Gather可以讓學生更自由地移動，相對應的老師也可以神出鬼沒地到處「旁聽」。 教孩子用科技解決問題，如果老師們也努力著示範給孩子看，創造出獨一無二的學習空間，相信對於孩子學習的歷程中，有莫大收穫。但到底怎麼開始使用？別擔心，這次快樂學程式邀請到Gahter界的大神 阿岳，要來和大家分享Gather的6大應用技巧，限名額唷~…
HTML入門&基本觀念介紹！ 構成一個網頁，最重要的就是他的結構，而HTML就像是他的骨架，而CSS就是像是我們身體上的肌肉一般，而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息，那麼HTML究竟是指哪些語法呢？ 什麼是HTML? HTML全文又稱為HyperText Markup language ，也就是所謂的超文本標記語言，是網頁構成的基本要素，換言之，網頁就是由一堆html所構成，透過瀏覽器，顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說，HTML有以下幾個重點： HTML的基本架構： HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容，透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎？ 答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨，怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處 這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。 如果你覺得爬網站麻煩又費時，不妨直接點擊快樂學程式的網頁前端課程，老師直接手把手帶你入門HTML ！完整的基礎入門課程省下你獨自摸索花費的時間！ 課程上架Udemy ! 準備一個輕鬆的週末，只要一天的時間，帶你建置靜態網頁。從實作中打開靜態網頁的大門，讓你的研究之路不是只有自己，有我們跟你一起努力！課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課！如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。快樂學程式
什麼是HTML? HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理 不管你是小時候從撰寫無名小站為了要修改你的樣式，而開始瞭解HTML和CSS為何物，或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考！ 編寫基本的HTML： 先讓大家看一下一個基本的HTML文件格式為： <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…
PHP是什麼?3分鐘PHP基本介紹！ 大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼? PHP語言的全名是(PHP: Hypertext Preprocessor)，和ASP、JSP等都是動態網頁開發語言，不過，PHP擁有跨平台的能力，無論是在Linux(最適合)、Unix、 Windows都可以執行運作，不像微軟 的ASP只能在Windows平台上執行，而且PHP是免費的，並可結合多種資料庫伺服器，如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。 PHP語言是伺服器端(Server)執行的網頁，不像一般HTML網頁，只要單機下開啟檔案就可以檢視網頁，PHP必須先在伺服器端執行完後，再將結果傳至使用者端(Client)的瀏覽器中檢視結果，所以必須使用網站伺 服器，且伺服器要支援PHP。 如何學好PHP? 要學好PHP，要有目的，要有一個想寫的東西，寫個學校網站，寫個校友系統，寫個簡單的新聞區或相簿...等，都可以，盡可能的和工作和生活結合，利用程式來簡化繁瑣的人工步驟，或者提昇工作效率，有目標，才會有動力，才會有想法。 學PHP不需要背，背不完的，只要懂就好了。像函數就不用背，常用的打久了你就背起來了，不常用的，等到要用時，知道去哪裡找就好。換言之，函數懂越多，功力越高強。 程式碼可以複製貼上，但一定要知道為什麼要這麼寫，不要傻傻的照著打，可以的話，自己打一遍最好，最上乘就是可以說出每一行程式碼的作用和前因後果。或者，故意打錯，看看會怎樣。錯誤訊息看久了，功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache…
Sildenafil citrate oral jelly Combiné avec les données de départs 2, on leur a demandé de type 5 de tadalafil…