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 Array example

InputBox Ask user name var visitor = prompt("What is your name?", " ")

Using input Ask user name var visitor = prompt("What is your name?", “Default Name ") document.write(" Hello, ", visitor, "! ")

Onload (event) Ask user name var visitor = prompt("What is your name?", " ")

Alert Box with 2 lines Ask user name var visitor = prompt("What is your name?", " ")

Function with return value function product(a,b) { return a*b; } document.write(product(4,3)); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters.

Looping Nested Loop var i=1, j; while (i <= 12) {document.writeln(" Table for ",i, " "); for (j=1; j <=16; j++) document.writeln(i, " x ", j, " = ", i*j," "); i++ }

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

Looping & Table Nested Loop var i=1, j; while (i <= 12) {document.writeln(" "); document.writeln(" Table for ",i, " "); for (j=1; j <=16; j++) document.writeln(" ",i, " x ", j, " = ", i*j," "); document.writeln(" "); i++ }

Assignment Help Future value of an investment 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(" This program calculates your total assets at retirment (age 65)"); document.writeln(" given initial deposit, amount of deposit every 30 days, "); document.writeln(" interest rate and your current age."); document.writeln(" data entry "); 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; }

JavaScript Arrays Dr. John P. Abraham Professor 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 ’)

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; }

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

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

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

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

Sample form Name: Password: Male Female

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

Example of a CGI program #!/usr/bin/perl print "Content-type: text/html\n\n"; print " Hello World \n"; print " \n"; print " Hello, world! \n"; print " \n";

HTML5 It is time for you (and me) to learn HTML5 I suggest you go to this site and follow the tutorial.