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

內容目錄

JavaScript 的前世今生#1

1-1 |JavaScript 環境設定 (編輯器、jsbin、console)

編輯器需要:

自動補全功能

下拉提示功能

→減少打錯字的可能性

document.getElementById('footer');

p.s.用atom或sublime要額外加外掛,用vscode不用。

1-2|建構第一個 JS 環境

index 上面載入

1-5|直議器流程介紹

瀏覽器到底是怎麼解讀HTML和JS的咧?

瀏覽器把網頁程式碼取得->解析->變成DOM->解讀元素內容->展示畫面

DOM圖如下:

參考資料https://ithelp.ithome.com.tw/articles/10202689

https://codepen.io/sihyu/pen/poELMwO

把 <script>放到html前面,導致後面效果出不來,卡在alert。

變數#2

2-1| 變數簡介

什麼是變數?

➜常見的資料型別。

(資料型別呈現方式:數字35、字串’Hello world!’、布林true/false)

使用時機?

➜例如:

數字-計算錢/數量等

YUKI身上帶了100元

紅豆餅:13塊。

100-13=87 

字串

很高興認識你!

YUKI:我的名字是YUKI 

->中間發生了什麼事?Sally在腦海中記住了YUKI的名字<-

Sally:很高興認識你,YUKI!

在JS世界要記住的些文字

布林值-是/不是

你肚子餓嗎?

不餓

 

2-2| 變數number介紹

var price=30;

var :用來宣告變數名稱

例子:var cookiePrice =35;

alert(cookiePrice);

Codepen練習實作-先出現35,按完確定後,出現25

Codepen-變數練習

2-3| 變數string介紹

練習在HTML加上字串。

可用+符號,把字串加起來:’你好‘+‘YUKI’=>你好YUKI

Codepen-練習 

2-4| 如何輸出內容?

用alert(”)檢查,彈跳視窗

但一直彈跳視窗也很麻煩

因此,可以嘗試用console

2-5|變數規則

變數命名注意事項:

  1. 開頭不能用數字(123box)
  2. 不能用-跟. (例如:box-number;box.number)
  3. 不能使用關鍵字/保留字(let/this/if/else->JS自己就有的命名東西)
  4. 大小寫有差別的喔(str Str是不同兩個變數)
  5. 變數需有語意化(這是建議-housePrice;toTal)

▶不然會console會報錯,出現 Uncaught SyntaxError: Unexpected number

2-6|變數 – 數字新增刪除修改

▶變數可以用來+-*/

例如:

var fruitPrice=35; 這個水果是35元

var myMoney=15; 我身上帶15元

alert(fruitPrice-myMoney); 彈跳出我缺多少錢!

CodePen練習

2-7| undefined 介紹

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

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

CodePen練習

如果沒有下變數,直接寫

console.log(price); 會報錯!

函式#3

3-1|為什麼需要 function?(未練習)

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

3-2| function的寫法?
 

宣告函式 函式名稱

function greet(){

alert(‘歡迎光臨!’);

 alert(‘請問你要點什麼!’);

}

//執行函式

greet();

➤ () 可以放變數
➤ {}內容全部執行

CodePen練習

#常見錯誤

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

// 2.{}少一個}

greet;

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

3-3| function帶參數

function count(oneNum){

      var total= oneNum*10;

      console.log(‘總數等於:’+total);

}

count(10);

CodePen練習

修正過後 CodePen

可以帶超過1個的參數嗎? OK

function count(oneNum,twoNum){

      var total= oneNum+twoNum;

      console.log(‘總數等於:’+total);

}

count(10,40);

CodePen練習

修正過後 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

CodePen練習

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; //第一個農場採收7個玉米

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

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

4-2| 陣列介紹

前言:

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

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

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

var fruitField =[10,5];

var cat=”拉拉”;

var cat2=”沈沈”;

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

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

4-3|陣列寫法教學

➤從第0個開始數 0123456789

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

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

➤.push 用來在陣列加上(數字/字串/物件)

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

CodePen 實作

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

var cornField=8; 第一個玉米田有8個玉米
var cornField=5;第二個玉米田有5個玉米
var cornField=6;第三個玉米田有6個玉米
var cornField=[8,5,6]; 用陣列方方式每個玉米田分別有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);

CodePen練習

➤用.撈值

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

➤物件裡面可以放function (函式)

CodePen練習

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練習

CodePen練習2

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

===

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

But

false===0

5-6|比較運算子: >、<

大於>
小於<

大於等於>=

小於等於<=

CodePen練習

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|邏輯運算子範例

CodePen

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程式碼教學

codePen

▶我的問題:

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;
}

codePen

5-13|switch-程式碼教學

codePen

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);

➜取得第X個陣列值

那我有999個農場和9999個農夫,我豈不是要寫很多個?

因此,迴圈來解救你了!

for (var i=0;i<farms.length;i++){
console.log(‘第’+(i+1)+’個農場主人是’+farms[i].farmer);
}
//第1個農場主人是YUKI
// 第2個農場主人式 SALLY
➜計算farms個數(有幾個農場)
➜從0開始計算,所以是0+1==1 (第1個農場)1+1==2 (第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

}

CodePen練習

補充

6-3|for-array寫法

CodePen

CodePen練習2

6-4|for if 寫法

6-5|for ___i++寫法

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

6-6|for-加總寫法

CodePen

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

CodePen

6-8|JSON格式介紹

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

JSON:資料交換的語言

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

6-9|JSON VIEW chrome 插件

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

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

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

6-10|擷取 JSON 格式流程

codePen

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

codePen CodePen

助教建議:

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

DOM#7

7-1|什麼是 DOM ?

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

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

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

CodePen

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

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

在用for迴圈依序給值。

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

CodePen

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

innerHTML

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

-優點: 效能快

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

creatElement

-方法:以Dom來處理

-優點: 安全性高

-缺點:效能差

7-6| innerHTML (上)

CodePen

7-7| innerHTML (下)

助教建議:

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

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

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

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

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

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

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

CodePen  助教回復

7-8| innerHTML 與 for 運用

〈重要〉

CodePen

7-9| createElement 寫法

CodePen

7-10| createElement 與 for 運用

CodePen

innerHTML : 全清空,再增加

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

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

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

第7章,助教補充小整理

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 物件 – 告知你當下元素資訊

CodePen

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

CodePen

8-4|  addEventListener – 事件監聽

CodePen

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

CodePen

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

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

CodePen

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

CodePen

六角學院Javascript學徒試煉筆記心得
5/5

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

台中SEO讀書會

(相關資訊歡迎點擊以下按鈕)
Scroll to Top