Download - Client side web programming
![Page 1: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/1.jpg)
Client side web programming
IntroductionJaana Holvikivi, DSc.School of ICT
![Page 2: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/2.jpg)
Course contents
HTML, HTML5 CSS, CSS2, CSS3 Javascript, JQuery Responsive Web Design
Being prepared for multiple device types
Jaana Holvikivi 27.1.2013
![Page 3: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/3.jpg)
<html> <head><title>A sample HTML document</title></head> <body><p>This is a sample HTML document</p></body> </html>
HTML: Basic structure
![Page 4: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/4.jpg)
<!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>
![Page 5: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/5.jpg)
HTML – element markup
link:<a href="http://www.google.com">Search engine</a>Start, closeelement space attribute="value"
image:<img src="pete.jpg"/>empty element
Space stripped (breaks, tabs, enter)
![Page 6: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/6.jpg)
7.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>
![Page 7: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/7.jpg)
J.Holvikivi
Scripts and styles on an HTML page
HTML
STYLE
HEAD
BODY
Javascript
SCRIPT
<tag Javascript><tag>
<tag style>
STYLEsheet
Javascript file
![Page 8: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/8.jpg)
Page requests on the Web
Internet
User workstation
Browser:HTML,scripts
Databaseserver
HTTP request
Server
HTMLpages
Program Server
CGI
HTTP: HTML pages
PHP
JavaASP
SQL Oracle
![Page 9: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/9.jpg)
Page requests: XMLHTTPRequest
User workstation
Browser:Capture event/Update page Database
server
XMLHTTPRequest
(asynchronous)
Server Application(PHP, Java, XSLT, ASP):• Request• readyState• response
SQL XML
Ajax engine:• Create server
Request• Send• Monitor status• Get response• Process
returned data
Returned data
![Page 10: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/10.jpg)
Javascript and document structure
![Page 11: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/11.jpg)
EVTEK J.Holvikivi 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
![Page 12: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/12.jpg)
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>
![Page 13: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/13.jpg)
13J.Holvikivi
Tree of the page
<HTML>
<HEAD> <BODY>
<TITLE> <SPAN> <TABLE>
’This is a test page’ ’Below is a table’ <TR> <TR>
<TD> <TD> <TD> <TD>
data data data
![Page 14: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/14.jpg)
14J.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
![Page 15: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/15.jpg)
15J.Holvikivi
Document tree
Ancestor
Parent / ancestor
Sibling Node
Child /descendant Attribute
Descendant
Namespace
![Page 16: Client side web programming](https://reader035.vdocuments.site/reader035/viewer/2022081503/5681503b550346895dbe3881/html5/thumbnails/16.jpg)
16J.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)