Invented in the mid 1990s by Brendan Eich while he was working at Netscape, JavaScript has become the quintessential scripting language for the web. Virtually every popular web site on the Internet uses JavaScript.
JavaScript is used primarily to add interactive and animated features to a web page. JavaScript can make measurements and calculations of characteristics of a web page or web browser, and programmatically use them to control a page's content, layout, and functionality.
Examples of JavaScript Use on the Web
Since JavaScript can manipulate HTML and web browser behavior, it is used in a variety of applications. The following list includes just a few of the most common uses of JavaScript today.
- Creating games and animation: Including advertisements, web games, and other types of animation. This was once accomplished by Adobe Flash, but is now done, in most cases, with JavaScript.
- Processing & validating data: Gathering data from a device's GPS chip, analyzing when and where users click, ensuring that users enter valid data into a form field, etc. These types of validation are done most efficiently with JavaScript.
- Dynamically loading content: Many pages today do not load all of the content of the page at once, allowing the page to load more quickly. When the user scrolls or clicks a button, JavaScript can be used to load more page content. This is commonly referred to Asynchronous JavaScript and XML, or AJAX.
- Enabling advanced layouts: JavaScript can create some layouts more easily than CSS. The best example of this is vertical alignment and positioning relative to the height of the page. JavaScript can also help ensure that a site's navigation is available and usable across multiple device sizes.
- Creating menu & slide show systems: Any time an object appears, hides, or moves in the web browser, you can most likely attribute that to JavaScript. Slide shows, drop-down and fly-out menus, photo galleries, tabbed navigation, and pop-up menus are all examples of JavaScript.
While JavaScript is a versatile language, a majority of its uses fall in the last three items in the list. We will not be learning how to work with AJAX today, but we will be creating a slide show. Our slide show will allow us to explore hiding and showing content, a crucial skill involved in both creating advanced layouts and creating menu and slide show systems.
Exploring the finished project
In order to get an idea of what we wish to accomplish by the end of the workshop, let's open a copy of the finished product in a web browser.
Step 1. Launch the Firefox web browser.
NOTE: These materials are written for the Firefox web browser. While the tasks we perform will be possible in every other browser, Firefox offers a cleaner interface for learning.
Step 2. To begin opening a file, press:
Control key+O
Setting the Location for Opening Your File
When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.
We will start at the desktop, since our exercise file folder, epclass, is located there.
Step 1.To move to the desktop,
Click
Step 2. To open the JavaScript Basics folder,
Double-Click JavaScript Basics
Step 3. To open the finished product,
Double-Click final.html