了解了JavaScript的基础知识后，开始处理HTML5与用户的交互。如果页面能响应用户的输入，它们就不再知识文档，而是有生命的、有反应的应用了。
接下来我们开始学习JavaScript事件处理，这里通过一个添加音乐播放列表示例来描述JavaScript与用户的交互过程。效果图如下：
效果.png
添加一首音乐到列表的步骤主要有四步：
创建HTML页面
playlist.html
<!DOCTYPE HTML>
<html>
<head>
<title>iTunes</title>
<meta charset="utf-8">
<script src="playlist.js"></script>
<!--播放列表的样式表-->
<link rel="stylesheet" href="playlist.css">
</head>
<body>
<form>
<!--
type:控件类型
id:
placeholder:显示一个例子，指示这个输入域中要输入什么
-->
<input type="text" id = "songTextInput" size = "40" placeholder="Song name">
<input type="button" id="addButton" value="Add song">
</form>
<!--ul是一个列表-->
<ul id="playlist">
</body>
</html>
样式playlist.css代码为
/* playlist.css */
body {
font-family: arial, sans-serif;
}
ul#playlist {
border: 1px solid #a9a9a9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
padding: 0px;
list-style-type: none;
}
ul#playlist li {
border-bottom: 1px solid #a9a9a9;
padding: 10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
background-image: linear-gradient(#f9f9f9, #e3e3e3);
}
ul#playlist li:last-child {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom: none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
如上述代码，head头里面加载了一个JavaScript文件playlist.js和一个播放列表样式playlist.css，body体里面包含一个form表单和一个ul列表，其中form表单包含一个文本类型和按钮类型的控件。
处理点击事件
处理点击事件的步骤：
- 1.获取id为addButton控件的元素
- 2.为该元素关联点击事件
- 3.实现点击事件
window.onload = init;
function init() {
//1
var button = document.getElementById('addButton');
<!--设置点击事件-->
//2
button.onclick = handleButtonClick;
}
//3
function handleButtonClick() {
alert("Button was clicked!");
}
获得歌曲名
步骤:
- 1.获得id为songTextInput的元素
- 2.获得该元素的值
window.onload = init;
function init() {
var button = document.getElementById('addButton');
<!--设置点击事件-->
button.onclick = handleButtonClick;
// loadPlaylist();
}
function handleButtonClick() {
//1.
var textInput = document.getElementById('songTextInput');
//2.
var songname = textInput.value;
}
添加歌曲到列表
步骤:
- 1.创建一个新的
<li>元素 - 2.将新元素的内容设置为歌曲名
- 3.将新元素添加到id为playlist的列表
playlist.js
window.onload = init;
function init() {
var button = document.getElementById('addButton');
<!--设置点击事件-->
button.onclick = handleButtonClick;
}
function handleButtonClick() {
var textInput = document.getElementById('songTextInput');
var songname = textInput.value;
//1
var li = document.createElement("li");
//2.
li.innerHTML = songname;
//3.
var ul = document.getElementById("playlist");
ul.appendChild(li);
}
持久保存歌曲列表
持久保存就是讲歌曲列表保存在本地，当浏览器再次打开HTML5的页面时，就会加载本地的列表显示到页面。
首先，建立一个新文件，list_store.js,代码如下:
//保存数据到本地
function save(item) {
var playlistArray = getStoreArray("playlist");
playlistArray.push(item);
localStorage.setItem("playlist",JSON.stringify(playlistArray));
}
//加载本地数据
function loadPlaylist() {
var playlistArray = getSavedSongs();
var ul = document.getElementById('playlist');
if (playlistArray != null) {
for(var i = 0; i < playlistArray.length;i++) {
var li = document.createElement("li");
li.innerHTML = playlistArray[i];
ul.appendChild(li);
}
}
}
function getSavedSongs() {
return getStoreArray("playlist");
}
function getStoreArray(key) {
var playlistArray = localStorage.getItem(key);
if (playlistArray == null || playlistArray == "") {
playlistArray = new Array();
} else {
playlistArray = JSON.parse(playlistArray);
}
return playlistArray;
}
然后在playlist.js中加入两行代码
window.onload = init;
function init() {
var button = document.getElementById('addButton');
<!--设置点击事件-->
button.onclick = handleButtonClick;
loadPlaylist(); //加载数据
}
function handleButtonClick() {
var textInput = document.getElementById('songTextInput');
var songname = textInput.value;
var li = document.createElement("li");
li.innerHTML = songname;
var ul = document.getElementById("playlist");
ul.appendChild(li);
save(songname); //保存数据
}
最后，在HTML的head元素中增加一个指向list_store.js的引用，增加到playlist.js的上面
<script src="list_store.js"></script>
<script src="playlist.js"></script>
重新加载页面，输入一些歌曲。退出浏览器，再次打开浏览器，并加载这个页面，你会看到存储的所有歌曲都安全地出现在播放列表中。
