Embed Size (px)
Citation preview
Client-side Techniques
2
Client-side Techniques Static web pages, Interactive web page: without depending
on interaction with a server HTML/XHTML: content Cascading Style Sheet (CSS): style and layout Script language: (JavaScript) control HTML
elements
3
http://www.eie.polyu.edu.hk/~nflaw/index.htmlRequest string:
GET /~nflaw/index.html HTTP/1.1Host: www.eie.polyu.edu.hk
Response string:HTTP/1.1 200 OK Server: Apache/1.3.20 Content-type: text/html Content-length: 88<html><head> <title>Test Page</title></head> <body><h1>It Worked!</h1> </body></html>
4
HTML/XHTML
5
HTML HyperText Mark-up Language
Basic language for WWW documents Format a web page’s look, position graphics and
multimedia elements Describe document structure and formatting
Platform independent: High-level language, No machine code
HTML is rendered to a graphic format by the browser markup tags
suggests the Web browser how to display the page
6
HTML 1995: HTML 2.0: simple 1997: HTML 3.2: Standardized by the World Wide Web
Consortium (W3C) Proprietory tags
1999: HTML 4.01, A clean up of 4.0 3 variations: strict, transitional, frameset
2000: XHTML 1.0 (x: extensible) Reformation of HTML 4.01 using XML, strict syntax No new elements/attributes, difference: syntax
2001: XHTML 1.1: drop frames XHTML 2.0: idea: not backward compatible , abandoned HTML 5, 2008
HTML5: design principles Compatibility
Backward compatible Utility
Render correctly: id=“myname”, id=Myname, ID=“myname”
Interoperability Simplify syntax, e.g., DOCTYPE definition Precise specification: well-defined behaviours
Aim: browser interoperability7
HTML5: design principles
Universal access Support users with disabilities Html5 work across all devices and platforms
Reduce the need for external plugins More markup to replace scripting Device independent (PC, iPhone, Android)
8
9
Basic Structure of HTML5
<!DOCTYPE html><html><!-- This is comment --><head>
<title> This is title, describing the content </title></head><body>
This is body, main part of the page</body>
</html>
Specifies html version browser renders it properly
10
HTML – tree structure Indentation <!DOCTYPE html>
<html><head>
<title> My title </title></head><body>
<h1> My header </h1><a href=“”> My link </a>
</body></html>
11
HTML Syntax HTML: consists of a tree of HTML elements
Each element begins with a start tag, ends with an end tag
An element can define attributes within its start tag
12
HTML Information is generally enclosed inside
paired tags Like <tag> information </tag>
Example: Paragraph tag: <p> and </p>
Tells browser this is a paragraph, and the presentation is left to the browser to determine
Line break: <br /> Marks a line break within phrasing content
Commonly used tags Less than 50 tags Practice!!
13
HTML 5
Browser compatibility www.findmebyip.com
14
www.caniuse.com
15
div Separate semantics (meaning and
structure) from presentation (formatting)
Div: used to identify different parts of a document for different formatting
HTML: new elements to replace typical divs
16
Example of a document structure
17
<header>
<nav>
<article>
<section><aside>
<footer>
Example of a document structure
18
HTML5 Structure <section>: logical division of the
document <article>: purpose: identify portions
of the document that you want to be independent and distributable from the rest of the document
<aside>: sidebar discussion <header>: section header <nav>: navigational aids 19
HTML 5 Forms
20
Syntax
Fieldset: group related elements in a form (draws a box around those elements)
Legend: create a text label within fieldset Basic structure
<form id=“myForm”><fieldset><legend> Caption for the fieldset </legend><label for=“fn”> First Name </label><input id=“fn” name=“fn” type=“text” />
</fieldset> </form> 21
Syntax
The form tag attributes Action
Specifies the server-side program or script that will process the form data
<form action=“http://www.../formprocess.php”> Method
Get post
id (or name) Identifies the form
22
Input
<input type=“text” id=“firstName”placeholder=“input your first name” /> Placeholder: Show when the user has not yet entered
any values <input type=“password” id=“pwd” /> <input type=“checkbox” id=“browser”> <input type=“radio” name=“browser”>
Same name: <input … value=“IE”/> Internet Explorer <br /> <input … value=“FF”/> Firefox <br />
23
Input
<select id=“browser” ><option value=“IE”> Internet Explorer </option><option value=“FF”> Firefox </option>
<select> <input type=“submit” value=“Submit” /> <input type=“reset” value=“Clear” /> <input type=“button” value=“click” />
No default action, associate with a JavaScript function
24
Email & URL
<input type=“email” /> Validate user’s input
Changes from browser to browser Opera: needs to have “@” only Firefox: “(x)@(x).(x)” Mobile device: on-screen keyboard
<input type=“url” />
25
Numbers
Traditional way: combo box Spinner control for numbers
<input id="age" name="age" type="number" min="10" max="90" step="1" value="10" />
26Firefox Opera
Slider
<label for="aNo"> Choose a number </label><input id="aNo" name="aNo" type="range"
min="10" max="90" step="1" value="50" onchange="yNo.value=this.value" />
<output name="yNo"> 50 </output>
27Opera
Firefox Auto complete system
<datalist>: choose from the predefined options or type sth else in the text box
28
Mandatory fields
Keyword: required <input type=“text” required /> <input type=“email” required
placeholder=“Insert your email” /> Email must be entered before the form
can be submitted
29
Regular expressions
Regular expressions: Specify a pattern for matching strings
of text E.g., phone number: 8 digits: ^\d{8}$ <input type=“text” name=“phoneNo”
required pattern=“^\d{8}$” />
30
Date and Time
<input type=“date” /> <input type=“time” /> <input type=“datetime” /> <input type=“month” /> <input type=“week” />
31 32
Cascading Style Sheet
33
http://www.eie.polyu.edu.hk/~nflaw/Biclustering/index.htmlRequest string:
GET /~nflaw/Biclustering/index.html HTTP/1.1Host: www.eie.polyu.edu.hk
Response string:HTTP/1.1 200 OK Server: Apache/1.3.20 Content-type: text/html <html><head> <title>Main Page</title><style type=“text/css”>
h1 {font-size: 20pt}p {text-indent: 1cm}
</style></head> <body>….. </body></html>
Styles? Styles as Tag Attributes Attributes such as bgcolor
<body bgcolor=“red”> … Mix content and presentation Difficult to manage / inconsistent
CSS: separate data and presentation CSS 2.1 (June 2011) CSS 3
34
Syntax
STYLE = SELECTOR {RULES} Selector: HTML elements Rule: how the style changes
RULES = NAME:VALUE; NAME:VALUE; … Example:
p {color: white;background-color: blue;
} 35
Style Attribute Inline style:
Style = “CSS Style rule” <p style=“color:white;
background-color: blue”>A paragraph </p>
“local” effect Apply to that <p> only, not other <p> tags
36
Embedded Style Sheet Define in the head section using the
style element Consistent styling throughout the doc
Example:<head> <title> example </title>
<style type=“text/css”p { color: white;
background-color:blue}</style> </head> 37
External Style Sheet Contain styles in another file (*.css)
Separate content from presentation Consistent style for all pages in a web site
Place a link in the head section <link rel=“stylesheet” href=“sample.css” />
38
39
<head>...<link rel="stylesheet" type="text/css" href="myStyles.css" /><style type="text/css">body {
font-family: Tahoma, Arial, sans-serif;...
}</style>
</head><body>...<div style="padding:2px; ... ">...
</body>
Separate Stylesheet
Page-Specific Styles
Element-Specific Styles
“Cascade” Most specific elements most
precedence Order:
Inline, embedded, external <td style = "background-color: green">
<p style = "background-color: red"> Hello, World</p></td>will display with red background color
40Ref - CSS
“Cascade”
41
From Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton. http://webstyleguide.com/wsg3/index.html 42
Client-side Techniques
JavaScript
43
JavaScript Sent to the browser as code and interpreted by the
browser (browser dependent) An interpreted language
No need to compile Codes are embedded onto the html
Within <head> (script runs before body is loaded) Within <body> (script runs as body is being loaded) <script type=“text/javascript”> … </script>
No need to declare the variable type var x, y; x can be integer, floating-point number, string, ...
Case sensitive
44
Window object Access through JavaScript
window.alert(message); window.alert(“Error”);
window.open(url); window.open(“http://www.eie.polyu.edu.hk”);
value = window.prompt(message, defaultValue); window.prompt(“Enter your student number:”, 1111); User presses ok, value=inputValue User presses cancel, value is null
value = window.confirm(message); window.confirm(“Are you sure to delete?”); Value is true if press OK, false if press cancel
45
Conditionals if (conditional) {
} else { } while (control_expression) { } for (init; control; increment/decrement)
{ } do {statement...}
while (control_expression);
46
DOM (document object model) Tree-like document representation
E.g. document object All elements in the document are under this
tree Represented in an object hierarchy
Examples document.all[i]: list out all elements document.myform: form with name
“myform”
47
Example<html>
<head> <title> Example </title> </head><body>
<script type=“text/javascript”>document.writeln(‘<h1> Hello world!</h1>’);document.writeln(‘<p> This is …</p>’);
</script></body>
</html>
48
Before/after <script> executes
<script> tags are interpreted as the page loads
49document.getElementById(‘myform1’).firstName.value
50
Element Access in JavaScript DOM address
document.forms[0].elements[0] <form action=“”>
<input type=“text” /></form>
Element names: name attribute document.myForm.myinput1 <form name=“myForm” action=“”>
<input type=“text” name=“myinput1” /></form>
51
Element Access in JavaScript
getElementById method (DOM 1) document.getElementById(“myinput1”) <form action=“”>
<input type=“text” id=“myinput1” /></form>
52
JavaScript Function Head section
<script type=“text/javascript”>function f(x) {
y = x*x;w = “Square of” + x + “ is” + y;return w; }
</script> Body:
<script type=“text/javascript”>data = f(4);document.write(data);
</script>
Event-driven programming Code is executed by user interactions
Detect certain activities of the browser/user
Event: Notification that sth has occurred, e.g.,
mouse clicking Event handler: script executed on an
event
53 54
Event Model Event: Something that triggers (calls
or starts) one of your functions
clicks on an objectdouble-clicks on an objectMakes an object activeIE: page is finished loadingA cursor movesA form is submitted
onclickondblclickonfocusonloadonmousemoveonsubmit
55
Flow Chart Web page defines event handlers Event occurs
Event object generated Event handler runs
Example: <p …onclick=“calltoFunction(event);”> … <script type=“text/javascript”>
function calltoFunction(e) { …} </script>
Event handler
Event object
56
Handling events <input type = “button” name = “freeOffer”
id = “freeButton” />
2 approaches: <input type = “button” name = “freeOffer” id =
“freeButton” onclick = “freeButtonHandler();” /> document.getElementById(“freeButton”).onclick =
freeButtonHandler;
57
Example 2: DOM + CSS body.style.backgroundColor
CSS: background-color: #FFFF00
58
Example 3: DOM + CSS
59
Two different styles
Separate: Content(Html) Presentation(css) Behavior (JS)
60
61
Form Validation
Regular Expression
62
Usage Common types of validation:
Ensuring users are satisfied with the data they enter
Ensuring that mandatory fields have been completed
In a specified format Phone no: Area code + no
2 types: Field level validation Form level validation
63
Field level validation
function isNumeric(e) {…
}
…Enter number: <input type=“text” id=“noStudyHr”
onblur=“isNumeric(this)” />
64
Form level validationfunction check(f){
var t = isNumeric(f.noStudyHr); if (t) return true;else return false;
}function isNumeric(e) { …}
<form …onsubmit=“return check(this)”>Enter number: <input type=“text” id=“noStudyHr” /><input type=“submit” value=“submit” />
</form>
65
Regular Expression Object that describes a pattern of
characters Used for pattern matching, search and
replace operations Define regular expressions:
var pattern = /s/ var pattern = new RegExp(“s”)
66
Regular Expressionfunction check(){
var regexp=/s/ ;if (myform.myinput.value.match(regexp))
alert("Your input is " + myform.myinput.value);else
alert("Invalid");
}
67
Syntax Character Classes:
[…]: any one character between the brackets [1-5]: matches “1”, “3”, but not “a”
[^…]: any one character not between the brackets [^1-5]:
\d: equivalent to [0-9] \D: equivalent to [^0-9]
matches “a” but not “1”, “3”
68
Syntax Character Classes:
.: any character except newline \w: equivalent to [a-zA-Z0-9] \W: equivalent to [^a-zA-Z0-9]
Match position: ^: match the beginning of the string
^JavaScript “JavaScript Programming” “What is JavaScript”
$: match the end of the string JavaScript$
“I love JavaScript” “JavaScript is great”
69
Regular Expression Repetition:
{n,m}: match the previous item at least n times but no more than m times
{n,}: match the previous item n or more times {n}: match exactly n occurrences of the
previous item Example :
2 digits only: / ^\d{2}$ /
2 or more digits / ^\d{2,}$ /
70
Regular Expression Others:
(…): grouping (12)+34
1234 121234 12134
|: alternation. Match either the subexpression to the left or the subexpression to the right (12|34)+
71
Regular Expression g: search for all matches i: ignore case match()
Takes a regular expression as a parameter and returns an array of all the matching strings found
Example “test1 Test2 TEST3” /Test[0-9]+/ /Test[0-9]+/i / Test[0-9]+/gi
72
Exercise Check for an input consisting of
numeric numbers only Code
Check for a required field Check for the following format:
2 digits – 2 digits – 4 digits
73
Summary HTML/XHTML: content Cascading Style Sheet (CSS): style and
layout Script language: (JavaScript) control
HTML elements Regular expression
74
jQuery
75
Introduction
jQuery: widely used JavaScript library Purposes:
Separate JavaScript code (behaviour) from HTML documents (content)
Simplify task of writing JavaScript and in particular AJAX applications
Reduce amount of data to be transferred Smaller file size quicker page loading
76
Source Download jQuery
http://docs.jquery.com/Downloading_jQuery <script src=“jquery-xxx.js”
type=“text/javascript”></script> CDN (Content Delivery Network)
System of computers with copy of data When client requests data, closest machine is used May have already cached jQuery file <script
src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” type="text/javascript"></script>
77
Basic Syntax $(selector).action()
$(): jQuery function selector: HTML element to “query” action: what kind of action to perform Example:
$(“h1”): Select all <h1> elements $(“h1 h2 p”): Select all <h1>, <h2> and <p> elements $(“p.fname”): Select all <p> elements with
class=“fname”
78
Events
jQuery methods are called when an event is triggered
Basic syntax: $(selector).eventMethod(eventHandler(eventObj)) $(selector).eventMethod(function(eventObj) {
// your code here})
Examples: $(document).ready(function(){...}) $(document).click(function(){...})
79
jQuery Document Ready $(document).ready(function())
Prevent jQuery code from running before the HTML document has been loaded
Example<script type=“text/javascript”>
$(document).ready(function() {alert(“Displayed when page loaded”);
});</script>
80
Click Event Method $(selector).click(): Execute the handler
function when the target element is clicked Example
A listener for the event “click” is added for each <p> after the document has been loaded
81
Other Event Methods
dblclick(): Target element is double-clicked change(): Target element (form field) is
changed, .e.g. select menu has an option selected or text field/text area loses focus
blur(): Target field loses focus focus(): Target field is focused submit(): A form (<form> element) is submitted
