Embed Size (px)
Citation preview
JAVASCRIPTHOW TO PROGRAM -2
DR. JOHN P. ABRAHAMUTPA
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>")</script></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><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>
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>
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.
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>
JavaScript Arrays
Dr. John P. AbrahamProfessor
UTPA
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>’)
Stack Operationsvar 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; }
Parsing a StringprobLen = 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
Function parsefunction parse(){
if (onechar >= "." && onechar <= "9") {if (onechar != "/") nums = nums +
onechar; else opcode = onechar;
} else opcode = onechar;
}
Forms and Form Processing (CGI)
Dr. John P. AbrahamUTPA
Purpose of forms
Collect information for the users (user input collection)
Sent from browsers (clients) to servers
Sample form<form method="post"
action="mailto:[email protected]">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>
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.
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.
Input types
Text Selections –
radio buttons Check boxes Pull-down menus (pick one for State) Hidden input elements (such as
session info)
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.
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
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
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)
CGI-tutorial
http://www.cgi101.com/book/ch1/text.html
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";
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
