JavaScript

Covers JavaScript, the most popular browser scripting language, and some clever tips & tricks.

JavaScript Tabs – Create Tabbed Web Pages Easily

17 March 2009 / 307 Comments

This tutorial shows how to create a Web page containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked — perfect if your page needs to hold a large amount of content. It’s also great for things such as multi-step (“wizard”-style) Web forms.

Click the link below to see a tabbed page in action:

See JavaScript tabs in action

The JavaScript and markup are coded in such a way that the page degrades gracefully in browsers that don’t support JavaScript.

In this tutorial you learn how this tabbed page is put together. You can then use the code and ideas to build your own tabbed Web pages. Let’s get started!

A JavaScript Accordion to Show and Hide HTML

19 January 2009 / 29 Comments

In this tutorial you learn how to create a JavaScript accordion script using the Document Object Model. What’s an accordion? Click the link below to find out!

See the JavaScript accordion in action

As you can see, a JavaScript accordion is a useful way to squeeze lots of page content into a small space. It consists of a list of items, of which only one is expanded at any one time. When you click on another item’s heading, the first item collapses and the second item expands.

Let’s see how the accordion is put together.

Changing Page Elements with the DOM

28 November 2008 / 2 Comments

So far, you’ve looked at how to get hold of page elements using JavaScript and the DOM, and how to look inside those elements to retrieve their contents.

In this tutorial, you’ll take your skills a step further, and learn how to change elements. You’ll see how to:

Change the content inside an element
Add and remove elements in the page
Move an element to a different position in the page, and
Manipulate element attributes.

Once you know how to manipulate DOM elements you can start creating flexible, JavaScript-generated Web content.

Looking Inside DOM Page Elements

7 November 2008 / Leave a Comment

In my last DOM tutorial, you learned how to access the elements inside your Web page as JavaScript objects. Once you’ve done that, how do you find out more about each element? This tutorial shows you how to delve deep into any DOM element object.

Retrieving Page Elements via the DOM

31 October 2008 / Leave a Comment

In the last DOM article, you learned that the DOM represents the contents of a Web page as a “tree” of JavaScript objects. By accessing the parts of the tree, called the nodes, you can read existing page content, alter content, and even add new content from scratch.

In this article you’ll learn how to locate and retrieve the elements of a Web page using JavaScript and the DOM.

Introducing the JavaScript DOM

3 October 2008 / Leave a Comment

The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:

Create tabbed Web pages
Create expandable/collapsible (“accordion”-style) Web page elements
Generate Web page content dynamically (on the fly)

In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.

Using Javascript’s Location Object to Work with URLs

28 July 2008 / 2 Comments

JavaScript gives you many ways to access and change the current URL that is displayed in the visitor’s browser. All these techniques use the Location object, which is itself a property of the Window object. You can create a new Location object that contains the current URL as follows:


var currentURL = window.location;

In this tutorial, you explore all the properties and methods of the Location object. You learn:

How to read all the different parts of a URL
How to send the visitor to another page by changing the URL, and
How to automatically reload or refresh the page.

Nested Arrays in JavaScript

10 June 2008 / 14 Comments

In previous tutorials we’ve taken a look at JavaScript array basics, manipulating arrays, and sorting arrays. So far, all the arrays we’ve dealt with have been “flat” arrays; each array element contains a single value, such as a number, string, or object.

However, like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays. For example:

Sorting JavaScript Arrays

27 May 2008 / 2 Comments

Previously we looked at the basics of JavaScript arrays, and showed how to manipulate the elements within them. In this tutorial, we take a look at how to sort array elements. You learn how to reverse the order of an array; how to sort an array alphabetically; and how to sort an array’s elements into any order you like.

Manipulating JavaScript Arrays

19 May 2008 / Leave a Comment

My first tutorial on JavaScript arrays covered the basics: creating arrays, accessing the contents of arrays, array lengths, and looping through arrays.

In this tutorial, you explore arrays in more depth, and learn how to use various methods of the Array object to manipulate arrays.

JavaScript

Footer

Contact Matt

Follow Matt