跟著W3做~Javascript

 來試試看JS，下面是有問題的部分。

1. Js--Output：window.alert(資訊)，不管放在哪裡，都會顯跳出，再跑網頁耶@
   window.print()，可以直接呼叫印表機列印此網頁。
2. 將按鈕做成可以切換的狀態。
   <script>
   let x=1;  // 重點是將X放在function外面
   function myFunction() {
   if (x%2==0){
   document.getElementById("demo").innerHTML = "Paragraph changed.";
   x = x + 1;
   } else {
   document.getElementById("demo").innerHTML = "Hello";
   x = x + 1;
   } 
   }   </script>
3. var 變數，是1995~2015年使用(針對舊瀏覽器)。let 變數，是從2015年 (ES6) 開始使用。
   const 則是固定變數，一宣告就要給值，設定好就不能變。
   let 與 const 不能重複宣告變數(無法顯示)，例 let a='a' ; 不能再宣告一次 let a='b'; 
   可以 var  a='a' ;  在宣告一次 var  a='b' ; (最後的變數值  a='b' )
4. Let，若是被括號包住，就只能在括號內使用。所以Let 可以保護變數不被修改。
   var 則是括號內外都可以使用。原因是hoisting，感謝shubo分享。
   
5. Const，可以用在array、Object等。這兩個內容物可以修改或增加，但不能重複在設定相同名稱的array、Object。
6. operators，判斷字串大小要注意，A='20'， B='5'，結果B會大於A，原因是判斷第一個字元 (2 < 5 )。
7. Data Type，若是數字加字串，JS會自動將數字變成字串，且由左到右處理。 typeof (x)，就可以顯示是甚麼 type 的變數。
   x = 16 + 4 + "volvo"  #  20volvo
   x = "volvo" + 16 + 4   # volvo164
8. Objects，不要用 new 來新增 string 、 number 、boolean，這樣會變成object，速度會變慢。直接用 let 就可以，如 let  s = 'abc'。
9. Events，使用寫好的function或object，都要加 ( ) 。
10. string method，text.slice(7,13)，從第七個切到第十三個之前(不包含13)，兩個都是位置。
    text.substr(7,13)，從第七個，往後取13個，第一個是位置，第二個是數量。
    text.replace('abc', 'def')，若句子中有很多abc，只取代第一個，後面不變。
    text.replaceAll('abc', 'def')可以取代全部，但在IE不工作@@
    但可以使用正規表示法(regular expression)，可以取代全部。是用斜線 / ，不是用冒號。
    text='5';  text.padStart(4, '0'); ，可以補齊成4個字，前面用0代替。
    text.charAt(0); ，可以取第一個字母，等同 text [0]。
11.  string Search，
    text.indexOf('locate', 15);，可以 locate 的位置。15可以從第15位開始找。
    text.match(/ain/gi); ，可以找到有幾個ain字母(rain，plain都有含)，g表示找全部，不然沒有g，只會回傳1。i 則表示不分大小寫。
    text.includes('world', 12);，回傳true 、false。12表示從12位開始找。
12. string template，可以用~鍵的反單引號‵ ，來包住字串，這樣字串就可以直接放單引號、雙引號、變數。很像python的 f-string。可看範例，也可以直接計算。
13. Numbers，
    15個數字就會不準確，例如16個9，輸出就會變成1e16(e16表示16個零)
    小數點相加也不準，0.2 + 0.1 = 0.30000000000000004
    感謝前端生涯分享(後來發現number methods也有說明)，字串變成數字，Number( '3' )，Number(true) 會得到 1，false = 0
14. BigInt，BigInt(9999999999999999) ;，//16個9，可以解決之前number超過16個數字的問題。
    或是數字最後加個n，let x = 9999999999999999n ; 
    BigInt不能變成小數點，必須轉成Number(x)才行。
15. Number Methods，let x = 9.656; 。 
    x.toString();，將x變成字串。
    x.toExponential(6);，// 9.656000e+0
    x.toFixed(2); ， // 9.66
    x.toPrecision(2); ，  // 9.7
16. Number properties，NaN ( Not a Number )。這邊是探討最大值最小值。
17. Arrays，也是建議不要用new array，直接使用 let cars = ['bmw', 'volvo' ];
    echo cars時，會自動將所有的值，中間加逗號。也可以用cars[0]單獨取出。
    修改值，直接用 = 即可 ， cars[0] = 'BZ';
    長度，cars.length;。排序 cars.sort();。
    跑所有的array值，cars.forEach(myFunction);，就會將cars的值，一直丟進myFunction執行。這裡的vvv可以隨意給名稱，其實有點看不懂@@
    function  myFunction(vvv){
        text += (vvv  + "<br>");  }
    ---------------------------
    新增資料，cars.push('toyota');，或是 cars[cars.length] = 'toyota';
    若是用名稱加入array，長度竟然是0，要呼叫值必須指定名稱。
    person["firstName"] = "John";
    person.length;     // Will return 0
    person[0];         // Will return undefined
    ---------------------------
    原來是區分為有數列的array，跟名稱的object(應該就是python的dic)，上面的person就是Object。
18. array methods，只有length不用括號()，其他都要括號()。
    正常列印array都是直接用逗號區隔，也可以用cars.join('*')來更換符號。
    pop()，從最後去除。push()，從最後加入。
    ---------------------------
    shift()，從最前面去除。unshift()，從最前面加入。
    ---------------------------
    將兩個array合併。cc = cars.concat(airplane);
    python合併兩個dataFrame是 cc = pandas.concat([cars, airplane ])
    ---------------------------
    變數插入在array中間，cars.splice(2,1, 'lexus','mar3');，2代表插入第幾位，1表示要刪除最後幾個，後面要插入的變數若是不給，就等於刪除第2個。
    從前面複製幾個，newcars = cars.slice(1,3);，表示要複製前面兩個(第0個不要，要第1、2個)，但不會修改原本的array，而是創建一個新的array。
19. array sort()，由小排到大。reverse()，由大排到小。
    ※但sort()排數字的時候，若是25跟100，則會先看第一個數字，所以會變成100小於25@@所以搭配一個func，sort(function(a,b){return a-b});這樣就可以由小排到大。( 看不太懂，為何是return a-b。再往下看就有解說了(原來是利用正數(ab互換位置)、負數及0(ab不動)，來區分，不能用true、false喔~所以sort是兩兩相比較n-1次嗎???) 
    ※若只是要找最大、最小值，不建議用arr.sort()，效率低。建議自己寫程式一個一個去比對最大、最小值。
20. array_iteration，很多函式，有些沒有寫出來@@
    forEach(func)要用func跑，會給三個變數，value、index、array。
    ※JS很注重變數的先後順序，目前遇到一個範例是將array的數字*2，自己改寫的時候，let txt=''; 放在 number1.forEach(myFunction); 下面，結果跑不出來。因為myFunction需要txt，所以let txt要放在myFunction上面才行。
    ---------------------------
    map(func)，是建立新的array，在func裡面做修改後傳到新的array。
    ---------------------------
    flatMap( (x) => x*2);，不用func，直接建立新array並修改。
    ---------------------------
    filter(func)，過濾東西，func可以return value >18;
    ---------------------------
    arr.indexOf('apple')，可以回傳'apple'的index。(-1表示沒有)
    ---------------------------
    arr.keys()，會得到一個含key的array。可用 for(let x of keys){x就是key值}
    ---------------------------
    let f = arr.entries()，可得到key、value的array。可用 for(let x of f){x[0]就是key值，x[1]就是value}
    ---------------------------
21. array_const，初始化時就要給參數，之後也不能修改。 const cars; cars = ['saab', 'volvo']是錯的，不能分兩步驟。const cars = ['saab', 'volvo'] 這樣就對了。
    
    
22. Dates，月份是從0開始到11。
    
    
23. Date Formats，const d = new Date("03/25/2023")月、日、年，這樣是正確的。
    Date("2023/03/25")這樣是錯的。還有其他格式，可以去看看@@
    ---------------------------
    計算出從1970到要的日期共幾秒。let msec = Date.parse("03/21/2012");
    
    
24. Date get methods，可以單獨取出年、月、日、時、分、秒等...
    getYear() 要被淘汰，改用 d.getFullYear()。
    可以得到0~999毫秒，d.getMilliseconds()。
    可以得到星期幾，d.getDay()，(0~6，0表示星期日)。
    可以得到日期的毫秒， d.getTime()。或是 Date.now()。
    
    
25. Date set methods，可以設定年、月、日、時、分、秒等...有範例，時間的比較。
    所以要顯示十天後的時間，就可以用 setDate，年月會自動加總。
    const d = new Date();     d.setDate( d.getDate() + 10 );
    
    
26. Math，round(數字)，四捨五入。ceil(數字)，往上找整數。floor(數字)，往下找整數。trunc(數字)，只取整數。sign(數字)，會回傳 -1(小於0)、0(等於0)、1(大於0)。還有其他數學函式。
    
    
27. random，可以產生想要的亂數，Math.floor(Math.random() * 11 )，產生0~10的亂數。
    
    
28. Booleans，0、""(空字串)、null、false、 10/"abc"(NaN)，這些都會產生 false。而所有數字、字串都是true。
29. comparison，x = 5，x = = "5"會給true，x = = = "5"才給false(加上判斷型態)
    可以直接用 if (x<5) text = "hello"; (python 的 if 後面要給冒號:)
    "2" > "12" 會得到true，因為比對第一個字元。
30. IF Else。else if (條件){執行}，後面都不用加分號;，else if 中間空一格。
31. switch，記得條件後面要加break，也可以將相同的結果不加break 放一起。
32. loop for，var i=5，在for (var i; i<10; i++)裡面跑完後，i=10。
    let i=5, for (let i; i<10; i++)跑完後，i=5。
33. loop for in，會回傳key，所以放在person[key]就會得到 value。
    forEach()，只能丟陣列，for in 可以丟字典。forEach就是會將(value，KEY，array)丟進自訂的函式，所以函式的括號可以得到value，KEY，array。
    
34. loop for of，是用 of，python 用 in。
35. break，有沒看過的 label:{ statement; break label; }可以跳出某個狀態。
36. iterable，裡面有介紹Set、Map(很像python的dict)
37. Set，變數只能出現一次，測試過放多個相同的是可以，但撈的時候只出現一次。
    size，後面不用括號，抓出長度。
    用forEach，因為s[i]會undefined。
      let s = Set(['a','b','c']); s.forEach(function(value){ 做動作; })
    用for of，for (const x of s.values()) { 做動作; })
    陣列的length。length後面不用加括號。陣列就可以用 lst[i]取資料。
    add('資料')，新增資料。
    has('資料')，確認是否有這個資料。
      用 if 一定要用括號包起來，才跑得動。if (letters.has('a'))
38. Maps，
    
    

暫時記錄讀取JSON

end