learn javascript 1.3

Learn Javascript 1.3Learn Javascript 1.3

Professional Development Professional Development SocietySociety

Dan AschenbachDan Aschenbach

Fall 2001Fall 2001

What is Javascript?What is Javascript?

Javascript is a simple programming Javascript is a simple programming language that can create forms, language that can create forms, create swapping images when a create swapping images when a mouse is used and calculations mouse is used and calculations without using a CGI script. Javascript without using a CGI script. Javascript can use a lot of the more advanced can use a lot of the more advanced functions closer to Java - without functions closer to Java - without using a separate compiling program.using a separate compiling program.

Why use Javascript?Why use Javascript?

It is easy to use It is easy to use A page will load at least if there are A page will load at least if there are

errors in your script, unlike Javaerrors in your script, unlike Java Javascript can be copied and pasted Javascript can be copied and pasted

in your HTML file and edited therein your HTML file and edited there Any standard web browser can read itAny standard web browser can read it

What can I do with What can I do with Javascript?Javascript?

One can:One can:• post the time on a pagepost the time on a page• redirect a user to another page on redirect a user to another page on

pageloadpageload• create forms, search boxes, math create forms, search boxes, math

convertors, pop-up windows, couters convertors, pop-up windows, couters and charts and charts

• add action to graphicsadd action to graphics

Javascript is NOTJavascript is NOT

A full, programming language like A full, programming language like JAVAJAVA

a graphic language - your code a graphic language - your code assigns behavior to variables, but assigns behavior to variables, but doesn’t interpret images. Instead, doesn’t interpret images. Instead, Javascript is object-oriented (You Javascript is object-oriented (You can’t use the variety of operations can’t use the variety of operations that you could in Java)that you could in Java)

A blank PageA blank Page

<Html><Html> <Body><Body> <SCRIPT LANGUAGE="JavaScript"> Enter scriptEnter script </script></script>

</Body></Body> </Html></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 Creating an answer promptprompt

This will allow users to enter data This will allow users to enter data and feed it to a server and get a and feed it to a server and get a response.response.

ans = prompt("Are you sure")ans = prompt("Are you sure") This is simple - it give a text box for This is simple - it give a text box for

the user to type into.the user to type into.

User Prompt 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 PromptReturn Prompt

This model will return a message This model will return a message to the user. All we are doing is to the user. All we are doing is adding an if-else statement to the adding an if-else statement to the script.script.

ifif ( (confirmconfirm("...blah blah. Let’s reformat!")("...blah blah. Let’s reformat!"))) {{ alertalert("Prepare to lose your hard disk!")("Prepare to lose your hard disk!") }} elseelse {{ alertalert("No way!"("No way!")) }}

Which would you rather Which would you rather choose?choose?

Redirecting to another Redirecting to another page - Part 1page - Part 1

Redirecting is useful in a number Redirecting is useful in a number of ways. It can automatically link a of ways. It can automatically link a user to another page on the page user to another page on the page load. Remember those URLS load. Remember those URLS which moved? Javascript does the which moved? Javascript does the job for you.job for you.

Redirecting Part 1 ctd.Redirecting Part 1 ctd.

The bottom shows The bottom shows the page for a the page for a user who has user who has Javascript enabled. Javascript enabled. The bottom tells The bottom tells them they can’t them they can’t use the web site use the web site with their current with their current browser.browser.

Redirecting to another Redirecting to another web site - Redirecting Part web site - Redirecting Part 22

Remember the user who didn’t Remember the user who didn’t have Javascript? It is possible to have Javascript? It is possible to link them to another page that link them to another page that doesn’t require Javascript.doesn’t require Javascript.

Redirecting to another Redirecting to another web site - Redirecting Part web site - Redirecting Part 22

In this example, we need a new In this example, we need a new METHOD to redirect the user because METHOD to redirect the user because we are linking to another web site.we are linking to another web site.

We need window.location =‘site’ within We need window.location =‘site’ within an if-then statement. an if-then statement.

Let us assume that we are using Let us assume that we are using Internet Explorer as our browser. After Internet Explorer as our browser. After a couple of seconds, we are at a couple of seconds, we are at yahoo.com.yahoo.com.

Code for Browser redirectCode for Browser redirect

if (navigator.appName == "Netscape") {if (navigator.appName == "Netscape") { window.location='http://www.netscape.com'window.location='http://www.netscape.com' }} else {else { if (navigator.appName == "Microsoft Internet Explorer") {if (navigator.appName == "Microsoft Internet Explorer") { window.location='http://www.yahoo.com'window.location='http://www.yahoo.com' }} else {else { document.write("You're not running Netscape or document.write("You're not running Netscape or

IE--maybe you should?")IE--maybe you should?") }} }}

Closing notes on redirectsClosing notes on redirects

Just because I linked a user who Just because I linked a user who doesn’t have Javascript to another doesn’t have Javascript to another web address doesn’t mean I can’t web address doesn’t mean I can’t send them to another one of my send them to another one of my pages.pages.

Simply create a page that doesn’t Simply create a page that doesn’t require Javascript and follow the rest require Javascript and follow the rest of the code on the previous page.of the code on the previous page.

Mouse Roll OversMouse Roll Overs

Using a mouse function, when we Using a mouse function, when we roll over a link, we can get a text roll over a link, we can get a text message in the bottom of the message in the bottom of the Browser tray.Browser tray.

onMouseover="window.status='BeonMouseover="window.status='Best kid in the world';return true" st kid in the world';return true"

onMouseout="window.status='';retonMouseout="window.status='';return true">urn true">

Mouse Roll Over Ctd.Mouse Roll Over Ctd.

This is what appears This is what appears in the bottom of the in the bottom of the browser. Yet, it only browser. Yet, it only appears when the appears when the mouse is on the link.mouse is on the link.

There must be an in There must be an in and an out and an out statement.statement.

We end the We end the statement with ‘ ‘; statement with ‘ ‘; return true”>return true”>

How to add the date and How to add the date and time to a pagetime to a page

Java has a built in Java has a built in function for function for recognizing the recognizing the date, so this script date, so this script is rather easy. All is rather easy. All be need to do are be need to do are define the days define the days and tell the script and tell the script to recall the day, to recall the day, month and time.month and time.

Thursday, July 19, 2001

Date ScriptDate Script var dayNames = new

Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

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() Segue: Document.write() FundamentalsFundamentals

To print text from a To print text from a single variable, use single variable, use

var Hi=“Hello var Hi=“Hello There!”There!”

document.write(Hi)document.write(Hi)

Output:Output: Hello There!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 Code for Simple string outputoutput

Var a= 100,000; Var a= 100,000; Var b= “ people live in Elizabeth, NJ.”Var b= “ people live in Elizabeth, NJ.” a = a + ba = a + b document.write(a);document.write(a);

Result: 100,000 people live in Result: 100,000 people live in Elizabeth, NJ. Note that I added a Elizabeth, NJ. Note that I added a space before people.space before people.

How to enter the date and How to enter the date and monthmonth

We will need to create variables (var) We will need to create variables (var) for dayNames and monthNames. We for dayNames and monthNames. We define them as a newArray.define them as a newArray.

Then we create a variable for dt and Then we create a variable for dt and y for year; Javascript recalls the date y for year; Javascript recalls the date and year. and year.

Now write to the page, adding all the Now write to the page, adding all the variables as shown on the code page.variables as shown on the code page.

Change the background Change the background color multiple times color multiple times (cycle)(cycle)

This gets a little tricky and is longer This gets a little tricky and is longer to explain. What we are going to do to explain. What we are going to do is to create a page then give it three is to create a page then give it three backgrounds.backgrounds.

We will need several construction We will need several construction methods. We will define a new color methods. We will define a new color array, the time each background is array, the time each background is used and “rotate” each of the colors.used and “rotate” each of the colors.

bGrounds = new Array("red","white","blue")thisBG = 0bgColorCount = 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 Setting up the backgroundsbackgrounds

bGrounds = new bGrounds = new Array("red","white","blue") This Array("red","white","blue") This sets a new array to hold red white sets a new array to hold red white and blue backgrounds.and blue backgrounds.

setTimeout("rotateBG()", 3 * setTimeout("rotateBG()", 3 * 1000). This sets 3 colors at 1000 1000). This sets 3 colors at 1000 intervals (about 1.5 seconds).intervals (about 1.5 seconds).

More on backgroundsMore on backgrounds

function rotateBG( ) { ……. This function rotateBG( ) { ……. This function is what actually rotates function is what actually rotates the background. Note the nested the background. Note the nested if-else statement.if-else statement.

if (document.images) …. We need if (document.images) …. We need to tell Javascript that we are to tell Javascript that we are

Window ManipulationWindow Manipulation

Welcome to the windows section. Welcome to the windows section. This section will show you how to This section will show you how to make or understand the following:make or understand the following:• Banner adsBanner ads• Dialogue boxesDialogue boxes• Create and manipulate windowsCreate and manipulate windows

http://webreference.com/js/tutorial1/

Window DimensionsWindow Dimensions

Microsoft and Netscape each have different Microsoft and Netscape each have different code for making windows. For our code for making windows. For our purposes, we will utilize both codes in our purposes, we will utilize both codes in our scripts.scripts.

window.open window.open • Makes a new window appear :Makes a new window appear :

dimensions.htmldimensions.html• The name of the html file you are usingThe name of the html file you are using• Remember if you do not name a file, you will not Remember if you do not name a file, you will not

get any outputget any output

Other features neededOther features needed

Code your size for both IE and Netscape Code your size for both IE and Netscape in one line of codein one line of code• Height, width, Height, width, innerWidthinnerWidth. . innerHeightinnerHeight• IE uses IE uses heightheight and and widthwidth, while Netscape , while Netscape

uses the later tow functionsuses the later tow functions Sample Code:Sample Code:

• height=150,innerHeight=150,width=200,innheight=150,innerHeight=150,width=200,innerWidth=200"erWidth=200"););

http://webreference.com/js/tutorial1/utilize.html

Output 1 – Simple Pop Up Output 1 – Simple Pop Up WindowWindow

• height=150,innerHeight=150,width=200,innerWidth=200"height=150,innerHeight=150,width=200,innerWidth=200"););

• Notice how text is cut off by limiting the view areaNotice 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 WindowA Full Window

varvar str = str = "left=0,screenX="left=0,screenX=0,top=0,screenY=0,top=0,screenY=0,0,fullscreenfullscreen"";;

This works in IE This works in IE onlyonly• This brings up a This brings up a

full screen no full screen no matter the matter the resloution.resloution.

http://webreference.com/js/tutorial1/utilize.html

Window ToolbarsWindow Toolbars

The previous example did not put an explorer The previous example did not put an explorer bar on the top of the browser.bar on the top of the browser.

To do this, we need to edit one line of code:To do this, we need to edit one line of code: window.open(window.open("toolbar.html""toolbar.html", , "_blank""_blank", ,

"toolbar""toolbar"););

-The user still has to enter the address bar by right-clinking.

Windows - TitlebarsWindows - Titlebars

To display the last example with the To display the last example with the address bar automatically, we simply address bar automatically, we simply replace the “toolbar” with “titlebar=0”replace the “toolbar” with “titlebar=0”

window.open("titlebar.html", "_blank", "titlebar=0");

http://webreference.com/js/tutorial1/features.html#alwaysLowered

Those annoying Pop – Up Those annoying Pop – Up WindowsWindows

Pop up windows are Pop up windows are annoying. This is how annoying. This is how coders make it happen. coders make it happen. The next page shows a The next page shows a window that never closes window that never closes when you try to exit.when you try to exit.

Note how the user must Note how the user must click “enough of this” or click “enough of this” or something similar to get rid something similar to get rid of the message.of the message.

A never-ending popup A never-ending popup windowwindow Three componentsThree components

- function - function reSpawnreSpawn() {() {- - openopen("http://www. ")("http://www. ")

- - window.window.onunloadonunload=reSpawn;=reSpawn;

Endless pop-up window Endless pop-up window codecode

<script language="JavaScript"></script>//--></script>

http://builder.cnet.com/webbuilding/0-7690-8-6277226-http://builder.cnet.com/webbuilding/0-7690-8-6277226-1.html?tag=st.bl.7264.edt.7690-8-6277226-11.html?tag=st.bl.7264.edt.7690-8-6277226-1

Get rid of that Get rid of that advertisementadvertisement

Believe it or not, one can close an Believe it or not, one can close an infinite pop-up window. To do this, do infinite pop-up window. To do this, do the following:the following:• Press Control + OPress Control + O• Type in Type in

javascript:void(window.onunload=null)javascript:void(window.onunload=null)• The present ad remains, but will not re-open on The present ad remains, but will not re-open on

the next click.the next click.

This is just the beginning...This is just the beginning...

Javascript can entail so many more Javascript can entail so many more features. Forms can be processed, features. Forms can be processed, e-mail addresses can be made, e-mail addresses can be made, data can be sorted and data can be sorted and reorganized, drop down-menus can reorganized, drop down-menus can be made…be made…

……of an endless realmof an endless realm

……also, you can create scripts for also, you can create scripts for cookies, making calendars, cookies, making calendars, calculators, banner ads, forms, calculators, banner ads, forms, browser effects and so on. the list is browser effects and so on. the list is so long, I can’t teach it all here… so long, I can’t teach it all here…

Try to look at a couple of the links Try to look at a couple of the links for resources. Happy programming!for resources. Happy programming!

Some Resources to Look Some Resources to Look atat

javascriptworld.comjavascriptworld.com tripod.com (Need to log in for script access)tripod.com (Need to log in for script access) http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/ http://www.geocities.com/SiliconValley/7116/http://www.geocities.com/SiliconValley/7116/ webreference.comwebreference.com Cnet.comCnet.com

learn javascript 1.3

Documents