線上教室

學習標籤語言(HTML5)

講義

HTML5 運作方式

HTML5 是由一組技術組成，除了原有的 HTML 標籤語言外，又加了擴充元件。再加上 CSS3 ，給我們更多設計網頁樣式的能力，還有 JavaScript API，可以提供渦輪引擎讓我們取用。

HTML5 技術簡介

載入網頁文件
建立文件模型
載入 JavaScript
運用 JavaScript API

【範例】歌曲播放器

Lesson1

sample01.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>歌曲播放器</title>
        <meta charset="utf-8">
        <script src="playlist.js"></script>
        <link rel="stylesheet" href="playlist.css">
    </head>
    <body>
        <form>
            <input type="text" id="songTextInput" size="40" placeholder="Song name">
            <input type="button" id="addButton" value="加入歌曲">
        </form>
        <ul id="playlist">
            
        </ul>
    </body>
</html>

【執行結果】

Lesson2

sample02.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>歌曲播放器</title>
        <meta charset="utf-8">
        <script src="playlist.js"></script>
        <link rel="stylesheet" href="playlist.css">
    </head>
    <body>
        <form>
            <input type="text" id="songTextInput" size="40" placeholder="Song name">
            <input type="button" id="addButton" value="加入歌曲">
        </form>
        <ul id="playlist">
            
        </ul>
    </body>
</html>

playlist.js

window.onload = init;
function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}
function handleButtonClick() {
    alert("加入歌曲這個按鈕被按下了!");
}

【執行結果】

Lesson3

sample03.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>歌曲播放器</title>
        <meta charset="utf-8">
        <script src="playlist.js"></script>
        <link rel="stylesheet" href="playlist.css">
    </head>
    <body>
        <form>
            <input type="text" id="songTextInput" size="40" placeholder="Song name">
            <input type="button" id="addButton" value="加入歌曲">
        </form>
        <ul id="playlist">
            
        </ul>
    </body>
</html>

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;
    if ( songName == "" ) {
        alert("請輸入歌曲名稱");
    } else {
        var li = document.createElement("li");
        li.innerHTML = songName;
        var ul = document.getElementById("playlist");
        ul.appendChild(li);
        textInput.value = "";
    }
}

【執行結果】