# 1220 js

null == undefined
// 先轉型
Boolean(null)

// btn - click
// input - change, focus, input, blur
// checkbox - change
// radiobtn - change

// getElementsbyClass 和querySelector選到的東西和用途有什麼不同？

// 抓class
let box1 = document.getElementsByClassName('box')
let box = document.querySelectorAll('.box')

// 抓ID
let app1 = document.getElementById('app')
let app2 = document.querySelector('#app')

// DOM 是我想抓的
// querySelector, getElement...Id, ClassName


console.log(app1)
console.log(app2)

// var, let, const 的懶人包
// const > let > var

const aa = "AA"

const app = document.querySelector('#app')

let bb = 'bb'

// 不合理
// app = document.querySelector('.box')

const persons = [
  {
    name: 'calvin'
  }
  ,
  {
    name: 'andy'
  },
  {
    name: 'jimmy'
  }
]

// for
for(let i = 0; i < persons.length; i++) {
  console.log(persons[i].name)
}

console.log('---------------')

// foreach
persons.forEach(function(val) {
  console.log(val.name)
})

console.log('---------------')


// for in (index -> index)
for(let index in persons) {
  console.log(index)
  console.log(persons[index])
}

console.log('-------------')

// for of (val -> value)
for(let val of persons) {
  console.log(val)
}

// attribute 屬性
// <img src="..." alt="xxx" />
// img src, alt 這兩個屬性(attribute)

// property 屬性 C#, js
{
  name: 'build' // name -> property
}

// TODO:
// box2 div 裏面 h2-buildschool

const box2 = document.querySelector('.box2')

box2.innerHTML = `<h2>build school</h2>`
// box2.innerText = `<h2>build school</h2>`

const btn1 = document.querySelector('.btn1')

// const myAlert = function () {
//   alert('hello world')
// }

// hosting

// btn1.addEventListener('click', myAlert)

// function 宣告
// 具名(不容易踩坑) hosting
// function foo () {
//   console.log('bar')
// }

// 匿名
// const foo1 = function () {}
// btn1.addEventListener('click',function () {})
// arrow
// const foo2 = () => {
  // this 有關的坑
// }

// 掛click event
// 推薦 addEventListener

// 1.直接掛在 HTML
// 見 HTML

// 2.onClick
btn1.onclick = myAlert
// btn1.onclick = () => {
//   console.log(123)
// }

// 3.addEventListener
btn1.addEventListener('click', myAlert)
btn1.addEventListener('click', () => {
  console.log(123)
})
btn1.addEventListener('click', () => {
  console.log(456)
})

// 移除
btn1.removeEventListener('click', myAlert)

function myAlert () {
  alert('hello world')
}

// Object & Array

let districtObject = { 
  taipei: [ 
  { id: 'taipei01', district: '中正區' }, 
  { id: 'taipei02', district: '萬華區' }, 
  { id: 'taipei03', district: '信義區' }], 
  taoyuan: [ 
  { id: 'taoyuan01', district: '桃園市' }, 
  { id: 'taoyuan02', district: '八德市' }, 
  { id: 'taoyuan03', district: '中壢市' }], 
  taichung: [ 
  { id: 'taichung01', district: '台中市' }, 
  { id: 'taichung02', district: '⼤⾥市' }, 
  { id: 'taichung03', district: '清⽔市' }] 
 };

// 抓到 taipei 
districtObject.taipei
// 抓到 taipei 裡面的第三筆
districtObject.taipei[2]
// 抓到 taipei 裡面的第三筆的district
districtObject.taipei[2].district

// keelung 裡面有 中山, 仁愛, 信義
const keelung = [
  { id: 'keelung1', district: '中山區' },
  { id: 'keelung2', district: '仁愛區' },
  { id: 'keelung3', district: '信義區' },
]
// output = 仁愛區
keelung[1].district


let districtObject2 = { 
  taipei: [ 
  { id: 'taipei01', district: '中正區' }, 
  { id: 'taipei02', district: '萬華區' }, 
  { id: 'taipei03', district: '信義區' }], 
  taoyuan: [ 
  { id: 'taoyuan01', district: '桃園市' }, 
  { id: 'taoyuan02', district: '八德市' }, 
  { id: 'taoyuan03', district: '中壢市' }], 
  taichung: [ 
  { id: 'taichung01', district: '台中市' }, 
  { id: 'taichung02', district: '⼤⾥市' }, 
  { id: 'taichung03', district: '清⽔市' }] ,
  keelung: [
    { id: 'keelung1', district: '中山區' },
    { id: 'keelung2', district: '仁愛區' },
    { id: 'keelung3', district: '信義區' },
    { id: 'keelung4', district: '暖暖區' }]
 };

// 把 keelung 加到 districtObject
districtObject.keelung = keelung

// 把 dis1 加到 districtObject 的 keelung 陣列裡面
const dis1 = { id: 'keelung4', district: '暖暖區' }

const k = 'keelung'
districtObject[`${k}`].push(dis1)
districtObject.keelung.push(dis1)

console.log(districtObject)

// Object & Array

let districtObject = { 
  taipei: [ 
  { id: 'taipei01', district: '中正區' }, 
  { id: 'taipei02', district: '萬華區' }, 
  { id: 'taipei03', district: '信義區' }], 
  taoyuan: [ 
  { id: 'taoyuan01', district: '桃園市' }, 
  { id: 'taoyuan02', district: '八德市' }, 
  { id: 'taoyuan03', district: '中壢市' }], 
  taichung: [ 
  { id: 'taichung01', district: '台中市' }, 
  { id: 'taichung02', district: '⼤⾥市' }, 
  { id: 'taichung03', district: '清⽔市' }] 
 };

// 抓到 taipei 
districtObject.taipei
// 抓到 taipei 裡面的第三筆
districtObject.taipei[2]
// 抓到 taipei 裡面的第三筆的district
districtObject.taipei[2].district

// keelung 裡面有 中山, 仁愛, 信義
const keelung = [
  { id: 'keelung1', district: '中山區' },
  { id: 'keelung2', district: '仁愛區' },
  { id: 'keelung3', district: '信義區' },
]
// output = 仁愛區
keelung[1].district


let districtObject2 = { 
  taipei: [ 
  { id: 'taipei01', district: '中正區' }, 
  { id: 'taipei02', district: '萬華區' }, 
  { id: 'taipei03', district: '信義區' }], 
  taoyuan: [ 
  { id: 'taoyuan01', district: '桃園市' }, 
  { id: 'taoyuan02', district: '八德市' }, 
  { id: 'taoyuan03', district: '中壢市' }], 
  taichung: [ 
  { id: 'taichung01', district: '台中市' }, 
  { id: 'taichung02', district: '⼤⾥市' }, 
  { id: 'taichung03', district: '清⽔市' }] ,
  keelung: [
    { id: 'keelung1', district: '中山區' },
    { id: 'keelung2', district: '仁愛區' },
    { id: 'keelung3', district: '信義區' },
    { id: 'keelung4', district: '暖暖區' }]
 };

// 把 keelung 加到 districtObject
districtObject.keelung = keelung

// 把 dis1 加到 districtObject 的 keelung 陣列裡面
const dis1 = { id: 'keelung4', district: '暖暖區' }

const k = 'keelung'
districtObject[`${k}`].push(dis1)
districtObject.keelung.push(dis1)

console.log(districtObject)

// E,F,S,D
const student29 = {
  id: 30,
  name: 'moon',
  en_name: 'moon',
  full_name: 'ABC',

  attributeStr: 'E,D',
  attributeArr: ['E', 'D'],
  attributeObj: {
    E: true,
    F: false,
    S: false,
    D: true
  },
  ICDSobj: {
    I: 7,
    D: 2,
    C: 13,
    S: 18
  },
  tableNumber: 2,
  // 吃飯, 睡覺, coding
  descriptionStr: '吃飯, 睡覺, coding',
  descriptionArr: ['吃飯', '睡覺', 'coding'],
}



const student30 = {
  id: 30,
  name: 'earth',
  en_name: 'earth',
  full_name: 'CHEN, YEN-TING',

  attributeStr: 'E,F,S',
  attributeArr: ['E', 'F', 'S'],
  attributeObj: {
    E: true,
    F: true,
    S: true,
    D: false
  }
}

const students = [
  student29,
  student30
]

// attributeStr 如果有F屬性 就 log 出來
students.forEach(el => {
  if (el.attributeStr.includes('F')) {
    console.log(el)
  }
})

// attributeArr 如果有F屬性 就 log 出來
students.forEach(el => {
  if (el.attributeArr.includes('F')) {
    console.log(el)
  }
})

// attributeObj 如果有F屬性 就 log 出來
students.forEach(el => {
  if (el.attributeObj.F) {
    console.log(el)
  }
})

const inputArr = [1, 2, 3] // 輸入
let outputArr = [] // 輸出
// let outputArr = [2, 3, 4] // 輸出

inputArr.forEach(el => {
  // el + 1 後, 推到 outputArr
  outputArr.push(el + 1)
})

console.log(outputArr)

// C# - Select
// js - map

const inputArrForMap = [1, 2, 3] // 輸入
let outputArrForMap = [] // 輸出

outputArrForMap = inputArrForMap.map(function add1(val) {
  return val + 1
})

console.log(outputArrForMap)