JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA
Script development process Requirement analysis Goal – Audience Design Sketch the page – Site map – outline content - pseudocode Implementation Coding Support & maintenance
Script statements in head User defined functions Global variables Statements that preload images for use in rollover effects
Keep an HTML outline <HTML> <head> <title> Array example </title> <script language ="javaScript"> </script> </head> <body> </body> </HTML>
InputBox <HTML> <head> <title> Ask user name </title> <script language ="javaScript"> var visitor = prompt("What is your name?", " ") </script> </head> <body> </body> </HTML>
Using input <HTML> <head> <title> Ask user name </title> <script language ="javaScript"> var visitor = prompt("What is your name?", “Default Name ") </script> </head> <body> <script language ="javascript"> document.write("<h1> Hello, ", visitor, "! </h1>") </body> </HTML>
Onload (event) <HTML> <head> <title> Ask user name </title> <script language ="javaScript"> var visitor = prompt("What is your name?", " ") </script> </head> <body onLoad="alert('Welcome! '+visitor)"> </body> </HTML>
Alert Box with 2 lines <HTML> <head> <title> Ask user name </title> <script language ="javaScript"> var visitor = prompt("What is your name?", " ") </script> </head> <body onLoad="alert('Welcome! \n'+visitor)"> </body> </HTML>
Function with return value <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> document.write(product(4,3)); <p>The script in the body section calls a function with two parameters (4 and 3).</p> <p>The function will return the product of these two parameters.</p> </body> </html>
Looping <HTML> <head> <title> Nested Loop </title> <script language ="javaScript"> var i=1, j; while (i <= 12) {document.writeln("<br>Table for ",i, "<br>"); for (j=1; j <=16; j++) document.writeln(i, " x ", j, " = ", i*j,"<br>"); i++ } </script> </head> <body> </body> </HTML>
Looping & Table <HTML> <head> <title> Nested Loop </title> <script language ="javaScript"> var i=1, j; while (i <= 12) {document.writeln("<table border='1'>"); document.writeln("<br><tr><td>Table for ",i, "</td></tr>"); for (j=1; j <=16; j++) document.writeln("<tr><td>",i, " x ", j, " = ", i*j,"</td></tr>"); document.writeln("</table>"); i++ } </script> </head> <body> </body> </HTML>
Assignment Help <HTML> <HEAD> <TITLE>Future value of an investment</TITLE> <SCRIPT LANGUATE = "JavaScript"> var age, initial, deposit, rate; getdata(); if (rate >1) rate = rate/100; //convert rate to fraction just in case. document.writeln( age," ", initial," ", deposit," ", rate); function getdata() { document.writeln("<BR> This program calculates your total assets at retirment (age 65)"); document.writeln("<BR> given initial deposit, amount of deposit every 30 days, "); document.writeln("<BR> interest rate and your current age."); document.writeln("<BR>---------------------- data entry ---------------------------<BR>"); age=parseInt(window.prompt("How old are you (must be below 65)?----------------> ")); initial=parseFloat(window.prompt( "What is your initial deposit?----------------------> ")); deposit=parseFloat(window.prompt( "Amount you agree to deposit every 30 days?---------> ")); rate=parseFloat(window.prompt( "What would be your expectation of interest or growth? ")); return initial, deposit, rate, age; } </Script> </HEAD> </HTML>