1

INT222 – Internet Fundamentals

Week 5: More on JS & HTML

2

Outline

• JavaScript Build-in Object– String Object– Array Object

• HTML Form• CGI

3

JavaScript Build-in Object

• String Object• Array Object• Date Object• Math Object• Number Object• Regular Expression Object

4

String Object

• Strings enclosed within double or single quotes are used for holding data that can be represented in text format.

• Some of the most-used operations on strings are to – check their length, and to– concatenate strings using the + and += string

operators.

5

Character access

There are two ways to access an individual character in a string:• Using charAt() method

• Using array index

var example1 = "INT222"; alert(example1.charAt(2)); // return T

var example2 = "INT222";alert(example2[2]); // returns T

6

String object - properties and methodsMember Type Example

length property stringName.lengthcharAt(n) method stringName.charAt(n)charCodeAt(n) method stringName.charCodeAt(n)concat(string2, string3) method stringName.concat(string2, string3)

indexOf('x') method stringName.indexOf('x')lastIndexOf('x') method stringName.lastIndexOf('x')split('x') method var arrayName = stringName.split('x')substr(x,y) method stringName.substr(x,y) - x=from y=lengthsubstring(x,y)

method stringName.substring(x,y) - x=from (inclusive) y=to (not inclusive)

toLowerCase() method Converts a string to lowercase.toUpperCase() method Converts a string to uppercase.trim() method Removes whitespaces from the left and right of a string.

7

JS String object - property

• Length– The length property returns the number of

characters in a string.– Syntax: stringName.length

myString.length returns 6 View source

Position/index » 012345var myString = "INT222";

8

JS String object - methods• charAt(index)

– The method returns the character at the specific index.– Characters in a string are indexed from left to right

• Index start from 0 to one less than the length.– The index of the last character in a string called myString is

myString.length - 1– If the index you supply is out of range, JavaScript returns an empty string– Syntax: stringName.charAt(index)

myString.charAt(0) returns I myString.charAt(1) returns N myString.charAt(2) returns T

View source

myString.charAt(3) returns 1 myString.charAt(4) returns 2 myString.charAt(5) returns 3 myString.charAt(6) returns

Position/index » 012345var myString = "INT123";

9

JS String object - methods• charCodeAt(index)

– The method returns the unicode of a character. – Index can be a value from 0 to one less than the length. – Syntax: stringName.charCodeAt(index)

myString.charCodeAt(0) - A returns 65 myString.charCodeAt(1) - Z returns 90 myString.charCodeAt(2) - a returns 97 myString.charCodeAt(3) - z returns 122 myString.charCodeAt(4) - 1 returns 49 myString.charCodeAt(5) - 9 returns 57 myString.charCodeAt(6) - returns NaN View source

Position/index » 012345var myString = "AZaz19";

10

About Unicode

• Unicode provides a unique number for every character, no matter what the platform is.

• See unicodes table.

11

JS String object - methods• concat(string2,string3,...)

– The concat(....) method combines the text of two or more strings.

– It is always recommended that you use the assignment operators (+, +=) instead of the concat method.

– Syntax: stringName.concat(string2, string3)

m

var myString0 = "My courses are : ";var myString1 = "INT222";var myString2 = "OOP222";

myString0 = myString0.concat(myString1, " & " , myString2); // returns  My courses are : INT222 & OOP244 

View source

12

JS String object - methods• indexOf(subStr)

– returns the position at which the character or string begins. indexOf returns only the first occurrence of your character or string.

– If indexOf returns zero, the character or the string you are looking for begins at the 1st character.

– If indexOf returns -1, the character or string you searched for is not contained within the string.

myString.indexOf('I') - returns 0 myString.indexOf('N') - returns 1 myString.indexOf('2') - returns 3 myString.indexOf('T2') - returns 2 myString.indexOf('3') - returns -1 View source

Position/index » 012345var myString = "INT222";

13

indexOf(“subStr",[optional]) method

• indexOf("subStr", from)– from : starting the search from position from.

myString.indexOf('I') - returns 0 myString.indexOf('2') - returns 3 myString.indexOf('2',5) - returns 5 myString.indexOf('3') - returns -1

View source

Position/index » 012345var myString = "INT222";

14

JS String object - methods

• lastIndexOf(subStr)– returns the position at which the last occurrence of

your character or string – searching backwards.– If lastIndexOf returns -1, the character or string you

searched for is not contained within the string.

myString.lastIndexOf('I') - returns 0 myString.lastIndexOf('N') - returns 1 myString.lastIndexOf('2') - returns 5 myString.lastIndexOf('22') - returns 4 myString.lastIndexOf('3') - returns -1 View source

Position/index » 012345var myString = "INT222";

15

lastIndexOf("x",[optional]) method

• lastIndexOf(“subStr", from)• from : starting the search from position from – searching

backwards

myString.lastIndexOf('I') - returns 0 myString.lastIndexOf('2') - returns 5 myString.lastIndexOf('2',4) - returns 4 myString.lastIndexOf('3') - returns -1

View source

Position/index » 012345var myString = "INT222";

16

JS String object - methods• split(x)– The split(' ') uses the specified character(s) to break the

argument string into an array.– Syntax: stringName.split(x)

A split on a blank will return the following:

myArray - element 0 returns INTmyArray - element 1 returns 222 View source

Position/index » 0123456var myString = "INT 222";var myArray = myString.split(' ');

17

split(x)

A split on 2 will return the following:

myArray - element 0 returns INT (actually: "INT ")myArray - element 1 returns (actually: "" – empty string)myArray - element 2 returns (actually: "" – empty string)myArray - element 3 returns (actually: "" – empty string)

View source

myArray = myString.split('22'); - a split on 22 will return the following:

myArray - element 0 returns INT myArray - element 1 returns

View source

Position/index » 0123456var myString = "INT 222";var myArray = myString.split(‘22');

18

split(x)

A split on 222 will return the following:

myArray - element 0 = INT myArray - element 1 =

View source

Position/index » 0123456var myString = "INT 222";var myArray = myString.split(‘222');

19

JS String object - methods

• substr(x, y)– The substr(x,y) returns a sub string where:

x is the from y is the length

– Syntax: stringName.substr(x,y)

myString.substr(1,4) - returns NT22 myString.substr(4,4) - returns 22 myString.substr((myString.length-4),1) - returns T myString.substr(4) - returns 22 View source

Position/index » 012345var myString = "INT222";

20

JS String object - methods• substring(x, y)– The substring(x,y) returns a sub string where: • x starting from (index) - inclusive - if x > than y, then

switch • y to (index) - not inclusive - if y < than x, then switch

myString.substring(1,4) - returns NT2 myString.substring(4,4) - returns myString.substring(4,2) - returns T2 myString.substring(-4,4) - returns INT2 myString.substring(0,6) - returns INT222 myString.substring((myString.length-1),1) - returns NT22 myString.substring(4) - returns 22 View source

Position/index » 012345var myString = "INT222";

21

JS String object - methods

• toLowerCase()– Converts a string to lower case– Syntax: stringName.toLowerCase()

myString.length returns 6myString.toLowerCase() returns int222

View source

Position/index » 012345var myString = "INT222";

22

JS String object - methods

• toUpperCase()– Converts a string to upper case– Syntax: stringName. toUpperCase()

myString.length returns 6myString.toUpperCase() returns INT222

View source

Position/index » 012345var myString = "INT222";

23

JS String object - methods

• trim()– The trim() method removes whitespace (blank

characters) from the left and right of the string.– trimLeft() & trimRight() methods work with some

browsers but not others - Don't use them.– Syntax: stringName.trim()

var myString value = "    INT222    "

The length of myString is 14myString = myString.trim(); returns INT222

View source

24

Array Object

• A group of the same variable type that use an index (a number) to distinguish them from each other.

• Items in an array are given the same name and are referenced by the name and the index (the occurrence).

• Index starts from 0.

25

Array object - properties and methods

Member Type Example

length property arrayName.lengthjoin() method arrayName.join() or

arrayName.join("+")reverse() method arrayName.reverse()sort() method arrayName.sort()for and for in loop for and for each element in

array

26

JS Array object - property• length – The length property returns the number of elements /

occurrences in the arrayvar arrayName1 = new Array (11, 15, 13, "blue", 24, 35, 05);

var arrayName2 = new Array(); // var arrayName2 = new Array(4); arrayName2[0] = "brown"; arrayName2[1] = "blue"; arrayName2[2] = 15; arrayName2[3] = "red";

var arrayName1 = [“Red", “Green", “Blue", 3];

The arrayName1.length returns 7

The arrayName1.length returns 7 View source

* How to create an array in JavaScript?

27

JS Array object - methods• join()

– The join() method is used to join all the elements of an array into a single string separated by a specified string separator • if non separator is specified, the default is a comma.

– Syntax: arrayName.join()

var arrayName1 = new Array ("Red", "Black", "Yellow", "Blue");

The arrayName1.length returns 4 arrayName1.join() will yield Red,Black,Yellow,BluearrayName1.join('+') will yield Red+Black+Yellow+BluearrayName1.join(' ') will yield Red Black Yellow BluearrayName1.join('-') will yield Red-Black-Yellow-Blue

View source

28

JS Array object - methods

• reverse()– The elements in the array are reversed. First

becomes last, second becomes second last, etc..– Syntax: arrayName.reverse()

var arrayName1 = new Array ("Red", "Black", "Yellow", "Blue");

The arrayName1.length returns 4 The array before : Red,Black,Yellow,Blue arrayName1.reverse();The array after: Blue,Yellow,Black,Red

View source

29

JS Array object - methods

• sort()– The elements in the array are sorted based on

their ASCII code.– Syntax: arrayName.sort()

var arrayName1 = new Array ("Red", "Black", 15, "Yellow", 101, "Blue");

The arrayName1.length returns 6 The array before : Red,Black,15,Yellow,101,Blue arrayName1.sort();The array after: 101,15,Black,Blue,Red,Yellow

View source

30

JavaScript - array for and for in loop var myColors = new Array("Pink", "Red", "Orange", "Blue");

function showArray1() { var message = "function showArray1()\n\n";

for (var x=0; x < myColors.length; x++) { // recommended message+= myColors[x] + "\n"; } alert(message); } // End of function

function showArray2() { var message = "function showArray2()\n\n"; for (var x in myColors) { message+= myColors[x] + "\n"; } alert(message); } // End of function

View source

31

HTML forms• The form tag specifies a fill-out form within an HTML

document. • The client fill-out some information and then the

information is submitted to the query server to be processed.

• The processing of the information is completed by the query server using the program 'something.cgi' mentioned in the URL of the action attribute.

• The 'cgi program' (Common Gateway Interface) functionality will vary depending on the requirement.

• e.g. https://myprofile.oracle.com/EndUser/faces/profile/createUser.jspx

32

HTML forms• Inside the form tag, you can have any HTML tag

except another form tag. • In other words, a document may have more than one

form, but forms cannot be nested. • form tag has two required attributes (method and

action), and must also have values assigned to them. • e.g.

<form method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl" id="formname"> ….</form>

33

The form tag attributes• method– The method is the short way of saying HTTP

request method.– method="get" • the default method and it causes the fill-out form

contents to be appended to the URL as if they were a normal query (maximum of 256 - 2048 characters).

– method="post" • the method that causes the fill-out form contents to be

sent to the server in a data body rather than as part of the URL.

34

The form tag attributes

• Action– action="url" • the URL of the query server to which the form contents

will be submitted. • Examples (form post testers):

– https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl– http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl

– action="#" • default to the current document URL. • for in-browser Processing

35

The form tag attributes

• id or name– id="whatever" or name="whatever" are used with

JavaScript • the id or name attributes allow JavaScript to make

reference to any element within the form.• The name attribute is deprecated for form tag.

• enctype– specifies the encoding for the fill-out form contents.

• The default value is "application/x-www-form-urlencoded".

36

Tags within a form tag

• A form is a component of a web page that contains other Tags/form controls:1. The <input> tag/element is the one of the most-

used form-specific element.2. The tags used for creating forms:• select, textarea, etc..

3. Other tags that can be used with forms:• fieldset, legend, lable, …

37

The input tag/element

• The input tag is used to specify a simple input element inside a form that can receive user input.

• The type attribute determines the specific sort of form element to be created.

• The name, value attributes determine what are going to be send to server.

• Other attributes: checked, size, readonly, …

38

Type attributes of the input tag• type="text“– A text element is a single line text input field in which the

user can enter text (this is the default).

Text field 1 <input type="text" name="entry1" id="entry1" /> text box default size = 20<br /> Text field 2 <input size="30" name="entry2" id="entry2" <br /> Text field 3 <input size="5" maxlength="5" name="entry3" id="entry3" /> <br /> Text field 4 <input size="12" value="416-" name="entry4" id="entry4" />

DemoView source (uses post method)View source (uses get method)

39

Type attributes of the input tag• type="password“– A password element is a text input field in which

each character typed is displayed as a character such as * or a black dot to conceal the actual value.

Type in your username <input name="username" /> <br /> Type in your password <input type="password" name="password" />

DemoView source

40

Type attributes of the input tag

• type="checkbox“– A checkbox element is a toggle that the user can

select (switch on) or deselect (switch off.)<p>Which operating system do you use? </p> <input type="checkbox" name="system_type" id="system_type-2" value="2" />Windows 7<br /> <input type="checkbox" name="system_type" id="system_type-3" value="3" checked/>Windows 8<br / <input type="checkbox" name="system_type" id="system_type-4" value="4" checked/>Unix<br />

Demo View source

41

Type attributes of the input tag• type="radio“

– A radio element is a radio button. – Only one radio button in the set can be selected at one time. When the

user selects a button in the set, all other buttons in the set are deselected. <ul> <li><input type="radio" name="paymethod" id="paymethod-1" value="cash" checked />Cash</li> <li><input type="radio" name="paymethod" id="paymethod-2" value="cheque" />Cheque</li> <li><mark>Credit card</mark> <ul> <li><input type="radio" name="paymethod" id="paymethod-3" value="mastercard" /> Mastercard</li> <li><input type="radio" name="paymethod" id="paymethod-4" value="visa" />Visa</li> </ul></li> </ul>

Demo

View source

42

Type attributes of the input tag

• type="hidden“– A hidden input element is an invisible element whose

main purpose is to contain data that the user does not enter. This data gets sent to the invoked CGI program when the form is submitted.

– This type="hidden" attribute value provides a way for delivering a value to the CGI program

<input type="hidden" name="entry0" id="entry0" value="value from the form" />

Demo View source

43

Type attributes of the input tag• type="file“

– A file element allows the user to supply a file as input. When the form is submitted, the content of the specified file is sent to the server as the value portion of the name/value pair for this input element.

– A 'Browse' button is displayed next to the file input element that lets users select a file from their system to use as the value of the file input element.

– If a form contains a file input element, the value of the enctype attribute of the form tag should be 'multipart/form-data'.

Demo View source

<p> Student Name <input type="text" name="StudentName" id="StudentName" /> <br /> Upload your assignment <input type="file" name="assignment" /> </p>

44

Type attributes of the input tag

• type="submit“– When a user clicks a submit button, the form is submitted,

which means that the action specified for the form is invoked.– Default value: “Submit Query”.

Demo View source (uses post method)Demo View source (uses het method)

<p> <input type="submit" /> <input type="reset" value=" Clear " />

</p>

45

Type attributes of the input tag

• type="reset"– When a user clicks a reset button, all elements in

the form are reset to their original default values.

Demo View source

<p> <input type="submit" value="Submit Information" /> <input type="reset" /> </p>

46

Type attributes of the input tag

• type="image"– Places an image, serving as a custom button in place

of the submit button. When a user clicks the image, the form is submitted to the server.

image View source

Search <input type="text" name="entry1" id="entry1" /> <input type="image" src="gogetit.gif" alt="get it" />

47

Additional attributes of the input tag

• The following are additional attributes that work with the input tag. – Name/id, value, checked, size, maxlength,

disabled, readonly, tabindex.– The name & value pair in each input tag is what is

going to be send to server.• Some or all of these attributes may be used

depending on the value used in type attribute.

48

A form example <form method="post" name="example“ action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl"><p> Text field 1 <input type="text" name="entry1" id="entry1" /> <mark> name / id</mark> <br /> Text field 2 <input size="30" name="entry2" id="entry2" /> <mark>size</mark> <br /> Text field 3 <input size="5" maxlength="5" name="entry3" id="entry3" /> <mark>maxlength</mark> <br /> Text field 4 <input size="12" value="416-" name="entry4" id="entry4" /> <mark>value</mark> <br /> Disabled field 5 <input size=“50" disabled="disabled" value="This one is disabled - Will not be sent to the CGI" name="entry5" id="entry5" /> <mark>disabled="disabled"</mark> <br /> Read only field 6 <input size=“50" readonly="readonly" value="This one is a readonly - Will be sent to the CGI" name="entry6" id="entry6" /> <mark>readonly="readonly"</mark> </p><p> <input type="submit" value="Submit Information" /> <input type="reset" value=" Clear " </p> </form> View source

49

A form example

50

Additional attributes of the input tag

• name/id– is the symbolic name (not displayed) for an input field. The

name/id attribute and a value should be present for all input tags.• Value

– for a text or password entry field, can be used to specify the default contents of the field.• default value vs current value

– for a checkbox or a radio button, value specifies the value of the button when it is checked (unchecked checkboxes are ignored when submitting the form.

– For types submit and reset, value is used to specify the label for the push button.

51

Additional attributes of the input tag

• checked– checked="checked" specifies that the checkbox or radio

button is checked by default;– this is only appropriate for a checkbox or a radio button.– HTML 5 supports attribute minimization – use checked for

simplifying checked="checked".• size

– is the physical size of the input field in characters; – this is only appropriate for text entry fields and password

entry fields. – If this is not present, the default is 20 characters.

52

Additional attributes of the input tag

• maxlength– is the maximum number of characters that are accepted as input;

this is only appropriate for single-line text entry fields and password entry fields.

– If this is not present, the default will be unlimited. – The text entry field will scroll appropriately if maxlength value is

greater than the size value.• tabindex– tabindex="nn" - nn is a positive value - navigation proceeds from

the element with the lowest tabindex value to the element with the highest value.

– A kind of global attribute.

53

tabindex attribute example<form method="post" name="example"

action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl"> <p> Text 1 <input type="text" name="entry1" id="entry1" tabindex="1" /> Text 2 <input type="text" name="entry2" id="entry2" tabindex="3" />

<br /> Text 3 <input type="text" name="entry3" id="entry3" tabindex="2" /> Text 4 <input type="text" name="entry4" id="entry4" tabindex="4" /></p> <p> <input type="submit" value="Submit Information" tabindex="5" /> <input type="reset" value=" Clear " /> </p> </form>

View source

54

Additional attributes of the input tag

• disabled– disabled="disabled" - When used, cannot receive

user input nor will its value be submitted with the form

• readonly– readonly="readonly" - When used, cannot receive

user input - the value is submitted with the form

55

Other than the input tag

• Other than the input tag, some tags can accept user input inside a form:– select tag– textarea tag

56

The select tag• The select has both opening and closing tags. Inside the

select, only a sequence of option tags, each followed by an arbitrary amount of plain text - no HTML markup is allowed.

• The select tag defines a selection list on an HTML form. A selection list displays a list of options- a menu like - from which the user can select an item(s).

• Any number of select tags inside <form>... </form> tags are allowed. The <select> can be intermixed with other HTML elements (including the input and the textarea elements).

57

Example <select name="what-to-do" id="what-to-do"> <option value="1"> Drink Coffee </option> <option value="2“ selected> Read A Book </option> <option value="3"> Take A Walk </option> <option value="4"> Buy A Bagel </option> <option value="5"> Watch TV </option> <option value="6"> Write a test </option> </select>

Select

View source

58

The attributes of the select tag

• name="xyz" or id="xyz"– Specifies the name/id of the select element. This

value is the name/id portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.

59

The attributes of the select tag• size="n"

– The SIZE attribute specifies how many options in the list are displayed at one time.

– For multiple-selection lists, if you do not specify the size attribute, the browser displays some, maybe all, of the options.

– For single-selection lists, by default, the browser displays the list as a drop-down menu that initially shows only one option.

– The user can click the list to display the rest of the options. If you specify the SIZE attribute, the list is displayed as a scrolling list that shows the specified number of options, regardless of whether the list allows single or multiple selection.

60

The attributes of the select tag

• multiple="multiple"– Specifies that multiple items can be selected. If this

attribute is omitted, only one item can be selected from the list. If multiple selection is enabled, the user usually needs to hold down the Shift or Ctrl key to select additional items.

• <optgroup label="...">– The <optgroup label="...."> allows for grouping options

together - The grouped options in the select menu are indented. The <optgroup label="...."> requires a closing <.optgroup> after the last option being grouped.

– The text used for the label is in bold and is not selectable.

61

Example<select name="what-to-do" id="what-to-do" multiple="multiple" size="9"> <optgroup label="Morning"> <option value="1" selected="selected"> Drink Coffee </option> <option value="2"> Take A Walk </option> <option value="3"> Buy A Bagel </option> </optgroup>

<optgroup label="Evening"> <option value="4"> Read A Book </option> <option value="5"> Watch TV </option> </optgroup>

<optgroup label="Any time"> <option value="6"> Write a test </option> </optgroup></select>

Demo

62

The textarea tag

• The textarea tag can be used to place a multi-line text entry field with optional default contents in a fill-out form. textarea fields automatically have scroll bars; any amount of text can be entered in them.

• The textarea element requires both an opening and a closing tag.

63

Example<p>Example 1</p> <p> <textarea name="comments-01" id="comments-01" cols= “60" rows="2"></textarea></p>

<p>Example 2</p> <textarea name="comments-02" id="comments-02" cols= " 60" rows= "1">Default text</textarea>

textarea

64

The attributes of the textarea tag

• name="..." or id="..."– is the symbolic name/id of the textarea field.

• rows="n"– is the number of rows (vertical height) of the

textarea field.• cols="n"– is the number of columns (horizontal width in

characters) of the textarea field.

65

<fieldset> and <legend> tags <fieldset> <legend>Personal Information</legend> <p> Text field 1 <input type="text" name="entry1" id="entry1" /> text box default size = 20 <br /> Text field 2 <input size="30" name="entry2" id="entry2" /> <br /> Text field 3 <input size="5" maxlength="5" name="entry3" id="entry3" /> <br /> Text field 4 <input size="12" value="416-" name="entry4" id="entry4" /> </p> </fieldset>

Demo

View source

66

<label> tag<fieldset> <legend>Personal Information</legend> <p> <label for="entry1"><a title="Free format">Text field 1</a></label> <input id="entry1" type="text" name="entry1" id="entry1" /> text box default size = 20 <br /> <label for="entry2"><a title="Free format">Text field 2</a></label> <input id="entry2" size="30" name="entry2" id="entry2" /> <br /> <label for="entry3"><a title="Limit of 5 characters">Text field 3</a></label> <input id="entry3" size="5" maxlength="5" name="entry3" id="entry3" /> <br /> <label for="entry4"><a title="Phone Number">Text field 2</a></label> <input id="entry4" size="12" value="416-" name="entry4" id="entry4" /> </p></fieldset>

Demo View source

67

Common Gateway Interface protocol

Common Gateway Interface (CGI) is a standard for interfacing web pages on client's computers with programs on servers. CGI is not a programming language. It's simply a protocol that is used to communicate between web pages and a program.

• Common– Suggests that CGI can be used by many languages and interact with

many different types of systems. • Gateway

– Suggests that CGI offer "access" to files, databases and really anything available on a server.

• Interface– Suggests that CGI provides a well-defined implementation "protocol".

68

About CGI• A CGI program / script can be written in any language that can

– read STDIN, write to STDOUT and read environment variables. Almost any programming language including Shell scripting can handle reading STDIN, writing to STDOUT and reading environment variables. Basically, it all depends on what is available on your system.

• A plain HTML document that is retrieved by a Web server based on a request that the client has made is displayed on client's computer in a static mode - really a document that doesn't change. A request to a CGI program results in executing a program in real-time and will output dynamic - update information.

69

About CGI• If you really think about it, each time a client requests a

URL corresponding to a CGI program, the server will execute it in real-time - this is equivalent to allowing anyone on the web to execute programs on your system. ISP's and Webmasters are always concerned about allowing the use of this feature on their servers. Allowing or prohibiting the use of CGI is a configuration feature for any web server.

• Typically, a CGI program needs to reside in a special directory called "cgi-bin" and is usually under the control of the Webmaster.

70

The process of CGI

Regardless of the CGI you're attempting to use, the process is pretty much the same.

• A client requests a URL corresponding to a CGI program using one of the two (2) common methods, the get (default) or the post – Environment variables play a major role in communicating

information between the client and the server. A list of Environment variables plus PHP information is also available here.

– The following variables (REQUEST_METHOD, QUERY_STRING, CONTENT_LENGTH and PATH_INFO) determine how you get the information, what it is, where to get it and the locations that may be required for processing the data.

71

The process of CGI

• The method of the request is the first thing the CGI needs to identify. – If you use a form to capture the data, you can

choose which data-sending method is to be used (get or post).

– If you use a direct link, the method is assumed to be the get method.

<a href="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/calprog.cgi">Direct link</a>

72

The process of CGI

• Handling the get Method – The get method uses the QUERY_STRING to store the

information being passed to the CGI. Any information being passed will be part of the URL and you will in fact see it as part of the URL. The part of the URL following the question mark (?) is automatically chopped and placed in the QUERY_STRING.

• Handling the post Method – The post method uses the standard input (STDIN) stream to

pass the information. The CONTENT_LENGTH is set to the number of URL-encoded bytes being sent to the STDIN.

73

The process of CGI• When dealing with large amounts of data, the post method is better because the

STDIN buffer has an unlimited capacity whereas the get method is limited to 256 - 4096 characters.

Regardless of the method being used, when your CGI receives the data, it receives it in what is referred to as URL encoded.

That means it's in the form of ordered pairs of information, with an equal sign (=) tying together two elements of a pair, an ampersand (&) tying pairs together, a plus (+) sign taking the place of spaces and special characters with %xx hexadecimal encoding.

This encoding will need to be decoded by the CGI in order for the CGI to use the information.Once the information is decoded, the CGI program will carry out the function it was intended to perform.

74

• Standard built-in objects - JavaScript | MDNhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

• HTML forms guide | MDNhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

• Reference-sheets-for-term-testshttp://wsong18.files.wordpress.com/2014/01/int222-test1-ref.pdf

75

Thank You!