1 / 31

JAVASCRIPT HOW TO PROGRAM -2

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

garth-west
Download Presentation

JAVASCRIPT HOW TO PROGRAM -2

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. JAVASCRIPTHOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA

  2. Script development process • Requirement analysis • Goal – Audience • Design • Sketch the page – Site map – outline content - pseudocode • Implementation • Coding • Support & maintenance

  3. Script statements in head • User defined functions • Global variables • Statements that preload images for use in rollover effects

  4. Keep an HTML outline <HTML> <head> <title> Array example </title> <script language ="javaScript"> </script> </head> <body> </body> </HTML>

  5. InputBox <HTML> <head> <title> Ask user name </title> <script language ="javaScript"> var visitor = prompt("What is your name?", " ") </script> </head> <body> </body> </HTML>

  6. 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>") </script> </body> </HTML>

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

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

  9. Function with return value <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> <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>

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

  11. Table •  table is divided into rows (with the <tr> tag), • each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

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

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

  14. JavaScript Arrays Dr. John P. Abraham Professor UTPA

  15. Declaring & populating an Array var students = new array() students[0] = “Harry” students[2]= “Jim” var months= new Array(“Jan”,”Feb”…”Dec”) --display— For (i=0; I <= 12; i++) {document.write(i, “. “,months[i], <br>’)

  16. Stack Operations var stack = new Array(); function createStack(top) {top = 0; } function destroyStack(top) {top = 0; } function emptyStack(top ) { return (top = 0); } function push(element) {top = top + 1; stack[top] = element; } function pop() {element = stack[top]; top = top - 1; return element; }

  17. Parsing a String probLen = problem.length; while (j <= probLen-1) { onechar = problem.charAt(j); while ((onechar !=" ") && (j <=probLen-1)) { parse(); j++; onechar = problem.charAt(j); }//while inner if (nums != "") pushStack() else if (opcode != "") domath(); j++; }//while outer

  18. Function parse function parse() { if (onechar >= "." && onechar <= "9") {if (onechar != "/") nums = nums + onechar; else opcode = onechar; } else opcode = onechar; }

  19. Forms and Form Processing (CGI) Dr. John P. Abraham UTPA

  20. Purpose of forms • Collect information for the users (user input collection) • Sent from browsers (clients) to servers

  21. Sample form <form method="post" action="mailto:jabraham@utpa.edu"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"><br /> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <input type="submit" value="Send"> </form>

  22. What is a form • Form element of HTML • Designed to collect input • Mail to vs. server-side scripts • mailto URL causes the form data to sent to an email address. • No server-side scripting is required. • Server-side scripts. CGI, Perl, PHP, ASP, ColdFusion. • Can write the data to a database.

  23. Post vs. Get • Post method – form data is sent separately from the actual call to the server-side script. (data is sent under separate cover) • Preferred method • Get method: the data is appended to the end of the URL that calls a server-side script. • Easy to see what is being sent.

  24. Input types • Text • Selections – • radio buttons • Check boxes • Pull-down menus (pick one for State) • Hidden input elements (such as session info)

  25. Introduction to CGI • Data sent to server require customized processing on the server side. • Common Gateway Interface governs the way a web-server (Apache, IIS, etc.) interacts with an external program. • A popular scripting language conforms to CGI is PERL. • CGI programs can be written any language.

  26. Browsers and CGI • End user clicks the submit button • Form’s data are sent over the internet to the web server. • Web server upon receipt of the requests executes the correct application program • Forwards the input data to that program • The application program performs requested steps. • Generates output back to the server in HTML • Web server forwards the output to the client • Client browser displays it

  27. Outline of a CGI program • Determines request method (get or post) and receives input data. • Decodes and checks input data. • Performs tasks • Produces output in HTML format

  28. Perl programming language • Practical Extension and Reporting Language • 1987 Larry Wall at NASA • Free • Provides a CGI interface module • Portable application (runs on web servers on different platforms)

  29. CGI-tutorial • http://www.cgi101.com/book/ch1/text.html

  30. Example of a CGI program #!/usr/bin/perl print "Content-type: text/html\n\n"; print "<html><head><title>Hello World</title></head>\n"; print "<body>\n"; print "<h2>Hello, world!</h2>\n"; print "</body></html>\n";

  31. HTML5 • It is time for you (and me) to learn HTML5 • I suggest you go to this site and follow the tutorial. http://w3schools.com/html/html5_intro.asp

More Related