1 / 16

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. HTML: Basic structure. <html> <head>

darena
Download Presentation

Client side web programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. <!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>

  5. 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)

  6. 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>

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

  8. 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

  9. 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

  10. Javascript and document structure

  11. 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

  12. 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

  13. <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

  14. 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

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

  16. 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

More Related