html - AAMU Myspace Login

ugliestharrasΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

67 εμφανίσεις

CMP304 Prep for Final Exam

Posted at:

http://myspace.aamu.edu/users/Xingzhong.Shi/CMP304/Exams/CMP304Prep4FinalExam.doc


Note:



Final exam

for
non
-
graduating

seniors

is on

Thu Dec. 10, 2009, 8:00am


10:00am
.



For
graduating seniors
, final exam is on

Thu Dec. 3, 2009, ~8:30am


~11:00am.



This file is intended for students in CMP 304


Web Programming to prepare for the final exam.



The final exam is
comprehensive
, which means that it
covers all materials

we have covered in the
class.



It will concentrate on the following topics:

JavaScript,
XML,
Flash
, PHP, ASP.NET
.



This file will be updated and m
ore materials will be added over the next few days.



Read this file by

focusing

on those
highlighted with bigger fonts
.


http://www.w3schools.com/aspnet/default.asp

ASP.NET
Introduction

ASP.NET

is the
next generation ASP
, but it's not an upgraded version of ASP.
ASP.N
ET is an entirely new technology

for
_________ (
server
-
side
)

scripting
.

ASP.NET is a
part of the Microsoft
_________ (
.NET framework
)
, and a powerful
tool for creating
_________ (
dynamic and interactive
)

web pages
.

What is Classic ASP?

Microsoft's previous

server side scripting technology ASP

(Active Server Pages) is now often called
classic ASP
.
ASP 3.0 was the last version of classic ASP.

ASP.NET is NOT ASP

ASP.NET was written from the ground up and is
not

backward compatible

with classic ASP.

ASP.NET is
the major part of the Microsoft's .NET Framework.


What is ASP.NET?

ASP.NET is a
_____
(

Server
)

side scripting

technology

that
enables scripts

(embedded
in web pages)
to be executed

by an
Internet server
.



ASP.NET is
a Microsoft Technology




ASP stands for
_____(
Active Server Pages
)




ASP.NET is a program that
runs inside IIS
(
Internet Information Services
)



IIS is Microsoft's Internet server



IIS comes as a free component with Windows servers



IIS is also a part of Windows 2000 and XP Professional

What is an

ASP.NET File?



An
ASP.NET file

is just the
same as an HTML file




An
ASP.NET file can contain
HTML,
______ (
XML
)
, and scripts




Scripts

in an ASP.NET file are
executed on the
server




An ASP.NET file has the file
extension

______ (
.
asp
x).


How Does ASP.NET Wo
rk?



When a
browser requests

an HTML file
, the
server returns

the file




When a
browser requests

an ASP.NET file
,
IIS passes the request to the ASP.NET engine

on the
server




The
ASP.NET engine reads the file
,
line by line
, and
executes the scripts in the fil
e




Finally,
the ASP.NET file is returned to the browser as plain HTML


The Microsoft .NET Framework

The
.NET Framework

is the
infrastructure

for the
Microsoft .NET platform
.


The
.NET Framework

is an
environment

for
building, deploying, and running
Web
___
___ (
applications
)

and Web
______ (
Services
)
.

Microsoft's
first

server technology ASP

(Active Server Pages), was a powerful and flexible "programming
language". But it was
too code oriented
. It was
not an application framework

and
not an enterprise
develop
ment tool
.

The Microsoft .NET Framework

was developed to

solve the

problem

that
ASP was too
______ (
code
)

oriented

and it was
neither

an
______
(
application
)

framework

nor

an
____

(
enterprise
)

development tool
.

.NET Frameworks keywords:



Easier and quicker
programming
(
fast programming
)



Reduced amount of code
(
shorter code
)



Declarative programming model
(
describe
s

what
, not
how
,
a

program should accomplish
)



Richer server control hierarchy with
events

(
more

control

over

events
)



Larger class library
(
more buil
t
-
in functions
)



Better support for development tools
(
more useful

tools
)

The .NET Framework consists of 3 main parts:

1.

Programming languages:



C# (Pronounced C sharp)



Visual Basic (VB .NET)



J# (Pronounced J sharp)


2.

______ (
Server
)

technologies and
______
(
client
)

technologies:



ASP .NET

(Active Server Pages)



Windows Forms (Windows desktop solutions)



Compact Framework (PDA / Mobile solutions)

3.

Development environments:



Visual Studio .NET (VS .NET)



Visual Web Developer

The .NET

Language Support

--

Visual
Basic
,
C#
,

C++,

JScript
.


(See slide #4 of:
http://myspace.aamu.edu/users/Xingzhong.Shi/CMP304/PPT/ProgWWWChp12.ppt


12.2 Introduction to C#



-

C# heritage:


-

From J
ava:



-

Single

______
(
inheritance
)


-

Interfaces


-

Garbage
______
(
collection
)


-

No global types or variables


-

Level of coercion


-

From C++:


-

Pointers


-

Operator
______
(
overloading
)


-

Preprocess
or


-

structs, enums, …


-

From Delphi and
Visual Basic
:


-

Properties


-

From J# (actually, J++):


-

Delegates

)


ASP.NET Controls

ASP.NET contains
a large set of

HTML
______
(
controls
)
. Almost all HTML elements on a page can
be
defined as
ASP.NET
______
(
control
)

objects

that can be controlled by scripts.

ASP.NET also contains a new set of
object
-
oriented input
______
(
controls
)
, like
programmable
______
(
list
-
boxes
)

and
______
(
validation
)

controls
.

A new
data grid control

su
pports
sorting, data paging
,
etc

ASP.NET Components

ASP.NET components are
heavily based on
______
(
XML
) .
Like the new AD Rotator, that uses
XML to store advertisement information and configuration.


Compiled Code

The
first request

for an ASP.NET page on
the server will
compile the ASP.NET code and keep a cached
copy in memory
. The result of this is
greatly increased
______
(
performance
)
.

http://www.w3schools.com/aspnet/aspnet_pages.asp


ASP.
NET
-

Web Pages

A
simple ASP.NET page

looks
just like an ordinary
______
(
HTML
)

page
.

This code displays the example as an HTML page:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

</center>

</body>

</html>

Hello W3Schools in ASP.NET

(
s
ame

code as above)

The
simplest way to convert an HTML page into an ASP.NET page

is to
copy the HTML file to a new file with an
______
(
.aspx
)

extension
.

How Does it Work?

Fundamentally an
ASP.NET page

is just the
same as an
______
(
HTML
)

page
.

An HTML page

has the extension .htm
. If a browser requests an HTML page from the
server, the server sends the page to the browser without any modifications.

An ASP.NET page has the extension
______
(
.aspx
)
. If a browser requests an
ASP.NET page, the server processes an
y executable code in the page, before the result is sent back to the
browser.

Dynamic Page in Classic ASP

To demonstrate how ASP can display pages with dynamic content, we have added some executable code (in
red) to the previous example:

<html>

<body bgcol
or="yellow">

<center>

<h2>Hello W3Schools!</h2>

<p>

<%
Response.Write
(
now()
)%>

</p>

</center>

</body>

</html>

The
code inside the <%
--
%> tags

is executed
on the
______
(
server
)
.

Response.Write is ASP code for writing something to the HTML
output stream
.

N
ow()

is a function
returning the server

s current
______
(
date and time
)
.


http://www.w3schools.com/aspnet/aspnet_controls.asp


ASP.NET
-

Server Controls

Server controls
are

tags

that are
understood by the
______
(
server
)
.

There are
three kinds of server controls
:



______
(
HTML
)

Server Controls
-

Traditional HTML tags



______
(
Web
)

Server Controls
-

New ASP.NET tags



______
(
Validation
)

Server Controls
-

For
input

validation


ASP.NET
-

HTML

Server Controls

(
HTML controls are
rarely

used
)

HTML server controls

are
HTML tags
that are
understood by the server
.

Note:

All
HTML server controls

must be within a
<form> tag with the
runat="server" attribute
. The
runat="server"

attribute indicates that

the form should
be
processed on the server
. It also indicates that the enclosed controls can be accessed by
server scripts.

(See example below.)

ASP.NET
-

Web Server Controls

Web server controls are special ASP.NET tags understood by the server.

Like HTML

server controls,
Web server controls

are also
created on the server

and
they
require a
_________ (
runat
)
="server"
_________ (
attribute
)

to work.

The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />



ASP.NET
-

Validation Server Controls

Validation server controls
are used to

validate
_________ (
user
-
input
)
. If the
user
-
input does not pass validation, it will display an error message to the user.

By default,
page validation

is performed when a
Button, ImageButt
on, or LinkButton

control is clicked.

The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />


http://www.w3schools.com/aspnet/aspnet_forms.as
p


ASP.NET
Web Forms


All server controls
must appear
within a <form> tag, and the <form>
tag must contain the
_________ (
runat
)
="server"
_________ (
attribute
)
.

<
form


runat="server"
>


...HTML + server controls


</
form
>

Submitting a Form

A form is most
often submitted by clicking on a button. The
Button server control

in ASP.NET
has the following
format
:

<
asp:Button


id="id"


text="label"

OnClick="sub"


runat="server"

/>


http://www.w3sc
hools.com/aspnet/aspnet_textbox.asp


ASP .NET
-

The
TextBox

Control

The
TextBox control

is used to create a text box where the
user can input text
.

Example
format
:
<
asp:

_________ (
TextBox
)

id="tb1"

runat="server"

/>


http://www.w3schools.com/aspnet/aspnet_dbconnection.asp


ASP.NET
-

Database Connection

ADO.NET is also a part of the .NET Framework.
ADO.NET

is used to
handle data access
.
With ADO.NET

you can
work with databases
.

What

is ADO.NET?



ADO.NET is a part of the .NET Framework



ADO.NET consists of a set of classes used to handle data access



ADO.NET is
entirely based on XML

5 main steps

for
accessing database
s

and
displaying data on Web
.

1)


Create a Database

Connection

Assume

Nort
hwind
is a
database
to use.

First,

(1)

import the "
System.Data.OleDb
" namespace
. We need this namespace to work with
Microsoft Access and other OLE DB database providers. We will

(2)

create the connection to the database

in the
Page_Load subroutine
. We




(2.a
)

create a dbconn variable

as a
new OleDbConnection class
with a
connection string which identifies the OLE DB provider and the location of the database. Then we



(2.b
)

open the database connection
:

<%@
Import Namespace="System.Data.OleDb"

%>


<s
cript runat="server">

sub

Page_Load

dim dbconn

dbconn=New OleDbConnection
("Provider=Microsoft.Jet.OLEDB.4.0;

data source=" & server.mappath("northwind.mdb"))

dbconn.Open()

end sub

</script>

2)

Create a Database

Command

To specify the records to retrieve from

the database, we will create a dbcomm variable as a new
OleDbCommand class. The OleDbCommand class is for issuing SQL queries against database tables:

dim dbconn,
sql,dbcomm

……

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)


3)

Create a

DataReader

The
OleDbDataReader

class is used to
read a stream of records from a data
source
. A DataReader is created by calling the ExecuteReader method of the OleDbCommand object:

4)

Bind to a Repeater Control

Then we bind the DataReader to a Re
peater control:


5)

Close the Database Connection

Always
close both the DataReader and database connection

after access to the
database is no longer required:

dbread.Close()

dbconn.Close()


http://www
.w3schools.com/php/default.asp


PHP
Tutorial

PHP is a powerful tool for making _______(
dynamic and interactive
) Web pages.

PHP is the
widely
-
used, free, and efficient alternative to competitors

such as Microsoft's
ASP
.

PHP
Introduction

What is PHP?



PHP st
ands for
P
HP:
H
ypertext
P
reprocessor



PHP is a
_______(
server
-
side
)

scripting language
, like ASP



PHP scripts are executed on the
_______(
server
)



PHP
supports many databases

(MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, etc.)



PHP is an o
pen source software



PHP is free to download and use

What is a PHP File?



PHP files can contain text, HTML tags and scripts



PHP files are returned to the browser as plain HTML




PHP

files

have a
file extension of ".php", ".php3", or ".phtml"

What is MySQL?



My
SQL is a database server



MySQL is ideal for both small and large applications



MySQL supports standard SQL



MySQL compiles on a number of platforms



MySQL is free to download and use

PHP + MySQL



PHP combined with MySQL are cross
-
platform

(you can develop in W
indows and
serve on a Unix platform)

Why PHP?



PHP runs on different platforms (Windows, Linux, Unix
, etc.)



PHP is compatible with almost all servers used today (Apache, IIS, etc.)



PHP is FREE to download from the official PHP resource:
www.php.net



PHP is easy to learn and runs efficiently on the server side

Where to Start?

To get access to a web server with PHP support, you can:



Install Apache (or IIS) on your own server, install PHP, and MySQL



Or find a web h
osting plan with PHP and MySQL support

PHP
Installation

Download PHP

Download PHP for free here:
http://www.php.net/downloads.php

Download MySQL Database

Download MySQL for free here:
http://www.mysql.com/downloads/index.html

Download Apache Server

Download Apache for free here:
http://httpd.apache.org/download.cgi

PHP
Syntax

Basic PHP Syntax

A PHP scripting block always starts with
<?php

and ends with
?>
. A PHP scripting block can be placed
anywhere in the document.

Example of a simple PHP script which
sends the text "Hello World" to the
__(
browser
)
:

PHP script

“Eq
uivalent” C++ code segment

<html>

<body>

<?php

echo

"Hello World";

?>

</body>

</html>


void main ()

{

cout

<< "Hello World";


}


Each code line in PHP must
end with a

semicolon
.

There are two basic statements to output text with PHP:
echo

and
print
.

Not
e:

The file must have a
.php

extension
. If the file has a .html extension, the PHP code will not be
executed.


PHP
Variables

All variables in PHP start with a
$

sign symbol. Exp:
$var_name

=
value
;


The Concatenation Operator

for
strings

The concatenation
operator
dot (.)


is used to
put two string values together
.

PHP script

“Equivalent” C++ code segment

<?php




$txt1="Hello World!";


$txt2="

What a nice day!";


echo

$txt1 . $txt2
;

?>

void main ()

{


char*

txt1
, txt2;


txt1="Hello World!";


txt2="

What a nice day!";


cout <<

txt1
<<

txt2;

}

PHP
If...Else

Statements

PHP script

“Equivalent” C++ code segment

<?php



$d =
5
;

if

($d
< 0
)



echo

"
Negative
";

elseif

(
$d ==
0
)



echo "
Zero
";

else



echo "
Positive
";

?>

void main ()

{

int

d =
5
;

if

(d <
0
)



cout

<< "Negative";

else

if

(
d == 0
)



cout

<< "Zero";

else



cout

<< "Positive";

}

PHP
Switch

Statement

PHP script

“Equivalent” C++ code segment

<?php


$d =
5
;

switch

(

$d

)

{

case 1:



echo

"
One
";

break;

case 2:



echo

"Two";

break;

default:



echo "
Not 1 or 2
";

}

?>

void main ()

{

int d =
5
;

switch

( d
)

{

case 1:



cout

<< "One";

break;

case 2:



cout

<< "Two";

break;

default:



cout

<< "Not 1 or 2";

}

}


PHP
Arrays

In PHP, there are
three

kind
s

of arrays:



Numeric array

-

An array with a nu
meric index



Associative array

-

An array where each ID key is associated with a value



Multidimensional array

-

An array containing one or more arrays

Numeric Arrays

A numeric array stores each array element with a numeric index.

There are
two methods to cr
eate a numeric array
.


1. In the following example the
index are automatically assigned

(the index starts at 0):


PHP

<?php



$cars

=

array
(
"Saab","Volvo","BMW","Toyota"
)
;


echo “$cars[1]
=
” . $cars[1
];

//$
cars[1]
=Volvo

?>

C++

#include <string>


#include <iostream>

using namespace std;


void main ()

{


string

cars[]

=

{
"Saab","Volvo","BMW","Toyota"
}
;


cout << "cars[1] = " << cars[
1
];
//
cars[1] =

Volvo

}


2. In the following example we
assign the index manually
:

PHP

<?php

$cars[0]="S
aab";

$cars[1]="Volvo";

$cars[2]="BMW";

$cars[3]="Toyota";

echo $cars[0] . " and " . $cars[1] . " are Swedish cars.";

?>

C++

…… ……

void main ()

{

string

cars[4]
;

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

cars[3]="Toyota";

cout << cars[0] << " and
" << cars[1] << " are Swedish cars.";

}






PHP Looping
-

while

/do...while/for


Loops

Exp:
Compute

sum = 1 + 2 + … + 10.


while

do...while

for



PHP

<?php



$sum = 0;

$k = 1;


while

( $k <= 10)


{


$sum += $k; $k ++;


}


echo
"
Su
m =
"

. sum;

?>

<?php


$sum = 0; $k = 1;


do


{


$sum += $k; $k ++;


}

while

( $k <= 10) ;


echo
"
Sum =
"

. sum;

?>

<?php


$sum = 0; $k = 1;


for

($k=1; $k<=10; $k++)


{


$sum += $k;


}


echo
"
Sum =
"

. sum;

?>

C++

…… ……

void main
()

{


int sum = 0, k = 1;


while

( k <= 10)


{


sum += k; k ++;


}


cout << "Sum = " << sum;

}

…… ……

void main ()

{


int sum = 0, k = 1;


do


{


sum += k; k ++;


}
while

( k <= 10);


cout << "Sum = " << sum;

}

…… ……

void m
ain ()

{


int sum = 0, k = 1;


for

(k=1; k<=10; k++)


{


sum += k;


}


cout << "Sum = " << sum;

}


The
foreach

Loop

(No C++ counterpart)


The foreach loop is used to
loop through arrays
.


PHP example 1

PHP example 2

<?php


$x

= array("o
ne","two","three");


foreach

(
$x

as $value)



{




echo $value . "<br />";



}

?>

<?php


$
cars
[0]="Saab";


$
cars
[1]="Volvo";


$
cars
[2]="BMW";


$
cars
[3]="Toyota";


foreach

($
cars

as $value)



{




echo $value . "<br />";



}

?>


PHP
Fu
nctions


The real power of PHP comes from its functions.

In PHP, there are 700
+

built
-
in functions.


PHP Built
-
in Functions

(18 groups)



Array functions




Calendar functions




Date functions




Directory functions




Error functions




Filesystem functions




Etc.



Create a PHP Function

PHP Function

C++ Function

<html>

<head> </head>

<body>


<?php


function
getAvg
($x, $y)

{

$avg = ($x
+ $y)/2;

return $avg;

}


echo "The average is " .
getAvg
(2,6);


?>


</body>

</html>

#include <iostream>

using namespace std;


float getAvg
(
float
x,
float
y)

{

float
avg = (x + y)/2;

return avg;

}


void main ()

{

cout << "The average is " <<
getAvg
(2,6);

}




PHP Function

C++ Function

<html>

<head> </head>

<body>


<?php


function

getMin
($x, $y)

{


$min = $x;


if ($y < $min) $min = $y;




return $min;

}


echo "The average is "

.

getMin
(2,6);



?>


</body>

</html>

#include <iostream>

using namespace std;


float getMin
(
float
x,
float
y)

{


float
min;


min = x;


if (y < min) min = y;




return min;

}


void main ()

{

cout <<"The average is " <<
getMin
(2,6);

}





http://www.w3schools.com/js/defaul
t.asp



JavaScript is
THE

scripting language of the Web.

JavaScript is used in millions of Web pages to
add
_________ (
functionality
)
, validate
_________ (
forms
)
, detect
_________ (
browsers
)
, and much more.

What is JavaScript?



JavaScript was designed to a
dd
_________
(
interactivity)

to HTML pages



JavaScript is a
_________
(
scripting)

language



A scripting language is a
_________
(
lightweight)

programming language



JavaScript is usually embedded directly into HTML pages



JavaScript is an interpreted language (
means that scripts execute without preliminary
compilation)



Everyone can use JavaScript without purchasing a license

What can a JavaScript do?



JavaScript gives HTML designers a
_________
(
programming)

tool
-

HTML authors are
normally not programmers, but J
avaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code into their HTML pages



JavaScript can put
_________
(
dynamic)

text into an
_________ (
HTML) page
-

A
JavaScript statement like this: document.write("
<h1>" + name + "</h1>") can write a variable
text into an HTML page



JavaScript can react to
_________
(
events)

-

A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a user clicks on an HTML
element



JavaS
cript can read and write HTML
_________
(
elements)

-

A JavaScript can read and
change the content of an HTML element



JavaScript can be used to
_________
(
validate)

data
-

A JavaScript can be used to validate
form data before it is submitted to a server. Th
is saves the server from extra processing



JavaScript can be used to detect the visitor's
_________
(
browser)

-

A JavaScript can be
used to detect the visitor's browser, and
-

depending on the browser
-

load another page
specifically designed for that brows
er



JavaScript can be used to create
_________
(
cookies)

-

A JavaScript can be used to store
and retrieve information on the visitor's computer



Example

1

-

write
text

on a web page

<html>

<body>


<script

type
="
text
/
javascript
">


document.write
("Hel
lo World!");


</script>

</body>

</html>

Example 2
-

write text with added tags

<h1>

</h1>

on a web page

<html>

<body>


<script

type
="
text
/
javascript
">


document.write
("
<h1>
Hello World!
</h1>
");


</script>

</body>

</html>


Where to Put th
e JavaScript



in both the
head

and
body

sections

JavaScripts in the
head

section will be executed
ONLY
when
(the scripts are)
CALLED
.

JavaScripts in the
body

section will be executed
(immediately)
WHILE

the
page

loads
.


Example 3


A JavaScript in <head>

Scripts to be executed
only when they are called
, or
when an event is triggered
,
go in the
head

section.

<html>

<head>


<script type="text/javascript">



function message()



{ alert("This alert box was called with the onload event"); }



</sc
ript>

</head>


<body onload="message()">

</body>

</html>


Example

4



A Java
S
cript

in <body>

Scripts to be executed
when the page loads

go in the
body

section.

<html>

<head>

</head>

<body>


<script type="text/javascript">


document.write("This mes
sage is written by JavaScript");


</script>

</body>

</html>


JavaScript Comments



same as for C++/Java/C#

Example
5



A Java
S
cript

comments and HTML comments

<html>

<head> </head>

<body>

<!
--

This is an HTML comment


inside <body> … </body>
--
>



<script type="text/javascript">


//
This is a JavaScript comment


inside < script> … </script>


document.write("This message is written by JavaScript");


</script>

</body>

</html>

Example
6



Java
S
cript

“for”/”while”/”do
-
while” loops

“for


loop

“while” loop

“do
-
while” loop

<html>

<body>

<script type="text/javascript">

var i, sum=0;


for (i=1; i<=5; i++)

{


sum = sum + i;

}

document.write("Sum

is " + sum
);


</script>

</body>

</html>

<html>

<body>

<script type="text/javascript">

var i, su
m=0;

i = 1;

while (i<=5)

{


sum = sum + i; i++;

}

document.write("Sum is " + sum);


</script>

</body>

</html>

<html>

<body>

<script type="text/javascript">

var i, sum=0;

i = 1;

do

{


sum = sum + i; i++;

}
while (i<=5) ;

document.write("Sum is " +

sum);


</script>

</body>

</html>

Output from all 3: Sum is 15.



Example
7



JavaScript “for” loop without and with
continue
/
break

“for” loop

“while” loop

“do
J
while” loop

<html>

<body>

<script type="text/javascript">

var i, sum=0;


for (i=1; i<=5; i++
)

{




sum = sum + i;

}

document.write("Sum is " +
sum
);


</script>

</body>

</html>

<html>

<body>

<script type="text/javascript">

var i, sum=0;


for (i=1; i<=5; i++)

{


if (i == 3)
continue;


sum = sum + i;

}

document.write("Sum is " +
sum
);


</scrip
t>

</body>

</html>

<html>

<body>

<script type="text/javascript">

var i, sum=0;


for (i=1; i<=5; i++)

{


if (i == 3)
break;


sum = sum + i;

}

document.write("Sum is " +
sum
);


</script>

</body>

</html>

Output:
Sum is 15

Output:
Sum is 12

Output:
Sum is 3


JavaScript
Events

Examples of events:



A
mouse click



A
web page or an image loading



Mouse moving

over

a hot spot(a button, image, etc) on the web page



Selecting an input field

in an HTML form



Submitting an HTML form



A
keystroke


Example 8


Mo
use moving over an image

<html>



<a

href="http://www.w3schools.com"
onmouseover
="alert(
'Mous
e moving

over me
!');

return false">

<img src="w3s.gif" alt="W3Schools" />

</a>

</html>


Example
9



Click an image (to display a message)

<html>




<a

href="http://www.w3schools.com"
onclick

="alert(
'Image is clicked
!');

return false">

<img src="w3s.gif" alt="W3Schools" />

</a>

</html>



XML
Tutorial

What is XML?



XML stands for EXtensible Markup Language



XML is a markup language much like HT
ML



XML was designed to
carry data
, not to display data



XML tags are not predefined. You must
define your own tags



XML is designed to be self
-
descriptive


Example 1

-

an XML document for a
note
from

John
to

Peter
. On the note, state the
date, time,
place an
d the subject

(say "Meet me in Lab ETB 241.") with which John wants to meet Peter
.



<?xml version="1.0" encoding="ISO
-
8859
-
1"?>

<note>


<to>

Peter
</to>


<from>

John

</from>


<
date
>12/09/2009</
date
>


<
time
>10:00am</
time
>


<
place
>ETB241</
place
>


<
sub
ject
>Meet me in LAB 241</
subject
>

</note>


XML
Attributes

XML
elements

can have
attributes

in the start tag, just like HTML.

Attributes

provide
additional information

about
elements
.


Example 2

-

elements

with

attributes

element

attribute

Example

img

s
rc

<img src="computer.gif">

a

href

<a href="demo.asp">


Well Formed XML Documents

A "Well Formed" XML document has correct XML syntax.

The syntax rules were described in the previous chapters:



XML documents must have a
root

element



XML elements must have

a
closing tag



XML tags are
case sensitive



XML elements must be
properly nested



XML
attribute values

must be
quoted




Display XML Data in HTML

Example
3


loop through an XML file (noteForPeter.xml), and
display a note

like:


Testing XML in HTML

To: Peter


From: John

Subject: Meet me in LAB 241


<!
--

File name:
Test_xml_in_html.html

--
>

<html>


<body>


<h2>Testing XML in HTML</h2>


<script type="text/javascript">


if (window.XMLHttpRequest)


{

xhttp=new XMLHttpRequest(); }


el
se // Internet Explorer 5/6


{

xhttp=new ActiveXObject("Microsoft.XMLHTTP"); }



xhttp.open("GET", "
noteForPeter.xml
", false);


xhttp.send("");


xmlDoc=xhttp.responseXML;



document.write("To: ");



document.write(xmlDoc.getE
lementsByTagName("
to
")[0].childNodes[0].node
Value + "<br />");


document.write("From: ");



document.write(xmlDoc.getElementsByTagName("
from
")[0].childNodes[0].no
deValue + "<br />");



document.write("Subject: ");


document.write(xmlDoc.getElemen
tsByTagName("
subject
")[0].childNodes[0].
nodeValue + "<br />");


</script>


</body>

</html>


<?xml version="1.0" encoding="ISO
-
8859
-
1"?>

<!
--

File name:
noteForPeter.xml

--
>


<note>


<
to
> Peter </
to
>


<
from
> John </
from
>


<date>12/09/2009</date>



<time>10:00am</time>


<place>ETB241</place>


<
subject
>Meet me in LAB 241</
subject
>

</note>