資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學HTML5中最重要的API是什麼？
API 也被稱為“應用程式程式設計介面”。它是一組定義、工具和協議的集合，使各種軟體程式之間能夠互動和通訊。開發人員可以與服務、庫或平臺進行互動，而無需瞭解其所有操作技術，因為 API 定義了他們可以使用的 方法和資料結構。
API 對於軟體開發至關重要，因為它們允許程式設計師使用其他軟體元件提供的功能和服務來建立更復雜的應用程式。它們促進了各種軟體系統之間的模組化和協作。讓我們深入瞭解本文，學習更多關於 HTML5 中 API 的知識。
HTML 拖放 API
拖放 (DnD) 是一種強大的使用者介面概念，它使用滑鼠點選簡化了專案的複製、重新排序和刪除。這允許使用者點選並按住滑鼠按鈕，將其懸停在元素上，將其拖動到另一個位置，然後釋放滑鼠按鈕以將元素放置在那裡。
示例
在下面的示例中，我們執行指令碼以建立拖放。
<!DOCTYPE HTML>
<html>
<head>
<style>
#tutorial {
width: 200px;
height: 69px;
padding: 9px;
border: 2px solid #DE3163;
}
body {
font-family: verdana;
background-color: #D5F5E3;
color: #DE3163;
}
</style>
</head>
<body>
<h2>Drag and Drop the image in the box</h2>
<img id="drag1" src="https://tutorialspoint.tw/cg/images/logo.png" draggable="true" ondragstart="tutorial2(event)" width="200" height="70">
<br>
<br>
<br>
<div id="tutorial" ondrop="tutorial3(event)" ondragover="tutorial1(event)"></div>
<script>
function tutorial1(x) {
x.preventDefault();
}
function tutorial2(x) {
x.dataTransfer.setData("tp", x.target.id);
}
function tutorial3(x) {
x.preventDefault();
var result = x.dataTransfer.getData("tp");
x.target.appendChild(document.getElementById(result));
}
</script>
</body>
</html>
當我們執行上述指令碼時，它將生成一個包含影像和 div 框以及網頁上文字的輸出。當用戶開始拖動影像時，將觸發拖動事件；當他將影像放在框中時，將觸發放置事件。
HTML Web Storage API
Web 應用程式可以使用 Web 儲存在使用者的瀏覽器中本地儲存資料。在 HTML5 之前，應用程式資料必須儲存在 cookie 中，並隨每個伺服器請求一起傳送。使用 Web 儲存，可以安全地將大量資料本地儲存，而不會降低網站的功能。
與 cookie 相比，沒有資訊傳輸到伺服器，並且儲存容量更大（至少 5MB）。Web 儲存是按來源（按域和協議）進行的。來自一個來源的所有頁面都可以儲存和訪問相同的資料。HTML Web 儲存提供兩個物件用於在客戶端儲存資料。
Window.localStorage − 儲存的資料沒有過期時間。
Window.sessionStorage − 資料將儲存在特定會話期間。
示例
以下是一個示例，我們將使用 localStorage 在 Web 上儲存資料，且資料永不過期。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示輸入欄位和點選按鈕。當用戶在輸入欄位中輸入文字並點選按鈕時，文字將儲存在 localStorage 中。
HTML Geolocation API
Geolocation 是 HTML5 中最強大的 API 之一，用於確定 Web 應用程式中使用者的地理位置。使用 HTML5，您現在可以瀏覽到訪問者當前網站的緯度和經度座標。這些座標可以被 JavaScript 記錄並傳輸到伺服器，允許網站顯示您的當前位置。
大多數地理位置服務使用內部 GPS 裝置、網路路由地址（如 IP 地址）、RFID、WIFI 和 MAC 地址，或這些地址的組合來確定使用者的位置。
語法
以下是 HTML Geolocation 的語法
var loc = navigator.geolocation
示例
讓我們看看下面的示例，我們將獲取使用者的當前位置。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<div id="tutorial">
<h2>TUTORIALSPOINT</h2>
<button type="button" onclick="mytutorial()"> Click to get Location </button>
</div>
<script>
var x = document.getElementById("tutorial");
var y = navigator.geolocation;
function mytutorial() {
if (y) y.getCurrentPosition(mytutorial1);
else x.innerHTML = "does " + "not support the Geolocation API.";
}
function mytutorial1(a) {
x.innerHTML = "Latitude: " + a.coords.latitude + " < br > Longitude: " +
a.coords.longitude;
}
</script>
</body>
</html>
當我們執行上述程式碼時，它將生成一個包含文字和網頁上點選按鈕的輸出。當用戶點選按鈕時，它將請求獲取其位置的許可權。獲得許可權後，它將在網頁上顯示其當前位置。
瀏覽量：244
