JavaScript Articles

Article / Updated 08-02-2022

HTML5 brings some pretty amazing new functionality to JavaScript web pages, and the HTML 5 APIs are rapidly giving web browsers access to new universes of data and making installable computer applications a thing of the past. However, not every browser is on board with the future yet. Or, not every browser can agree on what that future should be. As a result, it’s quite possible, and quite common to want to use a particular HTML tag or API and find that it just doesn’t work in some browsers. Fortunately, some ingenious folks have come up with a strategy, called polyfills, for implementing features in browsers that don’t yet support them. Modernizr is a JavaScript library that detects whether a browser supports features of HTML5 and CSS3. A typical way to use a polyfill is to first detect whether the user’s browser supports the feature in question, using Modernizr, and then use the polyfill if not. To install Modernizr, select the particular tests that you'll be using in your web application, and build a custom version of the library that you can then import into your website using the script element. Modernizr uses a simple syntax to select between different paths based on whether a user’s browser supports a feature. For example, here’s a Modernizr test that checks for geolocation support: Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); A common case in which you would want to use a polyfill is with video. The HTML5 video element allows browsers to play videos without using any plugins. However, different browsers require different video formats, and some older browsers don’t support the video element at all. In order to smooth over these differences, you can include and use a JavaScript polyfill called MediaElement.js. To use it, you can simply download and include the appropriate JavaScript and CSS files and include the following script elements in the head of your document: <script src="jquery.js"></script> <script src="mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="mediaelementplayer.css" /> Then, using just a single video file in any browser can be as simple as just using the video element and specifying a single .mp4 source file. <video src="myvideo.mp4" width="320" height="240"></video> If the browser doesn’t support the video element or this format, a Flash video player will be used as a backup. Polyfills exist for nearly every new HTML5 feature. A complete list of polyfills is maintained by Modernizr.

Cheat Sheet / Updated 03-03-2022

jQuery is a powerful and simple JavaScript library that you can use to select elements in your Web page, add impressive special effects, and insert content. Also find great resources for jQuery tips, tutorials, and plug-ins.

Cheat Sheet / Updated 03-03-2022

Master coding with JavaScript by discovering which words are reserved in JavaScript, an extensive list of HTML5 APIs, and jQuery selectors. Just check out these helpful tips to get started.

Cheat Sheet / Updated 02-25-2022

When you’re programming in JavaScript, you need to know how to convert CSS property names to JavaScript. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events, including those listed here. Finally, some words cannot be used as JavaScript variables, functions, methods, loop labels, or object names; those reserved words are listed here.

Cheat Sheet / Updated 02-18-2022

JavaScript opens up Web pages to you so that you can add interactive features and those user-friendly touches. Of course, you have to know how to fit JavaScript into existing code and what to input to get the effects you want. And, when things aren't working well, you may need a little help troubleshooting the problem to get back on track.

Step by Step / Updated 03-07-2017

JavaScript has more libraries, resources, and helpful tools for working with it than for any other programming language. Here are ten of the best resources for helping you write more and better JavaScript.

Step by Step / Updated 01-26-2017

You’ve only just begun your JavaScript journey. The universe of tools, frameworks, and libraries built with JavaScript and that will help you write better JavaScript programs is vast and growing at a mind-boggling pace. Here are ten great JavaScript frameworks and libraries.

Article / Updated 01-24-2017

When coding with JavaScript, it will benefit you to know certain reserved words. The following list contains JavaScript reserved words. You can’t use these words as JavaScript variables, functions, methods, loop labels, or object names. abstract final public boolean finally return break float short byte for static case function super catch goto switch char if synchronized class implements this const import throw continue in throws debugger instanceof transient default int true delete interface try do long typeof double native var else new void enum null volatile export package while extends private with false protected

Article / Updated 01-24-2017

JavaScript has some reserved words you should know before you begin coding. The following table contains a list of JavaScript reserved words, which cannot be used as JavaScript variables, functions, methods, loop labels, or object names. abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with

Article / Updated 03-26-2016

You can think of JavaScript as an extension to HTML; an add-on, if you will. Here's how it works. HTML tags create objects; JavaScript lets you manipulate those objects. For example, you use the HTML and tags to create a Web page, or document. As shown in Table 1, after that document is created, you can interact with it by using JavaScript. For example, you can use a special JavaScript construct called the onLoad event handler to trigger an action — play a little welcoming tune, perhaps — when the document is loaded onto a Web browser. Examples of other HTML objects that you interact with using JavaScript include windows, text fields, images, and embedded Java applets. Table 1: Creating and Working with Objects Object HTML Tag JavaScript Web page . . . document Image document.myImage HTML form . . . document.myForm Button document.myForm.myButton To add JavaScript to a Web page, all you have to do is embed JavaScript code in an HTML file. Below the line in which you embed the JavaScript code, you can reference, or call, that JavaScript code in response to an event handler or an HTML link. You have two choices when it comes to embedding JavaScript code in an HTML file: You can use the and tags to include JavaScript code directly into an HTML file. In the example below, a JavaScript function called processOrder() is defined at the top of the HTML file. Further down in the HTML file, the JavaScript function is associated with an event handler — specifically, the processOrder button's onClick event handler. (In other words, the JavaScript code contained in the processOrder() function runs when a user clicks the processOrder button.) <br /> // JavaScript statements go here<br /> function processOrder() {<br /> // More JavaScript statements go here<br /> }<br />... You can use the and tags to include a separate, external JavaScript file (a file containing only JavaScript statements and bearing a .js extension) into an HTML file. In the example below, the JavaScript processOrder() function is defined in the myJSfile.js file. The function is triggered, or called, when the user clicks the Click Here to Process Your Order link. <br />Click here to process your order.... Because Web pages aren't made of HTML alone, JavaScript provides access to more than just HTML objects. JavaScript also provides access to browser- and platform-specific objects. Browser plug-ins (such as RealPlayer and Adobe Acrobat), the name and version of a particular viewer's browser, and the current date are all examples of non-HTML objects that you can work with by using JavaScript. Together, all the objects that make up a Web site — HTML objects, browser- and platform-related objects, and special objects built right into the JavaScript language — are known as the document object model (DOM).