1. 設(shè)置utf-8
meta charset = "utf-8
2. 連接外部css表
<link rel="stylesheet" href="lounge.css">
3. 連接外部js
<script src="lounge.js"></script>
<--!如果使用內(nèi)聯(lián)代碼谴垫，還可以這樣寫script標(biāo)記-->
<script>
var youRock = True;
</script>
5.DOM 稱為文檔對象模型(Document Object Model)。如下圖： 
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有關(guān)舞肆。
7.使用JavaScript和HTML5能做什么博杖？
- 可以直接在頁面上創(chuàng)建一個可繪制的2D表面，不需要插件哩盲。
- 使用頁面掌握位置信息狈醉，知道你的用戶所在的位置，向他們現(xiàn)實(shí)附近有些什么抒线，帶他們進(jìn)行目標(biāo)排查渣慕，指明方向。
- 訪問web服務(wù)眨猎，并將數(shù)據(jù)傳回應(yīng)用强经。
- 使用瀏覽器存儲本地緩存數(shù)據(jù)，提高移動應(yīng)用速度兰迫。
- 不需要特殊的插件播放視頻码秉。
- 將你的頁面和Google maps集成转砖，甚至允許用戶實(shí)時地跟蹤他們的移動軌跡。
8. innerHTML使用
一旦getElementById通過id獲取一個元素晋控，就可以用它來做些處理姓赤。
var planet = document.getElementById("greenplanet")
planet.innerHTML = "Red Alert";
使用planet.innerHTML屬性可以改變元素的內(nèi)容。
9. 在<head></head>中添加如下代碼：
<script>
function init() {
var planet = document.getElementById("greenplanet")
planet.innerHTML = "Hello world"
}
window.onload = init;
</script>
其中window.onload是在頁面加載完成之后再調(diào)用init函數(shù)
10. createElement("li")
使用document.createElement("li")來創(chuàng)建一個新元素蝌焚。他會返回一個新元素的引用只洒。
var li = document.createElement("li")
li.innerHTML = "song name";
11. appendChild() 在一個元素中添加一個子元素
var ul = document.getElementById("playlist")
ul.appendChild(li);
12 本地存儲
play-list_store.js:
// 存儲內(nèi)容，通過已有的key成畦，把以前的值都取出來涝开，在跟新值合并在一起，再存入到本地
function save(item) {
var playListArray = getStoreArray("playlist"); //保存是以字典的方式保存的拄养，通過key去取值
playListArray.push(item);
localStorage.setItem("playlist", JSON.stringify(playListArray))
}
//對外接口,獲取所有本地數(shù)據(jù)奕剃，添加到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>
知行辦公柿顶，專業(yè)移動辦公平臺https://zx.naton.cn/
【總監(jiān)】十二春秋之操软，3483099@qq.com聂薪；
【Master】zelo，616701261@qq.com仁锯；
【運(yùn)營】運(yùn)維艄公翔悠，897221533@qq.com；****
【產(chǎn)品設(shè)計】流浪貓蓄愁，364994559@qq.com撮抓；
【體驗(yàn)設(shè)計】兜兜，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；
【數(shù)據(jù)】fox009521辉词，42151960@qq.com猾骡；
【安全】保密，你懂的隘蝎。
