---
title: Astro課程 0806 - JavaScript (Day2)
tags: astro, javascript
---

[PastLeo blog](https://pastleo.me/)
[上課PDF](https://hackmd.io/@pastleo/rJ0OVkuxv#/5)

[Ruby simple https 套件](https://rubygems.org/gems/simple-httpd)

ruby -run -ehttpd . -p8000

## 1. `document.body.addEventListener`

當發生什麼事件的時候要做什麼
`.addEventListener('', callback)`

  <script>
    document.body.addEventListener('click', function(){
      document.body.classList.toggle('light')
    })
  </script>

## 2. ` window.addEventListener('DOMContentLoaded', function(){})`

載入後再執行

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      document.getElementById('toggle').addEventListener('click', function() {
        document.body.classList.toggle('light');

        if (this.textContent === '關') {
          this.textContent = '開';
        } else {
          this.textContent = '關';
        }
      });
    });
  </script>

## 3. document.body.classList.add
## 3. document.body.classList.remove

  <script>
    window.addEventListener('DOMContentLoaded', function(){
      document.getElementById('on').addEventListener('click', function(){
        document.body.classList.add('light');
      })
      document.getElementById('off').addEventListener('click', function(){
        document.body.classList.remove('light');
      })      
    })
  </script>

  <script>
    window.addEventListener('DOMContentLoaded', function(){
      const statusDiv = document.querySelector('.status')
      const statusSpan = document.querySelector('.status span')
      document.getElementById('on').addEventListener('click', function(){
        document.body.classList.add('light')

        statusDiv.classList.remove('off')
        statusDiv.classList.add('on')
        statusSpan.textContent = '開'
      })
      document.getElementById('off').addEventListener('click', function(){
        document.body.classList.remove('light');

        statusDiv.classList.remove('on')
        statusDiv.classList.add('off')
        statusSpan.textContent = '關'
      })      
    })
  </script>

# BOM
Browser Object Model

`window.location`

window.location
Location {href: "chrome-search://local-ntp/local-ntp.html", ancestorOrigins: DOMStringList, origin: "chrome-search://local-ntp", protocol: "chrome-search:", host: "local-ntp", …}

# DOM
`$0` 可以取元素
`$0`.src

Document Object Model
HTML在JavaScript的介面

document / window.document
## Document
.getElementById('id')
## Element

## HTML 元素

# 4. create element

// let's start coding:
window.addEventListener('DOMContentLoaded', function(){
  document.getElementById('create-element').addEventListener('click', function(){
    //先用一個變數接起來
    const timeDiv = document.createElement('div')
    debugger
  })
})

點到所選取的元素，就會啟動`debugger模式`

記得要`Network -> Disable Cache打勾勾`

timeDiv
<div>​</div>​

this
<button id=​"create-element">​.createElement('div.time') to append​</button>​

timeDiv.className = "time"
"time"

//增加了class
timeDiv
<div class=​"time">​</div>​


new Date()
Thu Aug 06 2020 14:31:03 GMT+0800 (台北標準時間)

document.querySelector('.right')
<div class=​"right">​…​</div>​


a = new Date()
Thu Aug 06 2020 14:32:51 GMT+0800 (台北標準時間)

把取到的變數拿去程式碼裡面改

window.addEventListener('DOMContentLoaded', function(){
  document.getElementById('create-element').addEventListener('click', function(){
    //先用一個變數接起來
    const timeDiv = document.createElement('div')
    // debugger
    // 去devTool找如何增加class name
    timeDiv.className = 'time'
    const currentTime = new Date()
    timeDiv.textContent = currentTime.toString()
    document.querySelector('.right').appendChild(timeDiv)
  })
})

# reset

# remove

`beforeend` = `afterchild`

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

# jQuery

$(document).ready(function(){
  
})

`$('')` 選取器

## 計數器

## 按鈕按下去，文字改為false；清interval, 改狀態

// let's start coding:
$(document).ready(function(){
  // running ：現在是不是在執行
  let cnt = 0, running = false, interval;  
  // 設定interval是區域變數
  // 取得start的按鈕
  $('button').click(function(){
    // console.log('234424dsf')
    if (running){
      clearInterval(interval) // 清interval
      $('button').text('start') // 按鈕文字
      running = false // 改狀態：沒有在執行
    } else {
      interval = setInterval(function(){ 
        //interval在跑
        cnt = cnt + 1
        $('#seconds').text(cnt)
      }, 1000)
      $('button').text('stop') // 按鈕文字
      running = true // 改狀態：有在執行
    }
  })
})