// 什么是 HTML 以及怎樣使用 HTML 編寫網頁
// 網頁的結構是怎樣
// 什么是 CSS 以及怎樣使用 CSS
// 如何在網頁中引入 JavaScript 代碼
// 什么是 DOM, 常用 DOM API 使用
// document object model
// application program interface
// 什么是事件, 如何綁定事件
//
// 應該都能看懂, 不懂的稍微做個筆記, 等上課講解// 自己定義一個 log 函數
var log = function() {console.log.apply(console, arguments)
}// 在 html 文件中, js 代碼放在 script 標簽中
// 我們把 script 標簽放到 body 最后面, 原因上課解釋
// 瀏覽器載入這個 html 文件后
// 會執行我們寫在 script 標簽中的代碼
log('代碼開始')/*
DOM(文檔對象模型) 是瀏覽器對 html 文件的描述方式
DOM API 是瀏覽器提供給 JavaScript 操作 html 頁面內元素的方式
簡而言之, 瀏覽器提供了一些內置函數來讓我們操作頁面(增刪改查)
*/// 查找元素
// ===
//
// 查找元素使用 document.querySelector() 函數
// 這個函數的參數是一個選擇器(和 CSS 選擇器一樣)
// 選擇器語法和 CSS 選擇器一樣, 現在只用 3 個基礎選擇器
// 元素選擇器
var body = document.querySelector('body')
// class 選擇器, 用的是 .類名
var form = document.querySelector('.login-form')
// id 選擇器, 用的是 #id
var loginButton = document.querySelector('#id-button-login')
// log 出來看看
log(body, form, loginButton)// 操作元素的默認屬性
// ===
//
// 獲得特定屬性值
// 注意， getAttribute 只能得到默認值，而不是得到當前的值
// 當前的值可能是被改動后的值
var user = document.querySelector('#id-input-username')
var userValue = user.getAttribute('value')
log('user value', userValue)
// 不存在的屬性會返回 null, 它在 js 中代表不存在
log('沒有的屬性', user.getAttribute('不存在'))
//
// 設置特定屬性值
user.setAttribute('value', '新用戶名')// 查詢屬性是否存在
log(user.hasAttributes()) // 查看元素是否有屬性
log(user.hasAttribute('value')) // 查看元素是否有特定屬性// 刪除某個屬性
user.removeAttribute('type')// 獲得所有屬性
var attributes = user.attributes
log('所有屬性', attributes)// 操作元素(創建, 刪除, 修改)
// ===
//
// 用 document.createElement 函數創建一個元素
var button = document.createElement('button');
// 用 innerHTML 設置屬性
button.innerHTML = '注冊用戶'// 修改
// 用 appendChild 給一個元素添加子元素
// 這里我們給 .login-form 添加剛才創建好的按鈕
var form = document.querySelector('.login-form')
form.appendChild(button)
//
// 刪除元素
var pwd = document.querySelector('#id-input-password')
// 以下兩種方法都可以刪除元素
// 一種是自毀
// 一種是父節點刪除子元素
pwd.remove()
// form.removeChild(pwd)// 事件
// ===
//
// 事件是用來處理響應的一個機制
// 這個響應可以來自于用戶(點擊, 鼠標移動, 滾動)
// 也可以來自于瀏覽器
//
// 下面的鏈接描述了所有事件, 不過我們先從最常用的事件學起, click 事件
// https://developer.mozilla.org/en-US/docs/Web/Events
//
// 常用例子, 給按鈕添加一個點擊的事件
// 1, 獲得按鈕
var loginButton = document.querySelector('#id-button-login')
// 2, 聲明一個函數, 用于在按鈕點擊后執行
var clicked = function(event) {log('按鈕被點擊到了', event)
}
// 3, 添加事件, 使用 addEventListener 函數, 它有兩個參數
// 第一個是事件的名字, 第二個是事件發生后會被自動調用的函數
// loginButton.addEventListener('click', clicked)
// loginButton 發生了 'click' 事件后調用 clicked 函數
//
// 添加完成, 可以自己在瀏覽器試試, 記得打開 console// 批量添加事件
var buttons = document.querySelectorAll('button')
for (var i = 0; i < buttons.length; i++) {var button = buttons[i]button.addEventListener('click', function(event){var self = event.targetif (self.innerHTML == '注冊用戶') {log('注冊按鈕')} else {log('登錄按鈕')}console.log('循環批量添加click事件', self.id)})
}//
// 復雜的例子，添加選項卡效果（看不懂下節課就能看懂了）
// 給多個元素掛上同一個事件
// 選擇多個元素使用函數 querySelectorAll
var buttons = document.querySelectorAll('.radio-button')
// 循環遍歷每個元素, 并且綁定點擊事件
for (var i = 0; i < buttons.length; i++) {var button = buttons[i]button.addEventListener('click', function(event){// 注意, 這次我們直接定義了函數作為參數傳遞, 這樣做是合法的// 另外, 我們增加了一個 event 參數// 瀏覽器會給事件響應函數傳遞一個參數, 它代表了事件本身// 我們可以用 event.target 取出響應事件的元素var self = event.target// clearActive 函數是我們自己定義的// 目的是刪除其他元素的 active classclearActive()// add 可以增加一個 classself.classList.add('active')})
}
//
var clearActive = function() {var s = document.querySelector('.active')if (s != null) {// 使用 classList 可以訪問一個元素的所有 class// remove 可以刪除一個 classs.classList.remove("active")}
} ?
