1. 设置utf-8
meta charset = "utf-8
2. 连接外部css表
<link rel="stylesheet" href="lounge.css">
3. 连接外部js
<script src="lounge.js"></script>
<--!如果使用内联代码，还可以这样写script标记-->
<script>
var youRock = True;
</script>
5.DOM 称为文档对象模型(Document Object Model)。如下图： 
27c161e5afbd9f20d0897dfebb640f29.jpeg
res=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5743668589539406213&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video)
6. 下面这段代码中的意义
<script>
var walksLike = "dick";
var soundsLike = document.getElementById("soundslike");
if(walksLike == "dog") {
soundsLike.innerHTML = "Woof! Woof!";
}
<script>
document表示整个HTML页面，getElementById可能与HTML元素和id有关。
7.使用JavaScript和HTML5能做什么？
- 可以直接在页面上创建一个可绘制的2D表面，不需要插件。
- 使用页面掌握位置信息，知道你的用户所在的位置，向他们现实附近有些什么，带他们进行目标排查，指明方向。
- 访问web服务，并将数据传回应用。
- 使用浏览器存储本地缓存数据，提高移动应用速度。
- 不需要特殊的插件播放视频。
- 将你的页面和Google maps集成，甚至允许用户实时地跟踪他们的移动轨迹。
8. innerHTML使用
一旦getElementById通过id获取一个元素，就可以用它来做些处理。
var planet = document.getElementById("greenplanet")
planet.innerHTML = "Red Alert";
使用planet.innerHTML属性可以改变元素的内容。
9. 在<head></head>中添加如下代码：
<script>
function init() {
var planet = document.getElementById("greenplanet")
planet.innerHTML = "Hello world"
}
window.onload = init;
</script>
其中window.onload是在页面加载完成之后再调用init函数
10. createElement("li")
使用document.createElement("li")来创建一个新元素。他会返回一个新元素的引用。
var li = document.createElement("li")
li.innerHTML = "song name";
11. appendChild() 在一个元素中添加一个子元素
var ul = document.getElementById("playlist")
ul.appendChild(li);
12 本地存储
play-list_store.js:
// 存储内容，通过已有的key，把以前的值都取出来，在跟新值合并在一起，再存入到本地
function save(item) {
var playListArray = getStoreArray("playlist"); //保存是以字典的方式保存的，通过key去取值
playListArray.push(item);
localStorage.setItem("playlist", JSON.stringify(playListArray))
}
//对外接口,获取所有本地数据，添加到li中DOM
function loadPlaylist() {
var playListArray = getSaveSongs();
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 getSaveSongs() {
return getStoreArray("playlist");
}
//通过key值获取本地的值 ,取出来的是一个json串
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;
if(songName.length > 0){
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li)
save(songName);
textInput.value = "";
}else {
alert("you input is empty");
}
}
html
<!DOCTYPE html>
<html>
<head>
<title>Webville Tunes</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="playlist.css">
<script src = "play-list_store.js"></script>
<script type="text/javascript" src="playlist.js"></script>
</head>
<body>
<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>
知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；
【安全】保密，你懂的。
