Client-Side Development I

Client-Side Development
By: Joel Sklar

Revised By: Saja Al-Mamoori
Revised By: Abed Alkhateeb
Introduction
remember:
1. HTML to define the content of web pages.
2. CSS to specify the layout (appearance) of
web pages.
3. JavaScript to program the behavior of web
pages.
2
Understanding How Forms Work
• Forms let you build interactive web pages that
collect information from a user and process it
on the web server
• The HTML form is the interface for the user to
enter data
• The user enters data via an HTML form
• The data-processing software (on server) can
then work with the data and send a response
back to the user
3
4
Using the <form> element
• The <form> element is the container for creating a
form
• A variety of attributes describe how the form data
will be processed
5
6
Using the <form> element
• The following code shows a typical <form>

element:
<form method="post"
action="https://signup.website.com/register.asp">
7
Using get or post
• The difference between get and post is the
way the data is sent to the server
• method=“get”: this method sends the form
information by including it in the URL
• method=“post”: this method sends the form
information securely to the server within the
message body
8
Using the mailto Action
• Lets you collect data from a form and send it
to any e-mail address
<form action="mailto:joel@joelsklar.com"
method="post" enctype="text/plain">
9
Using the mailto Action
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:joel@joelsklar.com "
method="post" enctype="text/plain">
<input type="text" name="Subject"
value="Subject">
<p>Briefly tell us your favorite fish
story:</p>
<p>
<textarea name="fishstory" rows="5"
cols="30"> Enter your story here...
</textarea>
</p>
<input value="Submit" type="submit">
</form>
</body> https://www.w3schools.com/code/tryit.asp?filename=FFRLH7QHYJYM
</html>
10
Creating Input Objects
• The <input> element defines many of the form

input object types
• The type attribute specifies the type of input
object
• Required attribute makes the element mandatory
to be filled before submitting the form.
11
12
13
Labeling Form Elements
• The <label> element lets you create a caption for
an input element
• Lets you extend the clickable area of a form
element
• Required, usually first name is mandatory.
<p>
<label class="username" >First Name:</label>
<input type="text“ required name="firstname"
size="35" maxlength="35" />
</p>
14
Labeling Form Elements
• To make the text clickable, you associate the
<label> element with the <input> element by
using the for and id attributes
<p>
<label class="username" for="First Name">
First Name:</label>
<input type="text" required name="firstname"
id="First Name"
size="35" maxlength="35" />
</p>
15
Creating Text Boxes
• The text box is the most commonly used form

element
<input type="text" name="firstname"

size="20" maxlength="35" value="First
Name">
16
17
Creating Check Boxes
• Check boxes are an on/off toggle that the user can

select
<input type="checkbox" name="species"

value="smbass"> Smallmouth Bass
18
19
Creating Radio Buttons
• Radio buttons are like check boxes, but only one
selection is allowed
<p>Would you like to be on our mailing list?</p>

<p><input type="radio" name="list" value="yes"
id="Yes" />
<label for="Yes">Yes</label>
<input type="radio" name="list" value="no"
id="No" />
<label for="No">No</label>
• </p>
20
21
Creating Submit & Reset Buttons
• The submit and reset buttons let the user choose
whether to send the form data or start over
<input type="submit" value="Submit your

answers">
<input type="reset" value="Clear the
form">
https://www.w3schools.com/code/tryit.asp
?filename=FFRLKFT9T7HP
22
23
Creating an Image for the
Submit Button
• You can choose an image file and use it instead of
the default submit button
<input type="image" src="submit.gif"

alt="submit button">
24
25
Letting the User Submit a File
• Users can select a file on Your own computer and

send it to the server
<p>Use the browse button to select your

file:</p>
<p><input type="file" size="30“></p>
26
27
Creating a Password Entry Field
• The password input box works like the text input,

but the entered text is hidden by asterisks
<p>Enter your user name and password:</p>

<p>
User Name: <input type="text" size="30" />
Password: <input type="password" size="30" />
</p>
28
29
Creating a Password Entry Field
• The password input box works like the text input,

but the entered text is hidden by asterisks
<p>Enter your user name and password:</p>

<p>
User Name: <input type="text" size="30" />
Password: <input type="password" size="30" />
</p>
30
31
Using the <select> Element
• The <select> element lets you create a list box or
scrollable list of selectable options
<select name="boats">
<option>Canoe</option>
<option>Jon Boat</option>
<option>Kayak</option>
<option>Bass Boat</option>
<option>Family Boat</option>
</select>
32
33
• You can choose to let the user pick multiple values
from the list by adding the multiple attribute
<select name="snacks" multiple size="6">

<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
<option>Nachos</option>
<option>Pizza</option>
<option>Fries</option>
</select>
34
35
• You group and label sets of list options with the
<optgroup> element and label attribute
<optgroup label="Salty Snacks">
<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
</optgroup>
36
37
Using the <textarea> Element
• The <textarea> element lets you create a larger
text area for user input
<p><b>Briefly tell us your favorite fish
story:</b><br>
<textarea name="fishstory" rows="5"
cols="30">
Enter your story here...
</textarea>
</p>
38
39
40
HTML Event Attributes
• HTML 4 added the ability to let events trigger
actions in a browser
• like starting a JavaScript when a user clicks on
an element.
41
Forms Events
~http://www.w3schools.com/tags/ref_eventattributes.asp
42
Keyboard Events
43
Mouse Events
44
By: Abed Alkhateeb
45
JavaScript
• The scripting language most often used with
HTML forms ( in an event attribute).
• Created by Netscape browser in 1995.
• A client-side scripting language.
• it is usually written in the <script> </script>
46
JavaScript
• It is highly recommended to package the
functions with similar business in the same
file. E.g. hr.js, payrole.js, validation.js
• It is better to have all the JavaScript file in one
folder named JavaScript or JS.
• This way JS files can be re-usable and easier to
maintain in case of business updates/changes.
47
JavaScript can change HTML
• JavaScript can change the content of HTML
elements
• document.getElementById('SomeElementID').value
• document.getElementById('someimgElement').src
• We will see in the following examples
48
Addition X + Y - HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body> Comment in HTML 

<input type="text" id="xval">
<input type="text" id="yval">
<input type="text" id="result">
</body>
</html>
49
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!– Add Labels-->
<label for="xval"> Input X</label> <input type="text" id="xval">
<label for="yval"> Input Y</label><input type="text" id="yval">
<label for="result"> Result</label><input type="text" id="result">
</body>
</html>
50
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<!– Add Labels-->
</body>
</html>
51
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!– Add Labels-->
<button> Add </button> 
</body>
</html>
52
Addition X + Y - JavaScript
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!– Add Labels-->
<button onclick=" addValues()"> Add </button> 
</body>
</html>
53
<!DOCTYPE html>
<html>
<head>
<script> Comment in JavaScript
//implementing function addValues()
function addValues(){
}
</script>
</head>
<body>
….
</body>
</html>
54
<!DOCTYPE html>
<html>
<head>
<script>
var x; // declare variable x to hold the value of xval text box
var y; // declare variable y to hold the value of yval text box
}
</script>
</head>
<body>
….
</body>
</html>
55
<!DOCTYPE html>
<html>
<head>
<script>
<script>
// implementing function addValues()
var x = document.getElementById('xval').value; // to get the value from xval text box
var y =document.getElementById('yval').value; // to get the value from yval text box
}
</script> </head>
<body>
….
56
<!DOCTYPE html>
<html>
<head>
<script>
<script>
var y = document.getElementById('yval').value; // to get the value from yval text box
var result = x + y; // declare result variable to do x + y
}
</script> </head>
<body>
….
57
<!DOCTYPE html> Oo, it is working But..
<html> If you input 5 for x, 6 for y
<head> result 56
<title>Addition</title> It is concatenating, Not Adding
<script>
var result = x + y; // declare result variable to do x + y
document.getElementById('result').value= result;// we assign result into result textbox
}
</script> </head>
….
58
<!DOCTYPE html>
<html> To solve the concatenation
<head> problem we need to convert the
<title>Addition</title> value of x and y from string to
<script> integer, to do so we use parseInt()
var result = parseInt(x) + parseInt(y); // declare result variable to do x + y
document.getElementById('result').value= result;// we assign result into result textbox
}
</script> </head>
The full code http://www.w3schools.com/code/tryit.asp?filename=FC13556SU4OY
59
Calling JavaScript
• Calling JavaScript code direct within html events. ( not
recommended for readability and re-usability) (inline)
<button onclick="alert('Hello world')">Say Hello</button>
Try it
http://www.w3schools.com/code/tryit.asp?filename=FBZXG
ET5TY4O
• JavaScript code ( functions) can be written:
1. (internally in the HTML file, within the <script> </script >
see lightbulb example.
2. in separate file but refer it within the <script> ..</script>
tag. See Sayhi example.
60
Lightbulb Example
<!DOCTYPE html>
<html>
<head>
<script> // start the JavaScript code
function switchlight(flag) // No porotype for parameters
{
if (flag=='on')
document.getElementById('myImage').src='pic_bulbon.gif'
else
document.getElementById('myImage').src='pic_bulboff.gif'
} //end of JavaScript
</script>
</head>
<body> Event
<h1>What Can JavaScript Do?</h1>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</p>
<button onclick="switchlight('on')">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="switchlight('off')">Turn off the light</button> To try the code, copy&paste it @
</body>
</html>
http://www.w3schools.com/js/tryit.asp?file
Calling JS name=tryjs_intro_lightbulb
function
61
Sayhi
1. Create a file and name it 2. In the same folder, Create a
sayhi.html with the following: file and name it sayhi.js with
<!DOCTYPE html> the following:
<html> Refer to the separate js
function sayhi()
<head> file {
<script src ="sayhi.js"> alert(" Hi");
</script> }
</head> 3. Run the Sayhi.html in any
<body> browser.
<button onclick="sayhi()"> * You can use notepad to
Say Hi </button> create the 2 files,e.g. saveas
</body> name: Sayhi.html, save type
as: all files
62
Boolean JavaScript datatype
• Number data type can have any number
• Boolean data type can only have 2 values
– True
– False
• var rain = true;
var sunny = false;
• Functions can return any data type, boolean
is not any exception.
63
Comparisons returns boolean
• Comparisons returns true when the comparison
is true, otherwise it returns false
• Assume the value of x = 5
• X==5 returns true //== means “is it equal?”
• X==8 returns false
• X!=8 returns true //!= means “is it not equal?”
• For full comparison and logical operators:
• http://www.w3schools.com/js/js_comparisons.as
p
64
JavaScript Conditional Statements
• If statement has the following syntax
• Condition = comparison
• if (condition) {
block of code to be executed if the condition is true
}
• Example
• if (hour < 18) {
greeting = "Good day";
}
http://www.w3schools.com/js/tryit.asp?filename=tryjs
_ifthen
65
• If else statement has the following syntax
• if (condition is true) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
• if (hour < 18) {
} else {
greeting = "Good evening";
}
http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifth
enelse
66
• If – if else - else statement has the following syntax
• if (condition1 is true) {
block of code to be executed if condition1 is true, then skip the rest
} else if (condition2 is true) {
block of code to be executed if the condition1 is false and condition2 is
true, then skip the else part
} else {
block of code to be executed if the condition1 is false and condition2 is
false
}
• if (time < 10) { //from 0 to 9:59
greeting = "Good morning";
} else if (time < 20) { //from 10 to 19:59
} else { //from 20-24
greeting = "Good evening";
} http://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif
67
Application: detecting device type
• According to http://mydevice.io/devices/ the
widest phone screen is Blackberry passport
with 504, while widest tablet is Microsoft
Surface Pro 3 with 1025 css width. Wider than
that most likely to be a laptop or desktop.
• check your device’s screen width:
alert(screen.width);
• http://www.w3schools.com/code/tryit.asp?fil
ename=FC818BZ4APBW
68
• for this example , we will implement the
following scenario.
• var screenwidth = screen.width
• If screenwidth<505, it must be a cellphone
• Elseif screenwidth is between 505 and 1024,
then it must be a tablet.
• Else it is Desktop r laptop
69
var screenwidth=screen.width;
if (screenwidth < 505)
{
alert("cellphone");
}
else if (screenwidth < 1024)
{
alert("tablet");
}
else
{
alert("laptop/desktop");
}
Full code:
http://www.w3schools.com/code/tryit.asp?filename=FC81TMVKZFHL
70
Examples
• Changing CSS class using JavaScript
http://www.w3schools.com/jquery/tryit.asp?file
name=tryjquery_dom_addclass
• Change HTML attributes using JavaScript
• http://www.w3schools.com/js/tryit.asp?filena
me=try_dom_option_settext
• http://www.w3schools.com/code/tryit.asp?fil
ename=FBOW1A618CLU
71
References
• Principles of Web Design, 6th Edition, by
Joel Sklar - Ch. 11. N.p., n.d. Web. 28 Dec.
2016 .
• Learning PHP, MySQL & JavaScript, 4th Edition.
With jQuery, CSS & HTML5, by Robin Nixon,
O'Reilly Media, 2014, 978-1-4919-1866-1
• http://www.w3schools.com
• https://www.tutorialspoint.com/javascript/
• http://mydevice.io/devices/
72
Powered by TCPDF (www.tcpdf.org)

Client-Side Development I

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Client-Side Development I

Uploaded by

Copyright:

Available Formats

Client-Side Development

By: Joel Sklar

• The following code shows a typical <form>

• The <input> element defines many of the form

• The text box is the most commonly used form

<input type="text" name="firstname"

• Check boxes are an on/off toggle that the user can

<input type="checkbox" name="species"

<p>Would you like to be on our mailing list?</p>

<input type="submit" value="Submit your

<input type="image" src="submit.gif"

• Users can select a file on Your own computer and

<p>Use the browse button to select your

• The password input box works like the text input,

<p>Enter your user name and password:</p>

• The password input box works like the text input,

<p>Enter your user name and password:</p>

<select name="snacks" multiple size="6">

Powered by TCPDF (www.tcpdf.org)

You might also like