Adding Interactivity to Websites
- Zooming in on an image when you hover over it
- Clicking through a carousel of images
- Changing the color of text when the cursor hovers over it
- Show or hide menu items when you click on them (accordion-style, hamburger-style, etc.)
- Displaying a count-down timer that starts, counts, pauses, and stops
- Checking form fields when you type
- Submitting a form when you hit enter
- Adding animations when you scroll
Developing Servers and Server-Side Applications
Creating Web and Mobile Applications
Add Event Listeners
Examples of things you might use event listeners for include drop-down menus, pop ups, and other interactions where the user performs something on the page, like a click. Event listeners can also tell when a user keys information into a form or when they leave a form field.
Output to the Webpage
Use the Console
You can also use the console.log() function to output messages into the console. This is great for debugging because you can test what parts of your code are executing and when and what data they’re handling.
In addition to using built-in functions, you can create custom functions for use in your scripts. You can name functions anything you want and then refer to it by that name when you call it to action.
The way functions work is that you first tell the browser what series of directions, then you tell the browser when to execute the directions. The first step is to define what the function will do, and the second is to call it, or execute it.
Functions usually perform some logic and can also do things like add elements to the page, change the display of elements on a webpage, or otherwise manipulate the DOM. They may or may not return a value. If they do, the value can be stored in a variable or otherwise used elsewhere in the script.
React is especially good for use with mobile applications, although it’s widely used on the web. Many mobile apps are made using React Native, a version of the framework explicitly made for mobile applications.
In addition, Angular is a great library to use when you need a dynamic web application that responds to user inputs with data. You can use it alongside other libraries to create full, rich applications that make the most of your data.
EaselJS is primarily a game development library made to enhance graphics. With EaselJS, you can make and animate high-performance, interactive two-dimensional content based on HTML5.
In addition to using EaselJS to create games, you can use it to make data visualizations, generative art, and advertisements. It has no dependencies outside itself, so you can use it along with many other frameworks.
Chart.js makes developing responsive charts and graphics simple. It allows you to create eight different kinds of charts, visually representing the data underlying your application. With Chart.js, you can not only create accurate graphics, but you can also animate them. This library allows you to plot and visualize all kinds of datasets with vastly different scales.
Parsley is a form validation library that you can use to make your site more secure. It adds front-end validation to your fields so that users cannot submit the forms without passing certain rules that you set. It can also be used when handling Ajax requests and promises.