根據網路上的javascript教學做的一些筆記

prac_js.js

/*參考自
https://ithelp.ithome.com.tw/users/20065504/ironman/1259
*/

var 字串1 = '這是一個字串';
var 字串2 = '這也是一個字串';
console.log(字串1);
//可以用中文當變數名

if(isNaN(parseInt(字串1))){
	console.log('"' + 字串1 + '"無法轉成數字')
}

var 天氣資料 = {
	名稱: '中正區',
	溫度: 21,
	濕度: 86,
	危險係數: function(){
		return this.溫度 + Math.floor(this.濕度 * 0.1);
	}
}

/*
==會把不同型態的值試著做轉換
===則不會
比較嚴謹的寫法會建議用===取代==
*/

//試著把朋友以前獎的彩券抽獎邏輯寫出來
function lotter(){
	var nums = new Array(49);
	for(var i = 1;i <= 49;i++){
		nums[i - 1] = i;
	}
	var lottery = new Array(6);
	for(var i = 0;i < 6;i++){
		n = Math.floor(Math.random() * nums.length);
		console.log(n);
		lottery[i] = nums[n];
		nums[n] = nums[nums.length - 1];
		nums.length -= 1;
	}
	return lottery;
}

/*
a && b的規則是a成功(true)就回傳b，否則回傳a
a && b的規則是a失敗(false)就回傳b，否則回傳a
如果只是當判斷式用的話和C++的結果沒有差別
但是要a和b回傳自己的true or false就要用!!a和!!b了
這樣的回傳值一定是bool
*/

var square = function (number) {
  return number * number;
};
function square2(number) {
  return number * number;
};
//使用效果相同，但是square是僅限於本區域用的函式，超出範圍就會像變數一樣未定義
//又名匿名函式

for(x = 0;x < 5;x++){
    console.log(x);
}
console.log(x);//5
//宣告時前面沒有var的變數會變成全域變數
for(var y = 0;y < 5;y++){
    console.log(y);
}
console.log(y);//undefined
//如果都記得用var的話，和C++真的就一樣了

var x = 1;
var doSomeThing = function(y) {
  var x = 100;//宣告一個自己的x，對外面毫無影響
  return x + y;
};
var doSomeThing2 = function(y) {
  x = 100;//讀寫外面的x，如果x沒宣告過就建立變數
  return x + y;
};
var doSomeThing3 = function(y) {
  console.log(x);//使用x時，要確認x在哪宣告的，發現在本區域之後會宣告，就自己提前宣告了
  //等同在開頭宣告var x;，於是x此時的值是undefined
  //"「變數提升」 (Variables Hoisting)"
  //"變數都盡量在 scope 的最上面先宣告完成後再使用"

  var x = 100;
  return x + y;
};

x = undefined
for(var x = 0;x < 5;x++){}
console.log(x);//5
//如果有建立過x的話，迴圈內的區域變數值也會寫到外面去

if(a == 1 && a == 2 && a == 3) {
  console.log('Hello World!');
}
//等同
if( a == 1 ) {
  if( a == 2 ) {
    if( a == 3 ) {
      console.log('Hello World!');
    }
  }
}
//所以要試著在取得a的值時使a+1
const a = {
  i: 1,
  valueOf: function () {
    return a.i++;
  }
}//把a變成物件，呼叫a時得到的值是來自valueOf或toString(根據物件有什麼函式)
//感覺是js才會玩到的把戲

c = document.getElementsByClassName('hljs-built_in');
for(var i = 0;i < c.length;i++){
	console.log(c[i].textContent);
}//控制指定的class物件
I = document.getElementById('xxx');
//同理
t = document.getElementsByTagName('pre');
//可以在console介面查看內容物
//分成僅文字部分的和有其他tag等多情況
t[2].getElementsByClassName('hljs');
//進一步找物件
t[2].querySelectorAll('span');
t[2].querySelectorAll('span')[0].textContent;
//或是這樣
//重點在搞清楚現在這個變數的類型是什麼？有什麼函式可以用

t[0].hasChildNodes();//回傳是否有子元素

//Capturing 和 Bubbling 事件
const $list = get('list');

$list.addEventListener('click', (e) => {
  console.log('list capturing', e.eventPhase);
}, true)// list 的捕獲
$list.addEventListener('click', (e) => {
  console.log('list bubbling', e.eventPhase);
}, false)// list 的冒泡
//用最後一個參數的bool值判斷
//點擊一個物件時可能經過不只一層tag，進入tag時是捕捉，放開滑鼠時是冒泡
//但是最底層時根據宣告先後順序執行，有點微妙
//重點是決定執行順序，雖然我沒碰過需要用到的情況

//https://ithelp.ithome.com.tw/articles/10192015