Dynamic HTML
advertisement
159.339
Lecture
Client-side Programming
DHTML
Dynamic Hypertext Markup Language
1
159.339
What is DHTML?
CSS
Javascript
DOM,Topics
Examples
for Discussion
159.339
Dynamic HTML
Cascading style sheets, HTML,
DOM and Javascript
DHTML
• Collection of technologies forming
dynamic clients
– HTML (content)
– DOM (data structure)
– JavaScript (behaviour)
– Cascading Style Sheets (presentation)
159.339
159.339
159.339
HTML ELEMENT
Standard PROPERTIES
className
Sets or returns the class attribute of an element
clientHeight
Returns the viewable height of the content on a page (not
including borders, margins, or scrollbars)
clientWidth
Returns the viewable width of the content on a page (not
including borders, margins, or scrollbars)
disabled
Sets or returns the disabled attribute of an element
height
Sets or returns the height attribute of an element
id
Sets or returns the id of an element
Standard METHODS
blur()
Removes focus from an element
click()
Executes a click on an element
cloneNode()
Clones an element
focus()
Gives focus to an element
Standard EVENTS
onblur
When an element loses focus
onclick
When a mouseclick on an element
ondblclick
When a mouse-doubleclick on an element
onfocus
When an element gets focus
Standard COLLECTIONS
attributes[]
Returns an array of the attributes of an element
This is not the
complete listing.
159.339
Cascading Style Sheets
159.339
• Method for specifying properties for
HTML elements
– default and specific fonts, colours etc.
• Allows easy modification of page styles
– Style sheet can be modified rather than
editing the html
• Style sheet can be embedded in HTML
or linked via an external file
CSS Structure and Syntax
159.339
General syntax: Selector{ property:value; property:value;}
Example:
Selector
Start of
block
Declaration
Declaration
End of
block
h1
{
color:blue;
font-size:12px;
}
Property:value;
Property:value;
•The selector is normally the HTML element you want to style.
•Each declaration consists of a property and a value.
CSS Structure & Syntax
159.339
• CSS declarations always ends with a semicolon, and
declaration groups are surrounded by curly brackets
• The comment syntax is just like in C-programming:
/* this is a comment */
• You can specify and apply CSS-style formatting to an HTML
element either by using an ID selector or a Class selector.
Incorporating CSS
There are three ways of inserting a style sheet:
•External style sheet
•Internal style sheet
•Inline style
159.339
1. Incorporating CSS
159.339
External style sheet
• An external style sheet is ideal when the style is applied to
many pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• The file should not contain any html tags.
• Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
1. Incorporating CSS
Example: External style sheet
mystyle.css
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
myHTML.htm
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css“ >
</head>
159.339
2. Incorporating CSS
159.339
Internal style sheet
• Suitable when a single document has a unique style.
• You define internal styles in the head section of an HTML page, by
using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3. Incorporating CSS
159.339
Inline style sheet (Inside an HTML element)
• An inline style loses many of the advantages of style sheets by mixing
content with presentation.
• To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property.
• The example shows how to change the color and the left margin of a paragraph:
<p style="color:rgb(255,0,0);margin-left:20px"> Hello! </p>
Avoid using the
inline style!
Cascading Order of Styles
159.339
Cascading multiple styles (the list is in increasing order of priority)
1.
2.
3.
4.
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Note: If the link to the external style sheet is placed after the internal
style sheet in HTML <head>, the external style sheet will override the
internal style sheet!
#4 has the
highest priority.
1. Applying CSS to an HTML element 159.339
•You can apply CSS-style formatting to an HTML element either by
using an ID selector or a Class selector.
ID SELECTOR
•The id selector is used to specify a style for a single, unique element.
•The id selector uses the id attribute of the HTML element, and is defined with a "#".
•The style rule below will be applied to the element with id="para1":
•Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
General Syntax:
#ID-name
{
Property:value;
Property:value;
/*... and so on.. */
}
ID selector application:
<h1 id=”ID-name”> Internet programming </h1>
2a. Applying CSS to an HTML element 159.339
•You can apply CSS-style formatting to an HTML element either by using an
ID selector or a Class selector.
class SELECTOR
• The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
• This allows you to set a particular style for any HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a "."
General Syntax:
.class-name
{
Property:value;
Property:value;
/*... and so on.. */
}
class selector application:
<h1 class=”class-name”> Internet programming </h1>
<p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>
2b. Applying CSS to an HTML element 159.339
•You can apply CSS-style formatting to an HTML element either by using an ID selector or a Class
selector.
class SELECTOR
• You can also specify that only specific HTML elements should be affected by a
class.
General Syntax:
/* this class selector is only applicable to paragraphs*/
p.class-name
{
Property:value;
Property:value;
/*... and so on.. */
}
class selector application:
<p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>
CSS Properties Index
A continuously updated list of CSS properties can be found here:
http://meiert.com/en/indices/css-properties/
CSS Text: http://www.w3schools.com/css/css_text.asp
CSS Demo: http://www.w3schools.com/css/demo_default.htm
CSS Tables: http://www.w3schools.com/css/css_table.asp
159.339
CSS Examples
159.339
• body {
– font-family: Georgia, "Times New Roman", Times, serif;
– color: blue;
– background-color: #FFFF00 }
• Similarly any property can be specified and
modified
• You can define your own selectors
– .myStyle {color: blue}
– Use with a class=“myStyle” attribute in the element you want to
modify
You will find more
examples in our
website
Center a Table with CSS
159.339
CSS definitions: Centered, Fixed-width table
div.container {
width:98%;
margin:1%;
}
table.table1 {
text-align:center;
margin-left:auto;
margin-right:auto;
width:100px;
}
tr, td {
text-align:left;
}
Applying your CSS styles in a table
<div
class="container">
<table class="table1">
...
</table>
</div>
http://www.granneman.com/webdev/coding/css/centertables/
159.339
JavaScipt
159.339
• A client-side scripting language
– Allows building dynamic user interfaces
• Dynamic HTML elements
• Client side animation
– Modify client view based on user input
– Ability to check user input before forwarding to the
server
• NOTE: JavaScipt and Java are different
– JavaScript is based on a standard ECMA scripting
language, JavaScipt name adopted for marketing
reasons (Java was starting to get hot at the time)
JavaScript Basic Concepts
• JavaScript is an interpreted language
– No need to compile the code
• The language is dynamically-typed
– No need to declare the type of a variable
– The type of a variable can change over time
• Need to be careful that the type is not changed
accidentally by a programming mistake
• Structured Programming constructs
– Similar to C
– Case-sensitive like C
159.339
Incorporating JavaScipt
159.339
• JavaScripts can be put in the <body> and in the <head> sections of
an HTML page.
• To insert a JavaScript into an HTML page, we use the <script> tag.
• Inside the <script> tag we use the type attribute to define the scripting
language.
<html>
<body>
<script type="text/javascript">
/*...and so on.. */
</script>
</body>
</html>
Incorporating JavaScipt
159.339
Handling browsers that do not support Javascript
<html>
<body>
<script type="text/javascript">
<!-document.write("Hello World!");
//-->
</script>
<noscript>
<h2>Your Browser doesn’t support JavaScript! </h2>
</noscript>
</body>
</html>
– use HTML comments so that browsers that do not support
JavaScript do not display your code
Incorporating JavaScipt into an HTML 159.339
Javascript in the <head> section
• By default, javascripts in a page is executed automatically when a
page loads into the browser.
•However, we want to have control over when our scripts will be
executed.
•Usually, we want them to be called when an event is triggered. In
order to do this, we can write our scripts inside a function.
Incorporating JavaScipt into an HTML 159.339
Javascript in the <head> section
<html>
<head>
<script type="text/javascript">
function message(){
alert("This alert box was invoked by an onload event.");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Put your functions in the <head> section. In this way, they are all written
in one place, and they do not interfere with page content.
Incorporating JavaScipt into an HTML 159.339
Javascript in the <body> section
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("My first JavaScript");
</script>
</body>
</html>
• If you don't want your script to be placed inside a function, or if your
script should write page content, it should be placed in the body section.
Incorporating JavaScipt into an HTML 159.339
Javascript in the <head> and <body> sections
• You can place an unlimited number of scripts in your document, so you
can have scripts in both the <body> and the <head> sections.
External Javascript file
159.339
• If you want to run the same JavaScript on several pages, without having to write
the same script on every page, you can write a JavaScript in an external file.
• Save the external JavaScript file with a .js file extension.
• Note: The external script cannot contain the <script></script> tags!
• To use the external script, point to the .js file in the "src" attribute of the <script>
tag:
<html>
<head>
<script type="text/javascript" src=“filename.js"></script>
</head>
<body>
</body>
</html>
JavaScript Programming
Constructs
159.339
• All standard C operators can be used in
JavaScript
– +, -, *, /, +=, -=, ==, !=, <, >, >=, <=, %, &&,
||, !
– Also can add strings (concatenate)
• Str3= Str1+ Str2;
– if, if … else, switch… case…, for …, while
…, do … while
• Can all be used as in C
• The semicolon is optional (according to the
JavaScript standard). It allows you to write
multiple statements in one line.
Variables
•JavaScript variables are used to hold values or
expressions.
•A variable can have a short name, like x, or a more
descriptive name, like carName.
•Rules for JavaScript variable names:
•Variable names are case sensitive (y and Y are two
different variables)
•Variable names must begin with a letter or the
underscore character
•Note: Because JavaScript is case-sensitive, variable
names are case-sensitive.
159.339
Variables
If you declare a variable within a function, the variable
can only be accessed within that function. When you exit
the function, the variable is destroyed. These variables are
called local variables. You can have local variables with
the same name in different functions, because each is
recognized only by the function in which it is declared.
If you declare a variable outside a function, all the
functions on your page can access it. The lifetime of these
variables starts when they are declared, and ends when
the page is closed.
159.339
Variables
159.339
•A variable's value can change during the execution of a script. You can refer to a
variable by its name to display or change its value.
•You can declare JavaScript variables with the var statement:
ovar x;
ovar userName=”Napoleon”; //use double quotes to assign a text value
•If you assign values to variables that have not yet been declared, the variables
will automatically be declared.
•If you redeclare a JavaScript variable, it will not lose its original value.
ovar z=100;
ovar z;
A.If you add a number and a string, the result will be a string!
Comparison Operators
Operator
Description
Example
==
is equal to
x==8 is false
===
is exactly equal to (value and type)
x===5 is true
x==="5" is false
!=
is not equal
x!=8 is true
>
is greater than
x>8 is false
<
is less than
x<8 is true
>=
is greater than or equal to
x>=8 is false
<=
is less than or equal to
x<=8 is true
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
159.339
JavaScript Functions
• Functions declared as in C
– But no data types
– E.g. myfun(){
document.write(“myfunction”);}
• Functions can take parameters
– E.g. myfun(X){
document.write(“Value:”+X);}
• Functions can return values
– E.g. myfun(X,Y){ return X+Y;}
159.339
Popup Boxes
159.339
Alert Box
An alert box is often used if you want to make sure information comes through to the
user.
When an alert box pops up, the user will have to click "OK" to proceed.
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns
false.
Prompt Box
A prompt box is often used if you want the user to input a value before entering a
page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.
JavaScript Arrays
159.339
• Zero-indexed arrays
– myArray = new Array(4);
• Create and array of 4 elements
– myList = new Array(“one”, “two”, “three”);
– first = myArray[0];
• myArray.length
– Returns length of array (number of elements)
• pop() : Removes last element of array
• push(“item1”, “item2”) : Adds items to the end of the array
• shift(): Removes an item from the front of the array
• unshift(“item1”): Adds items to the beginning of the array
• concat(): Joins two or more arrays, returning a new array
• join(delimiter): Joins the elements of an array into a string
using the delimiter
Catching Errors
159.339
• The try...catch statement allows you to test a block of code for
errors.
• We would want to test our codes properly before making it publicly
accessible.
• We can test our codes for any error by using the try and catch
clauses.
try{
//Run some code here
}
catch(err){
//Handle errors here
}
Catching Errors
159.339
Throw statement
•The exception can be a string, integer, Boolean or an object.
• Note that throw is written in lowercase letters. Using uppercase
letters will generate a JavaScript error!
• The throw statement allows you to create an exception. If you use
this statement together with the try...catch statement, you can
control program flow and generate accurate error messages.
Syntax:
throw(exception)
Catching Errors
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number
between 0 and 10:","");
try
{
if(x>10){
throw "Err1";
}
else if(x<0){
throw "Err2";
}
else if(isNaN(x)) {
throw "Err3";
}
}
159.339
catch(er)
{
if(er=="Err1“) {
alert("Error! The value is too high");
}
if(er=="Err2“) {
alert("Error! The value is too low");
}
if(er=="Err3“) {
alert("Error! The value is not a
number");
}
}
</script>
</body>
</html>
HTML Document Object Model 159.339
• The HTML document is available to your javaScript code as
an object tree.
– The root of this tree is the document object.
– All the elements in the document are built under this tree
• You can refer to each element using its element ID or
Name
– specify a unique name or id for each element
• We shall return to the Document Object Model later on
when we look at XML.
Examples
HTML
DROP-DOWN LIST
<select name="drink">
<option value="2.50"> Coffee
<option value="2.25"> Hot Cocoa
<option value="1.00"> Chai
</select>
drop-down list:
name:drink
property:selectedindex
property:value
159.339
Examples
HTML
Submit button
<input type=submit value="Order">
159.339
Examples
HTML
RADIO BUTTONS
<input type="radio" name="sizef" value="1">Tall
<input type="radio" name="sizef" value="1.5">Grand
<input type="radio" name="sizef" value="2"> Super
radio-buttons: name:sizef
property:value
property:checked
property:length
159.339
Examples
HTML
159.339
TEXT FIELDS
<input type="text" name="label" value="">
<input type=text name="totalf" value="">
Examples
<body>
<h2> Coffee shop </h2> <p>
<form name="orderf" onsubmit="return addup(this);" action="">
<select name="drink">
<option value="2.50">Coffee
<option value="2.25">Hot Cocoa
<option value="1.00">Chai
</select> <br>
<input type="radio" name="sizef" value="1">Tall
<input type="radio" name="sizef" value="1.5">Grand
<input type="radio" name="sizef" value="2"> Super
<input type=submit value="Order"> <br>
<br><input type="text" name="label" value="">
<input type=text name="totalf" value="">
</form>
</body>
159.339
javascript
159.339
<script type="text/javascript">
function
addup(f) {
var total; var taxrate = .08 ; var drinkbase; var opts;
opts=f.drink;
drinkbase = f.drink[opts.selectedIndex].value;
var sizefactor; var i; var totals; var dp;
for (i=0;i<f.sizef.length;i++) {
if (f.sizef[i].checked) {
sizefactor = f.sizef[i].value;
}
}
total = sizefactor * drinkbase;
total = total*(1 + taxrate);
f.label.value="Total with tax";
f.totalf.value=total;
totals = f.totalf.value + "00";
HTML elements
Form: name:orderf
drop-down list:
name:drink
property:selectedindex
property:value
radio-buttons: name:sizef
property:value
property:checked
property:length
text fields: name:label
name:totalf
property:value
dp = totals.indexOf(".");
if (dp<0) {
f.totalf.value = "$" + f.totalf.value + ".00";
return false;
}
else {
totals = "$" + totals.substr(0,dp+3); //control the number of decimal places
f.totalf.value = totals;
return false;
}
string.indexOf(searchstring, start)
}
</script>
• The indexOf() method returns the position of the first occurrence of a
specified value in a string.
• This method returns -1 if the value to search for never occurs.
Sending data to a server
159.339
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
A submit button is used to send form data to a
server. The data is sent to the page specified in the
form's action attribute. The file defined in the action
attribute usually does something with the received
input:
Client-side (Browser) Objects
159.339
Window object:
Represents an open window in a browser.
Information about the windows this document is nested
in.
not a W3C standard, but all major browsers support it.
Client-side (Browser) Objects
159.339
Navigator object: Information about the clients browser
You can access this object to learn about the name,
version and platform where the browser was compiled.
It also tells us if the browser is Java-enabled.
not a W3C standard, but all major browsers support it.
History object:
Information about the URLs visited by the user within the
browser’s window
window.history
For more information on the history object: https://developer.mozilla.org/en/window.history
Screen object:
Information about the clients screen (e.g. resolution, width
and height of the screen – excluding the taskbar
not a W3C standard, but all major browsers support it.
window.screen
Client-side (Browser) Objects
159.339
Location object:
window.location
not a W3C standard, but all major browsers support it.
Information about the current URL
o Hostname, port number, protocol, query portion
HTML DOM Collections
159.339
• anchors[]
– An anchor object represents an HTML hyperlink (bookmark, URL).
– Any anchors with a name or id
• applets[]
• embeds[]
– List of embedded objects, browser must have appropriate viewer
• forms[]
• images[]
• links[]
– Any anchors with an href
HTML DOM Properties
159.339
• body
• cookie
• domain
– Servers domain
• referrer
– URL of document that loaded current document
• title
• URL
HTML DOM Methods
• getElementById("id")
– Not W3C standard
•
•
•
•
•
getElementsByName("name")
open("mimetype"[,replace])
write("str")
writeln("str")
close()
159.339
JavaScript Event Handling
159.339
• As the Page loads and the user
interacts with the web page events are
generated
– onload: of document body
– onmouseover, onmouseout, onclick,
ondblclick, onmousedown, onmouseup,
onmousemove
– onfocus, onresize
– onkeydown, onkeypress, onkeyup
– onsubmit, onchange
JavaScript Event Handling
159.339
• Let’s look at an event handling example
Javascript-16 - Events.html
How powerful is
159.339
JavaScript?
This was taken from a news clip
At the USENIX annual conference last month (June
2010), Gmail engineer Adam de Boor surprised the
audience by noting that the company's Gmail
service was written entirely in JavaScript, and that
all of its code, around 443,000 lines worth, was
written by hand.
http://infoworld.com/d/developer-world/google-executive-frustrated-java-c-complexity-375
This recent news
says it all! ;)
159.339
This was taken from a news clip
He noted that while Java is more expressive, it is also more
verbose. "At this point to me it's a matter of choice which
language you use," de Boor said.
JavaScript is one of a whole batch of languages -- others
include Ruby and Python -- that have been developed over
the past 10 years in response to the growing complexity of
C++ and Java.
While having a simpler syntax, such languages have their
drawbacks as well, he argued.
http://infoworld.com/d/developer-world/google-executive-frustrated-java-c-complexity-375
159.339
This was taken from a news clip
These new languages tend to be slower, don't scale as well, and
can harbor more errors, Pike elaborated.
The languages tend to be interpreted rather than compiled,
meaning the programs written in such languages aren't compiled
before running, so tend to run slower as a result. They also tend
to be dynamically typed, meaning programmers don't need to
specify what type of data their variables will hold.
"Dynamic typing is not necessarily good. You get static errors at
run time which you really should be able to catch at compile time,"
he said.
With all this in mind, Pike then described Go as an attempt to fuse
the best attributes of both sets of languages.
http://infoworld.com/d/developer-world/google-executive-frustrated-java-c-complexity-375
Summary
159.339
Main points to remember:
•Dynamic web sites as opposed to static websites
•Cascading style sheets
•Javascript as a client-side programming language
•HTML Document Object Model
Exercises:
•Again, look at real web sites - this time those based on CSS and serve Javascript. Ask
yourselves: What’s happening at the client side? What’s happening at the server side?