Application Programming Interfaces
APIs enable entirely different separate systems, written by different people or organizations, to understand and successfully interact with each other.
APIs define a consistent set of functionalities an external developer can implement. APIs provide a set of available actions that can be used by programmers. APIs allow external systems to do the following:
The Document Object Model
The DOM is a visual representation of a HTML/XML document in a browser. It’s also an API that defines the structure of HTML/XML documents.
The DOM is a model of all objects located in a HTML/XML document. It’s initially created from the page’s HTML code and can be optionally modified using Js.
It represents each object’s relationships to other objects and their position in the hierarchy. Sometimes it will appear slightly different from the raw HTML code because in the process of rendering the DOM, the browser will attempt to make any syntax corrections it can. Not all objects in the DOM are visible to the web page users. Metadata is an example of an object type not visible to a person visiting the web page. DOM Application Programming Interfaces (APIs)
The DOM is an API that defines the structure of a HTML/XML document using the tree model.
Since the DOM API provides an automated way to interact with the interface of the page elements, it’s often used by software that needs to access web page information about different sites in an automated way. Ex. Search Engines like Google or Bing. These search engine bots can get more information about the web page structure and it’s elements by looking at the DOM then it can by just looking at the visuals of the web page itself. Having more accurate and well-organized code and result in a more logical DOM tree with better associated metadata which can improve user experience. Examples of better user experience due to a more logical DOM tree: Faster load times, more intuitive navigation, and enhanced accessibility. Ex. The Twitter API defines how a programmer could use a programming language of their choice to send a tweet, delete a tweet, follow an account, send a private message, or perform any number of other actions that a program may want to take on behalf of a user. Analogy: Library System
API: The library catalog and services. Actions: Borrowing books, returning books, searching for books. Actions: Browsing the catalog, checking out books, asking for assistance. Programmer as a Patron’s Assistant: Using the Library System (API): The assistant (programmer) uses the catalog (API) to perform actions like finding books or checking out books on behalf of the patron (user). Key Points:
Catalog (API): Lists all available books (resources) and services (endpoints) and what’s needed to access them (parameters). Interaction: Patrons don’t need to know how the library organizes its books; they just use the catalog. Similarly, developers don’t need to know the internal workings of the platform; they just use the API. Key Points:
Catalog (API): Lists all available books (resources) and services (endpoints) and what’s needed to access them (parameters). Interaction: Patrons don’t need to know how the library organizes its books; they just use the catalog. Similarly, developers don’t need to know the internal workings of the platform; they just use the API. Example:
Patron: “I’d like to borrow ‘Moby Dick’.” API Call: POST /borrow { book: "Moby Dick" } Patron: “I’m returning ‘1984’.” API Call: POST /return { book: "1984" } DOM JavaScript API
The DOM API also includes a DOM JavaScript API which can be used for manipulating the DOM structure.
Elements in the DOM can be retrieved by ID, by class, or by a CSS selector.
These elements can be created, added to the DOM, or removed from the DOM. Their properties and attributes can also be modified. This allows a developer to update the page structure in reaction to user interactions. Using Js to make these DOM changes means it can happen immediately without the web page needing to reload or refresh. Example: An example would be adding an item to a list dynamically, or removing an item that the user has marked as deleted. The DOM is the lifeblood here. It’s where everything goes down in the browser. JavaScript is just the syntax, the language. DOM API Programming Standards
DOM API standards are maintained by WHATWG and W3C.
The DOM API is not a pre-written piece of software used by browsers, but rather an accepted set of rules and requirements that each web browser needs to implement for themselves. What are the main differences between browser APIs and third-party APIs?
Built into the web browser. Provide access to browser and system functionalities, like the DOM, Geolocation, and Web Storage. Created by external services or companies. Provide access to external services like social media, payment gateways, or data from other web services. 2. What are some signs that a website may be using a third-party API for their content?
Embedded maps, social media feeds, or widgets. Payment processing features. External data fetching, like weather information or stock prices. 3. Would a JavaScript library such as jQuery be considered an API? Why or why not?
jQuery provides a set of functions and methods that interact with the DOM and perform other tasks, making it an API for DOM manipulation and other utilities.
Common HTML5 APIs
Geolocation APIs allow a website to identify a visitor’s location. Pointer Events API allows a website to know when a visitor has moved their mouse pointer or interacted with an object on the page. Usually accessed through a website’s Js code. Canvas API can be used to draw graphics outside of the standard HTML document flow, meaning the web app will draw specific content based on the user’s interaction. Drag & Drop API can allow users to organize files or lay out visual elements. History API Allows web applications to interact with the browser's session history, enabling navigation and state management without reloading the page. File System API enables access to a user’s local file system so they can open or save files in a web app. Combinations of many APIs are used together in web applications to improve the user experience and add useful features.
Some browsers may not support a certain API at all. Matter of fact, each browser has a list of APIs they must choose to support and how to implement them. They also must include a list of APIs they do not support. If a browser does not currently support an API, you can substitute it’s functionality with a browser plug-in. Plug-ins and browser extensions still provide a valuable contribution to the web, as they continue to push the limits of what a web browser can do.
Difference Between a Web Page and a Web App
Web Page:
Definition: A document on the web, typically static, containing content like text, images, and links. Usage: Primarily for displaying information. Example: A blog post, news article, or company homepage. Web App:
Definition: An interactive, dynamic application accessed through a web browser. Usage: Provides functionality similar to desktop applications, often involving user input and data processing. Example: Gmail, Google Docs, or social media platforms. Key Differences:
Interactivity: Web apps are highly interactive, while web pages are mostly static. Functionality: Web apps perform tasks and processes, whereas web pages display information.
Using APIs
Building applications in the web browser creates an opportunity to write an application once and have it able to be used across many devices and operating systems, which is much more difficult to achieve with desktop applications.
Canvas API
The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
<canvas id="my-canvas" width = "300" height = "200"></canvas>
A canvas element can be created using HTML or Js, but the most common is to use HTML as displayed above. Three attributes always used with canvas: width & height used to determine the size of the canvas in pixels. If you don’t set a width & height, canvas will default to an initial width of 300px and a height of 150px. id should be specified so that it can be used to access the canvas element from Js. Using this API requires a canvas element to be included on the web page, along with some Js code that executes drawing commands. Rendering Contexts
Canvas supports a few rendering contexts:
2d - used for flat two-dimensional renderings and drawings. For 2d rendering we use the Js method canvas.getContext(’2d’). A canvas without any drawing commands will display only an empty white rectangle. Drawing commands in 2D use a coordinate system where [0,0] is at the top left of the canvas. API allows configuring the stroke style and fill style, which come as black by default. In 2D graphics, the outline is referred to as a stroke. Some of the more relevant canvas methods for drawing rectangles (upper-left corner x,y size w,h) are: strokeRect(x,y,w,h) draws an unfilled rectangle (just the frame); fillRect(x,y,w,h) draws a filled rectangle (color pixels within); clearRect(x,y,w,h "unfills" the rectangle (clear pixels). To get the canvas' 2D rendering context, call on the <canvas> element, supplying '2d' as the argument: Webgl or Webgl2 - used for three-dimensional rendering Canvas element uses the getContext Js method, which is used to request the preferred rendering context.
Geolocation API
For a web browser to identify a person's location, the website itself must be hosted securely under https and the person must also explicitly give permission.
This is because information about a person’s location is sensitive personal information. Geolocation API is accessed in Js via the browser’s navigator API under navigator.geolocation. The Geolocation API offers a getCurrentPosition which accepts three parameters: These three geolocation types of information are provided by a successful Geolocation request: If the geolocation request is successful, then the success handler will be passed a GeolocationPosition object containing a timestamp and any available location information. This function must be called once each time the user's location is required. watchPosition can be used when the user’s location needs to be tracked over time. Uses the same parameters as the getCurrentPosition but will update the user’s location every time a new location is logged. watchPosition can be stopped by the clearWatch function. Different devices will give different levels of accuracy, so this is also important to consider. The results are not always accurate because different devices have different location capabilities. Devices with GPS can take longer to locate but give quite accurate locations, while computers connected via Wi-Fi are usually faster to locate but with a lower level of accuracy.
File API
The File API’s FileReader is one of the oldest and most stable file APIs available. It allows a user to give access to a file on their system so that the web page can process the contents of that file, but it does not give the browser permission to modify or delete the actual file on the user's system.
The HTML5 File API makes the following three actions possible:
Limiting the types of files that can be selected for upload Discovering metadata about a file selected by a user Reading the contents of a file selected by a user How to use the File API
Most basic way to use a file api is add an input element and set the typeset to ‘file’ in your HTML document.
File System Access API
The File System Access API is a newer option for modifying or creating new files. It’s not yet implemented in all browsers, but it’s main purpose is to enable a web app to read and write files in the computer’s local file system .
There are three file system methods available:
showDirectoryPicker - method shows a native directory selection window where the user can select a directory to open. showFilePicker - method shows a similar window, allowing the user to select one or more files showSaveFilePicker - method allows the user to choose where to save a file This API can access private data, and therefore is restricted to use only on websites hosted with https and requires explicit user permission before accessing files.
It supports:
Usefulness
File system interactions from a web app can be very useful when a user needs to upload or edit a file as part of the interaction with the app. Using this API, an app could be designed where a user could upload an image file, edit that file directly in the browser, and then save it back to their computer without ever sending that image to a server. The same could be achieved for video files or text documents, where there could be value in reducing the need to upload large files to a server before editing. What examples of file metadata can be retrieved using the File API?
2. What are the differences between accessing files and accessing directories (folders)?
Involves reading or writing data to individual files. Uses the File and FileReader APIs. Involves interacting with multiple files within a folder. Requires additional capabilities like the Directory API to handle folder structure and multiple files. 3. What is the intended benefit of the in-development File System Access API?
Provides a more powerful and user-friendly way to read and write files directly from the user's local file system. Enhances web applications' ability to handle file operations similar to native applications.
HTML History API
The HTML5 History API allows developers to manipulate the browser's history stack and control the URL displayed in the address bar without reloading the page. It enables the creation of single-page applications (SPAs) with smooth navigation and dynamic content updates.
For most multi-page websites, the browser's built-in history tracking is enough, since it records each page that is visited. However, for web applications it is common to load data in the background and update the page visually without reloading it.
Because the page's URL never changes, the history is never updated and there is no way for the user to navigate back or forward. 
Unit 4: HTML APIs
