案例研究演示了如何构建一个完整的 <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. 动事结束后需要移除样式。

参考答案

关注“教授学苑”，期待带给你快乐的开发知识.