Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

Lecture material

advertisement 
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
7.1.2013
Jaana Holvikivi
2
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
</body>
</html>
</div>
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>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
cell1 </td>
cell 2 </td>
<img src="photo.gif"/> </td>
1 </td>
7.6
Scripts and styles on an HTML page
HTML
HEAD
STYLE
STYLEsheet
Javascript file
SCRIPT
BODY
<tag Javascript>
<tag>
Javascript
<tag style>
J.Holvikivi
Page requests on the Web
User
workstation
Server
HTTP request
Browser:
HTML,
scripts
HTML
pages
HTTP: HTML pages
Internet
Program Server
Database
server
SQL
Oracle
CGI
PHP
ASP
Java
Page requests: XMLHTTPRequest
Ajax engine:
•Create server
Request
•Send
•Monitor status
•Get response
•Process
returned data
XMLHTTPRequest
(asynchronous)
Returned data
Browser:
Capture event/
Update page
User
workstation
Server Application
(PHP, Java,
XSLT, ASP):
•Request
•readyState
•response
Database
server
SQL XML
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
11
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>
12
J.Holvikivi
Tree of the page
<HTML>
<HEAD>
<TITLE>
’This is a test page’
<BODY>
<SPAN>
<TABLE>
’Below is a table’
<TR>
<TD>
data
13
data
<TR>
<TD> <TD>
<TD>
data
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
14
J.Holvikivi
Document tree
Ancestor
Parent / ancestor
Node
Attribute
Sibling
Child /descendant
Namespace
Descendant
15
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)
16
J.Holvikivi
Download
advertisement