Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
📌 首先，我們來暖暖身，複習一下何謂變數，又何謂宣告變數？
如果把變數比喻成一個個空箱子，撰寫程式的我們就是個居家收納達人，我們可以任意地、隨興地把任何和喜歡的東西（像是襪子、內褲、撲克牌等）擺入不同箱子中。於是，原本空的箱子隨著時間內容物就變得越趨豐富，一個個箱子也逐漸出現有了差異。但你一定會疑惑說都是一樣的箱子要怎麼光看表面就知道裡頭裝了些什麼，這時候就要使用到妙用「標籤紙」來讓每個承裝不同性質物品的箱子擁有名字標籤 (name tag)。而宣告變數就是將箱子取名、並告訴大家裡面收納了什麼的過程，像是我們可以定義一個變數為 irisIsTheQueen：
var irisIsTheQueen = 87;
那麼從這時開始有個叫做 IrisIsTheQueen 的變數，而它的裡頭的值就是 87。
var irisIsTheQueen = 87; console.log(irisTheDumb);
但是若突然問電腦說 IrisTheDumb 是什麼意思，它一定會當場驚呆（想說你怎麼可以講出實話）然後給你一串 “IrisTheDumb is not defined.” 由此可見，如果要電腦找出某個箱子，就必須指名道姓，也必須確定該箱子有裝過東西（有被定義過）唷！
🦖 恐龍君小補充：
變數的範圍有分為全域 (global) 和區域 (local) ，其依據變數擺放位置不同而產生不同效力。
🧲 For example,
const irisBaby = () => {
let baby = 'littleI';
console.log(baby); // littleI
};
irisBaby(); // littleI
console.log(baby);
// ReferenceError: baby is not defined 我已經把會出現結果於兩斜線（//） 後列出。
() => 此符號為「箭頭函式」，為函式的簡要寫法，若全部展出來長這樣：const irisBaby = function() {….}
由上面舉例可見，在函式內定義的 baby 並不會對函式外的顯示有影響，所以在 { } 外要求印出 console.log(baby); 僅會顯示一大串的英文字 ReferenceError: baby is not defined… ，表示 baby 這個變數還未被定義過（未被儲存於記憶體中過）。相對地，如果改成以下例子，就沒有前一個例子變數遮蔽的情況。
const isSmallIris = 'genius'
const printsmallIris = () => {
return smallIris; // genius
};
console.log(printsmallIris()); // genius
console.log(isSmallIris); // genius 因為我們事先將 isSmallIris 定義在函式之外，因此當我們要求電腦顯示 isSmallIris 時，console.log(isSmallIris) 的結果就會產生 “genius”。若要列印出 printmallIris() 也會同樣地會得到想要的效果。因此，我們寫 JS 時必須特別注意定義的「位置和方式」，才不會讓電腦很問號❓唷！（然後又得花時間debug…)
📌 一起來看看JS運算子 (Operator) 有哪些吧！
🔎 這裡只介紹最常用的唷～（如果看完我的介紹對更深入的內容有興趣的話，文末會放上連結，方便日後閱讀完本文後自行自修研究🤓
1. 算術運算子 (Arithmetic Operators)
💛 最基本的運算子就是連小學老師都有教的「加、減、乘、除」
+ 加
– 減
* 乘
/ 除
🧲 For example,
1 + 2 = 3;
1 – 2 = -1;
2 * 2 = 4
2 / 2 = 1;
💛 再來就是國中老師最愛擺出來嚇唬我們的餘數定理🙈 不過不擔心，這裡沒有要折騰你，就是談談單純餘數就好
% 餘數
🧲 For example,
10 % 3 = 1 // 10 除 3 餘 1
聰明的你，應該不難猜到我們 JS 中判斷「奇偶數」的方法～就是讓隨意一個數字 % 2，若餘數結果是 1 該數字即是奇數，能整除的就是偶數嘍！
999999 % 2 = 1 // 奇數
💛 最後一組特別運算子，長成「加加」或「減減」型態，分別表示「加一」或「減一」
+ + 連加１（遞增）— 英文為：increment
– – 連減１（遞減）— 英文為：decrement
🧲 For example,
++a 相似 a++ = a + 1 // 等同於「 a 加一 」
b = ++a 相似 a++ = a + 1 // 等同於「 b 等於 a 加一 」
🎥 插播 💿
「加加」(++) 或「減減」 (–) 放前放後示意上的微小差異就不進行探究，先把結論記起來即可！
🦖 恐龍君小補充：
「加、減、乘、除」符號也可用於連接字串 (String)，譬如說：
var beVerb = "is"
console.log('Iris ' + beVerb + ' intelligent.') // 列應出 "Iris is intelligent." 🔔 提醒：記得加空格唷！
我們會把「加、減、乘、除」也視為「字串運算子 (String Operators)」，因為他們也有同時串連字串的ㄎ功能。
2. 指定運算子 (Assignment Operators)
💛 指定運算子顧名思義需要指定一個值給某一變數，譬如若要將 b 值指定給 a 變數（“b is assigned to a”），可以寫成
a = b;
呈上，同理：若要將 a + 1的值指定給 a 變數 ，要表示成：
a = a + 1;
🚫 千萬不要唸成「a 的值等於 a + 1的值」（大錯特錯！）
💛 再來我要來一個常見的特殊寫法，有點類似上一點的「加加」和「減減」，這個特殊寫法長這樣：
a += 1
寫法雖與前一行型態不同，但意思完全相同～ 可以說這是 a = a + 1的懶人（聰明）寫法😎
📎 小結：a = a + 1 === a += 1
同理：
c = c – 3 === c -= 3
f = f * c === f *= c
很容易吧！
3. 比較運算子 (Comparison Operators)
比較運算子相似於我們平時熟悉的「大於、小於和等於」，當然有大於、小於和等於就會有「大於等於、小於等於和不等於」，以下我逐一帶過～
💛 等號（==）
🧲 For example,
6 == 2 * 3 // 兩邊相等，以兩個等號（==）表示
💛 不等號（!=）
‘Iris’ != ‘genius’ // 兩邊不等，用一個驚嘆號（!）一個等號（=）表示
💛 大於（>）、小於（<）、大於等於（>=）、小於等於（<=）
5487 > 87 // 大於
87 < 520 // 小於
3 >= 3 // 大於等於
3 <= 99999 // 小於等於
🦖 恐龍君小補充：
== 不等於 === ，前者「 == 」表示寬鬆的等於（值相等即可），後者表示嚴格定義的等於（值和樣態都不必需相等）
3 == “3” // true 兩邊雖相等，但等號左邊為數字、右邊為字串
3 === 3 // true 兩邊完全相等，所謂完全相等指的是「值」和「樣態」都必須相等
3 === “3” // false 左邊為數字、右邊為字串，在嚴格定義下兩邊不等
4. 邏輯運算子 (Logical Operators)
💛 邏輯AND ，符號表示方式：&&
若前後都是「 true 」，答案才會回傳「 true 」；只要任一邊答案是「 false 」，結果就為「 false 」。理所當然地，如果兩邊都是「 false 」，答案也會是「 false 」，即高中數學交集的概念。
💛 邏輯OR ，符號表示方式：||
只要前後任一者為「 true 」，答案就為「 true 」，即高中數學聯集的概念。
💛 邏輯NOT，符號表示方式：!
即「否定」的概念，「 true 」的 邏輯NOT是「 false 」；「 false 」的 邏輯NOT是「 true 」，就這麼簡單。
🧲 For example, 我們來看看以下情況下會是什麼結果，如果可以話也可以一起跟著做練習唷！
var irisa = true || true; // 回傳結果 true var irisb = false && true; // 回傳結果 false var irisc = false || true; // 回傳結果 true var irisd = false || (3 == “3”); // 回傳結果 false var irise = false && (3 == “3”); // 回傳結果 false var irisf = 'Intelligent' || 'Superb'; // 回傳結果 ‘Intelligent’ var irisg= 'Intelligent' && 'Superb'; // 回傳結果 'Superb' var irish = ! false; // 回傳結果 true
5. 位元運算子 (Bitwise Operators)
位元運算子與 2 進位法密切相關，因此不熟悉 2 進位法的人可能要先惡補一下再進行這個 part 嘍！
先備知識：
10 以 2 進位法表示：1010 (2 + 8 = 10)
15 以 2 進位法表示：1110 (2 + 4 + 8 = 15)
這邊位元運算子的概念其實與上面邏輯雷同，但取而代之的是 2 進位法思維。
🧲 For example, 以上舉了兩個數字 10 和 15 為例…
💛 & (AND) 兩邊皆須為 1 ，回傳值才會為 1
1010
1110
& ——–(and)
1010 (2 + 8 = 10)
💛 | (OR) 任一邊 1 即回傳值 1
1010
1110
| ——– (or)
1110 (2 + 4 + 8 = 15)
💛 ^ (XOR) 兩邊一樣回傳 0，兩邊不同回傳 1
1010
1110
^ ——– (xor)
0100 (0 + 0 + 8 = 8)
<< 表示「左移」
0100 << 1 // 往左移一位變成 1000； 值從 4 變成 8 （乘兩倍）
>> 表示「右移」
0100 >> 1 // 往右移一位變成 0010； 值從 4 變成 2 （除兩倍）
📌 接著，我們來瞭解一下什麼是 if-else，什麼又是 else if 吧！
這裡說的 if-else 就是我們耳熟能詳的「條件式」，以下用最簡明易懂的說法舉例，希望有了解我的用心～ （對！就是 18 歲的部分！😏
🧲 For example,
if (irisAge > 18) {
console.log(‘It can’t be true’);
} else {
console.log(‘So young a girl!’);
} 當 Iris 的年紀的值大於 18 時，回傳訊息： ‘It can’t be true’；除了這個情況之外的年齡值都回傳：‘So young a girl!’
現在我們加入 else if 觀念：
if (irisAge > 18) {
console.log(‘It can’t be true.’);
} else if (irisAge = 18) {
console.log(‘Iris is blooming.’);
} else {
console.log(‘So young a girl!’);
} 當 Iris 的年紀的值大於 18 時，一樣回傳訊息： ‘It can’t be true’；當Iris年紀等於 18 時，回傳：‘Iris is blooming.’，除了這個情況之外的年齡值都回傳：‘So young a girl!’
📌 再來，讓我來說說最簡單不需要太多腦版本的「迴圈」觀念吧！
第一部，所謂「迴圈」就是不斷重複一個動作（就像跳針），不過如果你的腦袋都還正常又不想電腦燒壞，應該都不會想讓迴圈無限巡迴，所以正常來說，迴圈都會有終止點。話不多說，直接來看看範例吧！
🧲 For example,
var iris = 87
do {
console.log(iris);
iris += 2
} while (iris < 8787); // 回傳結果為從 87 到 8785 的奇數 while 「當」iris 這個變數小於 8787 的情況下，do 「做」以下動作：印出 iris 的對應值，並把 iris 值加 2。以上示範為 do … while 語法，當然還有其他寫法，但我們要的是入門的對吧？
📌 最後，簡單介紹 JS 的常用內建函式後，就可以收工嘍～（耶
1. eval(string)：eval 中輸入的字串或變數會被直接當做程式碼執行
2. isFinite(number)：用於判斷一個數字是否是為有限數值
3. isNaN(xxx)：用於判斷是否為非數字
4. parseInt()：將參數轉換為字串時，會忽略字串前的空格，直到找到第一個非空格的字元。
5. parseFloat()：從第一個字元開始解析參數的每個字元，一路到字串末尾，或解析到碰到一個無效的浮點數字字元為止。
6. number():
若為 Boolean 值，「true」和「false」值將分別被轉換為 1 和 0；若是數字值，僅進行簡單的傳入和返回；若為 null，則會返回 0；最後，如果是 undefined ，則返回NaN。
7. escape()：將字串編碼
8. unescape()：將碼字串解碼
🔥下集預告🔥
下次我們將會介紹Javascript中的大魔王 → ReactJS！有沒有很期待呀～
偷偷跟你們說～小白🙆♀我的JS都是跟Glove大師學的😎
如果對於ReactJS有興趣，或是想增進JS能力（更深入了解），這裡連結我會放上學習資源連結，供想進修的人做參考～
Glove 也有在 Udemy 上開設 JS 課程、打基礎React課程歐！（中文教學）
另外，想做免費練習我這邊介紹Codcaedemy可以做參考（不過是英文的唷🧡～）
希望以上心得筆記和資訊有助於大家更了解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…