Learn javascript 1 3
1 / 43

Learn Javascript 1.3 - PowerPoint PPT Presentation

  • Uploaded on

Learn Javascript 1.3. Professional Development Society Dan Aschenbach Fall 2001. What is Javascript?.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Learn Javascript 1.3' - fulton-howard

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Learn javascript 1 3

Learn Javascript 1.3

Professional Development Society

Dan Aschenbach

Fall 2001

What is javascript
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
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
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
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 object-oriented (You can’t use the variety of operations that you could in Java)

A blank page
A blank Page

  • <Html>

  • <Body>

  • <SCRIPT LANGUAGE="JavaScript">

  • Enter script

  • </script>

  • </Body>

  • </Html>



<meta name = "ProgId“ content="FrontPage.Editor.Document">

<title>My First Page</title>



<script language = "Javascript">

alert("Welcome to the real world!");





Creating an answer prompt
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
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
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!")

  • }

Redirecting to another page part 1
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
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
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 21
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
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
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
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
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
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
Date 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 fundamentals
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
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
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
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) {


if (thisBG == bgColorCount) {

thisBG = 0



setTimeout("rotateBG()", 3 * 1000)



// End hiding script from old browsers -->


Setting up the backgrounds
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
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
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


Window dimensions
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
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");


Output 1 simple pop up window
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.


A full window
A Full Window

  • var str = "left=0,screenX=0,top=0,screenY=0,fullscreen";

  • This works in IE only

    • This brings up a full screen no matter the resloution.


Window toolbars
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
Windows - Titlebars

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

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


Those annoying pop up windows
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
A never-ending popup window

  • Three components

    - function reSpawn() { - open("http://www. ")

    - window.onunload=reSpawn;

Endless pop up window code
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-6277226-1.html?tag=st.bl.7264.edt.7690-8-6277226-1

Get rid of that advertisement
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
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
…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
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