陣列基礎應用與將javascript套入網頁-第十天

第 12 屆 iThome 鐵人賽

DAY 10

自我挑戰組

Html/Css3/Javascript從0開始自學系列第 10 篇

12th鐵人賽

sss86925

2020-09-10 22:38:48

972 瀏覽

這次主要參考的書（或文章影片）是：「JavaScript資料結構及演算法實作 Loiane Groner著」/youtuber：彭彭的課程之JavaScript網頁前端工程入門

1.陣列的基礎應用
1.1矩陣：雖然JavaScript不支援矩陣，不過可以透過陣列套陣列的方法來模仿矩陣
例如下面這樣：
var grade = []; grade[0] = [90,83,76,92,71,66,90]; grade[1] = [74,65,88,84,90,64,69];
上面這樣就可以表示出一個2*7的矩陣
用來儲存7位學生，兩個科目的成績。

1.2堆疊：堆疊是一種遵從後進先出（LIFO)原則的有序集合，就像疊疊樂的感覺
晚放的積木會被放在上面，移除時也會第一個被移除
那又要怎麼把東西放進或移出陣列呢？
我們可以利用push來添加元素，同時用pop來移出元素，例如：

```
stack.push(1) //在stack陣列中加入1在最上方
stack.pop() //把stack陣列中最上方（後面）的元素移除
```

除了上述兩個在介紹幾個常用的指令
peek():用來獲得堆疊中的最後一個用素，但不會更動堆疊
isEmpty():若堆疊為空返回true，反之返回false
clear():清除所有元素
size():計算堆疊中有幾個元素

2.將JavaScript套入網頁：在學會基本的語法/迴圈/陣列後，最想做的莫過於把它套入網頁中試試看
而要把JavaScript套入Ｈtml有兩個方法：
2.1在script中撰寫JavaScript，作法如下：
<script type="text/javascript"> function toggleMenu(number){ var menu=document.getElementById("menu-"+number); menu.classList.toggle("hide");//利用toggle控制hide /* if(menu.style.display=="none"){ menu.style.display="block"; }else{ menu.style.display="none"; }利用程式控制開合*/ } </script>
2.2第二個方法則是有點像之前介紹過Css的做法
先將Css額外寫成一個檔案，在套入Html中
這裡也可以先建立一個Javascript檔，然後再引入Html中，例如：
<html> <head></head> <body> <script src="javascript.js"></script> </body> </html>
像這面這樣也是直接把javascript.js這個檔案引用進來