1 / 43

Learn Javascript 1.3

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

fulton-howard
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learn Javascript 1.3 Professional Development Society Dan Aschenbach Fall 2001

  2. 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.

  3. 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

  4. 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

  5. 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)

  6. A blank Page • <Html> • <Body> • <SCRIPT LANGUAGE="JavaScript"> • Enter script • </script> • </Body> • </Html>

  7. <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>

  8. 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.

  9. 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.

  10. 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!") • }

  11. Which would you rather choose?

  12. 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.

  13. 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.

  14. 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.

  15. 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.

  16. 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?") • } • }

  17. 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.

  18. 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">

  19. 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”>

  20. 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.

  21. 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);

  22. 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

  23. 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.

  24. 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.

  25. 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.

  26. 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>

  27. 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).

  28. 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

  29. 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/

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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.

  35. 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

  36. 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.

  37. A never-ending popup window • Three components - function reSpawn() { - open("http://www. ") - window.onunload=reSpawn;

  38. 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

  39. 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.

  40. 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…

  41. …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!

  42. 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

More Related