Learn javascript 1 3
This presentation is the property of its rightful owner.
Sponsored Links
1 / 43

Learn Javascript 1.3 PowerPoint PPT Presentation


  • 78 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Learn Javascript 1.3

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>


Learn javascript 1 3

<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

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!")

  • }


Which would you rather choose

Which would you rather choose?


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.


Learn javascript 1 3

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

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

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


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

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


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.

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


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.

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


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

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


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


  • Login