Client-side Techniques. Client-side Techniques HTML/XHTML. Static web pages, Interactive web page: without depending on interaction with a server

Size: px

Start display at page:

Download "Client-side Techniques. Client-side Techniques HTML/XHTML. Static web pages, Interactive web page: without depending on interaction with a server"

Cynthia Lee
6 years ago
Views:

Client-side Techniques 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

1 Client-side Techniques 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 2 Request string: GET /~nflaw/index.html HTTP/1.1 Host: HTML/XHTML Response string: HTTP/ OK Server: Apache/ Content-type: text/html Content-length: 88 <html><head> <title>test Page</title> </head> <body><h1>it Worked!</h1> </body></html> 3 4

2 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 5 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 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, 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 interoperability 7 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

3 Basic Structure of HTML5 <!DOCTYPE html> <html>  <head> <title> </head> <body> </body> </html> Specifies html version browser renders it properly This is title, describing the content </title> This is body, main part of the page 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> 9 10 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 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!! 11 12

Browser compatibility HTML 5 www.findmebyip.

Div: used to identify different parts of a

4 Browser compatibility HTML 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 15 16

identify portions of the document that you want to be independent and distributable from the rest of

5 Example of a document structure Example of a document structure <header> <nav> <section> <article> <aside> <footer> 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 HTML 5 Forms <nav>: navigational aids 19 20

Syntax 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

6 Syntax 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 The form tag attributes Action Specifies the server-side program or script that will process the form data <form action= > Method Get post id (or name) Identifies the form 22 Input 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 <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).

7 & URL <input type= /> Validate user s input Changes from browser to browser Opera: needs to only Firefox: (x)@(x).(x) Mobile device: on-screen keyboard <input type= url /> Numbers Traditional way: combo box Spinner control for numbers <input id="age" name="age" type="number" min="10" max="90" step="1" value="10" /> 25 Firefox Opera 26 Slider Firefox Auto complete system <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> <datalist>: choose from the predefined options or type sth else in the text box Opera 27 28

Mandatory fields Regular expressions Keyword: required <input type= text required />

before the form can be submitted Regular expressions: Specify a pattern for matching

$, phone number: 8 digits: ^\d{8}$ <input type= text name= phoneno required pattern=$

8 Mandatory fields Regular expressions Keyword: required <input type= text required /> <input type= required placeholder= Insert your /> must be entered before the form can be submitted 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}$ /> Date and Time <input type= date /> <input type= time /> <input type= datetime /> <input type= month /> <input type= week /> Cascading Style Sheet 31 32

http://www.eie.polyu.edu.hk/~nflaw/biclustering/index.html Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: www.eie.polyu.edu.hk Styles? Response string: HTTP/1.

9 Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: Styles? Response string: HTTP/ OK Server: Apache/ 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>.. 33 </body></html> 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

10 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} 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 /> </style> </head> <head> Separate Stylesheet... <link rel="stylesheet" type="text/css" href="mystyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif;... } </style> Page-Specific Styles </head> <body>... <div style="padding:2px;... "> Element-Specific Styles... </body> 39 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 Ref - CSS 40

Cascade Client-side Techniques JavaScript From Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton. http://webstyleguide.com/wsg3/index.

11 Cascade Client-side Techniques JavaScript From Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton 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 Window object Access through JavaScript window.alert(message); window.alert( Error ); window.open(url); window.open( ); 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 43 44

$Conditionals if (conditional) { } else { } while (control_expression) { } for (init; control; increment/decrement) { } do {statement.$ 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.

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.

12 Conditionals if (conditional) { } else { } while (control_expression) { } for (init; control; increment/decrement) { } do {statement...} while (control_expression); 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 Example Before/after <script> executes <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> 47 <script> tags are interpreted as the page loads 48

Element Access in JavaScript DOM address document.forms[0].elements[0] <form action= > <input type= text /> </form> Element names: name attribute document.myform.

13 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> document.getelementbyid( myform1 ).firstname.value Element Access in JavaScript getelementbyid method (DOM 1) document.getelementbyid( myinput1 ) <form action= > <input type= text id= myinput1 /> </form> 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> 51 52

14 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 Event Model Event: Something that triggers (calls or starts) one of your functions clicks on an object double-clicks on an object Makes an object active IE: page is finished loading A cursor moves A form is submitted onclick ondblclick onfocus onload onmousemove onsubmit Flow Chart Web page defines event handlers Event occurs Event object generated Event handler runs Example: Event object <p onclick= calltofunction(event); > <script type= text/javascript > function calltofunction(e) { } </script> 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; Event handler 55 56

15 Example 2: DOM + CSS body.style.backgroundcolor Example 3: DOM + CSS CSS: background-color: #FFFF Two different styles Separate: Content(Html) Presentation(css) Behavior (JS) 59 60

16 Usage Form Validation Regular Expression 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 Field level validation Form level validation function isnumeric(e) { } Enter number: <input type= text id= nostudyhr onblur= isnumeric(this) /> 63 function 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> 64

17 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 ) Regular Expression function check(){ } var regexp=/s/ ; if (myform.myinput.value.match(regexp)) alert("your input is " + myform.myinput.value); else alert("invalid"); 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]: matches a but not 1, 3 \d: equivalent to [0-9] \D: equivalent to [^0-9] 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 67 68

18 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,}$ / Regular Expression Others: ( ): grouping (12) : alternation. Match either the subexpression to the left or the subexpression to the right (12 34) 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 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 71 72

19 Summary HTML/XHTML: content Cascading Style Sheet (CSS): style and layout Script language: (JavaScript) control HTML elements Regular expression jquery 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 75 Source Download 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= type="text/javascript"></script> 76

20 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 77 Events jquery methods are called when an event is triggered Basic syntax: $(selector).eventmethod(eventhandler(eventobj)) $(selector).eventmethod(function(eventobj) { }) Examples: // your code here $(document).ready(function(){...}) $(document).click(function(){...}) 78 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> 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 79 80

21 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 81

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors. HTML HTML/XHTML 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: