You are here: Home › Web Developers and Designers Learn How to Build Web Sites
Image coming Soon

Javascript Tutorial

0 April 02, 2012 in JavaScript by advanced

I'll take you from a high-level overview of JavaScript language concepts through several useful scripts you can modify for use in your own pages.

This tutorial introduces JavaScript, a language you can use to embed commands in an HTML document. This article assumes no prior knowledge of programming, but does assume HTML familiarity. I'll take you from a high-level overview of JavaScript language concepts through several useful scripts you can modify for use in your own pages.

 

What HTML Isn't

HyperText Markup Language (HTML) thrives in a static environment. You put up a page, then it pretty much stays where it is until the user calls up a new page, for example by clicking on a link. HTML lets you combine text and graphics, and gives you tools such as frames and tables to get the layout just the way you want it. HTML is pretty, but it ain't smart. If you need to process information (such as data entered into a form) you have to send it over the data stream back to your server (very smart), which then generates a new HTML page and sends it back to the user for display.

This process, accomplished via a protocol called CGI (Common Gateway Interface), gets the job done...but if your user isn't connected via an Ethernet or ISDN line, it has obvious disadvantages. CGI is a server-side process. The need to perform client-side processing was addressed in the earliest helper apps, such as those to view pictures or play back sound snippets. Java and ActiveX controls are mechanisms by which developers can embed functionality, not just information, into an HTML page. However, there are times when you need a little bit more than what HTML can offer without the complexity of Java. That's where JavaScript fills the bill.

 

What JavaScript Is

JavaScript shares the fundamental feature of all programming languages: it can get data from some source, process that data, and output the results. Because it is integrated into HTML, JavaScript already knows what your browser knows, and can figure out, for example how many form elements are on a page or how many frames are in a window. It also knows how to work with this environment, and can perform such tasks as targeting a specific frame for output just as you could target a frame to contain the contents of a hypertext link in HTML.

The types of things you can use JavaScript for include: controlling a page; opening and closing windows and frames; programmatically accessing the history window (which allows the developer to refer to previously viewed documents) and other browser features.

Furthermore, with JavaScript you can provide feedback to the user,generate new HTML pages using variable information, and implementuser-defined functions.

 

The Object Model

Like most other programming languages of its generation, JavaScriptis characterized by the object model. This means that you thinkabout your JavaScript program in terms of the objects-the thingsyou want to work with. For programming purposes, the browser windowis an object. The HTML document is an object. Each form in thedocument is an object, made up in turn of other objects such astext boxes and radio buttons. Objects aren't static entities thatfloat in space. You can access information about them, do thingsto them, or respond to events that happen to them. In programmingterms, information about an object is called the object's properties.

Actions you can perform on or with objects are called methods.The mechanism by which you can respond to something that happensto an object is an event handler. Objects, properties, methods,and event handlers are the building blocks of JavaScript programs.

Let's look at how we can put these componentsto practical use to improve the interface of three sample HTMLpages. In each case our goal will be to provide dynamic, contextsensitive information to the user that is over and above whatis included in the text of the page itself. The first examplewill employ the status bar to emphasize important informationon the screen. The second example will bring up an alert box.The third example will bring up an entire window of information in responseto the user clicking on a button. Be especially careful not to makea typo. Program commands must be typed in precisely or an erroris likely to occur. If you learn best by doing, I've added somesuggested exercises throughout the article that will help youmake sure you understand the concepts.(Editor's Note:Click here to enter Heidi's mini-menuof sample programs and links, while hereis a zipped file of all the sample code modules.)

 

Example 1: The Status Bar Application

The first application is for a fictional company, JS Software'sdownload page. The goal of the program is to give the user a littlemore information than what is in the text of the page, withoutbeing obtrusive. We can do this by manipulating the status bar.In JavaScript, the window object has a property called statusthat describes the text that is currently displayed on the statusbar of the user's browser. The defaultStatus property describeswhat is normally shown in the status bar while the user's mouse pointeris over that window (but not, for example, over a hot spot). Weuse objects by giving each one a distinctive name. Some objects,such as the window, have a built-in name. We can refer to thecurrent window as either window or self.In JavaScript syntax, the object is separated from properties ormethods with a period. Therefore, both

 

window.statusself.status

refer to the contents of the status bar, which we can either readfrom or write to. If you've programmed before, it may help tothink of this kind of expression as a variable. If you haven'tprogrammed before, the important thing to know is that in orderto assign a value to a variable or in this case a property youwrite a command that looks like this:

 

propertyName = propertyValue

where propertyName is the name of the property and propertyValueis an expression that evaluates to a valid value for propertyValueto contain. An expression can be the result of an equation, thevalue of another variable or property, or a literal value, suchas a series of characters enclosed in quotation marks.

 

window.status = "Click here to download the compressed Mac version of Ziffle Zot."

is a valid expression, as is:

 

window.status = "The old status was " + window.defaultStatus

Note the way you can combine elements, in this case by concatenatinga string of characters and another property value by using theplus sign.

Last Modified: April 02, 2012
  • Visits: 1460
  • (Current Rating 0.0/5 Stars) Total Votes: 0
  • 0 0

No Comments Yet...

Leave a reply


Home Page Sitemap Rss
Copyright ©2022 Europi Web All Rights Reserved.