JavaScript Class
JavaScript Introduction
This class will take you step by step through the fundamentals of
Javascript. You will learn how to write functions, use data from text boxes,
create IF-THEN conditionals, program loops, and generally make your web pages
go from the static HTML page it was to the exciting pseudo-dynamic page
it can be!
What You Should Already Know
Before you continue you should have a basic understanding of the following:
- WWW
- HTML
- the basics of building Web pages
What is JavaScript?
JavaScript is a scripting language developed by Netscape.
JavaScript works in all major browsers that are version 3.0 or
higher.
Javascript is an easy-to-use programming language that can be embedded in
your web pages. It can enhance the dynamics and interactive features
of your page by allowing you to perform calculations, check forms, write
interactive games, add special effects, customize graphics selections, create
security passwords and more.
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- A JavaScript is lines of executable computer code
- A JavaScript can be inserted into an HTML page
- JavaScript is an open scripting language that anyone can use without
purchasing a license
- JavaScript is supported by all major browsers such as Netscape and Internet
Explorer
How Does it Work?
When a JavaScript is inserted into an HTML document, the Internet browser
reads the HTML and interprets the JavaScript. The JavaScript can be executed
immediately or after some event.
What can a JavaScript Do?
JavaScript gives HTML designers a programming tool
HTML authors are normally not programmers, but JavaScript is a very light
programming language with a very simple syntax! Almost anyone can start putting
small "snippets" of code into their HTML documents.
JavaScript can put dynamic text into an HTML page
A JavaScript statement like this: document.write("<h1>" + name +
"</h1>") can write a variable text into the display of an HTML page, just
like the static HTML text: <h1>Bill Gates</h1> does.
JavaScript can react to events
A JavaScript can be set to execute when something happens, like when a page
has finished loading or when a user clicks on an HTML element.
JavaScript can read and write HTML elements
A JavaScript can read an HTML element and change the content of an HTML
element.
JavaScript can be used to validate data
JavaScripts can be used to validate data in a form before it is submitted to
a server. This function is particularly well suited to save the server from
extra processing.
What's the difference between JavaScript and Java?
Actually, the 2 languages have almost nothing in common except for the name.
Although Java is technically an interpreted programming language, it is coded in
a similar fashion to C++, with seperate header and class files, compiled
together prior to execution. It is powerful enough to write major applications
and insert them in a web page as a special object called an "applet." Java has
been generating a lot of excitment because of its unique ability to run the same
program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use
language for non-programmers.
Javascript is much simpler to use than Java. With Javascript, if I want check
a form for errors, I just type an if-then statement at the top of my
page. No compiling, no applets, just a simple sequence.
What is Object Oriented Programming?
OOP is a programming technique (note: not a language structure - you don't
even need an object-oriented language to program in an object-oriented fashion)
designed to simplify complicated programming concepts. In essence,
object-oriented programming revolves around the idea of user- and system-defined
chunks of data, and controlled means of accessing and modifying those chunks.
Object-oriented programming consists of Objects, Methods and Properties. An
object is basically a black box which stores some information.
It may have a way for you to read that information and a way for you to write
to, or change, that information. It may also have other less obvious ways of
interacting with the information.
Some of the information in the object may actually be directly accessible;
other information may require you to use a method to access it -
perhaps because the way the information is stored internally is of no use to
you, or because only certain things can be written into that information space
and the object needs to check that you're not going outside those limits.
The directly accessible bits of information in the object are its
properties. The difference between data accessed via properties
and data accessed via methods is that with properties, you see exactly what
you're doing to the object; with methods, unless you created the object
yourself, you just see the effects of what you're doing.
This class will teach by example, without focusing too heavily on OOP vocabulary.
Nevertheless, you will need a basic understanding of these terms to use other JavaScript
references.
Objects and Properties
Your web page document is an object. Any table, form, button, image, or link
on your page is also an object. Each object has certain properties (information
about the object). For example, the background color of your document is written
document.bgcolor. You would change the color of your page to red by
writing the line: document.bgcolor="red"
The contents (or value) of a textbox named "password" in a form named
"entryform" is document.entryform.password.value.
Methods
Most objects have a certain collection of things that they can do.
Different objects can do different things, just as a door can open and close,
while a light can turn on and off. A new document is opened with the method
document.open() You can write "Hello World" into a document by typing
document.write("Hello World") . open() and write() are both
methods of the object: document.
Events
Events are how we trigger our functions to run. The easiest
example is a button, whose definition includes the words
onClick="run_my_function()". The onClick event, as its name implies, will
run the function when the user clicks on the button. Other events include
OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.
|