Advanced Javascript Tutorials

From JavaScript Kit

Latest Tutorials

• JavaScript and memory leaks -If you're not careful, your JavaScript code may leak memory and sometimes even bring the visitor's browser to its knees. This tutorial looks at different leak patterns in JavaScript and how to fix them.
• JavaScript Closures 101- they're not magic - Morris Johns explains JavaScript closures, a powerful yet often bewildering concept, in a gentle, step by step fashion.
• Conditional Compilation of JScript/ JavaScript in IE - IE supports a little known feature called conditional compilation that selectively compiles any block of JScript or JavaScript depending on your script logic. Think of it as the absolute form of object detection.
• External JavaScript and PHP - External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.
• Changing Select element content on the fly - This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.
• Determining cookie support in client's browser - If your script relies on JavaScript cookies to store and persist information, it's a good idea to always first make sure the user's browser has cookies enabled. This tutorial shows you how to perform this detection.
  Sorting and filtering a Tabular Data Control - A Tabular Data Control can easily be sorted and filtered before its data is shown on the page. The following two tutorials examine this:- Sorting a Tabular Data Control- Filtering a Tabular Data Control
• Introduction to Tabular Data Control (IE) - Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple client side "database." Learn about TDC and how to use JavaScript to manipulate it in this tutorial.
• Introductory Guide to Regular Expressions - Always wanted to learn about Regular Expressions in JavaScript? With this comprehensive yet gentle tutorial on the subject, you'll be on your way to slashing and validating string input using Regular Expressions in no time!
• Programmer's Guide to Regular Expressions - Concise, to-the-point tutorial on Regular Expressions with sections on more advanced aspects of the feature.
• JavaScript and Object Oriented Programming (OOP) - JavaScript may not be known for its object oriented properties, but it does support most of the features required to be considered an Object Oriented language. See how to write OOP code in JavaScript.
• Formatting numbers for decimals and significant digits - Need to display a number in currency format? How about a number that is x digits in length? See how to easily, using two new methods of JavaScript 1.5+.

Click to Read More

Introduction to Dynamic HTML

By Aaron Weiss

Dynamic HTML builds upon existing HTML standards to expand the possibilities of Web page design, presentation, and interaction. Ultimately, mastering DHTML will allow you to build Web-based applications, rather than mere portraits of data. Because DHTML is essentially an "added value" technology, you should be rather familiar with basic Web page design using traditional HTML specifications. Experience with JavaScript programming is also necessary to employ the potential of DHTML. Consequently, portions of this introduction to DHTML will assume some HTML and JavaScript familiarity.

What and Why
The Web is an ever evolving environment, and Web pages themselves are steadily blooming from static displays of data to interactive applications. "Dynamic HTML" is somewhat of an umbrella term encompassing several ways in which Web developers can breathe life into pages which have traditionally been still portraits of information.

The basic notion behind Dynamic HTML is quite simple: allow any element of a page to be changeable at any time. Sounds like a dream, but as with any simple plan, "God is in the details," as they say. In the olden days, you could only change content on a page via CGI. This required a server to perform the changes to the page and re-serve the entire page, modifications and all, back to the client. While workable, this process was quite slow, as it placed a burden on both network traffic and server processing time. With long delays between a user's action and an on-screen response, building effective Web-based applications was quite constricting.

With DHTML, the magic occurs entirely on the client-side. This means that page modifications should appear immediately following a trigger, such as a user selection. And, remember, the DHTML dream is that you can modify any aspect of the currently loaded page -- text styles, swapped images, context-sensitive forms and tables, and even the on-screen data itself.

It's worth noting here, then, that "Dynamic HTML," isn't really about HTML, the markup language. By and large, DHTML describes the abstract concept of breaking up a page into manipulable elements, and exposing those elements to a scripting language which can perform the manipulations. The degree, or fineness, to which these elements are defined and actionable is a function of DHTML's maturity. And since it has only been around for a year or so, DHTML is not fully mature.

Like the Web itself, Dynamic HTML is ever evolving. At some point, DHTML may self actualize and reach its full potential of "change anything anywhere anytime." It may even change its name -- product developers possess a whimsy for this sort of thing -- but the concepts defined above for modifying elements on a page will necessarily continue to mature.

Click to Read More

Using HTML 3.2, Java 1.1, and CGI

By Eric Ladd and Jim O'Donnell

This book was designed and written from the ground up with two important purposes:

• First, Platinum Edition Using HTML 3.2, Java 1.1, and CGI makes it easy for you to find the most effective means to accomplish any task that needs to be done or present most any kind of information that can be served on the Web.
• Second, this book covers the major Web technologies-not only HTML, Java, and CGI, but also VRML, Web browser scripting languages such as JavaScript and VB Script, and the full range of Microsoft's ActiveX technologies-in a depth and breadth that you won't find anywhere else. It has been expanded well beyond the best-selling Special Edition Using HTML, Second Edition, including almost 500 additional pages of in-depth technical detail, tips, techniques, and troubleshooting solutions. It also includes two CD-ROMs of Web software and HTML versions of some of Que's other related books.

With these goals in mind, how do you use this book?

If you are familiar with HTML and with setting up Web pages and Web sites, you may be able to just skim through the first couple of chapters to see what some of the issues in page and site design are and glance through the basic HTML elements discussed in the first two or three parts. Even if you are familiar with HTML, there may be some information in them that will be new to you. You can then read the advanced sections on HTML, as well as the sections on other Web technologies such as JavaScript and Java, CGI, VRML, and ActiveX technologies to determine which of those elements you want to include in your Web pages.

Platinum Edition Using HTML 3.2, Java 1.1, and CGI was written with the experienced HTML programmer in mind. Your experience may be limited to a simple Web home page you threw together, or you may be designing and programming Web sites. Either way, you will find comprehensive coverage on HTML and other Web technologies. Throughout this book, there are techniques for creating quality, effective Web pages and Web sites.

Click to Read More

Encyclopedia of HTML elements

by Emil Stenström

HTML is a much richer language than what it’s used for. There are 77 elements and each one has a certain purpose. It is possible to find that reason by reading the specification, but who does that? I wrote this list as a way to tell you what I think each of the HTML tags should be used for, common problems you might encounter, and general advise about each one.

I’ve included all the elements from HTML 4.01 Strict. It’s a long one, but I’m sure you have more “tips and tricks” to add to it. Leave a comment and I’ll add yours to the list too. Let’s start off with a list of all the elements:

A, ABBR, ACRONYM, ADDRESS, AREA, B, BASE, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I , IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, META, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, VAR

For people that view this site in a visual browser I added colored bars on all the elements. They represent if an element is recommended to use or not. Green bar means “Use this!”, Yellow means “Consider if you really need it”, and Red means “Don’t use this unless you have a really good reason”.

Click to Read More

CGI Programming Unleashed

By Eugene Eric Kim

The first things you should know about Common Gateway Interface (CGI) are what it is and why it is used. CGI is a standard whose specification defines a way for Web servers to communicate with external programs, and vice versa, so that the external program can generate HTML, images, or whatever, and have the server treat it the same as HTML, images, and so on not generated by an external program. The reason CGI is used is so you can generate dynamic content with the same ease that you generate static content. CGI is used because it is a very well defined and supported standard, and without CGI, dynamic content would have been impossible without proprietary server methods (now, there are alternatives to CGI that are becoming standard).

There are many useful applications of CGI programs. But, as with every other technology, CGI programs have their limits. Also, as with many other technologies, it is not always the best way to do things. For this reason, this chapter will go over what CGI programs can and cannot do, and what CGI based apps are good and bad for.

For comparison's sake, I use Java as the applet language.

What CGI Is Useful For
As stated earlier, CGI is useful for many different tasks. There are different reasons why it is the best method, or the only method, for a variety of tasks. This chapter examines the reasons, separating the tasks into three different levels. First, we cover simple tasks, which we will define as tasks that can be completed in a couple of hours and/or require almost no knowledge of how to program CGI apps/the CGI spec in general. This task level includes counters, among other things. Next, we cover intermediate tasks, which we will define as tasks that can be completed in a day or two and/or tasks that require a pretty good knowledge of how to program CGI apps/the CGI spec in general. This task level includes built from scratch imagemapping programs, apps that generate entire HTML pages, and apps that do animation, among other things. Finally, we cover advanced tasks, which we will define as tasks that take more than a day or two and/or require an expertise in CGI app programming/the CGI spec in general. This task level includes apps that include a home grown database engine, among other things.

Click to Read More

Special Edition Using CGI

By Jeffry Dwight and Michael Erwin

The Common Gateway Interface, or CGI, is one of the most useful tools in a Webmaster's kit. Whether you're the lone maintainer of a single home page on someone else's machine or the Webmaster of a huge domain, you'll find that CGI is essential for anything beyond presenting static text and graphics.

CGI is the magic behind Web-based interactive games, page counters, order-entry systems, online shopping carts, SQL database interfaces, animations, and clickable images. In fact, you'll find that CGI, in one of its many forms, is what brings the World Wide Web to life.

We assume throughout the book that you have at least an intermediate understanding of programming in one or more languages. This book won't teach you how to program, but it will teach you how to use your existing programming skills to make CGI scripts work.

We didn't shy away from complicated topics, but we made sure to cover the fundamentals, too. In all, if you're comfortable with C, Perl, Visual Basic, or AppleScript, you should be able to glean a great deal of information from these pages.

We explain the basics of CGI programming fairly well, so even if you've never thought of writing CGI before, you'll do fine. If you're already an accomplished CGI programmer, you'll find hundreds of tips and tricks throughout the book to expand your repertoire.

Where possible, we used pseudocode or a textual description of the process under discussion. We did this for a couple of reasons: First, this book is intended to be platform-independent, meaning that you should be able to profit from it no matter what server you run and no matter what programming environment you use. Second, a textual description forces the reader (and the author) to focus on the process rather than the syntax. The goal is for you to understand how the magic works, not just what to type.

You'll also find a lot of actual code, both in the pages of the book and on the accompanying CD-ROM. We assume that programmers, once they understand the concepts, will want to go forth and create programs. What better way than to be armed with working samples?

Click to Read More