Embed Size (px)
Citation preview
Client side web programming
IntroductionJaana 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 27.1.2013
<html> <head><title>A sample HTML document</title></head> <body><p>This is a sample HTML document</p></body> </html>
HTML: Basic structure
<!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, closeelement space attribute="value"
image:<img src="pete.jpg"/>empty element
Space stripped (breaks, tabs, enter)
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>
J.Holvikivi
Scripts and styles on an HTML page
HTML
STYLE
HEAD
BODY
Javascript
SCRIPT
<tag Javascript><tag>
<tag style>
STYLEsheet
Javascript file
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 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
Javascript and document structure
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
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>
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
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
15J.Holvikivi
Document tree
Ancestor
Parent / ancestor
Sibling Node
Child /descendant Attribute
Descendant
Namespace
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)
