INT222 – Internet Fundamentals
Week 5: More on JS & HTML
1
Outline
• JavaScript Build-in Object
– String Object
– Array Object
• HTML Form
• CGI
2
JavaScript Build-in Object
•
•
•
•
•
•
String Object
Array Object
Date Object
Math Object
Number Object
Regular Expression Object
3
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.
4
Character access
There are two ways to access an individual
character in a string:
• Using charAt() method
var example1 = "INT222";
alert(example1.charAt(2)); // return T
• Using array index
var example2 = "INT222";
alert(example2[2]); // returns T
5
String object - properties and methods
Member
Type
Example
length
property
stringName.length
charAt(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=length
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.
substring(x,y)
6
JS String object - property
• Length
– The length property returns the number of
characters in a string.
– Syntax: stringName.length
Position/index
»
012345
var myString
=
"INT222";
myString.length returns 6
View source
7
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)
Position/index
»
012345
var myString
=
"INT123";
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
8
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)
Position/index
»
012345
var myString
=
"AZaz19";
myString.charCodeAt(0) myString.charCodeAt(1) myString.charCodeAt(2) myString.charCodeAt(3) myString.charCodeAt(4) myString.charCodeAt(5) myString.charCodeAt(6) -
A returns 65
Z returns 90
a returns 97
z returns 122
1 returns 49
9 returns 57
returns NaN
View source
9
About Unicode
• Unicode provides a unique number for every
character, no matter what the platform is.
• See unicodes table.
10
JS String object - methods
• concat(string2,string3,...)
m
– 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)
var myString0 = "My courses are : ";
var myString1 = "INT222";
var myString2 = "OOP222";
myString0 = myString0.concat(myString1, " & " ,
myString2);
// returns My courses are : INT222 & OOP244
View source
11
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.
Position/index
»
012345
var myString
=
"INT222";
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
12
indexOf(“subStr",[optional]) method
• indexOf("subStr", from)
– from : starting the search from position from.
Position/index
»
012345
var myString
=
"INT222";
myString.indexOf('I') - returns 0
myString.indexOf('2') - returns 3
myString.indexOf('2',5) - returns 5
myString.indexOf('3') - returns -1
View source
13
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.
Position/index
»
012345
var myString
=
"INT222";
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
14
lastIndexOf("x",[optional]) method
• lastIndexOf(“subStr", from)
• from : starting the search from position from – searching
backwards
Position/index
»
012345
var myString
=
"INT222";
myString.lastIndexOf('I') - returns 0
myString.lastIndexOf('2') - returns 5
myString.lastIndexOf('2',4) - returns 4
myString.lastIndexOf('3') - returns -1
View source
15
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)
Position/index
»
0123456
var myString
=
"INT 222";
var myArray
=
myString.split(' ');
A split on a blank will return the following:
myArray - element 0 returns INT
myArray - element 1 returns 222
View source
16
split(x)
Position/index
»
0123456
var myString
=
"INT 222";
var myArray
=
myString.split(‘22');
A split on 2 will return the following:
myArray - element 0 returns INT
myArray - element 1 returns
myArray - element 2 returns
myArray - element 3 returns
(actually: "INT ")
(actually: "" – empty string)
(actually: "" – empty string)
(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
17
split(x)
Position/index
»
0123456
var myString
=
"INT 222";
var myArray
=
myString.split(‘222');
A split on 222 will return the following:
myArray - element 0 = INT
myArray - element 1 =
View source
18
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)
Position/index
»
012345
var myString
=
"INT222";
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
19
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
Position/index
»
012345
var myString
=
"INT222";
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
20
JS String object - methods
• toLowerCase()
– Converts a string to lower case
– Syntax: stringName.toLowerCase()
Position/index
»
012345
var myString
=
"INT222";
myString.length returns 6
myString.toLowerCase() returns int222
View source
21
JS String object - methods
• toUpperCase()
– Converts a string to upper case
– Syntax: stringName. toUpperCase()
Position/index
»
012345
var myString
=
"INT222";
myString.length returns 6
myString.toUpperCase() returns INT222
View source
22
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 14
myString = myString.trim(); returns INT222
View source
23
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.
24
Array object - properties and methods
Member
length
Type
Example
property
arrayName.length
method
arrayName.join() or
arrayName.join("+")
reverse()
method
arrayName.reverse()
sort()
method
arrayName.sort()
join()
for and for in loop
for and for each element in
array
25
JS Array object - property
• length
– The length property returns the number of elements /
occurrences in the array
var arrayName1 = new Array (11, 15, 13, "blue", 24, 35, 05);
The arrayName1.length returns 7
var arrayName2 = new Array(); // var arrayName2 = new Array(4);
arrayName2[0] = "brown";
arrayName2[1] = "blue";
arrayName2[2] = 15;
arrayName2[3] = "red";
The arrayName1.length returns 7
View source
var arrayName1 = [“Red", “Green", “Blue", 3];
* How to create an array in JavaScript?
26
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,Blue
arrayName1.join('+') will yield Red+Black+Yellow+Blue
arrayName1.join(' ') will yield Red Black Yellow Blue
arrayName1.join('-') will yield Red-Black-Yellow-Blue
View source
27
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
28
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
29
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
View source
function showArray2() {
var message = "function showArray2()\n\n";
for (var x in myColors) {
message+= myColors[x] + "\n";
}
alert(message);
} // End of function
30
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
31
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/cgibin/echo-p.pl" id="formname">
….
</form>
32
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.
33
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
34
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".
35
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 mostused 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, …
36
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, …
37
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" />
Demo
View source (uses post method)
View source (uses get method)
38
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" />
Demo
View source
39
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
40
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
41
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
42
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'.
<p>
Student Name <input type="text" name="StudentName" id="StudentName" /> <br />
Upload your assignment <input type="file" name="assignment" />
</p>
Demo
View source
43
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”.
<p>
<input type="submit" />
<input type="reset" value=" Clear " />
</p>
Demo
Demo
View source (uses post method)
View source (uses het method)
44
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.
<p>
<input type="submit" value="Submit Information" />
<input type="reset" />
</p>
Demo
View source
45
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.
Search <input type="text" name="entry1" id="entry1" />
<input type="image" src="gogetit.gif" alt="get it" />
image
View source
46
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.
47
A form example
<form method="post" name="example“ action="https://zenit.senecac.on.ca/~emile.ohan/cgibin/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
48
A form example
49
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.
50
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.
51
Additional attributes of the input tag
• maxlength
– is the maximum number of characters that are
accepted as input; this is only appropriate for singleline 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.
52
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
53
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
54
Other than the input tag
• Other than the input tag, some tags can
accept user input inside a form:
– select tag
– textarea tag
55
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).
56
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
57
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.
58
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.
59
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.
60
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
61
The textarea tag
• The textarea tag can be used to place a multiline 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.
62
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
63
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.
64
<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
65
<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
66
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".
67
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.
68
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.
69
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.
70
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/cgibin/calprog.cgi">Direct link</a>
71
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 URLencoded bytes being sent to the STDIN.
72
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.
73
• Standard built-in objects - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
• HTML forms guide | MDN
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
• Reference-sheets-for-term-tests
http://wsong18.files.wordpress.com/2014/01/int222-test1-ref.pdf
74
Thank You!
75