Getting Started With JavaScript Boxes

An introduction to coding in JavaScript. You'll learn how to code a page that dynamically changes background and text color when a link is hovered over. This exercise teaches you about JavaScript Events, Functions, Objects, and Properties. A very good tutorial oriented toward non-programmers.

How to make little pop up boxes that annoy people and how to use these boxes to explore more JavaScript Events.

Learn how to use parameters to send data to your functions and streamline your code.

Learn how to make and use confirm() boxes. These boxes give the viewer two options to pick from. Learn how to detect Boolean values with the IF/ELSE statement -- one of the most powerful statements in JavaScript.

Learn how to use Prompt Boxes to gather data from a viewer and use that data in your web pages.

This lesson explores using the "document.write()" method to write HTML tags for all sorts of neat effects.

A quick review of the principles learned so far including objects, properties, methods, functions, and events.

Make sure you can do these exercises before moving on.

Browsers, Windows, & Frames

Learn how to tell what browser and browser version your viewers are using.

How and why you need to use browser detection. This lesson uses detection based on a browser's name.

How to make pop up windows and close them using JavaScript.

How to size and shape your windows. How to add and remove window features in the windows you open. This includes menu bars, toolbars, even scrollbars.

How to position your pop up window on the screen, as well as, how to shift focus between the parent and child window(s).

How a function coded in one window can change objects in another one.

How to write text to the status bar at the bottom of the browser window.

How to use JavaScript to make a link that loads multiple frames. This is an important overview for referencing frames.

The Document Object - Images

Learn how to code the popular and flexible image rollover using JavaScript.

How to code several rollovers on one page efficiently.

How to make images change over time without the need for any viewer action.

How to make an event in one window or frame roll an image in another window or frame. Good practice for using JavaScript Object References.

See if you can make all of the rollovers in the page linked above.

The Document Object -- Pop Up Menus

How to make a box pop up and disappear in the Internet Explorer browser. This is the foundation for pop up menu systems.

How to make your box or menu pop up in IE, Netscape, and Opera.

How to make one function manage as many pop up boxes and menus as you'd like. Includes a description of "object detection" as opposed to "browser detection".

How to make pop up menus for site navigation. This includes some development and styling tips.

Some thoughts on positioning your menus and what events to use to trigger them.

Using percentage values to place your menus so that they'll appear in the same relative place at all resolutions.

Test your skills at making pop up boxes and menus.

Dynamic Styling With JavaScript

How to dynamically change CSS styling with JavaScript for all modern browsers with one statement. Dynamically change a <div>'s background, font, border, etc. This is just like tuning "visibility:" off and on with pop up menus.

A useful table of CSS properties and their JavaScript reference. Also a usage guide for IE, Netscape, Opera, and other Mozilla browsers.

How to use dynamic styling in Netscape 4.x.

Some Handy Techniques

How to make an external ".js" file and link it to your pages.

How to use JavaScript, along with external Cascading StyleSheets to determine what browser the viewer is using and directing it to the stylesheet appropriate for it. Great for cross-browser styling problems