Slide 1
___________________________________
Javascrbipt Intro
___________________________________
• Javascript (or js) is a programming
language.
• Interpreted, not compiled.
• Not the same as java, but, similar.
• Use <SCRIPT> </SCRIPT> tags to use.
• Object-oriented – data encapsulated.
• Should write code within HTML comments.
1
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 2
___________________________________
Some Objects
•
•
•
•
___________________________________
document – The page we are viewing.
navigator – The browser we are using.
window – The current window.
To make an object do something, or set an
attribute do the following:
___________________________________
___________________________________
– object.do_something();
– object.set_attribute (value);
– object.attribute=value;
___________________________________
2
___________________________________
___________________________________
Slide 3
___________________________________
Examples
___________________________________
• document.bgColor = “red” sets the
background color to red.
• document.writeln(“Text String”); writes out
the text string to the screen with a newline.
• document.write(“Text String”); prints out
text string just as is.
___________________________________
___________________________________
___________________________________
3
___________________________________
___________________________________
Slide 4
___________________________________
Interactivity
___________________________________
• ONMOUSEOVER – lets you cause things
to happen when people mouse over certain
places on the page.
• <A HREF=“”
ONMOUSEOVER=“document.bgColor=‘re
d’”>red</A> -- will make the background
red when you mouse over the word “red”.
4
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 5
___________________________________
Forms and Scripts
___________________________________
• Forms let you enter data and then do
something with it.
• A function is a piece of computer code that
does something like manipulating data.
• Your form can call a script when it is done,
or when certain data is entered.
___________________________________
___________________________________
___________________________________
5
___________________________________
___________________________________
Slide 6
___________________________________
Forms and Scripts
___________________________________
• Make a function inside of <script> tags at
the top of your webpage.
• Write a form that calls the function when
things are entered.
___________________________________
___________________________________
– <input type=“button”, value=“press me”,
onclick=“printmessage(1)”>
___________________________________
6
___________________________________
___________________________________
Slide 7
___________________________________
Functions
___________________________________
• printmessage is a function.
___________________________________
– A name given to a sequence of program steps
that do something
___________________________________
• 1 is an argument or parameter, a piece of
data passed to the function so it can do
different things based on different numbers
being entered.
___________________________________
7
___________________________________
___________________________________
Slide 8
___________________________________
Functions 2
___________________________________
• function printresponse (num)
{
if (num == 1)
alert (“It is 1.”);
else
alert (“It is not 1.”);
}
___________________________________
___________________________________
___________________________________
8
___________________________________
___________________________________
Slide 9
___________________________________
Variables
___________________________________
• A variable is a data location or a name for a
piece of data you will use in a program.
• To declare a variable called name, type a
line with the words
___________________________________
___________________________________
– var name;
• You don’t need to specify a variable type
like you do in a lot of other languages.
___________________________________
9
___________________________________
___________________________________
Slide 10
___________________________________
Math operations
___________________________________
• Variables can be modified like in regular
math and algebra operations. The left-hand
side is the location where the result is
stored, and everything on the right hand
side is the formula to be evaluated.
• Variables can appear on both sides of the
equation.
___________________________________
___________________________________
___________________________________
10
___________________________________
___________________________________
Slide 11
___________________________________
If statements
___________________________________
• You can check whether two values are
larger or smaller than one another using if
statements. The format is
• If (leftside comparison rightside)
• Leftside and rightside are algebraic
expressions or numbers.
• Inequality examples: == != <= >= > <
___________________________________
___________________________________
___________________________________
11
___________________________________
___________________________________
Slide 12
___________________________________
Looping
___________________________________
• A loop repeats code a certain number of
times, except that each time, the code can
do slightly different things.
• Example:
___________________________________
___________________________________
var count;
for (count = 0; count < 10; count++)
document.writeln (count + “<BR>”);
___________________________________
12
___________________________________
___________________________________