Learn Javascript 1.3
advertisement
Learn Javascript 1.3
Professional Development Society
Dan Aschenbach
Fall 2001
What is Javascript?
Javascript is a simple programming
language that can create forms, create
swapping images when a mouse is used
and calculations without using a CGI script.
Javascript can use a lot of the more
advanced functions closer to Java - without
using a separate compiling program.
Why use Javascript?
It is easy to use
A page will load at least if there are errors
in your script, unlike Java
Javascript can be copied and pasted in
your HTML file and edited there
Any standard web browser can read it
What can I do with Javascript?
One can:
• post the time on a page
• redirect a user to another page on pageload
• create forms, search boxes, math convertors,
pop-up windows, couters and charts
• add action to graphics
Javascript is NOT
A full, programming language like JAVA
a graphic language - your code assigns
behavior to variables, but doesn’t interpret
images. Instead, Javascript is objectoriented (You can’t use the variety of
operations that you could in Java)
A blank Page
<Html>
<Body>
<SCRIPT LANGUAGE="JavaScript">
Enter script
</script>
</Body>
</Html>
<Html>
<Head>
<meta name = "ProgId“
content="FrontPage.Editor.Document">
<title>My First Page</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<script language = "Javascript">
alert("Welcome to the real world!");
</SCRIPT>
<Body>
</Body>
</Html>
Creating an answer prompt
This will allow users to enter data and feed
it to a server and get a response.
ans
= prompt("Are you sure")
This is simple - it give a text box for the user
to type into.
User Prompt
Note that this sample does not return a message to the user. We
will need to create a confirmation string to get a return alert.
Return Prompt
This model will return a message to the
user. All we are doing is adding an if-else
statement to the script.
if (confirm("...blah blah. Let’s reformat!")) {
alert("Prepare to lose your hard disk!")
}
else {
alert("No way!")
}
Which would you rather choose?
Redirecting to another page Part 1
Redirecting is useful in a number of ways.
It can automatically link a user to another
page on the page load. Remember those
URLS which moved? Javascript does the
job for you.
Redirecting Part 1 ctd.
The bottom shows the
page for a user who
has Javascript
enabled. The bottom
tells them they can’t
use the web site with
their current browser.
Redirecting to another web site Redirecting Part 2
Remember the user who didn’t have
Javascript? It is possible to link them to
another page that doesn’t require
Javascript.
Redirecting to another web site Redirecting Part 2
In this example, we need a new METHOD to
redirect the user because we are linking to
another web site.
We need window.location =‘site’ within an
if-then statement.
Let us assume that we are using Internet
Explorer as our browser. After a couple of
seconds, we are at yahoo.com.
Code for Browser redirect
if (navigator.appName == "Netscape") {
window.location='http://www.netscape.com'
}
else {
if (navigator.appName == "Microsoft Internet
Explorer") {
window.location='http://www.yahoo.com'
}
else {
document.write("You're not running Netscape
or IE--maybe you should?")
}
}
Closing notes on redirects
Just because I linked a user who doesn’t
have Javascript to another web address
doesn’t mean I can’t send them to another
one of my pages.
Simply create a page that doesn’t require
Javascript and follow the rest of the code
on the previous page.
Mouse Roll Overs
Using a mouse function, when we roll over a
link, we can get a text message in the
bottom of the Browser tray.
onMouseover="window.status='Best kid in
the world';return true"
onMouseout="window.status='';return
true">
Mouse Roll Over Ctd.
This is what appears
in the bottom of the
browser. Yet, it only
appears when the
mouse is on the link.
There must be an in
and an out statement.
We end the statement
with ‘ ‘; return true”>
How to add the date and time to a
page
Thursday, July 19, 2001
Java has a built in
function for
recognizing the date,
so this script is rather
easy. All be need to do
are define the days
and tell the script to
recall the day, month
and time.
Date Script
var dayNames = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Sat
urday");
var monthNames = new
Array("January","February","March","April","May","June","July",
"August","September","October","November","December");
var dt = new Date();
var y = dt.getYear();
// Y2K compliant
if (y < 1000) y +=1900;
document.write(dayNames[dt.getDay()] + ", " + monthNames[dt.getMonth()] + " "
+ dt.getDate() + ", " + y);
Segue: Document.write()
Fundamentals
To print text from a
single variable, use
var Hi=“Hello There!”
document.write(Hi)
Output:
Hello There!
To output data from two
variables, set up two
variables, then set up an x =
x+y statement to add the
two variables into one
string
Code for Simple string output
Var a= 100,000;
Var b= “ people live in Elizabeth, NJ.”
a=a+b
document.write(a);
Result: 100,000 people live in Elizabeth, NJ.
Note that I added a space before people.
How to enter the date and month
We will need to create variables (var) for
dayNames and monthNames. We define
them as a newArray.
Then we create a variable for dt and y for
year; Javascript recalls the date and year.
Now write to the page, adding all the
variables as shown on the code page.
Change the background color
multiple times (cycle)
This gets a little tricky and is longer to
explain. What we are going to do is to
create a page then give it three
backgrounds.
We will need several construction
methods. We will define a new color array,
the time each background is used and
“rotate” each of the colors.
bGrounds = new Array("red","white","blue")
thisBG = 0
bgColorCount = bGrounds.length
function rotateBG() {
if (document.images) {
thisBG++
if (thisBG == bgColorCount) {
thisBG = 0
}
document.bgColor=bGrounds[thisBG]
setTimeout("rotateBG()", 3 * 1000)
}
}
// End hiding script from old browsers -->
</SCRIPT>
Setting up the backgrounds
bGrounds = new Array("red","white","blue")
This sets a new array to hold red white and
blue backgrounds.
setTimeout("rotateBG()", 3 * 1000). This
sets 3 colors at 1000 intervals (about 1.5
seconds).
More on backgrounds
function rotateBG( ) {
……. This function is
what actually rotates the background. Note
the nested if-else statement.
if (document.images) …. We need to tell
Javascript that we are
Window Manipulation
Welcome to the windows section.
This
section will show you how to make or
understand the following:
• Banner ads
• Dialogue boxes
• Create and manipulate windows
http://webreference.com/js/tutorial1/
Window Dimensions
Microsoft and Netscape each have different code
for making windows. For our purposes, we will
utilize both codes in our scripts.
window.open
• Makes a new window appear :
dimensions.html
• The name of the html file you are using
• Remember if you do not name a file, you will not
get any output
Other features needed
Code your size for both IE and Netscape in
one line of code
• Height, width, innerWidth. innerHeight
• IE uses height and width, while Netscape uses the
later tow functions
Sample Code:
• height=150,innerHeight=150,width=200,innerWidth
=200");
http://webreference.com/js/tutorial1/utilize.html
Output 1 – Simple Pop Up Window
• height=150,innerHeight=150,width=200,innerWidth=200");
• Notice how text is cut off by limiting the view area
Note: slightly scaled to fit screen.
http://webreference.com/js/tutorial1/utilize.html
A Full Window
var str =
This works in IE only
"left=0,screenX=0,to
p=0,screenY=0,fulls
creen";
• This brings up a full
screen no matter the
resloution.
http://webreference.com/js/tutorial1/utilize.html
Window Toolbars
The previous example did not put an explorer bar on the
top of the browser.
To do this, we need to edit one line of code:
window.open("toolbar.html", "_blank", "toolbar");
-The user still has to
enter the address bar
by right-clinking.
Windows - Titlebars
To display the last example with the address bar
automatically, we simply replace the “toolbar”
with “titlebar=0”
window.open("titlebar.ht
ml", "_blank",
"titlebar=0");
http://webreference.com/js/tutorial1/features.html#alwaysLowere
Those annoying Pop – Up
Windows
Pop up windows are annoying.
This is how coders make it
happen. The next page shows a
window that never closes when
you try to exit.
Note how the user must click
“enough of this” or something
similar to get rid of the message.
A never-ending popup window
Three
components
- function reSpawn() {
- open("http://www. ")
- window.onunload=reSpawn;
Endless pop-up window code
<script language="JavaScript"><!-function reSpawn() {
open("http://www.mydomain.com/popup.html
")
};
window.onunload=reSpawn;
//--></script>
http://builder.cnet.com/webbuilding/0-7690-8-62772261.html?tag=st.bl.7264.edt.7690-8-6277226-1
Get rid of that advertisement
Believe it or not, one can close an infinite pop-up
window. To do this, do the following:
• Press Control + O
• Type in javascript:void(window.onunload=null)
• The present ad remains, but will not re-open on
the next click.
This is just the beginning...
Javascript can entail so many more
features. Forms can be processed, e-mail
addresses can be made, data can be sorted
and reorganized, drop down-menus can be
made…
…of an endless realm
…also, you can create scripts for cookies,
making calendars, calculators, banner ads,
forms, browser effects and so on. the list is
so long, I can’t teach it all here…
Try to look at a couple of the links for
resources. Happy programming!
Some Resources to Look at
javascriptworld.com
tripod.com (Need to log in for script access)
http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/
http://www.geocities.com/SiliconValley/7116/
webreference.com
Cnet.com