HTML5 js 基础知识

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)。如下图： ![DOM](

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；
【安全】保密，你懂的。