JavaScript Class

Home Help Table of Contents Class Stuff

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.





Home Help Table of Contents Class Stuff