HTML5与JavaScript程序设计

HTML5和JavaScript是当今互联网应用开发的两个重要技术。HTML5作为最新的HTML标准，提供了丰富的标记语言和API，使得开发者可以更加灵活、高效地构建各种应用。而JavaScript作为一种脚本语言，可以为HTML5页面添加交互性和动态性。

在本文中，我们将介绍HTML5和JavaScript的一些基本概念和用法，并给出相应的代码示例。

HTML5

HTML5是超文本标记语言的最新版本，它提供了一些新的标记和API，包括语义化标记、多媒体支持、离线存储、地理定位等功能。

语义化标记

HTML5引入了一些新的标记，如<header>、<nav>、<section>、<article>、<footer>等，用于更好地描述页面结构。这样，开发者可以更好地理解和维护页面代码。

<header>
  网页标题
  <nav>
    <ul>
      <li><a rel="nofollow" href="#">导航1</a></li>
      <li><a rel="nofollow" href="#">导航2</a></li>
      <li><a rel="nofollow" href="#">导航3</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>文章标题</h2>
  <p>文章内容</p>
</section>

<footer>
  版权信息
</footer>

多媒体支持

HTML5提供了<audio>和<video>标签，使得在网页中播放音频和视频变得更简单。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

离线存储

HTML5的离线存储功能允许网页在离线状态下仍然可以访问，提供更好的用户体验。

<!DOCTYPE html>
<html manifest="cache.manifest">
...
</html>

cache.manifest文件内容如下：

CACHE MANIFEST
# 版本号

CACHE:
index.html
style.css
image.jpg

NETWORK:
*

FALLBACK:
/page.html /fallback.html

地理定位

HTML5的地理定位API允许网页获取用户的地理位置信息，可以用于实现位置相关的功能。

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  // 处理位置信息
}, function(error) {
  // 处理错误信息
});

JavaScript

JavaScript是一种脚本语言，与HTML5配合使用可以为页面添加交互性和动态性。

DOM操作

JavaScript可以通过操作DOM来实现对HTML元素的增删改查。

// 获取元素
var element = document.getElementById("elementId");

// 修改元素内容
element.innerHTML = "新内容";

// 创建新元素
var newElement = document.createElement("div");
newElement.innerHTML = "新元素";

// 添加子元素
element.appendChild(newElement);

// 删除元素
element.parentNode.removeChild(element);

事件处理

JavaScript可以为HTML元素添加事件处理函数，实现交互功能。

var button = document.getElementById("buttonId");
button.addEventListener("click", function() {
  // 处理点击事件
});

AJAX请求

JavaScript的AJAX技术可以通过在后台与服务器进行数据交互，实现异步更新页面内容。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理响应数据
  }
};
xhr.open("GET", "data.json", true);
xhr.send();

计算相关的数学公式

在JavaScript中，可以使用Math对象来进行计算。例如，计算圆的面积和周长：

var radius = 5;
var area = Math.PI * Math.pow(radius, 2);
var circumference = 2 * Math.PI * radius;