What is JavaScript?
Javascript is an easy-to-use programming language that can be embedded in the header of your web pages , or in the body section , or even in external files. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, add special effects, customize graphics selections, create security passwords and much more.
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 separate 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.
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.
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.
The Message Box
This is a very simple script. It opens up an alert message box which displays whatever is typed in the form box below.
HOW IT S DONE?
Here s the entire page, minus my comments. Take a few minutes to learn as much as you can from this, then we ll break it down into smaller pieces.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function MsgBox (textstring) {
alert (textstring) }
// - End of JavaScript - -->
</SCRIPT>
</HEAD> <BODY> <FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
</FORM></BODY></HTML>
In the <HEAD> area, a new pair of tags has been introduced: <SCRIPT> and </SCRIPT>
All browsers currently assume you are programming in JavaScript, but other programming languages might come along in the future. As a result, it is standard form to open your scripting area with:
<SCRIPT LANGUAGE="JavaScript">
The <!-- and --> tags are used to hide comments in HTML from the browser. Old browsers will not understand the <SCRIPT> tags, so you need to include the comment tags to keep your JavaScript from showing up on the Browser.
This is the standard open and close to the JavaScript section of your page.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
< !-- Beginning of JavaScript -
(all of your JavaScript functions)
// - End of JavaScript - -->
</SCRIPT></HEAD>
Javascript Functions
Functions are just code blocks , instead of write logn code you can break down the code into functions and call each function as needed , You can name your functions anything you want. For instance , myFunction , the syntax of a Javascript function is as follows :
function MyFunction (variable [optional],[other variables if you want]) {
(stuff you want to do with the variable)
}
- The variable can be a number, a piece of text, or a date.
- The curly brackets { } define the beginning and end of the function.
Example :
The alert command will create an message box displaying a piece of text or a number. Alert("Hello World") will display Hello World in the box. Alert(SomeText) will assume that SomeText is a variable, and will display whatever value it contains. Notice that "Hello World" was in quotes and SomeText was not. If I put these two lines together:
SomeText="My Name is hassan"
Alert(SomeText)
then my name is hassan will be displayed in the message box.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
< !-- Beginning of JavaScript -
function MsgBox (textstring) {
alert (textstring) }
// - End of JavaScript - -->
</SCRIPT></HEAD>
The Form is a JavaScript user s best friend. Forms can be used to input text, to display results, and to trigger JavaScript functions. The form in our example used 2 objects, a text box, and a button.
Methods
When you need to DO something, like open a window, write text to the screen, get the sin of a number, isolate the 1st letter in a word, assign today s date to a variable, send the user back to the previous page, or display an alert box you are using a method.
When you change the details about something which already exists, you are changing its properties.
For example:
document.bgcolor="red" is a property because I m changing the existing details about the document. alert("Hello There") is a method because it creates something new, an alert box.
Here are a few types of commands that methods are useful for.
• Date Methods - set variables to the clock time in a variety of ways.
• Window Methods - used to open and close new windows
• Document Methods - Generate new documents on the fly.
• Form Methods - select form items, send the cursor to text boxes and submit forms.
• History Methods - Press the reader s Back button and other tricks.
• Text Methods - Define the look of your text variables before your display them.
• Math Methods - sin, cos, round, random, absolute value, etc.
• MessageBox Methods - Alert, Prompt, and Confirm are all methods.
If – Then Statement
The following example teaches you how to login by clicking on img object with constraints the lecturer will explain them to you during Class-Time :
function password() {
Ret = prompt( Type the word castle ,"");
if(Ret=="castle") {
location = hassan3_1.htm ;} else {alert("Please try again")} }
The Event Trigger will be like the following :
<A HREF="javascript:password()">
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>
The LOOP.
The loop is a fantastic tool for any function that involves doing the same thing more than once. If I wanted to write my name 10 times, I would write a loop like this:
START LOOP (REPEAT 10 TIMES)
Write my Name
END OF LOOP
Of course that s not how I would type it. To create a loop I need to use the FOR statement. It is written like this:
for ( count=1; count <=10; count++ ) {
(stuff I want to do 10 times)
}
This statement would be read outloud:
"For count equals one, while count is less than or equal to ten, incrementing by one"
The FOR statement above will begin by creating a variable called count (you can choose any variable name). Initially, count will equal 1. The computer will perform whatever commands are between the curly bracket s, then upon reaching the end of the loop, count is incremented by 1, and a question is asked: IS COUNT LESS THAN OR EQUAL TO 10? If the answer is YES, then the loop repeats. If the answer is no, then the progr am exits the loop, and goes on with the program.
Calling with FORM
All forms start with the tag <FORM> and end with </FORM>.The text box should include a NAME and a TYPE,The NAME will be used when we need to tell the function which box has the text we want,TYPE is how the browser knows to create a text box, button, or check box.
For example:
<INPUT NAME="text1" TYPE=Text>
The button is how we tell JavaScript to run a particular function. The button should include a NAME, TYPE, VALUE, and ONCLICK command.The NAME could be used to refer to the button in JavaScript, but is usually not important.The VALUE is the label which will appear inside the button.The ONCLICK is followed by the name of a function, and the name of the text box containing the data.
For example:
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
<BODY><FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
</FORM></BODY></HTML>
We ended the description of the form button with:
onClick="MsgBox(form.text1.value)"
This means when the user clicks on this button, the program should run the MsgBox function from the top of the page, and use the value of the form object named text1 as its variable.
There are 2 objects in the form, a text box and a button, right? Each object has a name, and the text box is named text1. The text box s full name is form.text1. The number of characters typed in the box is called form.text1.length. The value, or string of text that was typed is called form.text1.value If this is getting too jargon-ish for you, just remember that you end your "submit" button with
onClick=function(form.textboxname.value) where function and textboxname will be substituted.
Accessing Web page Document From Javascript
The following code shows you how you can change the background of a page from Scripts
function changecolor(code) {
document.bgColor=code
}
<form>
<input type="button" name="Button1" value="GREEN" onclick="changecolor( green )">
<input type="button" name="Button2" value="BLUE" onclick="changecolor( blue )">
<input type="button" name="Button4" value="WHITE" onclick="changecolor( white )">
</form>