案例研究演示了如何構建一個完整的 <AppML> 互聯網應用程序，具有針對數據庫中的若干表進行信息列舉、編輯和搜索的功能。

添加 HTML 模板

我們將演示如何向 HTML 頁面添加 HTML 模板。

列出客戶

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" style="display:none">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

avaScript 30 是什么？

JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。

官網的 slogan 如下：

Build 30 things in 30 days with 30 tutorial No Frameworks × No Compilers × No Libraries × No Boilerplate

現在你看到的是這系列指南的第 1 篇 - JavaScript 音樂鼓

題目

模擬一個音樂鼓的效果。當用戶按下 ASDFGHJKL 這幾個鍵時，頁面上與字母對應的元素變大，邊框變色（動畫效果），播放對應的音樂。

來一張效果圖：

打開index-START.html文件：

知識點分析：

• 頁面html中的數據屬性（data-xxx）

• 鍵盤事件處理

• 根據數據屬性選擇相對應的元素

• 播放聲音

• 樣式修改

步驟講解

1. 添加鍵盤事件監聽。在windows上添加keydown事件。

2. keydown事件回調處理邏輯

   （1）獲取對應事件的keyCode

   (2) 使用querySelector查找對應data-key=keyCode的元素

   （3）處理元素，播放音頻，添加樣式

3. div.key添加動畫結束transitionened事件處理來處理動畫結束后的樣式還原

基礎知識點講解

1. ES6 中const 聲明只讀常量。

2. `${變量}`: 模板字面量（Template literals）。注意用反引號，變量用${}

3. forEach 與箭頭函數

異常處理點

1. 每次播放音效之后，需設置播放時間為0。

   主要處理：重復按鍵。

2. 動事結束后需要移除樣式。

參考答案

關注“教授學苑”，期待帶給你快樂的開發知識.