Client Side Web API
Client Side Web API
Client Side Web API
API abstracts more complex code away from you, providing some
easier syntax to use in its place.
Introduction to Web API
Browser API
Built into your web browser and are able to expose data from the browser and
surrounding computer environment and do useful complex things with it.
JavaScript framework
Packages of HTML, CSS, JavaScript, and other technologies you install and then use
to write an entire web application from scratch. Eg: Angular and Ember.
Window object – represents the tab that the browser loads into.
Usage: to manipulate the document in the browser, store data
specific to the client-side browser data-specific
//css
body {
padding: 20px;
background-color: #ffffc9;
}
button {
margin: 0.5rem 0;
}
function geoFindMe() {
const status = document.querySelector("#status");
const mapLink = document.querySelector("#map-link");
mapLink.href = "";
mapLink.textContent = "";
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
status.textContent = "";
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
}
function error() {
status.textContent = "Unable to retrieve your location";
} if (!navigator.geolocation) {
status.textContent = "Geolocation is not supported by your browser";
} else { status.textContent = "Locating…";
navigator.geolocation.getCurrentPosition(success, error); }
}
document.querySelector("#find-me").addEventListener("click", geoFindMe);
MapQuest API
MapQuest API
MDN Web Docs. Client-side Web APIs. Client-side web APIs - Learn
web development | MDN (mozilla.org)