PastLeo blog
上課PDF

Ruby simple https 套件

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 // 改狀態：有在執行
    }
  })
})