JavaScript APIs and Libraries

[Pages:37]INLS 572

Web Development

JavaScript Application Programming Interfaces (APIs) and Libraries

Joan Boone

jpboone@email.unc.edu

Slide 1

Part 1: Overview Part 2: Video Part 3: Audio Part 4: Maps Part 5: Charts Part 6: W3.CSS and Slideshows

Slide 2

What are APIs ?

Application Programming Interfaces are collections of code and tools that are available in all programming languages, and that allow developers to create complex functionality more easily.

? Provide building blocks of code that simplify the interface to complex functions by abstracting away the underlying details

? Provide common, frequently needed functions that allow developers to reuse existing code

JavaScript (client-side) has many APIs that fall into 2 categories

? Browser APIs that are built into your browser, e.g., DOM API ? Third party APIs ? not built into your browser, and you need to access the

code and documentation from the vendor's website.

Source: MDN Web Docs: Introduction to Web APIs

Slide 3

What can APIs do?

Just about anything you need them to do: MDN Web APIs

Most common categories of browser APIs include

DOM APIs for manipulating HTML and CSS Fetching data from the server using XMLHttpRequest or Fetch API,

and returning data in XML or JSON format Drawing and manipulating graphics (Canvas, WebGL) Audio and Video APIs that allow you to customize user interfaces Device APIs to access device features such as GPS, camera,

orientation, vibration Client-side storage APIs that enable offline app use, and saving state

of apps between page loads.

Many third-party APIs: Social media, news, open data, ...

Source: MDN Web Docs: Introduction to Web APIs

Slide 4

DOM APIs that we've already used to access and modify HTML content and style

Accessing HTML content

var dateElement = document.querySelector("#todays-date");

Modifying HTML content

dateElement.textContent = todaysDate; dateElement.textContent = todaysDate.toDateString();

Modifying styles of HTML content

dateElement.style.fontStyle = "italic"; details.style.display = "none";

Adding a click event to HTML element

logo.addEventListener('click', changeLogo); moreLess.addEventListener('click', toggleContent);

Slide 5

JavaScript Libraries

Libraries, in any programming language, are typically a collection of files that contain functions. In JavaScript libraries, these are functions that you can reference in your web page, and have the advantages of

? Simplifying coding by providing functions for common tasks ? Reusing existing code that has already been tested ? Enabling faster development

Your JavaScript can use these library functions by calling them via a documented interface, or an application programming interface (API).

Frameworks are a "next step up" from libraries because they tend to be packages of HTML, CSS, and JavaScript that you install and use to build web applications.

The key difference between a library and framework is "Inversion of Control". When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.

Source: MDN Web Docs: Introduction to Web APIs

Slide 6

Using JavaScript Libraries

There are many free libraries available

How to use them? Generally, they are all structured in a similar way.

? First, review the demos and examples to see if the library has the functionality you are looking for

? Download the examples, and find one that is similar to what you want to do. Understand how it works!

? Link to, or download, the JavaScript and CSS files used by the library

? Modify the example code (or write your own version) ? Check the documentation for ways to customize the code

Slide 7

Part 1: Overview Part 2: Video Part 3: Audio Part 4: Maps Part 5: Charts Part 6: W3.CSS and Slideshows

Slide 8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download