Javascript Hub: Strategies to Create Dynamic Web Pages

Javascript is a vital part of dynamic content on the modern web. From simple scripts to complex interactions that require frameworks, Javascript enhances user experiences on the web.

There are two major types of Javascript, and this Udacity Javascript hub covers both. The first type is “vanilla” Javascript, scripts you can write using the basic rules in the Javascript standard. The second type is framework-driven Javascript that creates complex content building upon others’ frameworks, like Angular and React or libraries like FusionCharts.

This Javascript hub contains easy-to-follow guides on a wide range of Javascript topics. Most articles provide sample code to demonstrate how Javascript works in the real world.

This hub is meant to be a comprehensive resource, so we will add new content as it’s published. Check back here for more Javascript content.

Continue Reading

Javascript Timers and Javascript Wait Functions: Handling Execution Times

Dynamic content, or content that changes when a user interacts with a web page, is an integral part of the modern web experience. Javascript provides web users with a more engaging web experience by making it easy to create dynamic content.

A key aspect of creating dynamic content is making sure that the changing parts of a web page happen at the proper time. When dynamic Javascript effects occur at the wrong times, parts of a web page can become inaccessible, too much content can crowd the screen at once, and users can experience other problems.

The Javascript standard provides two different functions to control dynamic timing: setTimeout() and setInterval(). Each function defines specific times that dynamic events should happen; they work differently and are best used in different contexts..

Continue Reading

What are Javascript Objects? Containers for Reusable Properties and Behaviors

Javascript is a versatile programming language; you can create short scripts of only a few lines or complex modules that contain many. Developers handling many web pages often need to reuse their Javascript code; copying and pasting scripts between pages is a tedious and error-prone process.

The Javascript standard provides the ability to create reusable code in the form of Javascript objects. Javascript objects provide complex functionality with minimal code, making new scripts easy to maintain and fast to load.

Continue Reading

Converting Javascript Objects into Strings with JSON.stringify()

JSON stringification is the process of converting a Javascript object to a flat JSON string that can be used inside a program. In Javascript, the standard way to do this is by using the method JSON.stringify(), as the Javascript standard specifies.

JSON.stringify() is the opposite of JSON.parse(), which converts JSON into Javascript objects. This article and Udacity’s JSON.parse() article have similar structures to emphasize the close relationship between the two functions.

Continue Reading

Manipulating HTML Through the Javascript Document Object Model (DOM)

Javascript creates dynamic content on web pages by manipulating the underlying HTML structure. Browsers manage HTML internally as a tree of objects called the Document Object Model, or DOM. Developers refer to the tree objects as “elements.” The DOM also applies to XML and XHTML documents, which most modern browsers can display as well.

The DOM standard specifies how a browser builds an HTML tree and how scripting languages like Javascript should access elements in that tree. Although the Javascript standard implements concepts from the DOM standard, the two standards are different, maintained by different groups.

Continue Reading

Comparing Values by Using Operators: Javascript AND, Javascript OR, and Many More

Comparing one value to another is an important programming technique that developers use to create logical flows. Javascript provides many ways to compare simple values using language constructs called “operators.”

The Javascript standard defines two different types of simple operators.

  • Logical Operators — logical relationships between values
  • Comparison Operators — how values are related to each other

These operators work with Javascript data types that hold simple values, like strings or numbers, but cannot handle complex values like Javascript objects, arrays, or functions. To compare complex objects, developers must write their own comparison functions.

Make sure that the compared values or variables are the same data type; otherwise you may get an answer you don’t expect. Each operator type has different rules for valid comparisons, which the next sections will cover in more detail.

Continue Reading

Handling Errors with Javascript Try Catch Statements

To the surprise of many programmers, errors in Javascript programs are not always a mark of bad programming. Sometimes, it’s important for an error to occur so a programmer knows something is wrong, like when a program doesn’t get the input it needs or can’t connect to a resource properly.

By default, a Javascript error prevents the execution of any more Javascript code. In some contexts, though, developers might want to skip over an error and continue executing a program. This process is called error handling, and Javascript manages this with special code structures called Javascript try catch statements, defined in the Javascript standard.

Continue Reading