【 JavaScript 】2021最硬筆記、心得練習實作｜JavaScript六角學徒試煉

2-7| undefined 介紹

你新增一個變數，瀏覽器知道了;

但這個變數沒有被賦予值，所以回傳undefined。

如果沒有下變數，直接寫

console.log(price); 會報錯！

函式#3

3-1|為什麼需要 function？（未練習）

重複性很高的動作，把程式碼設計成自動去執行。

3-2| function的寫法？

宣告函式函式名稱
function greet(){
alert(‘歡迎光臨！’);
alert(‘請問你要點什麼！’);
}
//執行函式
greet();

➤ () 可以放變數

➤ {}內容全部執行

#常見錯誤

// 1.呼叫函式，未加();

// 2.{}少一個}

greet;

✪在console打window (瀏覽器紀錄你在JS寫的function和變數和JS的所有狀態等）

3-3| function帶參數

function count(oneNum){
var total= oneNum*10;
console.log(‘總數等於：’+total);
}
count(10);

修正過後 CodePen

可以帶超過１個的參數嗎？ＯＫ

function count(oneNum,twoNum){
var total= oneNum+twoNum;
console.log(‘總數等於：’+total);
}
count(10,40);

修正過後 CodePen

3-4| 全域與區域變數★★★★★

function count(oneNum,twoNum){
var total= oneNum*twoNum;
console.log(‘總數等於：’+total);
}
count(10,88);
console.log(total);
//console.log(total); 為啥找不到?

console.log(total); 為啥找不到?

➣function裡面放var total執行完，銷毀裡面的變數(釋放記憶體)->區域變數。

➣記憶體儲存那麼多區域變數，記憶體越來越肥!

開發上，若要把var total;撈出來

var total; (全域變數)
function count(oneNum,twoNum){
var total= oneNum*twoNum;
console.log(‘總數等於：’+total);
}
count(6,10);
console.log(total); –>undefined

CodePen實作

3-4| hoisting 、var 觀念

hoisting:自動把function放到最上面執行(function是優先的)

CodePen實作

function放哪裡都可以。

建議還是function放上面，下面執行(符合使用者習慣)

3-5|function 計算機案例 (1)(2)(3)

➣事件:像是onclick 點擊觸發事件

➣撈值用value

function(){} 這個沒有名字的函式

➣typeof ()–>查東西到底是字串還是數字

➣轉換型別

var num=”3″;
typeof(num)
<-string
num=parseInt(num)
<-3

codepen實作

3-8|function 搭配 return 寫法

➣ 回傳運算完的值

codePen練習

助教推薦概念延伸：JavaScript 基礎知識-function 搭配 return 用法

陣列(Array)和物件(Object)#4

4-1| 為什麼需要陣列？

//農場

farmMaster=’Yuki’;

farmdog1=”小白”;

farmdog2=”小黑”;

farmcorn=7; //第一個農場採收７個玉米

farmcorn2=50; //第二個農場採收50玉米

靠邀！也太多變數－－>為了更有效率的紀錄

4-2| 陣列介紹

前言：

農會想協助地方的農民做統計，希望YUKI的水果園使用陣列和物件的格式。

var farmer=”YUKI”; 農夫名稱是YUKI

var fruitField=2; 水果田有2個(第一個水果田有10個水果：第二個水果田有５個水果)

var fruitField =[10,5];

var cat=”拉拉”;

var cat2=”沈沈”;

var cats=[“拉拉”,”沈沈”];

–>相同屬性適合用陣列紀錄

4-3|陣列寫法教學

➤從第０個開始數０１２３４５６７８９

➤for迴圈可以把陣列的東西（資料），依序抓出來，做相加等動作。
console.log(cornField[0]); 陣列的世界，第1個是0
console.log(cornField[1]); 陣列的世界，第2個是1

➤有空陣列這種東西存在，var cornField=[];

➤.push 用來在陣列加上（數字／字串／物件）

➤.length 用來知道陣列的長度／個數

CodePen 實作

➤用陣列方方式每個玉米田分別有幾個玉米。

var cornField=8; 第一個玉米田有８個玉米
var cornField=5;第二個玉米田有５個玉米
var cornField=6;第三個玉米田有６個玉米
var cornField=[8,5,6]; 用陣列方方式每個玉米田分別有８、５、６個玉米。

➤push是可以用來增加後面的玉米田有幾個玉米方式

➤length是用來知道目前總共有幾個玉米田

4-4|物件簡報介紹

怎麼得知這個農場有什麼東西呢？指定這個農場的東西

var farm={
farmer:‘sally’, (加逗號做區隔)
dog:[‘Apple’,’Tom’]
}

farmer:‘sally’, (加逗號做區隔)

（屬性property）：值(value),

4-5|物件寫法教學

var farm={
farmer:’Sally’,
}
farm.chick=15; (. 加入物件裡面)
console.log(farm);

➤用.撈值

4-4|物件＋function運用技巧

➤物件裡面可以放function （函式）

4-5|物件+陣列設計流程

➤陣列可以放物件／字串／數字／布林

var farms=[
{
farmer:’Sally’
},{
farmer:’Yuki’
}
]
console.log(farm[0].farmer)

控制判斷(運算子、if、switch)#5

5-1| 以日常生活為例探討為何需要控制判斷

人類會做【判斷】，去判斷自己是肚子餓不餓，若餓的話，餓了幾分!?

如果完全不餓—>不吃東西

如果1-5表現餓的程度，數字越高代表越餓，當餓度<3時，吃沙拉或水果，當餓肚>=3，吃麵或飯。

5-2| 比較運算子：==、!==

= 這是【賦於】

==/=== 這是【等於】

!= / !==這是【不等於】(!代表相反)

!= 是不等於

而 !== 是嚴謹模式的不等於，差別與前面章節提到的 == 和 === 是相同依據。

!= 在運算元不相等時返回 true

!== 則在運算元不相等或類型不相同時返回 true

舉例：

3 != ‘3’ // false

3 !== ‘3’ // true

5-3| 比較運算子：==、!==程式碼範例

CodePen練習2

5-4|比較運算子：嚴謹模式 ===

===

JS世界中，true==1 (開啟/OK)和 false ==0 (關閉/不OK)

But

false===0

5-6|比較運算子：＞、＜

大於>
小於<
大於等於>=
小於等於<=

5-7|邏輯運算子： &&、||、!

&& AND
var isID =true;
var isIn=false;
var isPaper =true;
console.log(isID==true);
var isID == true && isIn==true; // 所有條件都需要成立
isID==true && isIn ==true && isPaper ==true;
|| OR
var billFull =1200;
var isVIP =false;
bill>1000 || isVIP ==true; //其中一個有滿足，就會回傳true
console.log(bill>1000 || isVIP ==true);
! NOT
2>3
<-false
!(2>3)
<-True

Codepen

5-8|邏輯運算子範例

5-9|if-簡報介紹

if (hungry==‘飢餓’){ //判斷式
eat(); //陳述式
}
成立就跑大括號內容，不成立就不跑
大括號可以寫很多程式碼跑

hungry=’飽足’; <-false

hungry=’飢餓’ <-true (進行進食動作： eat();)

if(hungry==’飢餓’)

5-10|if-程式碼教學

var hungry =’飢餓’;
if(hungry==’飢餓’){
console.log(‘我好餓’) ;
}else{
//上面不成立，就跑這囉
console.log(‘老娘很飽’)
}

codepen

5-11|else if 簡報介紹

第一個狀況：超飽

第二個狀況：不餓，但想吃東西 ->行為：吃沙拉

第三個狀況：超餓->行為：吃飯

1-10 餓－飽 var hungry =8;

if(0<=hungry<=3){
eat(‘飯’);
}else if(hungry<=7 && hungry>3){
eat(‘沙拉’);
}

5-12|else if程式碼教學

▶我的問題:

function(){} 放在判斷式裡面或外面，應該也是全域或區域的差別吧？

請問建議放判斷式裡面還外面呢？

▶助教建議:

以這份作業來說，會建議把函式宣告在判斷式的外面，

因為如果將函式放在判斷式裡面，當判斷條件沒有達成的時候函式就不會被定義，

導致需要在每一個判斷式 (if, else) 都重複宣告一次 function。例如:

if( mySleeping==0){
   // 未定義函式，在此條件會出現錯誤
  sleep('不想睡');
}else if(mySleeping>0 && mySleeping<=5){
  // 只有在這個條件達成的時候， 函式才會被定義。
  function sleep(slpContion){
    console.log('我'+slpContion)
  }
  sleep('還算清醒');
}else{
  // 未定義函式，在此條件會出現錯誤
  sleep('夢周公去囉！');
}

而若是宣告在外面，則不論條件為哪一個，都可以成功呼叫函式。

再來是作業的部分，在判斷式的撰寫上是正確的，做的很好 ~

5-13|switch－簡報介紹

var perfer=”拉麵”;
function eat(food){
console.log(‘我要去吃’+food);
}
// 設立一個表達式switch()且包含一個條件。
switch(perfer){
case’牛排’: // case: 後方就會開始比對，如果符合就會執行相關聯的的程式碼。
eat(‘牛排’);
break; //每個case: 後方皆會補上break;原因是用來阻止已完成，後方的區塊繼續執行。
case’生菜沙拉’:
eat(‘生菜沙拉’);
break;
default:
eat(‘拉麵’);
break;
}

5-13|switch－程式碼教學

codePen 練習2

我的問題:

我對於表達式的定義不太理解，是只要有變數／運算子的就可以稱為表達式嗎？

而有if ／switch 就稱作判斷式嗎？ (靠夭，概念錯誤XD)

助教建議:

陳述式 vs. 表達式 – 建議參考文章：https://reurl.cc/9ZEvba

判斷式 vs. 運算子 – 建議參考文章：https://reurl.cc/0Do9Vl

如同文章所述，

陳述式：不會回傳結果 (值)。例如：宣告變數 var a。

表達式/表示式/運算式：會回傳結果 (值)。例如：運算子 a = 1。

判斷式：JS 用來控制流程，當指定的條件成立時，就會執行後續的指令。例如：if…else if 和 switch。

迴圈#6

6-1|為什麼要學迴圈？

相同性質可以用for迴圈跑出來了～

console.log(farms.length);
//2
➜取得陣列長度

console.log(farms[1].farmer);
➜取得第Ｘ個陣列值

那我有９９９個農場和９９９９個農夫，我豈不是要寫很多個？

因此，迴圈來解救你了！

for (var i=0;i<farms.length;i++){
console.log(‘第’+（i+1）+’個農場主人是’+farms[i].farmer);
}//第１個農場主人是YUKI// 第２個農場主人式 SALLY➜計算farms個數（有幾個農場）➜從０開始計算，所以是0+1==1 (第１個農場）1+1==2 (第２個農場)

6-2|for寫法

先從if（）{}來思考！

➜滿足（），跑{}內容

// 初始狀態; 條件; 更新內容
for(var i=0;i<3;i++){
console.log(i);
}

for (){}
小括號滿足，跑大括號！

var i=0;
i<3; （0有沒有小於3;有的話就跑{console.log(i)}）

初始狀態; 條件; 更新內容
（一）先了解你的初始狀態
（二）去比對／驗證你的條件，符合就跑{}
（三）條件++／–重複來一次

助教補充【i++為什麼等於1】

MDN 對算術運算子 ++ 的解釋是「將運算元增加 1」。
依照 ++ 擺放的位置不同，運算的順序有所差異。
這邊以 for 迴圈搭配 i++ 當作範例：
// var i = 0：宣告變數 i
// i < 10：建立判斷式 i < 10，判斷結果為 ture 就進入 {} 區塊
// i++：執行完 {} 區塊內容之後，回傳當前 i 的值再加一
// 迴圈第一次，當前 i 的值為 0 (小於 10)
for(var i = 0 ; i < 10; i++){ // i < 10 成立
console.log(i); // 0
}

ＣodePen練習

補充

6-3|for-array寫法

CodePen練習2

6-4|for if 寫法

CodePen /CodePen

6-5|for ___i++寫法

let i =0;
i=i+1;
i++;
i+=1;

6-6|for-加總寫法

6-7|for和Break運用 (★)

6-8|JSON格式介紹

真正的資料，比較有成就感!!

JSON:資料交換的語言

資料庫語言不一樣(Java、c++)等,想出一種格式可交換資料!

6-9|JSON VIEW chrome 插件

政府資料開放平台(免費資源等)

維護資料的維護者(這個人是很重要的)，不然資料容易過時

JSONView 下載連結 (讓資料看起來比較整齊)

6-10|擷取 JSON 格式流程

6-11/12|for – opendata 範例 (上)(下)

codePen CodePen

助教建議:

這邊有一個小建議，諸如「+」「=」「<=」這些運算子，可以將他們左右的空格設定為一致，如「a + b = 2」, 這樣程式碼是比較易於閱讀的喔

DOM#7

7-1|什麼是 DOM ？

瀏覽器>DOCUMENT —>解析可以用js操控這些元素

7-2|querySelector – 選擇單一元素？

CodePen 只抓第一筆資料

7-3| querySelectorAll – 可重複選取多個元素

Html 有兩筆，若使用querySelector只能選到第一筆資料

第二筆無法選擇，因此要使用querySelectorAll，這個出來的資料是陣列，

在用for迴圈依序給值。

7-4| setAttribute – 增加標籤屬性

7-5| 插入 HTML 標籤的兩種方法

innerHTML

-方法:組完字串後，傳進語法進行渲染

-優點: 效能快

-缺點:資安風險，要確保來源沒問題

creatElement

-方法:以Dom來處理

-優點: 安全性高

-缺點:效能差

7-6| innerHTML (上)

7-7| innerHTML (下) ★

助教建議:

建議參考文章：https://reurl.cc/ra1e2E

innerHTML 是將 HTML 某個 DOM 元素既有的內容覆蓋掉，

而插入的內容必須是字串型別，

因此才會使用單引號或雙引號，並且搭配加號，將字串串連起來。

變數是「用來儲存資料和進行運算的基本單位」，

可以將變數想像為一個盒子，用來存放資料。

因此把變數填入兩個加號中間，即可將字串串連起來。

CodePen 助教回復

7-8| innerHTML 與 for 運用

innerHTML : 全清空，再增加

createElement: 保留原來的HTML，再增加節點

7-11| XSS 跨網站指令碼注意事項（Cross-site scripting）

在html標籤蓄意埋一些程式碼

第７章，助教補充小整理

1. setAttribute(‘屬性名稱’, ‘屬性的新值’)：可以用來設置指定元素上的某個屬性值。

狀況 a. 如果屬性已經存在，則更新該值

狀況 b. 原本屬性不存在，則使用指定的名稱和值添加一個新的屬性。

2. getAttribute(‘屬性名稱’) 的確是用來取得屬性的值。

補充一點，如果屬性不存在，其回傳值會是 null 或 “” (空字串)

3. .textContent 可以用來「取得」或「設置」指定元素或其後代的文字內容。

舉例 a : 取得 class 名稱為 titleClass a 之第一個元素的文字內容。

document.querySelector(‘.titleClass a’).textContent;

舉例 b : 設置 class 名稱為 titleClass a 之第一個元素的文字內容為 2。

document.querySelector(‘.titleClass a’).textContent = 2;

4. .innerHTML 可以用來「取得」或「設置」指定元素中的 HTML。

舉例 a : 取得 class 名稱為 titleClass 之第一個元素的 HTML 內容。

document.querySelector(‘.titleClass’).innerHTML;

舉例 b : 設置 class 名稱為 titleClass 之第一個元素的 HTML 內容為標題2“。

document.querySelector(‘.titleClass’).innerHTML = “標題2“;

Event#8

8-1|甚麼是event ？

操控瀏覽器，你們會點擊、下拉往下滑

這些都是event事件，為了讓使用者體驗更好。

參考:https://www.w3school.com.cn/js/js_events.asp

8-2| event 物件 – 告知你當下元素資訊

8-3| 觀念篇 – 各種事件綁定的差異

8-4| addEventListener – 事件監聽

8-5| 綁定事件的語法差異

8-6| stopPropagation – 中止冒泡事件

8-7| preventDefault – 取消預設觸發行為

8-8| e.target – 了解目前所在元素位置