Introduction to Collections

Lesson:

A collection — sometimes called a container — is simply an object that groups multiple elements into a single unit. Collections are used to store, retrieve, manipulate, and communicate aggregate data. Typically, they represent data items that form a natural group, such as a poker hand (a collection of cards), a mail folder (a collection of letters), or a telephone directory (a mapping of names to phone numbers).

If you've used the Java programming language — or just about any other programming language — you're already familiar with collections. Collection implementations in earlier (pre-1.2) versions of the Java platform included Vector, Hashtable, and array. However, those earlier versions did not contain a collections framework.

What Is a Collections Framework?

A collections framework is a unified architecture for representing and manipulating collections. All collections frameworks contain the following:

* Interfaces: These are abstract data types that represent collections. Interfaces allow collections to be manipulated independently of the details of their representation. In object-oriented languages, interfaces generally form a hierarchy.
* Implementations: These are the concrete implementations of the collection interfaces. In essence, they are reusable data structures.
* Algorithms: These are the methods that perform useful computations, such as searching and sorting, on objects that implement collection interfaces. The algorithms are said to be polymorphic: that is, the same method can be used on many different implementations of the appropriate collection interface. In essence, algorithms are reusable functionality.

Apart from the Java Collections Framework, the best-known examples of collections frameworks are the C++ Standard Template Library (STL) and Smalltalk's collection hierarchy. Historically, collections frameworks have been quite complex, which gave them a reputation for having a steep learning curve. We believe that the Java Collections Framework breaks with this tradition, as you will learn for yourself in this chapter.

Benefits of the Java Collections Framework

The Java Collections Framework provides the following benefits:

* Reduces programming effort: By providing useful data structures and algorithms, the Collections Framework frees you to concentrate on the important parts of your program rather than on the low-level "plumbing" required to make it work. By facilitating interoperability among unrelated APIs, the Java Collections Framework frees you from writing adapter objects or conversion code to connect APIs.
* Increases program speed and quality: This Collections Framework provides high-performance, high-quality implementations of useful data structures and algorithms. The various implementations of each interface are interchangeable, so programs can be easily tuned by switching collection implementations. Because you're freed from the drudgery of writing your own data structures, you'll have more time to devote to improving programs' quality and performance.
* Allows interoperability among unrelated APIs: The collection interfaces are the vernacular by which APIs pass collections back and forth. If my network administration API furnishes a collection of node names and if your GUI toolkit expects a collection of column headings, our APIs will interoperate seamlessly, even though they were written independently.
* Reduces effort to learn and to use new APIs: Many APIs naturally take collections on input and furnish them as output. In the past, each such API had a small sub-API devoted to manipulating its collections. There was little consistency among these ad hoc collections sub-APIs, so you had to learn each one from scratch, and it was easy to make mistakes when using them. With the advent of standard collection interfaces, the problem went away.
* Reduces effort to design new APIs: This is the flip side of the previous advantage. Designers and implementers don't have to reinvent the wheel each time they create an API that relies on collections; instead, they can use standard collection interfaces.
* Fosters software reuse: New data structures that conform to the standard collection interfaces are by nature reusable. The same goes for new algorithms that operate on objects that implement these interfaces.

How Can XML be Used?

XML is used in many aspects of web development, often to simplify data storage and sharing.
XML Separates Data from HTML

If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.

With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML.

With a few lines of JavaScript, you can read an external XML file and update the data content of your HTML.

You will learn more about this in a later chapter of this tutorial.
XML Simplifies Data Sharing

In the real world, computer systems and databases contain data in incompatible formats.

XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data.

This makes it much easier to create data that different applications can share.
XML Simplifies Data Transport

With XML, data can easily be exchanged between incompatible systems.

One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet.

Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.
XML Simplifies Platform Changes

Upgrading to new systems (hardware or software platforms), is always very time consuming. Large amounts of data must be converted and incompatible data is often lost.

XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.
XML Makes Your Data More Available

Since XML is independent of hardware, software and application, XML can make your data more available and useful.

Different applications can access your data, not only in HTML pages, but also from XML data sources.

With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities.
XML is Used to Create New Internet Languages

A lot of new Internet languages are created with XML.

Here are some examples:

* XHTML the latest version of HTML
* WSDL for describing available web services
* WAP and WML as markup languages for handheld devices
* RSS languages for news feeds
* RDF and OWL for describing resources and ontology
* SMIL for describing multimedia for the web

If Developers Have Sense

If they DO have sense, future applications will exchange their data in XML.

The future might give us word processors, spreadsheet applications and databases that can read each other's data in a pure text format, without any conversion utilities in between.

We can only pray that all the software vendors will agree.

Introduction to XML

XML was designed to transport and store data.

HTML was designed to display data.
What You Should Already Know

Before you continue you should have a basic understanding of the following:

* HTML
* JavaScript

If you want to study these subjects first, find the tutorials on our Home page.
What is XML?

* XML stands for EXtensible Markup Language
* XML is a markup language much like HTML
* XML was designed to carry data, not to display data
* XML tags are not predefined. You must define your own tags
* XML is designed to be self-descriptive
* XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.
XML and HTML were designed with different goals:

XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.

HTML is about displaying information, while XML is about carrying information.
XML Does not DO Anything

Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.

The following example is a note to Tove from Jani, stored as XML:
<note&rt;
<to&rt;Tove</to&rt;
<from&rt;Jani</from&rt;
<heading&rt;Reminder</heading&rt;
<body&rt;Don't forget me this weekend!</body&rt;
</note&rt;

The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.

But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive or display it.
XML is Just Plain Text

XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.

However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.
With XML You Invent Your Own Tags

The tags in the example above (like <to&rt; and <from&rt;) are not defined in any XML standard. These tags are "invented" by the author of the XML document.

That is because the XML language has no predefined tags.

The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like <p&rt;, <h1&rt;, etc.).

XML allows the author to define his own tags and his own document structure.
XML is Not a Replacement for HTML

XML is a complement to HTML.

It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.

My best description of XML is this:

XML is a software and hardware independent tool for carrying information.
XML is a W3C Recommendation

The Extensible Markup Language (XML) became a W3C Recommendation 10. February 1998.
XML is Everywhere

We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has developed and how quickly a large number of software vendors have adopted the standard.

XML is now as important for the Web as HTML was to the foundation of the Web.

XML is everywhere. It is the most common tool for data transmissions between all sorts of applications, and becomes more and more popular in the area of storing and describing information.

Next

XML Tutorial

XML stands for EXtensible Markup Language.

XML was designed to transport and store data.

In this tutorial you will learn about XML, and the difference between XML and HTML.

XML is important to know, and very easy to learn.

Start learning XML!

JavaBeans Properties

In the following sections you will learn how to implement bean properties. A bean property is a named attribute of a bean that can affect its behavior or appearance. Examples of bean properties include color, label, font, font size, and display size.
The JavaBeans™ specification defines the following types of bean properties:
• Simple – A bean property with a single value whose changes are independent of changes in any other property.
• Indexed – A bean property that supports a range of values instead of a single value.
• Bound – A bean property for which a change to the property results in a notification being sent to some other bean.
• Constrained – A bean property for which a change to the property results in validation by another bean. The other bean may reject the change if it is not appropriate.
Bean properties can also be classified as follows:
• Writable – A bean property that can be changed
o Standard
o Expert
o Preferred
• Read Only – A bean property that cannot be changed.
• Hidden – A bean property that can be changed. However, these properties are not disclosed with the BeanInfo class
BeanBuilder uses this schema to group and represent properties in the Properties window.



Simple Properties

To add simple properties to a bean, add appropriate getXXX and setXXX methods (or isXXX and setXXX methods for a boolean property).
The names of these methods follow specific rules called design patterns. These design pattern-based method names allow builder tools such as the NetBeans GUI Builder, to provide the following features:
• Discover a bean's properties
• Determine the properties' read/write attributes
• Determine the properties' types
• Locate the appropriate property editor for each property type
• Display the properties (usually in the Properties window)
• Alter the properties (at design time)

JavaBeans Concepts

The JavaBeans™ architecture is based on a component model which enables developers to create software units called components. Components are self-contained, reusable software units that can be visually assembled into composite components, applets, applications, and servlets using visual application builder tools. JavaBean components are known as beans.
A set of APIs describes a component model for a particular language. The JavaBeans API specification describes the core detailed elaboration for the JavaBeans component architecture.
Beans are dynamic in that they can be changed or customized. Through the design mode of a builder tool you can use the Properties window of the bean to customize the bean and then save (persist) your beans using visual manipulation. You can select a bean from the toolbox, drop it into a form, modify its appearance and behavior, define its interaction with other beans, and combine it and other beans into an applet, application, or a new bean.
The following list briefly describes key bean concepts.
• Builder tools discover a bean's features (that is, its properties, methods, and events) by a process known as introspection. Beans support introspection in two ways:
o By adhering to specific rules, known as design patterns, when naming bean features. The Introspector class examines beans for these design patterns to discover bean features. The Introspector class relies on the core reflection API. The trail The Reflection API is an excellent place to learn about reflection.
o By explicitly providing property, method, and event information with a related bean information class. A bean information class implements the BeanInfo interface. A BeanInfo class explicitly lists those bean features that are to be exposed to application builder tools.
• Properties are the appearance and behavior characteristics of a bean that can be changed at design time. Builder tools introspect on a bean to discover its properties and expose those properties for manipulation.
• Beans expose properties so they can be customized at design time. Customization is supported in two ways: by using property editors, or by using more sophisticated bean customizers.
• Beans use events to communicate with other beans. A bean that is to receive events (a listener bean) registers with the bean that fires the event (a source bean). Builder tools can examine a bean and determine which events that bean can fire (send) and which it can handle (receive).
• Persistence enables beans to save and restore their state. After changing a bean's properties, you can save the state of the bean and restore that bean at a later time with the property changes intact. The JavaBeans architecture uses Java Object Serialization to support persistence.
• A bean's methods are no different from Java methods, and can be called from other beans or a scripting environment. By default all public methods are exported.
Beans vary in functionality and purpose. You have probably met some of the following beans in your programming practice:
• GUI (graphical user interface)
• Non-visual beans, such as a spelling checker
• Animation applet
• Spreadsheet application

Mainframe [Common Editor Line Commands]

Common Editor Line Commands:

I - Insert Line(s)
C - Copy Line
D - Delete Line
M - Move Line
A - Locate After this line (Used for move and copy)
B - Locate Before this line (Same as above)

CC - Indicate begin and end of block for Copy
DD - Indicate begin and end of block for Delete
MM - Indicate begin and end of block for Move
XX - Indicate begin and end of block to Hide

Cn - Copy n lines beginning with this one
Dn - Delete n lines beginning with this one
Mn - Move n lines beginning with this one

Common Editor Commands:

Cut/Paste Allow copy of lines from different programs
C ALL ‘old value’ ‘new value’ (Change all text instances)
Common Flasher List Commands:

D - D Delete report file no longer needed
S - Select report file from list
S - S Show status lines only
E - Expand subfile list in flasher
L x Find first file starting with x

Common Text Commands:

F ==> - Find next COBOL compiler error
F - text Find next occurrence of ‘text’
F5 - repeat last Find Command
F24 - Scroll thru previous Commands
=F - Go to Flasher from any command line
=X - Exit ISPF from any command line
logoff Exit system from ready prompt

Customer Information Control System (CICS)

In this tutorial you will learn about Customer Information Control System (CICS) - CICS - An overview, Functions of CICS, Task, Transaction and CICS Components.



CICS - An overview
CICS is called as Customer Information Control System. The main functionality of CICS is it acts as an interface between the Operating System and application programs.

Functions of CICS
Acts as interface between operating system and application programs
.
Does the function of data communication and therefore handle data. In other words CICS can support number of terminals or systems and acts as a data communication system between them.
.
Take care of application program functions along with that take care of system functions also
.
Also help in the task of monitoring
.
Acts as a specialized operating system by providing environment for the execution of online application programs.
.
CICS handles file management itself and so there is no need for statements like READ ,WRITE,OPEN
Before going into what CICS does and handles it would be easier if we get to know some common terminologies used with CICS namely

Task
.
Transaction
Task: This is defined as the fundamental unit of work which is scheduled by CICS namely to write to the workstation, read from workstation, read from a file, write to a file, initiate another task, call another function and so on.

Transaction: This is one which commences the execution of a task. CICS assigns and identifies each transaction by a transaction identifier

Having known about task and transaction let us see how both are handled together in CICS. We have seen above that when a transaction is started then it executes a task. But one may have a doubt whether CICS can handle more than one task at the same time for same transaction. The answer is yes. In other words if a transaction say tran1 is started or initiated more than one time again and again then CICS transaction tran1 create more than one task at the same time. This is how a task or more than one task gets created. Now we switch to see how to initiate a transaction which is essential for starting a task. There are many ways to start transaction let us see some of the ways of initiating or starting a transaction.

One of the ways could be to use a transaction identifier to initiate a transaction. This is because we have seen already that CICS assigns and identifies each transaction by a transaction identifier. So by entering the transaction identifier in the CICS screen and by pressing enter key CICS transaction associated with the transaction identifier entered gets initiated and invoked. It is also possible to initiate a transaction by using the CICS command START. This also provides the facility of starting a transaction after a specified time interval.

CICS also has the option of initiating a task automatically technically called as Automatic Task Initiation. One can initiate a transaction in this way also.

CICS Components
There are three major components associated with CICS namely Management Modules, Control Tables and Control Blocks. These three are very essential in CICS environment and so let us see an overview of the function of each. We have seen that CICS act as an interface between operating system and application program and this is achieved by management module. In other words Management Modules are programs that act as interface between operating system and application program. Control table is associated with management module and is used to define the CICS environment. A control block is used to store information about CICS system. For instance we have seen that a transaction handled by CICS is identified by transaction identifier. And also each transaction may have number of task in it. Control blocks have the information about the task in an area called as task control area. Like that control block has many system information stored.

Having got an idea about what CICS is what a transaction is and the components used in CICS now its time to look in brief as how a transaction gets initiated and executed in CICS.

Let us take a example where the

Transaction Identifier: EXFOR
Application program: A1
User Makes call to file student for data

Let use see how the above transaction given in example is initiated and executed by CICS and how the data is presented on the terminal as output in CICS environment. As we have seen before each transaction in CICS has a transaction identifier associated with it. So as a first step to initiate the transaction one types the transaction identifiers on the terminal. For instance in our example the transaction identifier is EXFOR and it is typed on the terminal. This is taken by CICS and the transaction identifier EXFOR is stored in working storage division. The CICS service treats the transaction identifier say EXFOR as a call to the associated application program. The application program can be present in storage division or in program library. Suppose in our case if the associated application program say A1 was in program library so A1 is loaded from program library into working storage. Now task is created and the program is started or initiated. Now we must know an important technology called as BMS. BMS is also called as Basic mapping support. We know the output of any program would appear on the terminal screen.

There are many features which are specific to hardware and this may affect the output. In other words to get the output as desired say in formatted way and in order to remove the dependency CICS has a facility called BMS. Now after the program is initiated the next step is to give the control to user. This is done by giving terminal control and also BMS is used by CICS now to get the requirements from user that is from screen. As per our example user wants to get value from student file. So file control is given by CICS to student file and the information requested by user is retrieved. Now BMS as explained does the primary function of formatting of the data retrieved from student file and present it on the terminal.

This is how transaction flows between user application and system in a CICS environment. There are lot of functions and features available in ICS but the above description gives an overview of CICS.

Prev

CICS Overview and Functions

CICS is called as Customer Information Control System. The main functionality of CICS is it acts as an interface between the Operating System and application programs.


Functions of CICS
Acts as interface between operating system and application programs.
Does the function of data communication and therefore handle data. In other words CICS can support number of terminals or systems and acts as a data communication system between them.
Take care of application program functions along with that take care of system functions also
Also help in the task of monitoring
Acts as a specialized operating system by providing environment for the execution of online application programs.
CICS handles file management itself and so there is no need for statements like READ ,WRITE,OPEN
Before going into what CICS does and handles it would be easier if we get to know some common terminologies used with CICS namely Task and Transaction.

What is Task: This is defined as the fundamental unit of work which is scheduled by CICS namely to write to the workstation, read from workstation, read from a file, write to a file, initiate another task, call another function and so on.

What is a Transaction: This is one which commences the execution of a task. CICS assigns and identifies each transaction by a transaction identifier.

Having known about task and transaction let us see how both are handled together in CICS. We have seen above that when a transaction is started then it executes a task. But one may have a doubt whether CICS can handle more than one task at the same time for same transaction. The answer is yes. In other words if a transaction say tran1 is started or initiated more than one time again and again then CICS transaction tran1 create more than one task at the same time. This is how a task or more than one task gets created. Now we switch to see how to initiate a transaction which is essential for starting a task. There are many ways to start transaction let us see some of the ways of initiating or starting a transaction.


One of the ways could be to use a transaction identifier to initiate a transaction. This is because we have seen already that CICS assigns and identifies each transaction by a transaction identifier. So by entering the transaction identifier in the CICS screen and by pressing enter key CICS transaction associated with the transaction identifier entered gets initiated and invoked. It is also possible to initiate a transaction by using the CICS command START. This also provides the facility of starting a transaction after a specified time interval.

CICS also has the option of initiating a task automatically technically called as Automatic Task Initiation. One can initiate a transaction in this way also.

Next

MainFrame

The term ‘MainFrame’ brings to mind a giant room of electronic parts that is a computer, referring to the original CPU cabinet in a computer of the mid-1960’s. Today, Mainframe refers to a class of ultra-reliable large and medium-scale servers designed for carrier-class and enterprise-class systems operations. Mainframes are costly, due to the support of symmetric multiprocessing (SMP) and dozens of central processors existing within in a single system. Mainframes are highly scalable. Through the addition of clusters, high-speed caches and volumes of memory, they connect to terabyte holding data subsystems.

The first mainframe vendors were GE, Control Data, IBM, NCR, RCA, Burroughs, Honeywell and Univac. Collectively known as “IBM and the Seven Dwarfs”. Through mergers, these vendors shifted within the industry, becoming “IBM and the BUNCH”. Running a version of Unix or Linux, these vendors led by IBM now include Amdahl (Fujitsu), Unisys and Sun among others.

Online training includes the History of Mainframes, Job Control Language (JCL) and thorough tutorials on the components, transactions and functions of the Customer Information Control System (CCIS). Mainframe professionals can find well-paid work in highly respected and breakthrough technology companies throughout the world as Mainframe Systems Programmers and Project Managers.

Start Here

Error handlling in JavaScript Try...Catch Statement

--------------------------------------------------------------------------------

The try...catch statement allows you to test a block of code for errors.


--------------------------------------------------------------------------------

Examples
The try...catch statement
How to write a try...catch statement.

The try...catch statement with a confirm box
Another example of how to write a try...catch statement.


--------------------------------------------------------------------------------

JavaScript - Catching Errors
When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.

This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.

There are two ways of catching errors in a Web page:

By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)
By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3)

--------------------------------------------------------------------------------

Try...Catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.

Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!

Example 1
The example below contains a script that is supposed to display the message "Welcome guest!" when you click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs:












To take more appropriate action when an error occurs, you can add a try...catch statement.

The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:












Example 2
The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing:









--------------------------------------------------------------------------------

The onerror Event
The onerror event will be explained soon, but first you will learn how to use the throw statement to create an exception. The throw statement can be used together with the try...catch statement.

JavaScript Guidelines

Some other important things to know when scripting with JavaScript.
JavaScript is Case Sensitive

A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar".

JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.
White Space

JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:

name="Hege";
name = "Hege";

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:

document.write("Hello \World!");

However, you cannot break up a code line like this:

document.write \("Hello World!");

Learn ASP

An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed on the server
What you should already know

Before you continue you should have some basic understanding of the following:

* HTML / XHTML
* A scripting language like JavaScript or VBScript

If you want to study these subjects first, find the tutorials on our Home page.
What is ASP?

* ASP stands for Active Server Pages
* ASP is a program that runs inside IIS
* IIS stands for Internet Information Services
* IIS comes as a free component with Windows 2000
* IIS is also a part of the Windows NT 4.0 Option Pack
* The Option Pack can be downloaded from Microsoft
* PWS is a smaller - but fully functional - version of IIS
* PWS can be found on your Windows 95/98 CD

ASP Compatibility

* ASP is a Microsoft Technology
* To run IIS you must have Windows NT 4.0 or later
* To run PWS you must have Windows 95 or later
* ChiliASP is a technology that runs ASP without Windows OS
* InstantASP is another technology that runs ASP without Windows

What is an ASP File?

* An ASP file is just the same as an HTML file
* An ASP file can contain text, HTML, XML, and scripts
* Scripts in an ASP file are executed on the server
* An ASP file has the file extension ".asp"

How Does ASP Differ from HTML?

* When a browser requests an HTML file, the server returns the file
* When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML

What can ASP do for you?

* Dynamically edit, change or add any content of a Web page
* Respond to user queries or data submitted from HTML forms
* Access any data or databases and return the results to a browser
* Customize a Web page to make it more useful for individual users
* The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed
* Provide security since your ASP code can not be viewed from the browser
* Clever ASP programming can minimize the network traffic

Important: Because the scripts are executed on the server, the browser that displays the ASP file does not need to support scripting at all!

JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending
off the content to a server.

JavaScript Form Validation



JavaScript can be used to validate input data in HTML forms before sending off
the content to a server.



Form data that typically are checked by a JavaScript could be:



* has the user left required fields empty?

* has the user entered a valid e-mail address?

* has the user entered a valid date?

* has the user entered text in a numeric field?



Required Fields



The function below checks if a required field has been left empty. If the
required field is blank, an alert box alerts a message and the function returns
false. If a value is entered, the function returns true (means that data is OK):



function validate_required(field,alerttxt)

{

    with (field)

    {

        if (value==null||value=="")

        {

           
alert(alerttxt);return false;

        }

        else

        {

            return true;

        }

    }

}



The entire script, with the HTML form could look something like this:



<script type="text/javascript">

function validate_required(field,alerttxt)

{

    with (field)

    {

        if (value==null||value=="")

        {

           
alert(alerttxt);return false;

        }

        else

        {

            return
true

        }

    }

}

function validate_form(thisform)

{

    with (thisform)

    {

if (validate_required(email,"Email must be filled out!")==false)

{

    email.focus();return false;

}

    }

}

</script>



<form action="submitpage.htm" onsubmit="return validate_form(this)"
method="post">

Email: <input style="background-color: rgb(255, 255, 160);" name="email"
size="30" type="text">

<input value="Submit" type="submit">

</form>



E-mail Validation



The function below checks if the content has the general syntax of an email.



This means that the input data must contain at least an @ sign and a dot (.).
Also, the @ must not be the first character of the email address, and the last
dot must at least be one character after the @ sign:



function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@");

dotpos=value.lastIndexOf(".");

if (apos<1||dotpos-apos<2) type="text/javascript"></script>

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@");

dotpos=value.lastIndexOf(".");

if (apos<1||dotpos-apos<2)>



<form action="submitpage.htm" onsubmit="return validate_form(this);"
method="post">

Email: <input style="background-color: rgb(255, 255, 160);" name="email"
size="30" type="text">

<input value="Submit" type="submit">

</form>

Introduction to JavaScript

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.
What You Should Already Know

Before you continue you should have a basic understanding of the following:

* HTML / XHTML

If you want to study these subjects first, find the tutorials on our Home page.
What is JavaScript?

* JavaScript was designed to add interactivity to HTML pages
* JavaScript is a scripting language
* A scripting language is a lightweight programming language
* A JavaScript consists of lines of executable computer code
* A JavaScript is usually embedded directly into HTML pages
* JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
* Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the Same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript Do?

* JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
* JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("

" + name + "

") can write a variable text into an HTML page
* JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
* JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
* JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
* JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
* JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

The Real Name is ECMAScript

JavaScript's official name is "ECMAScript". The standard is developed and maintained by the ECMA organisation.

ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).

The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.

The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.

The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

The development of the standard is still in progress.

JavaScript Tutorial

JavaScript is THE scripting language of the Web.

JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.

JavaScript is easy to learn! You will enjoy it!

HTML Attributes

Attributes provide additional information to an HTML element.
--------------------------------------------------------------------------------
HTML Tag Attributes
HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.

--------------------------------------------------------------------------------

Attributes Example 1:
Defines the start of a heading.
has additional information about the alignment.

Try it yourself: Center aligned heading

--------------------------------------------------------------------------------

Attributes Example 2:
Defines the body of an HTML document.

has additional information about the background color.

Try it yourself: Background color

--------------------------------------------------------------------------------

Attributes Example 3:
Defines an HTML table. (You will learn more about HTML tables later)

--------------------------------------------------------------------------------

Use Lowercase Attributes
Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.

--------------------------------------------------------------------------------

Always Quote Attribute Values
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'

HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.

--------------------------------------------------------------------------------

Try it Yourself - Examples
A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser.

Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.

(You can find more examples at the bottom of this page)

--------------------------------------------------------------------------------

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1> This is a heading <h1>

This is a heading

<h2> This is a heading <h2>

This is a heading

<h3> This is a heading <h3>

This is a heading

<h4> This is a heading <h4>

This is a heading

<h5> This is a heading <h5>

This is a heading

<h6> This is a heading <h6>

This is a heading

HTML automatically adds an extra blank line before and after a heading.


--------------------------------------------------------------------------------

Paragraphs
Paragraphs are defined with the <p> This is a heading <h1> tag.
<p> This is a paragraph <p>

This is a paragraph

<p> This is another paragraph <p>

This is another paragraph

HTML automatically adds an extra blank line before and after a paragraph.

--------------------------------------------------------------------------------

Don't Forget the Closing Tag
You might have noticed that paragraphs can be written without end tags

:

<p> This is a paragraph
<p> This is another paragraph

The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow you to skip ANY end tags.

Closing all HTML elements with an end tag is a future proof way of writing HTML. It also makes the code easier to understand (read and browse) when you to mark both where an element starts and where it ends.

--------------------------------------------------------------------------------

Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br>is a para<br>graph with line breaks<<p>

Try it yourself

The <br> tag is an empty tag. It has no end tag like <br>, since a closing tag doesn't make any sense.

--------------------------------------------------------------------------------

<br> or <br/>
More and more often you will see the <br> tag written like this: <br/>

Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed.

Writing it like <br/> is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.

--------------------------------------------------------------------------------

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->


Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

--------------------------------------------------------------------------------

Recap on HTML Elements
Each HTML element has an element name (body, h1, p, br)
The start tag is the name surrounded by angle brackets: <hr>
The end tag is a slash and the name surrounded by angle brackets </hr>
The element content occurs between the start tag and the end tag
Some HTML elements have no content
Some HTML elements have no end tag

--------------------------------------------------------------------------------

Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.

We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

--------------------------------------------------------------------------------

More Examples
More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.

Line breaks
This example demonstrates the use of line breaks in an HTML document.

Poem problems
This example demonstrates some problems with HTML formatting.

Headings
This example demonstrates the tags that display headings in an HTML document.

Horizontal rule
This example demonstrates how to insert a horizontal rule.

Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.

--------------------------------------------------------------------------------

Basic HTML Tags
If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.

You will learn more about HTML tag attributes in the next chapter of this tutorial.

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p>Defines a paragraph
<br>Inserts a single line break
<hr>Defines a horizontal rule
<!--> Defines a comment

HTML Elements

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.


--------------------------------------------------------------------------------

HTML Tags
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like and
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, means the same as

--------------------------------------------------------------------------------

HTML Elements
Remember the HTML example from the previous page:






This is my first homepage. This text is bold



This is an HTML element:

This text is bold

The HTML element starts with a start tag:
The content of the HTML element is: This text is bold
The HTML element ends with an end tag:

The purpose of the tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:


This is my first homepage. This text is bold


This HTML element starts with the start tag , and ends with the end tag .

The purpose of the tag is to define the HTML element that contains the body of the HTML document.


--------------------------------------------------------------------------------

Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: means the same as . If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why?

If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags

HTML Introduction

What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor


Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!



Type in the following text:





This is my first homepage. This text is bold


Save the file as "mypage.htm".



Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.



Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.
The text between the tag and the tag is header information. Header information is not displayed in the browser window.
The text between the