Dynamic Web Pages

mobdescriptiveSoftware and s/w Development

Oct 28, 2013 (4 years and 2 months ago)

102 views

Review



Internet, IP addresses, ports, client
-
server, http, smtp



HTML, XHTML, XML



Style Sheets
, external, internal, inline, selector, properties, ids, classes, elements




MS Expression Web
, local and remote web site, synchronization
,
Dynamic Web Template


E
xercise:

Activate the ‘home’ link and change the link colors to yellow. Define
styles for a blog entry, which has
three components: the date, a title, and the content.

Dynamic Web Pages

Static web pages are pages that remain the same when you view their UR
L (unless they were edited by the page
creator). Everything we created so far via HTML and XHTML were static pages.
D
ynamic web pages are pages
where some or all of the content is dependent on some conditions or user interaction. Google’s search results
ar
e dynamic, as an example, since their content depends on the user search query and on the current state of
the Google database(s). Dynamic web pages are created using:



Client
-
side scripts embedded in an HTML page for processing on the client (your computer
)



Server
-
side programs that are processed on a server computer



A mix of client
-
side scripts and server
-
side processing

Exercise:

Is
www.google.com

a client
-
side, server
-
side, both, or neither page?


Server
-
Side Programmi
ng

Server
-
side dynamic pages are generated at request
-
time by a program running on a server. It could be a
response to a user inputting data on a form, or it could be a web page generated on the fly from data in a
database. Many large web sites or content
management systems, for example, are generating HTML pages on
the fly. A reporter, for example, files her story into the company’s database, complete with title, tags, and
content. That story could be used for the printed version of the paper or be used to

generate an HTML response
on the fly
when a user requests “today’s news stories”

via a web URL.

Server
-
side programs can be written in many languages. Popular are JSP (Java Server Pages), ASP (Active Server
Pages), or scripting languages such as PHP or Pe
rl, or C, C++, or pretty much anything else that adheres to a
protocol called Common Gateway Interface (CGI) to regulate information flowing between HTML and a program.

Server
-
side programming requires special access to the web servers and is therefore not

suitable for “simple”
users.

Client
-
Side Programming

Client
-
side programs are embedded inside a web pages and execute on the client. They rely on the assumption
that the client (any web browser, e.g. Firefox, IE, Safari, Opera) can understand and process
the instructions

properly. The language most commonly used is JavaScript, which is relatively simple. Examples include drop
-
down menus on web pages, form data validation (e.g. “is the date entered a valid date”), some simple
simulations/games, or other beh
avior of a web pages based on “mouse events”, i.e. where you click, double
-
click, or hover.

Mixed Client/Server Side Programming

This is most common: part of the
(pre
-
)
processing
happens on the client to avoid the delay in passing data back
and forth to th
e server, but the server processes more complex requests, usually utilizing other resources such
as a database. For example, Google Maps is
such

a complex, dual purpose “application”.
The hot topic these
days is combined client/server processing nicknamed
AJAX: shorthand for
asynchronous

JavaScript

and
X
ML

(see
http://en.wikipedia.org/wiki/Ajax_(programming))
. We will get into that later.

Since JavaScript is the language to know for dynamic web pages
-

albeit not required
-

we’ll start with th
at:


Introduction to
JavaScript

From Wikipedia:
“JavaScript is a scripting language used to enable programmatic access to objects within other
applications. It is primarily used in the form of client
-
side JavaScript for the development of dynamic websites.

JavaScript is
[…]

characterized as a dynamic,
weakly typed
, prototype
-
based language with first
-
class functions.
JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non
-
programmers to work with.

JavaScript,

despite the name, is essentially unrelated to the Java programming language even though the two do
have superficial similarities. Both languages use syntaxes influenced by that of C syntax, and JavaScript copies
many Java names and naming conventions. The

language's name is the result of a co
-
marketing deal between
Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then
-
dominant browser. […]

"JavaScript" is a trademark of Sun Microsystems. It was used under license for techno
logy invented and
implemented by Netscape Communications and current entities such as the Mozilla Foundation.”

Generally you define JavaScript functions in the header part of a document and call them when an eve
nt such as
a mouse click occurs
, but JavaScri
pt programs could also be located in external script files for easy reusability.

Example:

Our first JavaScript program

just adds some text to a web page

<html>

<head>

<title>Simple Inline
JavaScript

Example</title>

</head>

<body>

<h1>Spok says</h1>


<scrip
t language="javascript" type="text/javascript">


document.writeln("
Live long and prosper
");

</script>


</body>

</html>


Create a new, empty document that contains the above text, for example in Expression Web


note that you will
only see the JavaScript
when you load the document in a browser, not in D
esign view
. Also, if you use IE you
might get a security warning before you can see the result of your program:



In Expression Web the JavaScript will not show even in design mode

press F12



IE may disp
lay a security warning. Click on the warning and “Allow blocked content …”



Firefox should execute the JavaScript without problems


This example uses the “document” object and ca
l
ls on its “writeln” function
to add text to an HTML document (I
could have
much easier created a static page for this).



Example:

A more interesting example is to a
dd the current date to a document
.

<html>

<head>

<title>Simple Inline JavaScript Example 2</title>

</head>

<body>

<p>Captain Picard says:

<script language="javascript
" type="text/javascript">


var today = new Date();


document.writeln("Today is " + today + ". ");

</script>

Engage!

</p>


</body>

</html>



This is more interesting. When you run this example it will display the current time of your computer, which wi
ll
be different from this screenshot


the essence of a dynamic page: it
can be

different every time.

Question
: is the above proper XHTML?

Data Types

and basic Operations

Note that in the above code we declare a variable named ‘today’ whose type is determi
ned by what I store in it
(in this case an object of type Date). That’s a weakly
-
type language. The type of a variable can even be different
depending what you store in it, and the operation between two variables can also have different meaning
depending o
n their current value.

Basic operations are of course
+
,

-
,

*
,

/

but also
++

(increment by 1) and
--

(decrement by 1). The
+

operator in particular can have multiple meanings:

var x = 3;

var y = ‘Bert’

document.writeln(x + x) // will produce ‘6’

document.w
riteln(y + y) // will produce “BertBert”


Exercise:

What will
document.writeln(x + y)

produce?

Events

JavaScript is event
-
driven, i
.
e. it can react to
events such as clicks on

buttons
, checking checkboxes, loading
pages, hovering with the mouse, and more
.
Let’s use some events to introduce the
three simple dialog boxes
that are available
(which incidentally ‘block’ execution until dismissed).


Example:

Bringing up
blocking dialog
box
es

with text

when a button is clicked
:

<html>

<head>

<title>Simple Inline J
avaScript Example 3</title>

</head>

<body>

<p>Words of wisdom by:</p>

<form>

<input type="button" value="Kirk" onclick="alert('Go boldly')">

<input type="button" value="Spock" onclick="confirm('Live long')">

<input type="button" value="Picard" onclick="var

x=prompt('Engage at Warp ')">

</form>


</body>

</html>


Make sure to click on the three buttons to check out the dialogs that appear

Question
: is the
above

proper XHTML?

Functions

and basic logic

JavaScript code can, and usually is, combined into functio
ns to be called at the appropriate time. Functions are
typically defined in the header section of a document so that they load first before they are called later in the
document.

Functions can specifically return a value via a
return

statement or the
y

ca
n
cause something to
happen without returning a specific value.


<html>

<head>

<title>Simple Inline JavaScript Example 4</title>

<script language="javascript" type="text/javascript">

function greetVisitor()

{


alert("live long and prosper");

}

</script>

<
/head>

<body>

<p>Click to see the Vulcan greeting:</p>

<form>

<input type="button" value="Greetings" onclick="greetVisitor()">

</form>


</body>

</html>


F
unctions can
also have (optional) input arguments. Here is a function with an input argument that uses

an
if

statement to select from different possibilities
, depending on the value of the input argument at the time the
function is called
:

<html>

<head>

<title>Simple Inline JavaScript Example 3</title>

<script language="javascript" type="text/javascript">

function checkAnswer(answer)

{


if (answer == "tiger")


{



alert("Nice thought, but no");


}


else if (answer == "tiberius")


{



alert("You sure know Star Treck");


}


else


{



alert("Of course this is not right ...");


}

}

</script>

</head>

<body>

<p>What does the <b>T.</b> in <b>James T. Kirk</b> stand for?</p>

<form>

<input type="button" value="Tiger" onclick="checkAnswer('tiger')">

<input type="button" value="Tiberius" onclick="checkAnswer('tiberius')">

<input type="butt
on" value="Trecky" onclick="checkAnswer('trecky')">

</form>


</body>

</html>


There are three
variations of the
if

statement:

if (test)

{

}


if (test)

{

}

else

{

}

if (test1)

{

}

else if (test2)

{

}

else

{


The test is a statement that can evaluate to tru
e or false.

It can use the basic comparison operators
<
,
<=
,
>
,
>=
,
==
, or
!=

Note that
=

is the assignment operator, whereas
==

is the comparison operator to check for equality


Functions stored in external files

This cou
ld be expanded into a multiple cho
ice quiz, but students could simple check the “source” to read the
JavaScript and learn the right answer. Thus, it would be useful to store the function in an external file named
“myscript.js”:

File myscript.js

function checkAnswer(answer)

{


if (answer ==

"tiger")


{



alert("Nice thought, but no");


}


else if (answer == "tiberius")


{



alert("You sure know Star Treck");


}


else


{



alert("Of course this is not right ...");


}

}


File ex6.html

<html>

<head>

<title>Simple I
nline JavaScript Example 3</title>

<script language="javascript" type="text/javascript" src="myscript.js">

</script>

</head>

<body>

<p>What does the <b>T.</b> in <b>James T. Kirk</b> stand for?</p>

<form>

<input type="button" value="Tiger" onclick="checkAn
swer('tiger')">

<input type="button" value="Tiberius" onclick="checkAnswer('tiberius')">

<input type="button" value="Trecky" onclick="checkAnswer('trecky')">

</form>


</body>

</html>


Loops

The final construct in JavaScript is that of a loop, where some co
de executes repeatedly. There are two types of
loops:



for

loops to execute a given number of times, as in:

for (var count = 1; count <= 10; count = count+1)

{


// some stuff

}



while

loops that execute as long as some condition remains true, as in:

var
count = 1;

while (count <= 10)

{


// some stuff

}

Especially the for loop is somewhat strange, but with practice you will get used to it. Hopefully.

Here is a web
page that might give you some chills
; try to figure out what will happen if you load that p
age.

<html>

<head>

<title>Si
mple Inline JavaScript Example 7
</title>

<script language="javascript" type="text/javascript">

function typeManuscript()

{


for (var count = 1; count <= 1000; count = count + 1)



{




document.writeln("All work and no play
makes Jack a dull boy<br />");


}

}

</script>

</head>

<body>

<h1>Name this Movie</h1>


<script language="javascript" type="text/javascript">

typeManuscript();

</script>


</body>

</html>


Manipulating the DOM

When a web browser reads a proper XHTML document
, it constructs a ‘tree’ representation of the data. That
structure is called the Document Object Model, or DOM. That DOM can be manipulated using JavaScript, which
is the
correct

way to achi
eve changes in the layout of a web page. And one of the really ni
ce features of the
DOM is that a page is refreshed without reloading when the DOM changes. Here is some example, showing how
to expand and collapse an item in a list. Let’s start with a simple (X)HTML document:

<html>

<head>

<title>Manipulating the DOM</ti
tle>

</head>

<body>

<h1>Manipulating the DOM</h1>

<p>This is some text inside a paragraph.</p>


<ul>


<li>List item 1</li>


<li>List item 2</li>

</ul>


</body>

</html>


We proceed as follows:

1.

add buttons to expand/collapse

Our almost finished code is:

<html>

<head>

<title>Manipulating the DOM</title>

<script language="javascript" type="text/javascript">

function collapse()

{

var item1 = document.getElementById("item1");


item1.innerHTML = "List item 1";

}


function expand()

{


var item1 = document.ge
tElementById("item1");


item1.innerHTML = "List item 1 has many additional details <br /> that
only become visible now"

}

</script>

</head>

<body>

<h1>Manipulating the DOM</h1>

<p>This is some text inside a paragraph.</p>


<ul>


<li><span id="item1">L
ist item 1</span></li>


<li><span id="item2">List item 2</span></li>

</ul>


<form>

<input type="button" value="Expand" onclick="expand()">

<input type="button" value="Collapse" onclick="collapse()">

</form>

</body>

</html>


Next we c
ould add a ‘global’ b
oolean variable
item1Expanded

and a “
change
” function that would collapse
the entry if it’s expanded and expand it if it’s collapsed. Finally we’d do the same for the second item and so
forth.


An extended Example

We want to find an approximation of the nu
mber

(Pi) experimentally. To do this we imagine a cannon that
shoots a ball into a square with corners (1,1), (
-
1,1), (
-
1,
-
1), (1,
-
1). We assume that the ball always lands inside
that square, but at completely random locations. In particular,

sometimes the balls falls inside a circle of radius 1

centered at the origin, other times it falls outside that circle:








If
T

is the total number of shots, and
I

is the number of times the ball lands inside the circle
, we finally
compute



Attempt 1:

<html>

<head>

<title>Experimenting with Randomness 1</title>

<script language="javascript" type="text/javascript">

function simulateCannon()

{

var totals = 1000.0;

var inside = 0.0;


for (var count = 1; count

<= totals; count++)



{




var x = 2.0 * Math.random()
-

1.0;




var y = 2.0 * Math.random()
-

1.0;




var r = Math.sqrt(x*x + y*y);




if (r < 1)




{





inside++;




}



}



document.writeln("<ul>");



document.writeln("<li>Total
shots: " + totals + "</li>");



document.writeln("<li>Inside circle: " + inside + "</li>");



document.writeln("<li>Estimation: " + 4.0 * inside / totals + "</li>");



document.writeln("</ul>");

}

</script>

</head>

<body>

<h1>Experimenting with Rando
mness 1</h1>


<p align="center">

<img src="cannon_square.jpg">

</p>


<script language="javascript" type="text/javascript">

simulateCannon();

</script>


</body>

</html>


The problem is that the simulation happens
prior

to any part of the page being displaye
d. Thus a user can only
see the instructions when the simulation is
already over



not very enlightening.

Here is an attempt to solve the problem: add a ‘Go’ button and display the answer in an ‘alert’ dialog:

Attempt 2
:

<
html
>

<
head
>

<
title
>Experimenting
with Randomness 3</
title
>

<
script

language
=
"javascript"
type
=
"text/javascript"
>

function simulateCannon()

{


var totals = 1000.0;


var inside = 0.0;



for (var count = 1; count <= totals; count++)



{




var x = 2.0 * Math.random()
-

1.0;




var y

= 2.0 * Math.random()
-

1.0;




var r = Math.sqrt(x*x + y*y);




if (r < 1)




{





inside++;




}



}



alert("Shots: " + totals +




"
\
nInside: " + inside +




"
\
nAnswer: " + (4.0 * inside / totals));

}

</
script
>

</
head
>

<
body
>

<
h1
>Experimenting with Randomness 3</
h1
>


<
p

align
=
"center"
>

<
img

alt
=
"Cannon shooting inside Square"
src
=
"cannon_square.jpg"
>

</
p
>


<
form
>

<
input

type
=
"button"
value
=
"Shoot"
onclick
=
"simulateCannon()"
> de Cannon

</
form
>


</
body
>

</
html
>


That’s a li
ttle better

but still awkward


it quickly gets to be annoying having to dismiss the dialog all the time. It
would be better to:



make the output appear inside the page by manipulating the DOM



allow for a variable input to shot the cannon for different numb
er of shots

I leave that as
homework
!