You are on page 1of 70

Internet Introduction

Introduction
1. What is the internet?
2. History & development of the internet.
3. Who pays for the internet?
4. What makes the internet work?
5. The client/server Model
6. The use of local client
7. Electronic mail on the internet.
8. How does E-mail work?
9. Reading an internet address
10. Types of discussion lists
11. Introduction to network news
12. How does network news work
13. Newsgroup: what's in a name?
14. Remote Login and File Transfer
15. Introduction to FTP, File Transfer Protocol
16. Resources available to you via FTP
17. Introduction to Gopher
18. Introduction to the world wide web
19. Uniform resource locators, or URLs
20. WWW clients, or "Browsers"
21. Chatting
22. A look at search engines.

What is the Internet?


The Internet links are computer networks all over the world so that users can share
resources and communicate with each other. Some computers, have direct access to all
the facilities on the Internet such as the universities. And other computers, eg privately-
owned ones, have indirect links through a commercial service provider, who offers
some or all of the Internet facilities. In order to be connected to Internet, you must go
through service suppliers. Many options are offered with monthly rates. Depending on
the option chosen, access time may vary.
The Internet is what we call a metanetwork, that is, a network of networks that spans
the globe. It's impossible to give an exact count of the number of networks or users that
comprise the Internet, but it is easily in the thousands and millions respectively. The
Internet employs a set of standardized protocols which allow for the sharing of
resources among different kinds of computers that communicate with each other on the
network. These standards, sometimes referred to as the Internet Protocol Suite, are the
rules that developers adhere to when creating new functions for the Internet. The
Internet is also what we call a distributed system; there is no central archives.
Technically, no one runs the Internet. Rather, the Internet is made up of thousands of
smaller networks. The Internet thrives and develops as its many users find new ways to
create, display and retrieve the information that constitutes the Internet.
History & Development of the Internet:
In its infancy, the Internet was originally conceived by the Department of Defense as a
way to protect government communications systems in the event of a military strike.
The original network, dubbed ARPANet (for the Advanced Research Projects Agency
that developed it) evolved into a communications channel among contractors, military
personnel, and university researchers who were contributing to ARPA projects. The
network employed a set of standard protocols to create an effective way for these
people to communicate and share data with each other. ARPAnet's popularity
continued to spread among researchers, and in the 1980's the National Science
Foundation, whose NSFNet, linked several high speed computers, took charge of the
what had come to be known as the Internet. By the late 1980's, thousands of
cooperating networks were participating in the Internet. In 1991, the U.S. High
Performance Computing Act established the NREN (National Research & Education
Network). NREN's goal was to develop and maintain high-speed networks for research
and education, and to investigate commercial uses for the Internet. The rest, as they
say, is history in the making. The Internet has been improved through the developments
of such services as Gopher and the World Wide Web. Even though the Internet is
predominantly thought of as a research oriented network, it continues to grow as an
informational, creative, and commercial resource every day and all over the world.

Who Pays for the Internet?


There is no clear answer to this question because the Internet is not one "thing", it's
many things. No one central agency exists that charges individual Internet users.
Rather, individuals and institutions who use the Internet pay a local or regional Internet
service provider for their share of services. And in turn, those smaller Internet service
providers might purchase services from an even larger network. So basically, everyone
who uses the Internet in some way pays for part of it.

2-what makes the internet work?


The unique thing about the Internet is that it allows many different computers to connect
and talk to each other. This is possible because of a set of standards, known as
protocols, that govern the transmission of data over the network: TCP/IP (Transmission
Control Protocol/Internet Protocol). Most people who use the Internet aren't so
interested in details related to these protocols. They do, however, want to know what
they can do on the Internet and how to do it effectively.

The Client/Server Model:


The most popular Internet tools operate as client/server systems. You're running a
program called a Web client. This piece of software displays documents for you and
carries out your requests. If it becomes necessary to connect to another type of
service--say, to set up a Telnet session, or to download a file--your Web client will take
care of this, too. Your Web client connects (or "talks") to a Web server to ask for
information on your behalf.
The Web server is a computer running another type of Web software which provides
data, or "serves up" an information resource to your Web client.
All of the basic Internet tools--including Telnet, FTP, Gopher, and the World Wide Web--
are based upon the cooperation of a client and one or more servers. In each case, you
interact with the client program and it manages the details of how data is presented to
you or the way in which you can look for resources. In turn, the client interacts with one
or more servers where the information resides. The server receives a request,
processes it, and sends a result, without having to know the details of your computer
system, because the client software on your computer system is handling those details.
The advantage of the client/server model lies in distributing the work so that each tool
can focus or specialize on particular tasks: the server serves information to many users
while the client software for each user handles the individual user's interface and other
details of the requests and results.

The Use of Local Clients:


Every computer should be equipped with basic client software packages that allow you
to perform functions such as electronic mail, Telnet, Gopher, and FTP.

Electronic mail on the internet:


Electronic mail, or e-mail, is probably the most popular and widely used Internet
function. E-mail, email, or just mail, is a fast and efficient way to communicate with
friends or colleagues. You can communicate with one person at a time or thousands;
you can receive and send files and other information. You can even subscribe to
electronic journals and newsletters. You can send an e-mail message to a person in the
same building or on the other side of the world.

How does E-mail Work?


E-mail is an asynchronous form of communication, meaning that the person whom you
want to read your message doesn't have to be available at the precise moment you
send your message. This is a great convenience for both you and the recipient.
On the other hand, the telephone, which is a synchronous communication medium,
requires that both you and your listener be on the line at the same time in order for you
to communicate (unless you leave a voice message). It will be impossible to discuss all
the details of the many e- mail packages available to Internet users. Fortunately,
however, most of these programs share basic functionality which allow you to: *send
and receive mail messages *save your messages in a file *print mail messages
*reply to mail messages *attach a file to a mail message
Reading an Internet Address:
To use Internet e-mail successfully, you must understand how the names and
addresses for computers and people on the Internet are formatted. Mastering this
technique is just as important as knowing how to use telephone numbers or postal
addresses correctly. Fortunately, after you get the hang of them, Internet addresses are
usually no more complex than phone numbers and postal addresses. And, like those
methods of identifying a person, an organization, or a geographic location--usually by a
telephone number or a street address--Internet addresses have rules and conventions
for use. Sample Internet Address: custcare@aucegypt.edu
The Internet address has three parts: 1.a user name [custcare in the example
above]
2.an "at" sign (@) 3.the address of the user's mail server [aucegypt.edu in the
example above] Sometimes it's useful to read an Internet address (like
custcare@aucegypt.edu) or a domain name from right to left because it helps you
determine information about the source of the address. An address like
201B6DQF@asu.edu doesn't tell me much about the person who's sending me a
message, but I can deduce that the sender is affiliated with an educational institution
because of the suffix edu. The right-most segment of domain names usually adhere to
the naming conventions listed below:
EDU Educational sites in the United States
COM Commercial sites in the United States
GOV Government sites in the United States
NET Network administrative organizations
MIL Military sites in the United States
ORG Organizations in the U.S. not covered by the categories above (e.g., non-
profit orginaizations).
.xx where xx is the country code (e.g., .eg for Egypt).
Introduction:
Once you've become adept at using e-mail, you may want to communicate with others
on the Internet who share your interests. Newsgroups are one way to do this; the other
is through an electronic discussion group. An electronic discussion is a group of
persons who have come together to discuss a particular ic via e-mail. There are several
methods that network users can use to participate in electronic discussions; however,
the basic purpose is to bring together persons with similar interests to share information,
ideas, problems, solutions, and opinions. Since an electronic discussion is conducted by
e-mail, it's commonly called a mailing list.
If you find yourself interested in a ic, you can subscribe to a suitable mailing list. From
then on, any message sent to the mailing list is automatically distributed as electronic
mail to you--as well as to all previously subscribed members of that particular
discussion. The beauty of a mailing list is that traffic (the mail generated by that list)
covers a specific ic and the
mail it generates comes straight to your electronic mailbox, without any extra work on
your part. There are thousands of mailing lists operating on the Internet, dedicated to
myriad ics. Some are created to serve local needs only (i.e., a list for the members of a
regional computer user group), while many are open to anyone on the network. There
are discussions on professional ics, vocational subjects, and ics of personal interest.
You can roughly separate the thousands of mailing lists available on the Internet into
the following groups:
Types of discussion lists:
Moderated vs. Unmoderated Lists
Mailing lists can be moderated or unmoderated. The distinction is whether messages
are automatically forwarded to all subscribers (unmoderated) or whether a moderator (a
human being) first screens and perhaps combines similar messages before sending
them to subscribers (moderated).
Open vs. Closed Lists
Electronic discussions can also be "open" or "closed." Anyone can subscribe to an open
discussion, but a closed discussion is limited to a particular group of persons, for
example, those in a particular professional field.

Introduction to network news:


Network News (sometimes referred to as Usenet News) is a service comprised of
several thousand electronic discussions providing users an effective way to share
information with others on just about any ic.
If you're unclear about the concept of Network News, it's helpful to think about a bulletin
board that you might see on campus. Here, one might find posted messages
advertising a futon for sale, asking for students to join a math study group. In the
newsgroup environment, the same kind of process take place: User X may access a
newsgroup on a particular ic and post a message, question, or respond to a previously
posted message, and anyone accessing that newsgroup would then be able to see
User X's message. Network News newsgroups provide this same kind of forum online,
where users have access to the messages posted by all other users of that newsgroup.
Network News has been described as an "international meeting place" where you're
likely to find a discussion going on just about anything.

How Does Network News work?


Messages posted on Network News newsgroups are sent from host computer to host
computer all over the world, using the network news transfer protocol. Because
Network News newsgroups are located on one server, Network News is a very efficient
way to share information that might otherwise be disseminated to several individual
users. This way, several people can read a given newsgroup message, but the host
system stores only one copy of it.

Newsgroups: What's in a Name?


As mentioned before, Network News is essentially made up of newsgroups, each
newsgroup a collection of messages focusing on a related theme. You can probably
find a newsgroup on any ic, no matter how arcane or bizarre. A newsgroup's name
gives you a good idea of that group's focus, and also illustrates the hierarchical naming
scheme given to newsgroups. Newsgroups with the prefix comp, for example, are for
computer-related ics. After the initial prefix, you'll see an additional series of names
assigned to the newsgroup that tell its specific concern: Note the following examples:
comp.mac.performa for "computers--macintosh--performas" rec.auto.antique
for "recreation--autos--antiques" alt.backrubs for "alternative--
backrubs" soc.culture.japan for "social--culture--japan"

Remote Login & File Transfer:

Introduction to telnet:
Telnet is the protocol used to establish a login session on a remote computer on the
network. While many computers on the Internet require users to have authorization,
others are open to the public and can be logged onto with telnet. Telnet is not a method
to transfer files from one machine to another, but rather is a way to remotely connect to
another system with priveleges to run specific programs on that system. Some uses of
the Telnet protocol include:
connecting to a library catalog to search that library's collection connecting to a location
that allows public priveleges to search its campus information system connecting to a
location that gives you an up-to-the minute weather report
Basic Telnet Commands
open - establishes a connection to the specified host.close - closes an open connection
and leaves you in the telnet software quit - closes any open telnet sessions and exits
the telnet software. When using a telnet program like NCSA Telnet, you invoke these
commands by way of pull-down menus or command keys.
Introduction to FTP, File Transfer Protocol:
Basic commands in FTP:
To do FTP, a user invokes one of two commands: get the command for transferring a
file from another server to your own computer. put the command for moving a file from
your computer to another one. Who can do FTP? Anonymous vs. authorized privileges
On many servers, called anonymous FTP servers, anyone can do FTP. All that is
required to login is a username (anonymous) and a password (your e-mail address). To
get an idea of the many resources available via FTP, you can look at this selected list of
FTP servers.
Other servers require you to be a registered "authorized" user before you're permitted to
do FTP. In such a case, you would need to contact the system operator for the server
you wish to access, and request an authorization and a password. Getting an
authorization and password might mean that you can get and put only to specific
subdirectories on that server.
Resources available to you via FTP
Freeware
When you download freeware, the author continues to carry the copyright to the
software, but permits you to use the program for free. You can share freeware with
others, as long as you don't sell it.
Public Domain
When you download public domain software, you can use it freely. The creator carries
no copyright, and has released it for anyone to use. There are no limits on distribution or
sale--and anyone can modify the program.
Shareware
When you download shareware, the author continues to carry the copyright to the
software, but you're permitted short-term use of the program for evaluation purposes.
At the end of evaluation period, you must either pay the copyright holder for the
program or destroy all copies you've made of it.
Introduction to Gopher:
Gopher is a client/server system that allows you to access many Internet resources
simply by making selections from a sequence of menus. Each time you make a
selection, Gopher carries out your request to the computer that contains the information
and "serves" it up. For example, if you select a menu item that represents a text file,
Gopher will get that file--wherever it happens to be--and display it for you. As you use
Gopher, some menu items lead to other menus. If you choose one of these, Gopher will
retrieve the new menu and display it for you. Thus you can move from menu to menu,
using only a few key strokes or a mouse to navigate. The power of Gopher is that the
resources listed in a menu may be anywhere on the Internet. As Gopher connects to
computers to comply with your menu selection, you don't need to be preoccupied with
the behind-the-scenes work of connecting to and disconnecting from these various
computers. Gopher does this for you without your even needing to be aware of it. This
automatic connecting makes Gopher popular and useful.
Where did Gopher come from?
"Born" in April 1991, gopher began as a project at the Microcomputer, Workstation, and
Networks Center at the University of Minnesota to help people on campus get answers
to computer-related questions. At the time, the computer center staff had accumulated
answers to thousands of questions regarding computers and software. What was
needed was an easy and efficient way to deliver this information to students, faculty and
staff. Thus, the creation of Gopher reaffirms the adage that necessity is the mother of
invention.
Why is it called Gopher?
The name "Gopher" is appropriate for three reasons:
1.Just as a real gopher successfully navigates beneath the prairie, the Internet Gopher
tunnels through the invisible paths of the Internet to help you find the information
you want.
2.The name refers to someone who fetches things or provides service for other people.
3.The Golden Gopher is the mascot of the University of Minnesota.
Introduction to the World Wide Web
The World Wide Web (also referred to as WWW or W3) is the fastest growing area of
the Internet. While gopher was an important step in allowing users to "browse" through
the Internet's vast resources, the World Wide Web has raised excitement about the
Internet to new heights.
What makes the World Wide Web appealing and innovative is its use of hypertext as a
way of linking documents to each other. A highlighted word or phrase in one document
acts as a pointer to another document that amplifies or relates to the first document.
When looking at a WWW document, the reader doesn't have to follow every pointer, or
link (also called a hypertext link), only those that look interesting or useful. In this way,
the user tailors the experience to suit his or her needs or interests. The other very
appealing aspect of the World Wide Web is the use of graphics and sound capabilities.
Documents on the WWW include text, but they may also include still images, video, and
audio for a very exciting presentation. People who create WWW documents often
include a photograph of themselves along with detailed professional information and
personal interests. (This is often called a person's home page.)
What makes the WWW work?
WWW is another example of client/server computing. Each time a link is followed, the
client is requesting a document (or graphic or sound file) from a server (also called a
Web server) that's part of the World Wide Web that "serves" up the document. The
server uses a protocol called HTTP or HyperText Transport Protocol. The standard for
creating hypertext documents for the WWW is HyperText Markup Language or HTML.
HTML essentially codes plain text documents so they can be viewed on the Web.

Uniform Resource Locators, or URLs:


A Uniform Resource Locator, or URL is the address of a document you'll find on the
WWW. Your WWW browser interprets the information in the URL in order to connect to
the proper Internet server and to retrieve your desired document. Each time you click on
a hyperlink in a WWW document, you're actually instructing your browser to find the
URL that's embedded within the hyperlink. The elements in a URL:Protocol://server's
address/filename
Hypertext protocol: http://www.aucegypt.edu Gopher protocol:
gopher://gopher.umm.tc.edu
File Transfer Protocol: ftp://ftp.dartmouth.edu Telnet Protocol: telnet://pac.carl.org News
Protocol: news:alt.rock-n-roll.stones
WWW Clients, or "Broswers":
The program you use to access the WWW is known as a browser because it "browses"
the WWW and requests these hypertext documents. Browsers can be graphical, like
Netscape and Mosaic, allowing you to see and hear the graphics and audio; text-only
browsers (i.e., those with no sound or graphics capability) are also available. All of
these programs understand
http and other Internet protocols such as FTP, gopher, mail, and news, making the
WWW a kind of "one s shopping" for Internet users.
Chatting:
Internet Relay Chat (IRC), the other method for Internet conversation, is less common
than talk because someone must set up the Chat before others can join in. Chat
sessions allow many users to join in the same free-form conversation, usually centered
around a discussion ic. When users see a ic that interests them, they type a command
to join and then type another command to choose a nickname. Nicknames allow people
in the session to find you on IRC Networks or Channels.
A look at search engines:
The World Wide Web is "indexed" through the use of search engines, which are also
referred to as "spiders," "robots," "crawlers," or "worms". These search engines comb
through the Web documents, identifying text that is the basis for keyword searching.
Each search engine works in a different way. Some engines scan for information in the
title or header of the document; others look at the bold "headings" on the page for their
information. The fact that search engines gather information differently means that each
will probably yield different results. Therefore, it's wise to try more than one search
engine when doing Web searching.
The list below lists several search engines and how each one gathers information, plus
resources that evaluate the search engines.
Selected Search Engines (listed alphabetically)
Alta Vista
Alta Vista, maintained by The Digital Equipment Corp., indexes the full text of over 16
million pages including newsgroups. Check out the Alta Vista Tips page.
Excite Netsearch
Excite includes approximately 1.5 million indexed pages, including newsgroups. Check
out the Excite NetSearch handbook.
InfoSeek Net Search
Indexes full text of web pages, including selected newsgroups and electronic journals.
Just under one-half million pages indexed. Check out the InfoSeek Search Tips.
Inktomi
As of December 1995, the Inktomi search engine offers a database of approximately 2.8
million indexed Web documents and promises very fast search retrievals. Results are
ranked in order of how many of your searched terms are used on the retrieved pages.
Lycos
Lycos indexes web pages (1.5 million +), web page titles, headings, subheadings,
URLs, and significant text.
Search results are returned in a ranked order.
Magellan
Magellan indexes over 80,000 web sites. Search results are ranked and annotated.
Open Text Index
Indexes full text of approximately 1.3 million pages. Check out the Open Text Help
pages for tips on using this search engine.
WebCrawler
Maintained by America Online, WebCrawler indexes over 200,000 pages on
approximately 75,000 web servers. URLs, titles, and document content are indexed.
WWWW -- World Wide Web Worm
Approximately 250,000 indexed pages; indexed content includes hypertext, URLs, and
document titles.
Yahoo
A favorite directory and search engine, Yahoo has organized over 80,000 Web sites
(including newsgroups) into 14 broad categories. Yahoo also maintains a
comprehensive list of links to Yahoo - Computers and Internet: Internet: World Wide
Web: Searching the Web other web search engines, indexes, and guides.
Finally the internet is a huge source of information in all fields of knowledge. Datum will
take your hand through this incredible world of information to get what you need in a
fast, reliable and professional way.
Creating Web base E-Mail on Internet
To create E-mail account on internet open any website which provide e-mail facility,
click on Sign-up or New user button on it.

For .e.g we are creating new account on www.rediffmail.com

Next screen will be appear on your computer, fill the details which required to open new
account
Click on Create my Account button

After this your account will be created Click on inbox button to access your mails
Outlook Express

What is Outlook Express?

Outlook Express is a POP3- and IMAP-compatible mail client with a built-in newsreader.
It is available with Internet Explorer for Windows or as a stand-alone client for Mac OS
8.1 to 9.x (it is no longer available for Mac OS X). You can configure it to retrieve email
from your account via POP or configure it as an IMAP client to access your mail on an
IMAP mail server.

Using the Internet Connection Wizard

Microsoft Outlook Express uses the Internet Connection Wizard to help you configure
your email accounts. If you've never used Outlook Express for email, the Internet
Connection Wizard should start the first time you launch Outlook Express. If you've
already configured your account and wish to reconfigure or add another account (or if
the Internet Connection Wizard fails to start), you will need to manually start the Internet
Connection Wizard. To do so, in Outlook Express, from the Tools menu, select
Accounts... , and then click Add. Select Mail... to start the Internet Connection Wizard
and continue following the directions below:
1. You will be prompted for your "Display name". Enter your full name and click
Next.

2. Select I already have an email address that I'd like to use, enter your Indiana
University email address, and click Next.
If you are unsure of your exact IU email address, see At IU, what is my email
address?
3. For the incoming mail server type, select IMAP. For the name of your incoming
mail server, type imap.iu.edu .

4. In the "Outgoing" or "SMTP" server field, type:


mail-relay.iu.edu Click Next.

5. Type your username. If you wish the system to remember your password (only
recommended for computers that are physically secure), enter your password.
Otherwise, deselect the Remember Password checkbox. Leave the Log in
using Secure Password Authentication checkbox deselected. In Outlook
Express 4 (but not 5 or 6), it will also prompt you for a "Friendly name:" (enter
something you associate with the server and account, such as Work Email or My
Cyrus Account ), and a "Connection type:". Choose the connection type as
follows:

○ If you wish to dial up automatically when you start Outlook Express,


choose Connect using my phone line. If you have an existing dial-up
connection you'd like to use, click the radio button next to Use an existing
dial-up connection. Select the connection you wish to use from the list,
and then click Next. To create a dial-up connection, see The IUB and
IUPUI modem pools.
○ If you usually connect with Dial-up Networking or the communications
software available from IUware before you start Outlook Express, choose I
will establish my Internet connection manually.
○ If your computer has a direct Ethernet connection, choose LAN.

6. Click Next, and then Finish. If you are prompted to download the folder list for
the IMAP account, click No.

7. From the Tools menu, select Accounts... . Highlight the account you just
created.

8. Click the Properties button, and then the General tab. Under "Mail Account",
enter a name such as Work Email or My IMAP Account .

9. Click the Servers tab, and, under the "Outgoing Mail Server" section, make sure
the checkbox for My server requires authentication is selected. Make sure the
checkbox for Log on using Secure Password Authentication is not selected.

10. Click the Advanced tab, and, under both the "Outgoing mail (SMTP)" and
"Incoming mail (IMAP)" sections, make sure the checkboxes for This server
requires a secure connection (SSL) are selected.

11. Click Apply, then OK, and then Close. When you close the Internet Accounts
dialog box, you will be asked if you wish to download folders from the mail server
you just added. Click Yes.

12. You will be prompted for your password. Then you should see a connection
screen confirming your download.

13. The Show/Hide IMAP Folders window will appear. By default, all folders on your
mail server are listed. Select all folders you do not wish to be displayed in
Outlook Express and click Hide. You can click the Visible tab to confirm which
folders will be displayed. Click OK.

14. In the folder list in the left pane, you will see a set of Local Folders and a set of
folders for each account you have set up. To read new mail for an account, click
Inbox under the account name.
Don't save items to the Local Folder structure unless you want them saved only to the
computer you are using at that time. Once you save an item to the Local Folder
structure, the item is not accessible from the server or from other computers. For
instructions on storing your sent items on your mailbox server, If you cannot send email,
you may need to use a different port for your outgoing server. If port 25 does not work,
try port 465, and vice versa. From the Tools menu, select Accounts... . Highlight the
appropriate account and click the Properties button. Click the Advanced tab. Change
the number in the "Outgoing mail (SMTP):" field from 25 to 465 or vice versa. If you still
cannot send email, contact your Internet service provider (ISP).
Write an E-Mail Message, Send It Now
E-mail addresses must be letter-perfect in order for your mail to reach the intended
destination, and Outlook Express is rich with options for addressing messages
accurately. You type a few letters of the person's name in the To or CC (for carbon
copy) lines, and then Outlook Express automatically supplies the full address from your
address book.
1.Click the Create Mail button.

Create Mail button


2.In the To box, type the first few letters of your recipient's name as shown below. When
Outlook Express proposes the name you want, press the Enter key.
If the name isn't in your address book, type the complete e-mail address.
Capitalization doesn't matter, and there should be no spaces in the address.
3.Repeat step 2 for each person you want to send the message to, separating names
with a comma or semi-colon.
4.To send copies of your e-mail, follow steps 2 and 3 above in the CC box as shown
below for each person who will get a copy.

To and CC fields on a new mail message


5.Type a brief subject for your message as shown below.
Outlook Express will remind you if you forget this.
6.Click in the message area, and type your message as shown below.
7.Click Send as shown below.
If Outlook Express asks for confirmation of any name, click the correct name in the
Check Names box, and click OK.

E-mail message subject and body, and Send button

Write an E-Mail Message, Send It Later


You can compose e-mail while your computer is disconnected from the Internet.
• Follow the steps in the Write an E-Mail Message, Send It Now section above.
When you click Send, Outlook Express lets you know that it's storing your message in
the Outbox—it's in the Folder list—and then sends it automatically when you go
online.

Save your e-mail. Outlook Express also automatically saves messages as you
write them, so if your computer shuts down unexpectedly, your messages will be waiting
for you in the Drafts folder. But for extra safety, it's not a bad idea—particularly for an
important message—to save your e-mail message as you write. To do this, click Save,
on the File menu.

Send an E-Mail Message in a Hurry


If Outlook Express doesn't send your e-mail messages as fast as you'd like, you can
take matters into your own hands to speed them on their way.
• Click the Send/Recv button.
Outlook Express immediately sends all messages in the Outbox (and retrieves any
messages from the Internet service provider).

Send/Recv button on Outlook Express toolbar

Attach a File to an E-Mail Message


It's easy to attach files to e-mail—a picture of the new baby, the paper you're
coauthoring, your tax file for the accountant, or a favorite song. It's rather like paper-
clipping something to a letter.
1. In your message, click the Attach button.

Attach button on e-mail toolbar


2. Browse until you find the file you want to attach as shown below.
3. Click the file, and then click Attach as shown below.

If you want to enclose more than one file, repeat steps 1 through 3.
Attachment box
4. Finish the message if you haven't already, and click the Send
button.

Attach field showing attached document


5. The attachments show up (!) here in the message.

File size matters. Check the size of files before you send them. If they're a
megabyte or larger, think about asking the recipient if they can, or want to, receive the
file. Or, consider compressing large files before you send them. Some Office programs
include compression features; alternatively, use a third-party program to compress the
file.
HTML
1 HTML 1
1.1 Introduction .
1.2 HTML Tags.
1.3 Main Commands
1.4 Linking to other Documents ..
1.5 Forms and CGI Programming .
1.6 Images .
1.7 HTML Sound Tags .
1.8 Tables .
1.9 Examples

Chapter 1
HTML
1.1 Introduction
Hypertext Markup Language (HTML) is a system for marking up documents with tags
that indicate how text in the documents should be presented and how the documents
are linked together. Hypertext links are quite powerful. Within the HTML markup
scheme lies the power to create interactive, cross-platform, multimedia, client-server
applications. Such a system is the World Wide Web (also known as WWW or just
simply, the Web).
The Web is an interlinked collection of living documents containing formatted text,
images, and sound. These documents are organized into webspaces. A webspace is
typically structured around a home page with links to other pages or documents both in
and outside of the webspace. A home page functions as a virtual meeting place in
cyberspace for the exchange of information. We write a home page in HTML. There are
many home pages with information about HTML and the World Wide Web, HTML is a
language under construction. The continuing development of HTML is conducted on the
Web in an open process. New tools and techniques appear frequently and are quickly
spread throughout the community of Web authors. HTML is not a programming
language and an HTML document is not a computer program. A computer program is a
series of procedures and instructions applied, typically, to external data. An HTML
document, however, is the data. The definition of HTML specifies the Grammar and
syntax of markup tags that, when inserted into the data, instruct browsers - computer
programs that read HTML documents.

1.2 HTML Tags


HTML works as a system of tags, one word or coded commands surrounded by right
angle parentheses (<>). Most tags has a front and a back form which encases the
text and instructs the browser software or computer server on how that text should
appear and what functions it might activate. All web pages begin and end with the
<HTML> tags. After the initial <HTML> tag, the <HEAD> </HEAD> tags reside and
contain the <TITLE> </TITLE> tags between which resides the title of the page that
is displayed on the top bar of the browser screen. Next the <BODY> </BODY> tags
are placed before and after all the text included in the page, and within body tag are
specifications for text and background colors. The ordinary text is diplayed as text. The
tags (also called elements) are special instructions. Tags are identified by their names
enclosed in angle brackets. The special symbols (also called entities) are code
punctuation marks such as the ampersand & and the quotation marks ". Thus HTML
markup tags are delimited by the angle brackets, < ... >
They appear either singularly, like the tag <P> to indicate a paragraph break in the
text, or as a pair of starting and ending tags that modify the content contained. For
example
<B> Attention! </B>
is an instruction to present the text string Attention! in a bold typeface. Other
examples are
<COMMENT> This is a comment </COMMENT>
which is a comment on an HTML file and
<CENTER> ... </CENTER>
will centre the text or image. There are
tags for formatting text,
tags for specifying hypertext links,
tags for including sound and picture elements,
tags for defining input fields for interactive pages.
That’s all there is to Hypertext Markup Language – character entities and markup
tags. However, this system of entities and tags is evolving. HTML is not case sensitive.

1.3 Main Commands


As described above an HTML program (also called an HTML script) is a sequence
of three kinds of tokens ordinary text characters, tags, and special symbols.
The main commands in HTML are Structure Tags

<HTML> ... </HTML> Encloses the entire HTML document


<HEAD> ... </HEAD> Encloses the head of the HTML document
<BODY> ... </BODY> Encloses the body (text and tags)
of the HTML document An attribute is
BGCOLOR="..."
Headings and Title
<H1> ... </H1> A first-level heading
<H2> ... </H2> A second-level heading
<H3> ... </H3> A third-level heading
<H4> ... </H4> A fourth-level heading
<H5> ... </H5> A fifth-level heading
<H6> ... </H6> A sixth-level heading
<TITLE> ... </TITLE> Indicates the title of the document.
Used with <HEAD>
All heading tags accept the attribute
ALIGN="..." Possible values are CENTER, LEFT, RIGHT
Comments
<COMMENT> ... </COMMENT> Comments
<!- ... -> Comments

Paragraphs and Regions


<P> ... </P> A plain paragraph.
The closing tag (</P>) is optional
Attribute
ALIGN="..." Align text to CENTER, LEFT, RIGHT
<DIV> ... </DIV> A region of text to be formatted.
Attribute
ALIGN="..." Align text to CENTER, LEFT, RIGHT

Lists
<OL> ... </OL> An ordered (numbered) list (items marked with <LI>)
<UL> ... </UL> An unordered (bulleted) list (items marked with <LI>)
<MENU> ... </MENU> A menu list of items
<DIR> ... </DIR> A directory listing
<LI> A list item of use with <OL>, <UL>, <MENU>, <DIR>
<DL> ... </DL> A definition or glossary list

Blocks of Text
<BLOCKQUOTE> ... </BLOCKQUOTE> Extended quotation
<ADDRESS> ... </ADDRESS> Address often used for document
author identification
Character Formatting
<CODE> ... </CODE> Code sample (usually Courier)
<B> ... </B> Boldface text
<I> ... </I> Italic text
<TT> ... </TT> Typewriter text
<EM> ... </EM> Emphasis (usually italic)
<CITE> ... </CITE> A citation
<PRE> ... </PRE> Preformatted text (preserves linebreak)
<BIG> ... </BIG> Test is slighly smaller than normal
<SMALL> ... </SMALL> Test is slighly smaller than normal
<SUB> ... </SUB> Subscript
<SUP> ... </SUP> Superscript
<KBD> ... </KBD> Keyboard entry

Other Elements
<HR> A horizontal rule line
Attributes
SIZE="..." The thickness of the rule, in pixels
WIDTH="..." The width of the rule, in pixels
ALIGN="..." How the rule line will be aligned on the page
NOSHADE="..." Causes the rule line to be drawn as a solid line

<BR> A line break


<CENTER> ... </CENTER> Centers text or images
<BLINK> ... </BLINK> Causes the enclosed text to blink irritatingly
<FONT> ... </FONT> Changes the size of the font for the enclosed text
Attributes
SIZE="..." The size of the font
COLOR="..." Changes the color of the text
FACE="..." Name of font to use
Tables
<TABLE> ... </TABLE> Creates a table that can contain a caption
(<CAPTION>) and any number of rows (<TR>)
<CAPTION> ... </CAPTION> The caption of the table
<TR> ... </TR> Defines a table row, containing headings and data
<TH> ... </TH> Defines a table heading cell
<TD> ... </TD> Defines a table data cell
Images, Sounds, and Embedded Media
<IMG> Inserts an inline image into the document
Attributes
SRC="..." The URL of the image
ALIGN="..." Determines the alignment of the given image
VSPACE="..." The space between the image and the text above or
below it
HSPACE="..." The space between the image and the text to its
left or right
WIDTH="..." The width in pixels of the image
HEIGHT="..." The height in pixels of the image
Links

<A> ... </A> With the HREF attribute, creates a link to another document or anchor; with
the NAME attribute, creates an anchor that can be linked to.

Attributes
HREF="..." The URL of the document to be called when the link is
activated
NAME="..." The name of the anchor

Forms

<FORM> ... </FORM> Indicates an input form


Attributes
ACTION="..." The URL of the script to process this form input
METHOD="..." How the form input will be sent to the gateway
on the server side. Possible values are GET and POST
<INPUT> Input element with a specific type and symbolic name
Attributes
TYPE="..." The type for this input widget. Possible values are
CHECKBOX, HIDDEN, RADIO, RESET, SUMBIT, TEXT, SEND,
FILE, IMAGE
NAME="..." The name of this item, as passed to the gateway script
as part of a name/value pair
VALUE="..." For a text or hidden widget, the default value;
for a check box or radio button,
the value to be submitted with the form;
for Reset or Submit buttons,
the label for the button itself
SRC="..." The source file for an image
SIZE="..." The size, in characters, of a text widget
<TEXTAREA> Text area (lines of editable text)
<SELECT> Select element with symbolic name
<OPTION> Option element used with SELECT

Applets and Scripting


<APPLET> ... </APPLET>
Attributes
CLASS="..." The name of the applet
SRC="..." The URL of the directory where the compiled applet
can be found
ALIGN="..." Indicates how the applet should be aligned with
any text that follows
WIDTH="..." The width of the applet output area in pixels
HEIGHT="..." The height of the applet output area in pixels
<SCRIPT> ... </SCRIPT> An interpreted script program
Attributes
LANGUAGE="..." For example JavaScript
SRC="..." Specifies the URL of a file that includes the script
program
The escape sequences
&LT &GT &AMP &QUOT
are used to enter characters such as <, >, and & and " into HTML documents. The
mnemonics of the original four sequences from HTML 2.0 stand for Less Than,
Greater Than, AMPersand, and double QUOTe. HTML 3.2 adds NonBreaking
SPace, REGistered trademark and COPYright
&NBSP &REG &COPY
For example, &LT;BR> will display as <BR>.

1.4 Linking to other Documents


HTML defines hypertext links which enables us to link regions of text, files or
graphics objects to our document. We do this via the HTML anchor tab. For example,
the following snippet from an HTML document <A HREF="ScSchool.html">

The International School for Scientific Computing</A> at the Rand Afrikaans


University offers a <A HREF="..\diploma\diploma.html"> Diploma in </A> has two links
to other HTML documents. The first is to SciSchool.html which must reside in the same
directory as the current HTML document. The first anchor tag contains the information
for the document and the text between this tag and the </A> is displayed by the Web
browser in a different colour (normally blue). If the user clicks with the mouse onto this
highlighted text, the browser will fetch the corresponding document. The second anchor
tag is a file diploma.html which resides in a directory diploma situated at one branch
lower in the directory hierarchy. Thus if the current document is in the directory
c:\webdocs\scschool then the Web browser will search for
c:\webdocs\diploma\diploma.html. It is a good idea to make all links relative, so that if
we move the web site to a different location, all links will remain intact. We can also
establish links to documents on other web sites. For example

<A HREF="http://issc.rau.ac.za"> ISSC </A>


Of course we can also establish a link to a specific page other than the home page of
another web site. For huge HTML documents it can be very useful to be able to jump to
a specific section within that document. This is achieved by supplying a named anchor
within that document and using the hash character # to specify a jump to a named
anchor.
...
<LI> <A HREF="#Introduction"> Introduction </A>
<LI> <A HREF="#FirstSection"> First Section </A>
...
If the user clicks on the link the web browser shows the corresponding section of the
document.
<H3> <A NAME = "INTRODUCTION"> Introduction </A> </H3>
This is the body of the introduction ...
<P>
<H3> <A NAME = "FirstSection"> First Section </A> </H3>
This is the body of the first section ...

1.6 Images
Images can be created in two ways - with the <IMG> tag and with the Image()
constructor. <IMG> are placed on the form and have a whole set of properties that can
be used to format their position, size and appearance. The images are automatically
formed into the array images[], and numbered in the order of their position in the
document. Thus the first image can be referred to as document.images[0]
Images must be in gif or jpg format.

The command <IMG> inserts an inline image into the document

attributes
SRC="..." the URL of the image
An example is given by
<IMG SRC=
"http://www.paris.org/Musees/Louvre/Treasures/gifs/Mona_Lisa.jpg"> We can also use
the following options (attributes):
ALIGN = "left/center/right"
ALT = "description"
WIDTH = "how wide is the picture"
HEIGHT = "how tall is the picture"
BORDER = "border around the picture"
HSPACE = "horizontal distance between picture and text"
VSPACE = "vertical distance between the picture and the text"
The option ALIGN sets the position of the image across the page. The option ALT is
the text to display if the image is not loaded into a browser.
We can tile a page with the
BACKGROUND = "filename"
option in the <BODY> tag. The image is repeated to fill the window. For example
<BODY BACKGROUND="mypicture.gif" ALIGN=right ALT="My picture to watch">

1.7 HTML Sound Tags


Not all browsers support every sound tag and not every computer has the proper install
and configuration of a sound card, sound card drivers, and multimedia players such as
Quick Time and Windows Media Player. If the volume setting for the tag is set low and
the computer’s volume setting is low, no sound may be heard. Finally, if our web page
visitor does not have a sound capability, they may be get annoying error messages for
any automatically started sound. Thus, it is still best to let the visitor to our page control
the sound (no hidden controls or auto starts).

The background sound tag


<BGSOUND SRC="URL">
<BGSOUND SRC="URL" LOOP=n>
identifies a .wav, .au, .mid or .aif resource that will be played when the page is opened.
The optional LOOP attribute will cause the resource to be played n times. The
command LOOP="INFINITE" will cause the resource to be played continuously as long
as the page is open.

The embed element


<EMBED SRC="URL">
is used to embed a plugin into a document. The OBJECT tag can also be used to
embed objects.

The META tag can also be used to play sound.


<HTML>
<HEAD>
<TITLE> SOUND1 </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">
wav file in HTML document
</H2>
<BGSOUND SRC="hello.wav" AUTOSTART="true" LOOP="true">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> SOUND2 </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">
au file in HTML document
</H2>
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=hello.au">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> SOUND3 </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">
aiff file in HTML document
</H2>
<EMBED SRC="hello.aiff" AUTOSTART="true" LOOP="false"
HIDDEN="true" HEIGHT="0" WIDTH="0">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> SOUND4 </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">
au file in HTML document
</H2>
<OBJECT DATA="hello.au" TYPE="AUDIO/BASIC"></OBJECT>
</BODY>
</HTML>

1.8 Tables
Tables are not just for tables of data. They are also a convenient way to present
sets of images, or to lay out images and related text. A table begins and ends with the
<TABLE> </TABLE> tags. Tables rows are defined by <TR> </TR>; header cells by
<TH> </TH>; and data cells by <TD> </TD>. A table must have at least one row and
one cell. An optional table sub-element, <CAPTION> </CAPTION> supplies a caption
for the table. A simple example is given by <TABLE BORDER>
<TD> Row One - Column One </TD> </TABLE>
Typically, a table with a border is cosmetically more appealing.
A more advanced example is given in the following program
<HTML>
<COMMENT> Table.html </COMMENT>
<BODY>
<TABLE>
<CAPTION> Table Items </CAPTION>
<TR><TH></TH>
<TH> Lunch </TH> <TH> Dinner </TH>
<TR> <TH> Kitchen </TH> <TD> 23 <TD> 30 </TD> </TR>
<TR> <TH> Dining Room </TH> <TD> 31 </TD> <TD> 45 </TD> </TR>
</TABLE>
</BODY>
</HTM>

1.9 Examples
Let us assume the file name of this HTML program is mona.html and the file is on
the C drive. To run it at your favorite browser Netscape’s Navigator or Microsoft’s
Internet Explorer type at the address:
C:\mona.html
Then we press enter.
<HTML>
<HEAD>
<TITLE> An Example of an HTML File Structure </TITLE>
</HEAD>
<BODY BGCOLOR='pink'>
Good Morning Egoli !
<BR> <BR>
Let's do mathematics.
<BR> <BR>
<MATH>
&int;_a_^b^{f(x)<over>1+x</over>} dx
</MATH>
<COMMENT> verbatim </COMMENT>
<PRE>
#include < iostream.h >
int main()
{
int a = 7;
int b = 2*a;
cout << "b = " << b;
return 0;
}
</PRE>
<IMG SRC= "http://www.paris.org/Musees/Louvre/Treasures/gifs/Mona_Lisa.jpg">
</BODY>
</HTML>
1.9. EXAMPLES 19
Next we give the HTML file of the web site of the International School for Scientific
Computing. It shows how <IMG> and <A> ... </A> is applied.
<HTML>
<HEAD>
<TITLE> ISSC Certificate Courses </TITLE>
</HEAD>
<BODY BACKGROUND="../breadc2.gif" >
<CENTER>
<H1>Certificate Courses in Scientific Computing
and Software Engineering</H1>
<H4>presented by the</H4>
<H1><EM>International School for Scientific Computing</EM></H1>
</CENTER>
<CENTER>
<IMG SRC="../ISSCweb.gif" HSPACE=50 ALIGN=CENTER>
</CENTER>
<HR>
Currently the ISSC offers the following certificate courses:
<P>
<UL>
<LI> <B>Core Courses</B>
<OL>
<LI> <A HREF="oopcpp/c_cpp.html">
Object-Oriented Programming in C++</A>
<LI> <A HREF="ooadp/c_ooadp.html">
Object-Oriented Analysis and Design using UML</A>
<LI> <A HREF="java/c_java.html">
Programming in Java, HTML and JavaScript</A>
<LI> <A HREF="AdvJava/c_AdvJava.html">Advanced Java</A>
<LI> <A HREF="c_assemb.html">Assembly Language and C++</A>
</OL>
<LI> <B>Scientific Courses</B>
<OL>
<LI> <A HREF="neural/c_neural.html">
Neural Networks, Genetic Algorithms and Optimization</A>
<LI> <A HREF="fuzzy/c_fuzzy.html">
Fuzzy Logic with C++ and Hardware Implementations</A>
<LI> Numerical Methods for Science and Engineering
<LI> Computational Graph & Transport Theory
with Applications and C++ Implementations
<LI> Algebraic Computing using
SymbolicC++, Mathematica, Maple and Reduce
<LI> <A HREF="microproc/c_micropr.html">
Programming Microprocessors & Embedded Systems</A>
<LI> <A HREF="c_infoth.html">
Information Theory and Maximum Entropy Inference</A>
<LI> Fibre Optics with Applications in Communications
<LI> <A HREF="digital/c_digital.html">
Digital Electronics, Programmable Logic Devices and VHDL</A>
<LI> Microprocessor Based Mobile Robots
<LI> <A HREF="unix/c_unix.html">
Unix, Shell Programming and Perl</A>
<LI> <A HREF="c_cqcomp.html">
Classical and Quantum Computing</A>
</OL>
<LI> <B>Specialized Courses</B>
<OL>
<LI> <A HREF="CORBA/c_CORBA.html">
Distributed Objects with CORBA and Java</A>
<LI> <A HREF="c_lisp.html">
Artificial Intelligence using Lisp and C++</A>
<LI> <A HREF="VisualCPP/c_VisCPP.html">
Programming for Windows using Visual C++.</A>
<LI> <A HREF="c_abap.html">SQL, Oracle and ABAP/4</A>
</OL>
<LI> <B>Commerce, Economics and Administration</B>
<OL>
<LI> <A HREF="Finance/c_Finance.html">
Computational Methods for Finance and Economics</A>
</OL>
</UL>
<HR>
All lectures are presented in English. Each certificate course includes about 15 hours of
formal lectures and up to 15 hours of practicals after which you will write an exam.
Should you not pass the exam the first time, you will be offered an opportunity to rewrite
the exam (free of charge). After successful completion you will receive a certificate from
the International School for Scientific Computing certifying that you completed the
<LI> Numerical Methods for Science and Engineering
<LI> Computational Graph & Transport Theory
with Applications and C++ Implementations
<LI> Algebraic Computing using SymbolicC++, Mathematica, Maple and Reduce
<LI> <A HREF="microproc/c_micropr.html"> Programming Microprocessors &
Embedded Systems</A>

<LI> <A HREF="c_infoth.html">


Information Theory and Maximum Entropy Inference</A>
<LI> Fibre Optics with Applications in Communications
<LI> <A HREF="digital/c_digital.html">
Digital Electronics, Programmable Logic Devices and VHDL</A>
<LI> Microprocessor Based Mobile Robots
<LI> <A HREF="unix/c_unix.html">
Unix, Shell Programming and Perl</A>
<LI> <A HREF="c_cqcomp.html">
Classical and Quantum Computing</A>
</OL>
<LI> <B>Specialized Courses</B>
<OL>
<LI> <A HREF="CORBA/c_CORBA.html">
Distributed Objects with CORBA and Java</A>
<LI> <A HREF="c_lisp.html">
Artificial Intelligence using Lisp and C++</A>
<LI> <A HREF="VisualCPP/c_VisCPP.html">
Programming for Windows using Visual C++.</A>
<LI> <A HREF="c_abap.html">SQL, Oracle and ABAP/4</A>
</OL>
<LI> <B>Commerce, Economics and Administration</B>
<OL>
<LI> <A HREF="Finance/c_Finance.html">
Computational Methods for Finance and Economics</A>
</OL>
</UL>
<HR>
All lectures are presented in English.
Each certificate course includes about 15 hours of formal lectures and up to 15 hours of
practicals after which you will write an exam. Should you not pass the exam the first
time, you will be offered an opportunity to rewrite the exam (free of charge). After
successful completion you will receive a certificate from the International School for
Scientific Computing certifying that you completed the particular course successfully.
At any stage you may decide to enroll for the
<A HREF="diploma.html"> Diploma in Scientific Computing and Software
Engineering</A>. You will be given credits for certificate courses that you have
already completed.
<P> <CENTER>
<A HREF="enrol00.html"><H2>Timetable and Enrollment Form 2000</H2></A>
</CENTER>
<HR>
<P> For further information contact
<OL>
<LI> <A HREF="../steeb/steeb.html">Prof. Willi-Hans Steeb</A>
<ADDRESS>
<UL>
<LI> Telephone: (+27) (011) 489-2331.
<LI> Fax: (+27) (011) 489-2616.
<LI> <A HREF="mailto:whs@na.rau.ac.za"> E-Mail:
whs@na.rau.ac.za</A>
</ADDRESS>
</UL>
<LI> Prof. Charles Villet
<ADDRESS>
<UL>
<LI> Telephone: (+27) (011) 489-2316.
<LI> Fax: (+27) (011) 489-2616.
<LI> <A HREF="mailto:cmv@na.rau.ac.za"> E-Mail:
cmv@na.rau.ac.za</A>
</ADDRESS>
</UL>
<HR>
<MAP NAME="ToHomeMap">
<AREA SHAPE=RECT COORDS="0,0,600,150"
HREF="../scschool/scschool.html">
</MAP>
<CENTER>
<IMG SRC="../ISSChome.gif" BORDER=0 USEMAP="#ToHomeMap">
</CENTER>
<HR>
</BODY>
</HTML>
JavaScript
1 Introduction
The HTML language used to create pages for the World Wide Web was originally
designed to produce plain and static documents, stuff like engineering notes and long-
winded arguments by scientist types. When the Web first started, the only browsing
software available for it was text-based. JavaScript makes HTML come alive. JavaScript
is a scripting language for HTML and the Netscape Navigator browser, version 2.0 and
later. JavaScript is a crossplatform, object-oriented language. Core JavaScript contains
a core set of objects as Array, Date, and Math, and a core set of language elements
such as operators, control structures, and statements. JavaScript “scripts” are small
programs that interact with Netscape and the HTML content of a page. We can create a
JavaScript program to add sound or simple animation, pre-validate a form before the
user’s response is sent to our company’s server, search through a small database, set
options based on user preferences, and much more. JavaScript performs the same
function as a macro in a word processor or electronic spreadsheet program. A macro is
a small program designed solely to run inside a program, automating some task or
enhancing a feature of the program. The difference here is that instead of a word
processor or electronic spreadsheet application, JavaScript is designed for use with
Netscape and surfing on the World Wide Web. JavaScript is used in Netscape 2.0 and
later versions, as well as in Microsoft Internet Explorer 3.0 and later versions. As the co-
developer of JavaScript, Netscape has wanted to make JavaScript an open’standard,
meaning that other companies can use and implement JavaScript in their own Internet
products. When JavaScript was first announced in December of 1995, over two dozen
companies jumped on the bandwagon, promising to support it in future products.

Thus JavaScript is an authoring language for the typical Web page designer. It is a
scripting language in which the program is embedded as part of the HTML document
retrieved by the browser.
A JavaScript program consists of one or more instructions (also referred to as code
or commands) included with the HTML markup tags that form our Web documents.
When Netscape encounters a JavaScript instruction, it stops to process it. For example,
the instruction might tell Netscape to format and display text and graphics on the page.
Unlike a program witten in Java, JavaScript programs are not in separate files (though
this is an option using Netscape 3.0 and later). Instead, the JavaScript instructions are
mixed together with familiar HTML markup tags such as <H1>, <P>, and <IMG>.
Because JavaScript is embedded in HTML documents, we can use any text editor or
Web page editor to write our JavaScript programs. The only requirement is that the
editor must allow direct input. Netscape needs to be told that we are giving it JavaScript
instructions, and these instructions are enclosed between
<SCRIPT> ... </SCRIPT>
tags. Within the script tag we can have only valid JavaScript instructions. We cannot put
HTML tags for Netscape to render inside the <SCRIPT> tags, and we cannot put
JavaScript instructions outside the <SCRIPT> tags. JavaScript is designed on a simple
object-based paradigm. An object is a construct with properties that are JavaScript
variables or other objects. An object also has functions associated with it that are known
as the object’s methods. In addition to objects that are predefined in the Navigator client
and the server, we can define or own objects. A JavaScript object has properties
associated with it. We access the properties of an object with a simple notation
objectName.propertyName Note that JavaScript is case-sensitive. Comments in
JavaScript are the same as in

C, C++ and Java, namely


// ...
and
/* ... */
Core JavaScript can be extended for a variety of purposes by supplementing it with
additional objects; for example: Client-side JavaScript extends the core language
by supplying objects to control a browser and its Document Object Model. Serverside
JavaScript extends the core language by suppling objects relevant to running
JavaScript on a server.

1.2 Document Object


The document object contains information about the current document, such as its
title, when it was last modified, and the color of the background. The document methods
interact with the document. The most commonly used document method is

document.write("text");
and
document.writeln("text");
which writes text to the browers window. The document objects is itself a property
of the window object. JavaScript assumes that we mean the current window when
we use the syntax given above. Thus the write and writeln methods insert text
into the document. The two methods are identical, except that writeln appends a
new line character to the end of the string.
The command
document.bgColor = "red";
sets the background color to red. As an exmple of these two commands consider
<HTML>
<HEAD>
<TITLE> document.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Hello Egoli");
document.write("\n");
str1 = "willi";
str2 = "hans";
document.write("<P> str1 = " + str1 + " str2 = " + str2);
document.bgColor = "red";
</SCRIPT>
</BODY>
</HTML>
The concatention operator + concatenates two strings values together. The following
program shows that the prompt provides a string even if we enter digits. Then + will do
concatenation. Thus to obtain numbers we use the Number object.
<HTML>
<SCRIPT>
n = prompt("enter n: ","");
m = prompt("enter m: ","");
x = n + m;
document.write("x = " + x,"<BR>"); // concatenates strings n and m
u = Number(n);
v = Number(m);
r = u + v;
document.write("r = " + r,"<BR>"); // addition of numbers
</SCRIPT>
</HTML>

1.3 Window Object


The window object represents the contents of an entire browser window. The method
open() is a method to open a new window. win = window.open("OpenMe.html");
fills it with the specified document. The user interface methods are special methods
of the window object. They all display a dialog box asking for user input. JavaScript
has three ready-made dialog boxes that we can use to interact with our visitors. All
three display a (fixed) title and a message, which we can set, and hold execution of
the script until the user responds. The dialog boxes are

alert(message) confirm(message)
prompt(message,default)

The most important one is alert("message"); We use this method whenever we wish to
display a message. This message is displayed in a dialog box. The user reads the
message and chooses OK to dismiss the dialog box.

The confirm(message) carries an OK and a Cancel button, and returns the value
true or false, depending upon which button was clicked. We apply it when we are
offering our visitor a simple Yes/No choice. We use confirm() in an if() test.

The dialog box prompt(message,default) carries a text box and OK and Cancel
buttons. It returns whatever text was entered. We use it to obtain information on
pages where we do not want to have a form.

<HTML>
<HEAD>
<TITLE> window.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
alert("System dialog boxes");
if(confirm("Do you want to do this?"))
alert("Let us begin")
else
alert("In any case we do it")
lnum = prompt("Enter your lucky number",""); // "" clears text box
</SCRIPT>
</BODY>
</HTML>

1.4 Data Types


Data types must not be declared we just define them. JavaScript recognizes the
following types of values:
numbers, such as 18 or 2.81
logical (boolean) values, either true or false
strings such as willi. The String literal is zero or more characters enclosed in
double " or single ' quotation marks.
null (null value). a special keyword denoting a null value. null is also a primitive
value. Since JavaScript is case sensitive, null is not the same as Null, NULL, or any
other variants. The null value behaves as 0 in numeric context and as false in
boolean context.
undefined, a top-level property whose value is undefined. undefined is also a primitive
value.
The assignment operator = assigns a value to its left operand based on the value of
its right operand. For example
i = 4;
x = 3.14159;
found = true;
nfound = false;
str = "xxxyyy";
c = 'X';
Variables can also be declared using the keyword var. For example
var username;
var max = 500;
The first line creates the variable username, but without giving it a value; the second
creates max and assigns 500 to it. The rules for variable names are the same as those
for object names. Names must start with a letter or underscore and may contain any
combinations of letters and digits. Spaces cannot be used.
<HTML>
<HEAD>
<TITLE> DataTypes.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
i = 4;
x = 3.14159;
c = 'X';
found = true;
nfound = false;
str = "xy";
document.write("i = " + i,"<BR>");
document.write("x = " + x,"<BR>");
document.write("c = " + c,"<BR>");
document.write("found = " + found,"<BR>");
document.write("nfound = " + nfound,"<BR>");
document.write("str = " + str,"<BR>");
n = null;
document.write("n = " + n,"<BR>"); // => null
div = n/4;
document.write("div = " + div,"<BR>"); // => 0
r = "The answer is " + 60;
document.write("r = " + r,"<BR>");
s = 60 + " is the answer";
document.write("s = " + s,"<BR>");
myList = ["Berlin", , "London", "Singapore"];
document.write("myList[1] = " + myList[1],"<BR>"); // => undefined
</SCRIPT>
</BODY>
</HTML>

1.5 Arithmetic Operations


The arithmetic operations are
+ addition
- subtraction
* multiplication
/ division
% modulus (remainder)
++ increment operator
-- decrement operator
As in C, C++ and Java the operators ++ and -- have a preincrement (predecrement)
and postincrement (postdecrement) version. We notice that division is floating point
division. Thus 1/4 returns 0.25. JavaScript also has the shorthand operators
x += y for x = x + y etc. The following program shows how the arithmetic operators are
used.
<HTML>
<HEAD>
<TITLE> JSArith.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
i = 7;
j = -3;
k = i + j;
document.write("<BR> k = " + k + "<BR>");
m = i - j;
document.write("<BR> m = " + m + "<BR>");
n = i*j;
document.write("<BR> n = " + n + "<BR>");
p = i/j;
document.write("<BR> p = " + p + "<BR>");
r = i%j;
document.write("<BR> r = " + r + "<BR>");
i++;
document.write("<BR> i = " + i + "<BR>");
j--;
document.write("<BR> j = " + j + "<BR>");
</SCRIPT>
</BODY>
</HTML>

1.6 Comparison Operators


A comparison operator compares its operands and returns a logical value based on
whether the comparision is true. The operands can be numerical or string values.
Strings are compared based on the standard lexicographical ordering (ASCII table).
The following table describes the comparision operators
Operator Name Description
======== ============ ==========================================
== equal returns true if the operands are equal
!= not equal returns true if the operands are not equal
> greater than returns true if the left operand is greater than the right operand
>= greater than returns true if the left operand is or equal greater than or equal to
the right operand
< less than returns true if the left operand is less than the right operand
<= less than returns true if the left operand is or equal less or equal to the right
operand
================================================================
<HTML>
<HEAD>
<TITLE> Comparison.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
result1 = (3 == 3);
document.write("result1 = " + result1,"<BR>"); // => true
result2 = (3 != 3);
document.write("result2 = " + result2,"<BR>"); // => false
result3 = (4 > 2);
document.write("result3 = " + result3,"<BR>"); // => true
</SCRIPT>
</BODY>
</HTML>
1.7 Program Flow
JavaScript supports a compact set of statements we can use to control the program
flow. They are conditional statements: if ... else and switch loop statements: for, while,
do ... while, label, break, continue. Note that label is not itself a looping statement, but is
frequently used with these statements. There is no goto in JavaScript.
The if ... else, switch, for, while, do ... while conditions have the form as in Java.

The logical operators


&& logical AND
|| logical OR
! logical NOT
also have the same form as in Java, C and C++. Furthermore the relational operators
are
== equal to < less than <= less than or equal to
!= not equal to > greater than >= greater than equal to
An example is
if((i%3) == 0) { ... }
The for loop and while loop are the same as in Java. For example
...
for(n=1;n<10;n++)
{
x = i*n;
}
The break statement provides a way of escaping from for or while loops. For
example
for(count=0;count<5;count++)
{
answer = 4;
if(answer == (count*count))
break;
}
The following program uses two for loops to generate a triangle of asterisks.
<HTML>
<COMMENT> asterisk.html </COMMENT>
<SCRIPT>
n = 9;
for(i=1;i<n;i++)
{
for(j=1;j<=i;j++)
{
document.write("*");
}
document.write("<BR>");
}
</SCRIPT>
</HTML>
A switch statement allows a program to evaluate an expression and attempt to
match the expression’s value to a case label. If a match is found, the program executes
the associated statement.
<HTML>
<COMMENT> MSwitch.html </COMMENT>
<SCRIPT>
MArray = [ 3, 4, 1, 1, 4, -3, 1, 6 ];
for(j=0;j<MArray.length;j++)
{
switch(MArray[j])
{
case 1: document.write("number is 1","<BR>")
break;
case 3: document.write("number is 3","<BR>")
break;
default: document.write("number is not 1 or 3","<BR>")
break;
}
}
</SCRIPT>
</HTML>

<HTML>
<COMMENT> SSwitch.html </COMMENT>
<SCRIPT>
s = new String("bella");
for(j=0;j<s.length;j++)
{
c = s.charAt(j);
document.write("j = " + j, "<BR>");
switch(c)
{
case 'a': document.write("character is 'a'","<BR>")
break;
case 'b': document.write("character is 'b'","<BR>")
break;
default: document.write("character is not 'a' or 'b'","<BR>")
break;
}
}
</SCRIPT>
</HTML>

The continue statement inside a for loop or while loop skips over any remaining
lines and loops round again.
The following HTML file gives an example how the for loop and the while loop is
used.
<HTML>
<HEAD>
<TITLE> JSLoop.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Hello Egoli");
for(i=1;i<=10;i++)
{
if((i%2) == 0)
{
document.write("<P>Loop: " + i + "</P>");
}
}
alert("We are leaving the first Script block");
</SCRIPT>
<B> Now we use a script again </B>
<SCRIPT>
sum = 0;
count = 0;
while(count < 10)
{
sum += count;
count++;
}
document.write("<BR> sum = " + sum);
</SCRIPT>
<BR><BR>
<B> Again we enter script to set the background colour </B>
<SCRIPT>
document.bgColor = "red";
</SCRIPT>
</BODY>
</HTML>

JavaScript also has a for ... in statement. It uses it to manipulate objects. The
form is
for(varname in objname)
{ forbody }
The following program shows an example of the for ... in statement.
<HTML>
<TITLE> forin.html </TITLE>
<BODY>
<SCRIPT>
languages = ["C++", "Java", "C", "Lisp"];
var language = "C";
var label = 0;
for(var i in languages)
{
if(language == languages[i])
{
document.write("language in list on position: " + i,"<BR>");
label = 1;
}
}
document.write("label = " + label,"<BR>");
if(label == 0)
{ document.write("language not in list"); }
</SCRIPT>
</BODY>
</HTML>

The purpose of the with statement in JavaScript is to permit a number of object


references to be made to the same object (or instance) without having to repeat the
name of that object. A with statement looks as follows
with(object)
{
statements
}
The following with statement specifies that the Math object is the default object.
<HTML>
<HEAD>
<TITLE> with.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
var a = 3.0;
var b = 7.0;
var result1;
var result2;
with(Math)
{
result1 = PI*a*b;
result2 = sin(a)*sin(a) + cos(b)*cos(b);
}
document.write("result1 = " + result1,"<BR>");
document.write("result2 = " + result2,"<BR>");
</SCRIPT>
</BODY>
</HTML>
1.8 Functions
JavaScript allows the use of functions indicated by the keyword function. The var
statement inside a function makes the variable local, i.e. it goes out of scope when
we leave the function.
The following HTML file show how functions are used within JavaScript. The
program opens a window where we see
Type something here
a textbox and a button called ClickMe. We enter some text in the textbox, for
example Egoli-Gauteng. Then we click at the Button ClickMe. The method alert
opens a dialog box and displays
The value of the textbox is: Egoli-Gauteng
Then click OK to close the dialog box.
<HTML>
<COMMENT> MyForm.html </COMMENT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function testMe(form)
{
Ret = form.box.value;
alert("The value of the textbox is: " + Ret);
}
</SCRIPT>
<FORM>
Type something here <INPUT TYPE="text" NAME="box"><P>
<INPUT TYPE="button" NAME="button" VALUE="ClickMe"
onClick = "testMe(this.form)">
</FORM>
</BODY>
</HTML>

In the following example we show the use of two functions. The HTML commands to
display a table of the square roots of the integers from 1 to 20 are embedded in the
JavaScript code.

<HTML>
<COMMENT> Function.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function sqrttable(myWindow)
{
myWindow.document.write("<B> Square Root Table </B><BR>");
myWindow.document.write("<HR>");
myWindow.document.write("<TABLE BORDER=1 CELLSPACING=5>");
myWindow.document.write("<TR><TD>Number</TD><TD>Squareroot</TD></TR>");
for(var i=1;i<=20;i++)
{
myWindow.document.write("<TR><TD>" + i + "</TD><TD>" + Math.sqrt(i) +
"</TD></TR>");
}
myWindow.document.write("</TABLE>");
myWindow.document.write("<HR>");
}
function display()
{
var dynWindow = window.open("","Title","width=200,height=300,scrollbars",
+ "resizable");
sqrttable(dynWindow);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="Show it">
<input type=button value="show table" onClick="display()">
</FORM>
</BODY>
</HTML>

1.9 Prompts
The prompt is a special method of the window object. It displays a dialog box with
a single-text box and Cancel and OK buttons
prompt(message,defaultText)
The word prompt tells JavaScript that a dialog box will appear on the screen. The
word message is the text that is displayed in the prompt box. Lastly, the word
defaultText is the text displayed in the text box.
<HTML>
<HEAD>
<COMMENT> prompt.html </COMMENT>
</HEAD>
<BODY bgcolor=yellow text=black>
<SCRIPT LANGUAGE="JavaScript">
var i;
var j;
var k;
i = 1;
j = 1;
document.write("<H4>");
var m = prompt("enter the number of Fibonacci numbers:",0);
document.write(i + "<BR>");
document.write(j + "<BR>");
k = i + j;
document.write(k + "<BR>");
for(var n=3;n<=m-1;n++)
{
i = j;
j = k;
k = i + j;
document.write(k + "<BR>");
}
</SCRIPT>
</BODY>
</HTML>

Events
JavaScript programs are typically event-driven. Events are actions that occur on
the Web page, usually of something the user does. Examples are: a button click is
an event, giving focus to a form element, resizing the page, submitting a form.
An event, then, is the action which triggers an event handler. The event handler
specifies which JavaScript code to execute. Often, event handlers are placed within
the HTML tag which creates the object on which the event acts. For example, a
hyperlink is subject to a mouseover event, meaning that its event handler will be
triggered when a mouse passes over the link. The JavaScript which is called by the
event handler may be any valid JavaScript code: a single statement or a series of
statements, although most often it is a function call.
The set of all events which may occur, and the particular page elements on which
they can occur, is part of the Document Object Model (DOM), and not of JavaScript
itself. Thus, Netscape and Microsoft do not share the exact same set of events, nor
are all page elements subject to the same events between browsers.
The table below displays some of the most commonly used events supported in both
DOM’s.
Event Occurs when ... Event Handler
========== =========================== =============
click User clicks on form or link onclick
change User changes value of text, onchange
textarea, or select element
focus User gives form element onfocus
input focus
blur User removes input focus onblur
from form element
mouseover User moves mouse pointer onmouseover
over a link or anchor
mouseout User moves mouse pointer onmouseout
off of link or anchor
select User selects form element's onselect
input field
submit User submits a form onsubmit
resize User resizes the browser onresize
window
load User loads the page in the onload
Navigator
unload User exits the page onunload
========================================================
The following program shows an example.
<HTML>
<COMMENT> Event1.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
window.onresize = message;
function message()
{
alert("The window has been resized!");
}
</SCRIPT>
</HEAD>
<BODY>
Please resize the window.
</BODY>
</HTML>

In the following example we demonstrate the onBlur event and can see how it is
possible to force a user to enter valid information into a form. The user is forced to
enter a number from 0 to 9.
<HTML>
<COMMENT> onblur.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isDigit(c)
{
return ((c >= "0") && (c <= "9"))
}
function checkValue(field)
{
if(!isDigit(field.value))
{
alert("You must enter a digit from 0 to 9.");
field.focus();
}
if((field.value.length < 0) || (parseInt(field.value) >= 10))
{
alert("You did not enter a digit from 0 to 9");
field.focus();
}
}
</SCRIPT>
<FORM>
Please enter a number from 0 to 9:
<INPUT TYPE=TEXT NAME="number" SIZE=3 onBlur="checkValue(this);">
<BR><BR>
Please enter your name:
<INPUT TYPE=TEXT NAME="name" SIZE=25>
</FORM>
</BODY>
</HTML>

The following example demonstrates the onChange event. We built a pulldown menu
that allows users to jump to different websites or URLs.
<HTML>
<COMMENT> onchange.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function jumpTo(URL_List)
{
var URL = URL_List.options[URL_List.selectedIndex].value;
window.location.href = URL;
}
</SCRIPT>
<FORM>
<SELECT NAME="site" onChange="jumpTo(this);">
<OPTION VALUE="http://www.fhso.ch/~steeb"> Applied University Solothurn
<OPTION VALUE="http://issc.rau.ac.za"> ISSC
</SELECT>
</FORM>
</BODY>
</HTML>

The following example demonstrates the onClick event.


<HTML>
<COMMENT> onclick.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function informuser()
{
alert("I told you not to press that button");
}
</SCRIPT>
<FORM>
<INPUT TYPE=button NAME="button" VALUE="Do not press this button"
onClick="informuser();">
</FORM>
</BODY>
</HTML>

The following example demonstrates the onFocus event.


<HTML>
<COMMENT> onfocus.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var alreadyWarned = false;
function displayHelp()
{
if(!alreadyWarned)
{
alert("Enter your phone number in (xx) xxx-xxxx format");
alreadyWarned = true;
}
}
</SCRIPT>
<FORM>
<INPUT TYPE=text NAME="phonenumber" SIZE=15
onFocus = "displayHelp();">
</FORM>
</BODY>
</HTML>
VB Script
What is VBScript?
• VBScript is a scripting language
• A scripting language is a lightweight programming language
• VBScript is a light version of Microsoft's programming language Visual Basic
How Does it Work?
When a VBScript is inserted into an HTML document, the Internet browser will read the
HTML and interpret the VBScript. The VBScript can be executed immediately, or at a
later event.

Put a VBScript into an HTML Page


The example below shows how to use VBSript to write text on a web page:
<html>
<body>
<script type="text/vbscript">
document.write("Hello World!")
</script>
</body>
</html>

The example below shows how to add HTML tags to the VBScript:
<html>
<body>
<script type="text/vbscript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>

Example Explained
To insert a VBScript into an HTML page, we use the <script> tag. Inside the <script> tag
we use the type attribute to define the scripting language.
So, the <script type="text/vbscript"> and </script> tells where the VBScript starts and
ends:
<html>
<body>
<script type="text/vbscript">
...
</script>
</body>
</html>

The document.write command is a standard VBScript command for writing output to a


page.
By entering the document.write command between the <script> and </script> tags, the
browser will recognize it as a VBScript command and execute the code line. In this case
the browser will write Hello World! to the page:
<html>
<body>
<script type="text/vbscript">
document.write("Hello World!")
</script>
</body>
</html>

How to Handle Simple Browsers


Browsers that do not support scripting, will display VBScript as page content.
To prevent them from doing this, the HTML comment tag should be used to "hide" the
VBScript.
Just add an HTML comment tag <!-- before the first VBScript statement, and a --> (end
of comment) after the last VBScript statement, like this
<html>
<body>
<script type="text/vbscript">
<!--
document.write("Hello World!")
-->
</script>
</body>
</html>

Where to Put the VBScript


VBScripts in a page will be executed immediately while the page loads into the browser.
This is not always what we want. Sometimes we want to execute a script when a page
loads, or at a later event, such as when a user clicks a button. When this is the case we
put the script inside a function or a sub procedure, you will learn about procedures in a
later chapter.
Scripts in <head>
Put your functions and sub procedures in the head section, this way they are all in one
place, and they do not interfere with page content.
<html>
<head>
<script type="text/vbscript">
function myFunction()
alert("Hello World!")
end function
</script>
</head>

<body onload="myFunction()">
</body>
</html>
Scripts in <body>
If you don't want your script to be placed inside a function, and especially if your script
should write page content, it should be placed in the body section.
<html>
<head>
</head>

<body>
<script type="text/vbscript">
document.write("This message is written by VBScript")
</script>
</body>

</html>

Scripts in <head> and <body>


You can place an unlimited number of scripts in your document, and you can have
scripts in both the body and the head section
<html>
<head>
<script type="text/vbscript">
function myFunction()
alert("Hello World!")
end function
</script>
</head>

<body>
<button onclick="myFunction()">Click me</button>
<script type="text/vbscript">
document.write("This message is written by VBScript")
</script>
</body>
</html>
Using an External VBScript
If you want to run the same VBScript on several pages, without having to write the same
script on every page, you can write a VBScript in an external file.
Save the external VBScript file with a .vbs file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .vbs file in the "src" attribute of the <script> tag:
<html>
<head>
<script type="text/vbscript" src="ex.vbs"></script>
</head>
<body>
</body>
</html>
VBScript Variables
As with algebra, VBScript variables are used to hold values or expressions. A variable
can have a short name, like x, or a more descriptive name, like carname.

Rules for VBScript variable names:

•Must begin with a letter


•Cannot contain a period (.)
•Cannot exceed 255 characters
In VBScript, all variables are of type variant, that can store different types of data.

Declaring (Creating) VBScript Variables

Creating variables in VBScript is most often referred to as "declaring" variables. You


can declare VBScript variables with the Dim, Public or the Private statement. Like this:

Dim x
Dim carname

Now you have created two variables. The name of the variables are "x" and "carname".

You can also declare variables by using its name in a script. Like this:

carname="Volvo"

Now you have also created a variable. The name of the variable is "carname". However,
this method is not a good practice, because you can misspell the variable name later in
your script, and that can cause strange results when your script is running.

If you misspell for example the "carname" variable to "carnime", the script will
automatically create a new variable called "carnime". To prevent your script from doing
this, you can use the Option Explicit statement. This statement forces you to declare all
your variables with the dim, public or private statement.

Put the Option Explicit statement on the top of your script. Like this:

Option Explicit
Dim carname
carname=some value

-
-
-
Assigning Values to Variables
You assign a value to a variable like this:

carname="Volvo"
x=10
The variable name is on the left side of the expression and the value you want to assign
to the variable is on the right. Now the variable "carname" has the value of "Volvo", and
the variable "x" has the value of "10".

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

Lifetime of Variables
How long a variable exists is its lifetime.

When you declare a variable within a procedure, the variable can only be accessed
within that procedure. When the procedure exits, the variable is destroyed. These
variables are called local variables. You can have local variables with the same name in
different procedures, because each is recognized only by the procedure in which it is
declared.

If you declare a variable outside a procedure, all the procedures on your page can
access it. The lifetime of these variables starts when they are declared, and ends when
the page is closed.

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

VBScript Array Variables


An array variable is used to store multiple values in a single variable.

In the following example, an array containing 3 elements is declared:

Dim names(2)

The number shown in the parentheses is 2. We start at zero so this array contains 3
elements. This is a fixed-size array. You assign data to each of the elements of the
array like this:

names(0)="Tove"
names(1)="Jani"
names(2)="Stale"

Similarly, the data can be retrieved from any element using the index of the particular
array element you want. Like this:

mother=names(0)

You can have up to 60 dimensions in an array. Multiple dimensions are declared by


separating the numbers in the parentheses with commas. Here we have a two-
dimensional array consisting of 5 rows and 7 columns:

Dim table(4,6)
Asign data to a two-dimensional array:

Example (IE Only)


<html>
<body>

<script type="text/vbscript">
Dim x(2,2)
x(0,0)="Volvo"
x(0,1)="BMW"
x(0,2)="Ford"
x(1,0)="Apple"
x(1,1)="Orange"
x(1,2)="Banana"
x(2,0)="Coke"
x(2,1)="Pepsi"
x(2,2)="Sprite"
for i=0 to 2
document.write("<p>")
for j=0 to 2
document.write(x(i,j) & "<br />")
next
document.write("</p>")
next
</script>

</body>
</html>
VBScript Sub Procedures

A Sub procedure:

•is a series of statements, enclosed by the Sub and End Sub statements
•can perform actions, but does not return a value
•can take arguments
•without arguments, it must include an empty set of parentheses ()
Sub mysub()
some statements
End Sub

or

Sub mysub(argument1,argument2)
some statements
End Sub

Example (IE Only)


Sub mysub()
alert("Hello World")
End Sub

VBScript Function Procedures

A Function procedure:

•is a series of statements, enclosed by the Function and End Function statements
•can perform actions and can return a value
•can take arguments that are passed to it by a calling procedure
•without arguments, must include an empty set of parentheses ()
•returns a value by assigning a value to its name
Function myfunction()
some statements
myfunction=some value
End Function

or

Function myfunction(argument1,argument2)
some statements
myfunction=some value
End Function

Example (IE Only)


function myfunction()
myfunction=Date()
end function

How to Call a Procedure


There are different ways to call a procedure. You can call it from within another
procedure, on an event, or call it within a script.

Example (IE Only)


Call a procedure when the user clicks on a button:

<body>
<button onclick="myfunction()">Click me</button>
</body>

Procedures can be used to get a variable value:

carname=findname()

Here you call a Function called "findname", the Function returns a value that will be
stored in the variable "carname".

Function procedures can calculate the sum of two arguments:

Example (IE Only)


Function myfunction(a,b)
myfunction=a+b
End Function

document.write(myfunction(5,9))

The function "myfunction" will return the sum of argument "a" and argument "b". In this
case 14.

When you call a procedure you can use the Call statement, like this:

Call MyProc(argument)

Or, you can omit the Call statement, like this:

MyProc argument
Conditional Statements
Conditional statements are used to perform different actions for different decisions.
In VBScript we have four conditional statements:

•If statement - executes a set of code when a condition is true


•If...Then...Else statement - select one of two sets of lines to execute
•If...Then...ElseIf statement - select one of many sets of lines to execute
•Select Case statement - select one of many sets of lines to execute

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

If...Then...Else
Use the If...Then...Else statement if you want to

•execute some code if a condition is true


•select one of two blocks of code to execute
If you want to execute only one statement when a condition is true, you can write the
code on one line:

If i=10 Then alert("Hello")

There is no ..Else.. in this syntax. You just tell the code to perform one action if a
condition is true (in this case If i=10).

If you want to execute more than one statement when a condition is true, you must put
each statement on separate lines, and end the statement with the keyword "End If":

If i=10 Then
alert("Hello")
i = i+1
End If

There is no ..Else.. in the example above either. You just tell the code to perform
multiple actions if the condition is true.

If you want to execute a statement if a condition is true and execute another statement if
the condition is not true, you must add the "Else" keyword:

Example (IE Only)


<html>
<body>
<script type="text/vbscript">
Function greeting()
i=hour(time)
If i < 10 Then
document.write("Good morning!")
Else
document.write("Have a nice day!")
End If
End Function
</script>
</head>

<body onload="greeting()">
</body>

</html>

In the example above, the first block of code will be executed if the condition is true, and
the other block will be executed otherwise (if i is greater than 10).

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

If...Then...ElseIf
You can use the If...Then...ElseIf statement if you want to select one of many blocks of
code to execute:

Example (IE Only)


<html>
<body>
<script type="text/vbscript">
Function greeting()
i=hour(time)
If i = 10 Then
document.write("Just started...!")
ElseIf i = 11 then
document.write("Hungry!")
ElseIf i = 12 then
document.write("Ah, lunch-time!")
ElseIf i = 16 then
document.write("Time to go home!")
Else
document.write("Unknown")
End If
End Function
</script>
</head>

<body onload="greeting()">
</body>

</html>
--------------------------------------------------------------------------------

Select Case
You can also use the "Select Case" statement if you want to select one of many blocks
of code to execute:

Example (IE Only)


<html>
<body>
<script type="text/vbscript">
d=weekday(date)
Select Case d
Case 1
document.write("Sleepy Sunday")
Case 2
document.write("Monday again!")
Case 3
document.write("Just Tuesday!")
Case 4
document.write("Wednesday!")
Case 5
document.write("Thursday...")
Case 6
document.write("Finally Friday!")
Case else
document.write("Super Saturday!!!!")
End Select
</script>

</body>
</html>

This is how it works: First we have a single expression (most often a variable), that is
evaluated once. The value of the expression is then compared with the values for each
Case in the structure. If there is a match, the block of code associated with that Case is
executed.
Looping Statements
Looping statements are used to run the same block of code a specified number of
times.

In VBScript we have four looping statements:

•For...Next statement - runs code a specified number of times


•For Each...Next statement - runs code for each item in a collection or each element of
an array
•Do...Loop statement - loops while or until a condition is true
•While...Wend statement - Do not use it - use the Do...Loop statement instead

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

For...Next Loop
Use the For...Next statement to run a block of code a specified number of times.

The For statement specifies the counter variable (i), and its start and end values. The
Next statement increases the counter variable (i) by one.

Example
<html>
<body>

<script type="text/vbscript">
For i = 0 To 5
document.write("The number is " & i & "<br />")
Next
</script>

</body>
</html>

The Step Keyword


With the Step keyword, you can increase or decrease the counter variable by the value
you specify.

In the example below, the counter variable (i) is INCREASED by two, each time the loop
repeats.

For i=2 To 10 Step 2


some code
Next

To decrease the counter variable, you must use a negative Step value. You must
specify an end value that is less than the start value.
In the example below, the counter variable (i) is DECREASED by two, each time the
loop repeats.

For i=10 To 2 Step -2


some code
Next

Exit a For...Next
You can exit a For...Next statement with the Exit For keyword.

For i=1 To 10
If i=5 Then Exit For
some code
Next

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

For Each...Next Loop


A For Each...Next loop repeats a block of code for each item in a collection, or for each
element of an array.

Example
<html>
<body>

<script type="text/vbscript">
Dim cars(2)
cars(0)="Volvo"
cars(1)="Saab"
cars(2)="BMW"

For Each x In cars


document.write(x & "<br />")
Next
</script>

</body>
</html>

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

Do...Loop
If you don't know how many repetitions you want, use a Do...Loop statement.

The Do...Loop statement repeats a block of code while a condition is true, or until a
condition becomes true.

Repeat Code While a Condition is True


You use the While keyword to check a condition in a Do...Loop statement.
Do While i>10
some code
Loop

If i equals 9, the code inside the loop above will never be executed.

Do
some code
Loop While i>10

The code inside this loop will be executed at least one time, even if i is less than 10.

Repeat Code Until a Condition Becomes True


You use the Until keyword to check a condition in a Do...Loop statement.

Do Until i=10
some code
Loop

If i equals 10, the code inside the loop will never be executed.

Do
some code
Loop Until i=10

The code inside this loop will be executed at least one time, even if i is equal to 10.

Exit a Do...Loop
You can exit a Do...Loop statement with the Exit Do keyword.

Do Until i=10
i=i-1
If i<10 Then Exit Do
Loop

The code inside this loop will be executed as long as i is different from 10, and as long
as i is greater than 10.

--------------------------------------------------------------------------------
Looping through headers
How to loop through the six headings in html.

Do...While loop
How to make a simple Do...While loop.
Date/Time Functions
Function Description

CDate Converts a valid date and time expression to the variant of


subtype Date

Date Returns the current system date

DateAdd Returns a date to which a specified time interval has been


added

DateDiff Returns the number of intervals between two dates

DatePart Returns the specified part of a given date

DateSerial Returns the date for a specified year, month, and day

DateValue Returns a date

Day Returns a number that represents the day of the month


(between 1 and 31, inclusive)

FormatDateTime Returns an expression formatted as a date or time

Hour Returns a number that represents the hour of the day


(between 0 and 23, inclusive)

IsDate Returns a Boolean value that indicates if the evaluated


expression can be converted to a date

Minute Returns a number that represents the minute of the hour


(between 0 and 59, inclusive)

Month Returns a number that represents the month of the year


(between 1 and 12, inclusive)

MonthName Returns the name of a specified month

Now Returns the current system date and time

Second Returns a number that represents the second of the


minute (between 0 and 59, inclusive)

Time Returns the current system time

Timer Returns the number of seconds since 12:00 AM

TimeSerial Returns the time for a specific hour, minute, and second

TimeValue Returns a time

Weekday Returns a number that represents the day of the week


(between 1 and 7, inclusive)

WeekdayName Returns the weekday name of a specified day of the week

Year Returns a number that represents the year

Top
Conversion Functions

Function Description

Asc Converts the first letter in a string to ANSI code

CBool Converts an expression to a variant of subtype Boolean

CByte Converts an expression to a variant of subtype Byte

CCur Converts an expression to a variant of subtype Currency

CDate Converts a valid date and time expression to the variant of


subtype Date

CDbl Converts an expression to a variant of subtype Double

Chr Converts the specified ANSI code to a character

CInt Converts an expression to a variant of subtype Integer

CLng Converts an expression to a variant of subtype Long

CSng Converts an expression to a variant of subtype Single


CStr Converts an expression to a variant of subtype String

Hex Returns the hexadecimal value of a specified number

Oct Returns the octal value of a specified number

Top
Format Functions

Function Description

FormatCurrency Returns an expression formatted as a currency value

FormatDateTime Returns an expression formatted as a date or time

FormatNumber Returns an expression formatted as a number

FormatPercent Returns an expression formatted as a percentage

Top
Math Functions

Function Description

Abs Returns the absolute value of a specified number

Atn Returns the arctangent of a specified number

Cos Returns the cosine of a specified number (angle)

Exp Returns e raised to a power

Hex Returns the hexadecimal value of a specified number

Int Returns the integer part of a specified number

Fix Returns the integer part of a specified number

Log Returns the natural logarithm of a specified number

Oct Returns the octal value of a specified number


Rnd Returns a random number less than 1 but greater or equal
to 0

Sgn Returns an integer that indicates the sign of a specified


number

Sin Returns the sine of a specified number (angle)

Sqr Returns the square root of a specified number

Tan Returns the tangent of a specified number (angle)

Top
Array Functions

Function Description

Array Returns a variant containing an array

Filter Returns a zero-based array that contains a subset of a


string array based on a filter criteria

IsArray Returns a Boolean value that indicates whether a specified


variable is an array

Join Returns a string that consists of a number of substrings in


an array

LBound Returns the smallest subscript for the indicated dimension


of an array

Split Returns a zero-based, one-dimensional array that contains


a specified number of substrings

UBound Returns the largest subscript for the indicated dimension of


an array

String Functions
Function Description

InStr Returns the position of the first occurrence of one string


within another. The search begins at the first character of
the string

InStrRev Returns the position of the first occurrence of one string


within another. The search begins at the last character of
the string

LCase Converts a specified string to lowercase

Left Returns a specified number of characters from the left side


of a string

Len Returns the number of characters in a string

LTrim Removes spaces on the left side of a string

RTrim Removes spaces on the right side of a string

Trim Removes spaces on both the left and the right side of a
string

Mid Returns a specified number of characters from a string

Replace Replaces a specified part of a string with another string a


specified number of times

Right Returns a specified number of characters from the right


side of a string

Space Returns a string that consists of a specified number of


spaces

StrComp Compares two strings and returns a value that represents


the result of the comparison

String Returns a string that contains a repeating character of a


specified length

StrReverse Reverses a string

UCase Converts a specified string to uppercase


Top
Other Functions

Function Description

CreateObject Creates an object of a specified type

Eval Evaluates an expression and returns the result

GetLocale Returns the current locale ID

GetObject Returns a reference to an automation object from a file

GetRef Allows you to connect a VBScript procedure to a DHTML


event on your pages

InputBox Displays a dialog box, where the user can write some input
and/or click on a button, and returns the contents

IsEmpty Returns a Boolean value that indicates whether a specified


variable has been initialized or not

IsNull Returns a Boolean value that indicates whether a specified


expression contains no valid data (Null)

IsNumeric Returns a Boolean value that indicates whether a specified


expression can be evaluated as a number

IsObject Returns a Boolean value that indicates whether the


specified expression is an automation object

LoadPicture Returns a picture object. Available only on 32-bit platforms

MsgBox Displays a message box, waits for the user to click a


button, and returns a value that indicates which button the
user clicked

RGB Returns a number that represents an RGB color value

Round Rounds a number

ScriptEngine Returns the scripting language in use


ScriptEngineBuildVersion Returns the build version number of the scripting engine in
use

ScriptEngineMajorVersion Returns the major version number of the scripting engine


in use

ScriptEngineMinorVersion Returns the minor version number of the scripting engine


in use

SetLocale Sets the locale ID and returns the previous locale ID

TypeName Returns the subtype of a specified variable

VarType Returns a value that indicates the subtype of a specified


variable

VBScript Keywords
Keyword Description

Empty Used to indicate an uninitialized variable value. A variable


value is uninitialized when it is first created and no value is
assigned to it, or when a variable value is explicitly set to
empty.
Example:
Dim x 'the variable x is uninitialized!
x="ff" 'the variable x is NOT uninitialized anymore
x=Empty 'the variable x is uninitialized!
Note: This is not the same as Null!!
IsEmpty Used to test if a variable is uninitialized.
Example: If (IsEmpty(x)) 'is x uninitialized?
Nothing Used to indicate an uninitialized object value, or to
disassociate an object variable from an object to release
system resources.

Example: Set myObject=Nothing


Is Nothing Used to test if a value is an initialized object.

Example: If (myObject Is Nothing) 'is it unset?


Note: If you compare a value to Nothing, you will not get
the right result! Example: If (myObject = Nothing) 'always
false!
Null Used to indicate that a variable contains no valid data.

One way to think of Null is that someone has explicitly set


the value to "invalid", unlike Empty where the value is "not
set".
Note: This is not the same as Empty or Nothing!!
Example: x=Null 'x contains no valid data
IsNull Used to test if a value contains invalid data.

Example: if (IsNull(x)) 'is x invalid?


True Used to indicate a Boolean condition that is correct (True
has a value of -1)

False Used to indicate a Boolean condition that is not correct


(False has a value of 0)

You might also like