BACHELOR OF INFORMATION TECHNOLOGY WITH HONOURS
SEMESTER JANUARY 2021
FINAL EXAMINATION
CBWP2203
WEB PROGRAMMING
NAME
: SARVINDRAN A/L T.SELVAM
MATRICULATION NO
: 960126055057001
IDENTITY CARD NO.
: 960126-05-5057
TELEPHONE NO.
: 016-7704180
E-MAIL
: selvamjr@oum.edu.my
LEARNING CENTRE
: Sg.Petani Learning Centre
PART A
Question 3 (A)
Contents
1. Introduction to forms
2. Controls
1. Control types
3. The FORM element
4. The INPUT element
1. Control types created with INPUT
2. Examples of forms containing INPUT controls
5. The BUTTON element
6. The SELECT, OPTGROUP, and OPTION elements
1. Pre-selected options
7. The TEXTAREA element
8. The ISINDEX element
9. Labels
1. The LABEL element
10. Adding structure to forms: the FIELDSET and LEGEND elements
11. Giving focus to an element
1. Tabbing navigation
2. Access keys
12. Disabled and read-only controls
1. Disabled controls
2. Read-only controls
13. Form submission
1. Form submission method
2. Successful controls
3. Processing form data

Step one: Identify the successful controls

Step two: Build a form data set

Step three: Encode the form data set

Step four: Submit the encoded form data set
4. Form content types

application/x-www-form-urlencoded

multipart/form-data
17.1 Introduction to forms
An HTML form is a section of a document containing normal content,
markup, special elements called controls (checkboxes, radio buttons,
menus, etc.), and labels on those controls. Users generally "complete" a
form by modifying its controls (entering text, selecting menu items, etc.),
before submitting the form to an agent for processing (e.g., to a Web
server, to a mail server, etc.)
Here's a simple form that includes labels, radio buttons, and push buttons
(reset the form or submit it):
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
Note. This specification includes more detailed information about forms in
the subsections on form display issues.
17.2 Controls
Users interact with forms through named controls.
A control's "control name" is given by its name attribute. The scope of the name attribute for a
control within a FORM element is the FORM element.
Each control has both an initial value and a current value, both of which are character strings.
Please consult the definition of each control for information about initial values and possible
constraints on values imposed by the control. In general, a control's "initial value" may be
specified with the control element's value attribute. However, the initial value of
a TEXTAREA element is given by its contents, and the initial value of an OBJECT element in
a form is determined by the object implementation (i.e., it lies outside the scope of this
specification).
The control's "current value" is first set to the initial value. Thereafter, the control's current
value may be modified through user interaction and scripts.
A control's initial value does not change. Thus, when a form is reset, each control's current
value is reset to its initial value. If a control does not have an initial value, the effect of a form
reset on that control is undefined.
When a form is submitted for processing, some controls have their name paired with their
current value and these pairs are submitted with the form. Those controls for which name/value
pairs are submitted are called successful controls.
17.2.1 Control types
HTML defines the following control types:
buttons
Authors may create three types of buttons:

submit buttons: When activated, a submit button submits a form. A form may
contain more than one submit button.

reset buttons: When activated, a reset button resets all controls to their initial
values.

push buttons: Push buttons have no default behavior. Each push button may
have client-side scripts associated with the element's event attributes. When an
event occurs (e.g., the user presses the button, releases it, etc.), the associated
script is triggered.
Authors should specify the scripting language of a push button script through
a default script declaration (with the META element).
Authors create buttons with the BUTTON element or the INPUT element. Please
consult the definitions of these elements for details about specifying different button
types.
Note. Authors should note that the BUTTON element offers richer rendering
capabilities than the INPUT element.
Question 3 (B)
Request.QueryString
The Request.QueryString command is used to collect values in a form with method="get".
Information sent from a form with the GET method is visible to everyone (it will be displayed
in the browser's address bar) and has limits on the amount of information to send.
Example HTML form
<form
First
Last
<input
</form>
method="get"
Name:
Name:
action="simpleform.asp">
<input
<input
type="text"
type="text"
type="submit"
name="fname"><br>
name="lname"><br><br>
value="Submit">
If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would
look like this:
https://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates
Assume that "simpleform.asp" contains the following ASP script:
<body>
Welcome
<%
response.write(request.querystring("fname"))
response.write("
"
&
request.querystring("lname"))
%>
</body>
The browser will display the following in the body of the document:
Welcome Bill Gates
Request.Form
The Request.Form command is used to collect values in a form with method="post".
Information sent from a form with the POST method is invisible to others and has no limits on
the amount of information to send.
Example HTML form
<form
First
Last
method="post"
Name:
Name:
<input
action="simpleform.asp">
<input
<input
type="text"
type="text"
type="submit"
name="fname"><br>
name="lname"><br><br>
value="Submit">
</form>
If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would
look like this:
https://www.w3schools.com/simpleform.asp
Assume that "simpleform.asp" contains the following ASP script:
<body>
Welcome
<%
response.write(request.form("fname"))
response.write("
"
&
request.form("lname"))
%>
</body>
The browser will display the following in the body of the document:
Welcome Bill Gates
Form Validation
User input should be validated on the browser whenever possible (by client scripts). Browser
validation is faster and reduces the server load.
You should consider server validation if the user input will be inserted into a database. A good
way to validate a form on the server is to post the form to itself, instead of jumping to a different
page. The user will then get the error messages on the same page as the form. This makes it
easier to discover the error.
PART B
A ) Difference Between Server-side Scripting and Client-side Scripting
The scripts can be written in two forms, at the server end (back end) or at the client end (server
end). The main difference between server-side scripting and client-side scripting is that the
server side scripting involves server for its processing. On the other hand, client-side scripting
requires browsers to run the scripts on the client machine but does not interact with the server
while processing the client-side scripts.
Comparison Chart
BASIS
SERVER-SIDE SCRIPTING
CLIENT-SIDE SCRIPTING
Works in the back end which could
Works at the front end and script are
not be visible at the client end.
visible among the users.
Processing
Requires server interaction.
Does not need interaction with the server.
Languages
PHP, ASP.net, Ruby on Rails,
HTML, CSS, JavaScript, etc.
involved
ColdFusion, Python, etcetera.
Affect
Could effectively customize the
FOR
COMPARISON
Basic
Can reduce the load to the server.
web pages and provide dynamic
websites.
B) Describe the reasons why JavaScript is easier as compared to Java
What is JavaScript?
JavaScript is a scripting language that helps you create interactive web pages. It follows the
rules of client-side programming, so it runs in the user's web browser without the need for any
resources form the web server. You can also use JavaScript with other technologies like REST
APIs, XML, and more. Nowadays JavaScript also using technologies like Node js.
KEY DIFFERENCES:

Java is a multi-platform, object-oriented, and network-centric, programming language
whereas JavaScript is a scripting language that helps you create interactive web pages.

Java is a strongly typed language while JavaScript is a weakly typed language.

Java has a file extension ".Java," whereas Javascript has the file extension ".js"

With Java, you write code once and run it on almost any computing platform, on the
other hand, Java script is a cross-platform language.

Java is compiled on the server before execution on the client while JavaScript is
interpreted by the client.

Java is static language while JavaScript is a dynamic language.
Features of Java
Here are the important features of Java.

Write code once and run it on almost any computing platform

It is designed for building object-oriented applications.

It is a multithreaded language with automatic memory management

Facilitates distributed computing as its network-centric
Features of JavaScript
Here are important features of Java-script:

It's a cross-platform language

It's widely used for client-side and server-side

Strong Testing Workflow

It's easy to learn and to start coding with

Added dependencies
Application of Java
Stack Overflow Questions JAVA vs Java Script
Here, are important applications of Java language:
To develop:

Android Apps

Enterprise Software

Scientific Computing Applications

Big Data Analytics

Java Programming of Hardware devices

Used for Server-Side Technologies like Apache, JBoss, GlassFish, etc.
Application of JavaScript
Here, are some important applications of JavaScript:

Dynamic Single-Page Applications (SPAs)

Front-End technologies like jQuery, AngularJS, Ember.js, ReactJS are based on Java
Script

Server-Side technologies like Node.js, Express.js, MongoDB are based on Java Script.

Mobile App Development using PhoneGap, React Native, etc.
JavaScript vs Java
A major difference Java and JavaScript is that Java is compiled and interpreted language
while JavaScript code is directly executed by the browser
C) How to insert JavaScript syntax in HTML documents?
Adding JavaScript into an HTML Document
You can add JavaScript code in an HTML document by employing the dedicated HTML
tag <script> that wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section,
depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them
contained and out of the main content of your HTML document.
However, if your script needs to run at a certain point within a page’s layout — like when
using document.write to generate content — you should put it at the point where it should be
called, usually within the <body> section.
Let’s consider the following blank HTML document with a browser title of Today's Date:
Working with a Separate JavaScript File
In order to accommodate larger scripts or scripts that will be used across several pages,
JavaScript code generally lives in one or more js files that are referenced within HTML
documents, similarly to how external assets like CSS are referenced.
The benefits of using a separate JavaScript file include:

Separating the HTML markup and JavaScript code to make both more straightforward

Separate files makes maintenance easier

When JavaScript files are cached, pages load more quickly
To demonstrate how to connect a JavaScript document to an HTML document, let’s create a
small web project. It will consist of script.js in the js/ directory, style.css in the css/ directory,
and a main index.html in the root of the project.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
We can start with our previous HTML template from the section above:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
C) Change the syntax to display the text in the alert box.
Display Popup Message Box
JavaScript provides different built-in functions to display popup messages for different
purposes e.g. to display a simple message or display a message and take user's confirmation
on it or display a popup to take a user's input value.
Alert Box
Use alert() function to display a popup message to the user. This popup will have OK button
to close the popup.
Example: Alert Box
alert("This is alert box!"); // display string message
alert(100); // display number
alert(true); // display boolean
Try it
The alert function can display message of any data type e.g. string, number, boolean etc.
There is no need to convert a message to string type.
Confirm Box
Sometimes you need to take the user's confirmation to proceed. For example, you want to
take user's confirmation before saving updated data or deleting existing data. In this
scenario, use JavaScript built-in function confirm(). The confirm() function displays a popup
message to the user with two buttons, OK and Cancel. You can check which button the user
has clicked and proceed accordingly.
The following example demonstrates how to display a confirm box and then checks which
button the user has clicked.
Example: Confirm Box
var userPreference;
if (confirm("Do you want to save changes?") == true) {
userPreference = "Data saved successfully!";
} else {
userPreference = "Save Cancelled!";
}
Try it
Prompt Box
Sometimes you may need to take the user's input to do further actions in a web page. For
example, you want to calculate EMI based on users' preferred tenure of loan. For this kind
of scenario, use JavaScript built-in function prompt().
Prompt function takes two string parameters. First parameter is the message to be displayed
and second parameter is the default value which will be in input text when the message is
displayed.
Syntax:
prompt([string message], [string defaultValue]);
Example: prompt Box
var tenure = prompt("Please enter preferred tenure in years", "15");
if (tenure != null) {
alert("You have entered " + tenure + " years" );
}
Try it
As you can see in the above example, we have specified a message as first parameter and
default value "15" as second parameter. The prompt function returns a user entered value.
If user has not entered anything then it returns null. So it is recommended to check null
before proceeding.
Note:
The alert, confirm and prompt functions are global functions. So it can be called using window
object like window.alert(), window.confirm() and window.prompt().
Points to Remember :
1. Popup message can be shown using global functions - alert(), confirm() and prompt().
2. alert() function displays popup message with 'Ok' button.
3. confirm() function display popup message with 'Ok' and 'Cancel' buttons. Use
confirm() function to take user's confirmation to proceed.
4. prompt() function enables you to take user's input with 'Ok' and 'Cancel' buttons.
prompt() function returns value entered by the user. It returns null if the user does not
provide any input value.