javaScript

html掌控網頁的結構，css負責網頁的樣貌，javaScript負責操控使用者與網頁的互動狀態，例如鍵盤的上下左右/滑鼠的點擊等等

雖然css可以返還使用者的一些狀態例如hover，或是點擊後的超連結等等小互動，但比起javaScript賦予的操作可以說是小朋友。

然後css還有一個小缺點滯留程度很低，當離開範圍:hover就解除當焦點移開:focus就會解除，這樣連續性的動作就無法做到了。

那麼我們就來簡單認識一下javaScript，比較常用好用的會更詳細的再說，今天就來說說使用javaScript的注意事項

該寫在哪

<script>
    ...
</script>

<script src="xxx.js"></script>

通常程式都會寫在script的區塊中，又或是寫在別的檔案在匯入到這個html中

要注意的是記得把js的部分放在檔案的後面，如果放在前面像是css的一開始就匯入，那麼可能會因為網頁還未載入好，就預先載入js，而js又剛好有讀取物件的程式碼例如document.getElementById()

console.log

你可以把他看成python又或是c語言之類會出現的print

console.log(x)，可以把其內的東西都給print出來不論是物件/元素/變數/追蹤資料等，尤其是在串接api要追蹤你所打的路徑是否正確用這個，可以很快的明白你的值跑去哪了，你的值有沒有套用等等

擅用他，可以讓你對網頁要操作更精密的部份時更好掌控，至於在網頁中怎麼查看如下圖。

var/let

再來就是很常用到的變數宣告var/let
var是會溢出到整個function區塊都可以使用他，而let則不會
const

var a=10;
function test2() {
  //在這個函數中只看看見z變數
  var z = 3;
  console.log(z);
}

function test1() {
  for (var i = 0; i < 2; i++) {
    var x = 1; // 使用 var 但作用範圍是整個test1
    let y = 1; // 使用 let 但作用範圍僅限for迴圈

    console.log(x);
    console.log(y);
  }

  // 可以看到x，但看不到y
  console.log(x);
  console.log(a);
  console.log(y);//報錯點
}

test1(); //會報錯
test2();
console.log(z);//會報錯

要記得很重要的事情，如果出現報錯可能會把後面的執行擋下來，所以你要看到console.log(z)的報錯要把test1()拔掉

const

const的區塊範圍跟let一樣僅限於自己的範圍不會擴增到整個function

function test1() {
    for (var i = 0; i < 2; i++) {
     const a = 10; 
     a = 20; // 會引發錯誤，因為const無法重新賦予值，但在run一變該函數無引響(指的是const a)的部分
     console.log(a)
  }
 console.log(a); //在外面看不到a值
}

test1();

注意事項和function

最後js也是有分全域變數和區域變數了，雖然var會擴增到整個function但不會擴展到全域的部分，其他區塊的function就吃不到這點要注意喔。

然後寫網頁其實很容易會出現重覆性過高的狀況，這時請善用function把類似的東西都已變數的方式帶入，再套用到function當中，不然之後要在審查起來會很亂。

套用的方式像是
var Document=document.getElementById("")
test1(Document)

這樣，不論是哪種語言(function/函數)都可以避免你的程式重覆性過高，這點一定要練好

今天就這樣啦，謝謝觀看~