• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript

JavaScript

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

See also:
  • The Document Object Model
  • jQuery
  • JavaScript Arrays

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:

JavaScript tabs screenshot
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!

[Read more…] about JavaScript Tabs – Create Tabbed Web Pages Easily

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!

JavaScript accordion screenshot
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.

[Read more…] about A JavaScript Accordion to Show and Hide HTML

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.

[Read more…] about Changing Page Elements with the DOM

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.

[Read more…] about Looking Inside DOM Page Elements

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.

[Read more…] about Retrieving Page Elements via 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.

[Read more…] about Introducing the JavaScript DOM

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.

[Read more…] about Using Javascript’s Location Object to Work with URLs

Nested Arrays in JavaScript

10 June 2008 / 13 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:

[Read more…] about Nested Arrays in JavaScript

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.

[Read more…] about Sorting JavaScript Arrays

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.

[Read more…] about Manipulating JavaScript Arrays

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits