Client side web programming

Client side web programming Introduction Jaana Holvikivi, DSc. School of ICT

Course contents • HTML, HTML5 • CSS, CSS2, CSS3 • Javascript, JQuery • Responsive Web Design • Being prepared for multiple device types Jaana Holvikivi

HTML: Basic structure <html> <head> <title>A sample HTML document</title> </head> <body> <p> This is a sample HTML document </p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>A sample HTML document</title> </head> <body> <h1>HTML document</h1> <p> This is a sample HTML document </p> <div>Created by JHH: 2013 </div> </body> </html>

HTML – element markup link: <a href="http://www.google.com">Search engine</a> Start, close element space attribute="value" image: <img src="pete.jpg"/> empty element Space stripped (breaks, tabs, enter)

Tables: Symmetrical structure!! <table> <tr> <td> cell1 </td> <td> cell 2 </td> </tr> <tr> <td> <img src="photo.gif"/> </td> <td> 1 </td> </tr> </table>

Scripts and styles on an HTML page HTML HEAD STYLEsheet STYLE Javascript file SCRIPT BODY <tag Javascript> <tag> Javascript <tag style> J.Holvikivi

Page requests on the Web User workstation Server HTTP request HTML pages Browser: HTML, scripts HTTP: HTML pages Internet Program Server CGI PHP ASP Java Database server Oracle SQL

Page requests: XMLHTTPRequest • Server Application • (PHP, Java, • XSLT, ASP): • Request • readyState • response • Ajax engine: • Create server Request • Send • Monitor status • Get response • Process returned data XMLHTTPRequest (asynchronous) Returned data Browser: Capture event/ Update page Database server XML User workstation SQL

Javascript and document structure

Javascript • Javascript is always downloaded from the server to the client • Either as a file reference • Or embedded in HTML • Javascript is executed on client side. • Less load on server • Example: checks on form input (numeric fields, dates, required fields) • Javascript understands the structure of the HTML page (document); DOM EVTEK J.Holvikivi

HTML document • Javascript can recognize the tree structure <html> <head> <title>This is a test page</title> </head> <body id=”trunk”> <span>Below is a table... </span> <table border=1> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> </tr> </table> </body> </html> J.Holvikivi

<HTML> <HEAD> <BODY> <TITLE> <SPAN> <TABLE> ’This is a test page’ ’Below is a table’ <TR> <TR> <TD> <TD> <TD> <TD> data data data Tree of the page J.Holvikivi

Document Object Model (DOM) • Used by many programming languages (php, Java, C#, C++, Javascript…) • and understood by browsers (Firefox, IE, Chrome, Safari) • XML -document is a collection of nodes that make a hierarchical tree structure • The hierarchy is used in navigating the tree to locate information • Inefficient use of memory: the tree structure is created in the memory • DOM enables adding, moving, deleting and changing of nodes J.Holvikivi

Document tree Ancestor Parent / ancestor Node Sibling Attribute Child /descendant Namespace Descendant J.Holvikivi

Processing of the tree • Start with the root node ( document-object) • Element properties • firstChild • lastChild • nextSibling • parentNode • Methods to navigate the tree in Javascript • getElementByID(id) • getElementsByName(name) • getElementsByTagName(name) • getAttribute(name) J.Holvikivi

Client side web programming