ZeePedia

Interactivity to Forms, JavaScript, server-side scripts

<< WORD PROCESSING: Common functions of word processors, desktop publishing
ALGORITHMS >>
img
Introduction to Computing ­ CS101
VU
LESSON 15
MORE ON INTERACTIVE FORMS
(Web Development Lesson 5)
Focus of the last Lesson was on Interactive Forms
We looked at the utility of forms on Web pages
We found out about the various components that are used in a form
We became able to build a simple, interactive form
In Today's Lesson ...
We will learn ways of adding more interactivity to forms
We will get our first taste of JavaScript ­ the object-based language that we will be employing
throughout the rest of the Web development part of this course
Last time we mentioned server-side scripts; today we will write (simple) client-side scripts in JavaScript
15.1 Single-Line Text Input Field
<INPUT
type="text"
name="name"
size="widthInCharacters"
maxlength="limitInCharacters"
value="initialDefaultValue"
>
15.2 Password Input Field
<INPUT
type="password"
name="name"
size="widthInCharacters"
maxlength="limitInCharacters"
value="initialDefaultValue"
>
15.3 Hidden Input
<INPUT
type="hidden"
name="name"
value="value"
>
15.4 Checkbox Input Element
<INPUT
type="checkbox"
name="name"
checked
value="checkedValue"
>
15.5 Radio Button Input Element
<INPUT
type="radio"
name="name"
checked
value="selectedValue"
>
84
img
Introduction to Computing ­ CS101
VU
15.6 File Upload Input Element
<INPUT
type="file"
name="name"
value="nameOfSelectedFile"
enctype="fileEncodingType"
>
15.7 Reset Button Input Element
<INPUT
type="reset"
value="buttonLabel"
>
15.8 Submit Button Input
<INPUT
type="submit"
name="name"
value="buttonLabel"
>
8 Possible Values for the "type" Attribute of <INPUT> tag
text
password
hidden
checkbox
radio
file
reset
submit
15.9 Multi-Line Text Input Area
<TEXTAREA
name="areaName"
cols="width"
rows="lines"
>
initial default value
</TEXTAREA>
15.10 Select from a (Drop Down) List
<SELECT
name="name"
size="numberOfDisplayedChoices"
multiple
>
<OPTION value="value1"> text1
<OPTION value="value2" selected> text2
<OPTION value="value3"> text2
...
...
</SELECT>
85
img
Introduction to Computing ­ CS101
VU
End of the Review of Tags Used in Forms
Now let's take a look at a form that we constructed last time, and see how we can make it better
86
img
Introduction to Computing ­ CS101
VU
Let's now review what happens when I enter all the required info and press the "Send eMail" button?
Info contained
in the form
Browser
Server-Side
Script
User's
Acknowledgement
Computer
Web
Server
Message
to the
receiver's
eMail
address
This is what happens when the form is filled correctly. What if the form is filled incorrectly?
What if the users leaves one of the essential fields, blank?
What if the user enters an illegal eMail address? Examples:
altaf2vu.edu.pk
bhola@hotmail.con
bhola@yahoo
A Reasonable Scenario
When the "Send eMail" button is clicked, the browser sends the data collected through the form to a
script running on the Web server
That server-side script:
receives that data
analyzes it
discovers the missing or incorrect data
sends a message back to the user's browser stating the problem and asks the user to re-send
This process ...
That is the process of user:
Filling the incomplete/incorrect data
Sending it to the server
Receiving the response back from the server
Correcting and resending
is quite time-consuming and uses the server's resources to help the user correct his mistakes
It can really bog down the server if a large number of users are using that Web server
15.11 Client-Side Scripting is a viable alternate
In this technique, one uses the user's browser to checking the form data
If data is missing or is incorrect, the browser can prompt the user to take corrective action
This way, the form data is sent to the server-side script only after it has been established that the
collected data is complete and correct
15.12 Server-Side Scripts: Review
Are programs that reside on Web servers
Receive info that a user enters in a form
Process that info and take appropriate action
Examples:
CGI scripts on Unix servers
ASP scripts on Windows servers
87
img
Introduction to Computing ­ CS101
VU
New Concept: Client-Side Scripts
Small programs that are a part of the Web page and run on the user's (client's) computer
They interact with the user to collect info or to accomplish other tasks
Once it has been collected, they may help pass the collected info on to a server-side script
We'll use JavaScript to do client-side scripting. However, there are many other languages that can be
used for that purpose, e.g. VBScript
Advantages of Client-Side Scripting
Reduced server load as it does not have to send messages to the user's browser about missing or
incorrect data
Reduced network traffic as the form's data is sent only once instead of many to's and fro's
Disadvantages
Client-side scripts do not work with all browsers
Some user intentionally turn scripting off on their browsers
This increases the complexity of the Web page, as it now has to support both situations: browsers with
scripting capability, and those not having that capability
<INPUT
type="submit"
name="sendEmail"
value="Send eMail"
>
Code for the simple "Send eMail"
button as was described during
the last Web development lecture
88
img
Introduction to Computing ­ CS101
VU
<INPUT
type="submit"
name="sendEmail"
value="Send eMail"
onMouseOver=
"if (document.sendEmail.sender.value.length< 1)
window.alert(`Empty From field! Please
correct')"
>
Additional JavaScript code for the smart
"Send eMail" button that would not allow itself
to be clicked if the "From" text field is left
<INPUT
Event
type="submit"
Handler
name="sendEmail"
value="Send eMail"
onMouseOver =
"if (document.sendEmail.sender.value.length < 1)
window.alert(`Empty From field! Please correct')"
>
This is one way of including JavaScript code in an HTML document ­ that is, including a short
JavaScript segment as part of an HTML tag
There are a few others as well. Let's now find out about another.
But before we do that ...
... let's just make clear why we are interested in including JavaScript in our Web pages
15.13 Why JavaScript?
HTML is great for static Web pages; however, supports only rudimentary interactivity through forms
and hyperlinks
JavaScript can be used (along with HTML) to develop interactive content for the Web
What is JavaScript?
A programming language specifically designed to work with Web browsers
It is designed to be used for developing small programs ­ called scripts ­ that can be embedded in
HTML Web pages
JavaScript:
Is an interpreted language
Supports event-driven programming
Is object-based
Object Based?
Everything that JavaScript manipulates, it treats as an object ­ e.g. a window or a button
An object has properties ­ e.g. a window has size, position, status, etc.
Properties are modified with methods ­ e.g. a resize a window with resizeTo(150, 200)
89
img
Introduction to Computing ­ CS101
VU
<INPUT
type="submit"
name="sendEmail"
value="Send eMail"
onMouseOver=
"if (document.sendEmail.sender.value.length < 1)
window.alert(`Empty From field! Please correct')"
>
<INPUT
type="submit"
name="sendEmail"
value="Send eMail"
onMouseOver="checkForm()"
>
<INPUT
type="submit"
name="sendEmail"
value="Send eMail"
onMouseOver=
"if (document.sendEmail.sender.value.length < 1)
window.alert(`Empty From field! Please correct')"
>
checkForm()
JavaScript understands onMouseOver ­ it is one of the pre-defined keywords in JavaScript
However, the case for checkForm() is different
A checkForm() function does not exist in JavaScript. Therefore, we will have to define it ourselves
It can either be defined in the HEAD portion or BODY portion. We will do it in the HEAD.
90
img
Introduction to Computing ­ CS101
VU
<HTML>
<HEAD>
<TITLE>Send an eMail</TITLE>
<SCRIPT>
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( "Empty From field! Please correct" );
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFCC">
JavaScript code
... body content ...
enclosed in the new
</BODY>
<SCRIPT>,</SCRIPT
</HTML>
> HTML tags
We have looked at 2 techniques for embedding JavaScript code in a Web page:
1. Put the code in the tag for the "Send eMail" button - as was shown to you earlier
2. Put the checkForm() code in the HEAD portion & put the onMouseOver="checkForm()" attribute in
the tag for the "Send eMail" button
Both perform the required function satisfactorily.
Q: Which of two techniques is better?
The "put all code in the tag" technique seems to require less code
For very short scripts, "all code in the tag" works well. However, this technique does not work when
one needs to put multiple script statements in the same tag
The "code in the HEAD portion" is more general-purpose, and the right choice for developing larger
JavaScript scripts
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( "Empty From field! Please correct" );
}
}
The JavaScript code included as an attribute of the "Send eMail" button:
onMouseOver="checkForm()"
Today we checked if the "From" field of the form was empty
How can we modify the JavaScript code for checking if the "To" field is empty as well?
How about checking all four fields?
How about checking if the addresses given in the "From" and "To" fields are legal eMail addresses?
Please try thinking about those possibilities?
In Today's Lesson ...
We learnt ways of constructing forms that were a bit more interactive
We got our first taste of JavaScript ­ the object-based language that we will be employing throughout
the rest of the Web development part of this course
Last time we mentioned server-side scripts; today we wrote (simple) client-side scripts in JavaScript
Next (the 6th) Web Dev Lecture:
JavaScript Object, Properties, Methods
We will have a more formal introduction to JavaScript and client-side scripting
We will become able to appreciate the concept of objects in JavaScript
We will learn about the properties of those objects
We will become able to perform simple tasks through the application of methods
91
Table of Contents:
  1. INTRODUCTION
  2. EVOLUTION OF COMPUTING
  3. World Wide Web, Web’s structure, genesis, its evolution
  4. Types of Computers, Components, Parts of Computers
  5. List of Parts of Computers
  6. Develop your Personal Web Page: HTML
  7. Microprocessor, Bus interface unit, Data & instruction cache memory, ALU
  8. Number systems, binary numbers, NOT, AND, OR and XOR logic operations
  9. structure of HTML tags, types of lists in web development
  10. COMPUTER SOFTWARE: Operating Systems, Device Drivers, Trialware
  11. Operating System: functions, components, types of operating systems
  12. Forms on Web pages, Components of Forms, building interactive Forms
  13. APPLICATION SOFTWARE: Scientific, engineering, graphics, Business, Productivity, Entertainment, Educational Software
  14. WORD PROCESSING: Common functions of word processors, desktop publishing
  15. Interactivity to Forms, JavaScript, server-side scripts
  16. ALGORITHMS
  17. ALGORITHMS: Pseudo code, Flowcharts
  18. JavaScript and client-side scripting, objects in JavaScript
  19. Low, High-Level, interpreted, compiled, structured & object-oriented programming languages
  20. Software Design and Development Methodologies
  21. DATA TYPES & OPERATORS
  22. SPREADSHEETS
  23. FLOW CONTROL & LOOPS
  24. DESIGN HEURISTICS. Rule of thumb learned through trial & error
  25. WEB DESIGN FOR USABILITY
  26. ARRAYS
  27. COMPUTER NETWORKS: types of networks, networking topologies and protocols
  28. THE INTERNET
  29. Variables: Local and Global Variables
  30. Internet Services: FTP, Telnet, Web, eMail, Instant messaging, VoIP
  31. DEVELOPING PRESENTATIONS: Effective Multimedia Presentations
  32. Event Handlers
  33. GRAPHICS & ANIMATION
  34. INTELLIGENT SYSTEMS: techniques for designing Artificial Intelligent Systems
  35. Mathematical Functions in JavaScript
  36. DATA MANAGEMENT
  37. DATABASE SOFTWARE: Data Security, Data Integrity, Integrity, Accessibility, DBMS
  38. String Manipulations:
  39. CYBER CRIME
  40. Social Implications of Computing
  41. IMAGES & ANIMATION
  42. THE COMPUTING PROFESSION
  43. THE FUTURE OF COMPUTING
  44. PROGRAMMING METHODOLOGY
  45. REVIEW & WRAP-UP of Introduction to Computing