Our New Home

internalchildlikeInternet και Εφαρμογές Web

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

72 εμφανίσεις

1

Our New Home

http://140.116.246.95/Web%20programi
ng/WebProgramming.htm


Any comments or suggestions, please
send them to me or TAs!

2

Programming the

World Wide Web

1.
WWW & HTML

2.
Web Programming Languages


JavaScript, Java, Perl, PHP

3.
Cascading Style Sheet (CSS)

3

1. A Brief Intro to the Internet


-

Origins


-

ARPAnet
-

late 1960s and early 1970s


-

Network reliability


-

For ARPA
-
funded research organizations



-

BITnet, CSnet

-

late 1970s & early 1980s


-

email and file transfer for other institutions



-

NSFnet

-

1986


-

Originally for non
-
DOD funded places


-

Initially connected five supercomputer centers


-

By 1990, it had replaced ARPAnet for non
-


military uses


-

Soon became the network for all (by 1990)



-

NSFnet eventually became known as the Internet



-

What the Internet is:



-

A huge connection of computers connected in a


communications network


-

At the lowest level, since 1982, all connections


use Transmission Control Protocol/Internet Protocol


( TCP/IP)


-

TCP/IP hides the differences among devices


connected to the Internet



-

A network of networks?

4

1. A Brief Intro to the Internet
(continued)



-

Internet Protocol (IP) Addresses


-

Every node has a unique numeric address


xxx.xxx.xxx.xxx


-

Form: 32
-
bit binary number


-

New standard, IPv6, has 128 bits (1998)


ftp://ftp.isi.edu/in
-
notes/rfc2460.txt


-

Organizations are assigned groups of IPs for


their computers



-

Domain names


-

Form:
host
-
name.domain
-
names



-

First domain is the smallest; last is the largest



-

Last domain specifies the type of organization



-

Fully qualified domain name

-

the host name


and all of the domain names



-

DNS servers
-

convert fully qualified domain


names to IPs



-

Problem
: By the mid
-
1980s, several different


protocols had been invented and were being used


on the Internet, all with different user interfaces


(Telnet, FTP, Usenet, mailto

5

1.1 The World
-
Wide Web (
Wait?
)



-

A new protocol used on the Internet



-

Origins


-

Tim Berners
-
Lee at
CERN (Conseil European pour


la Recherce Nucleaire)

proposed the Web in 1989


-

Purpose: allows scientists to communicate with


each other through documents



-

The unit of info. referred as Pages? Documents?


Resources?


-

We’ll call them
documents




-

Document form: hypertext?



-

Hypermedia


more than just text


images,


sound, etc.



-

Web or Internet?


-

The Web:
a collection of software and protocols



(
http
, telnet, ftp, mailto, etc.)



-

Runs on the Internet


a collection of computers,


devices, networks
.



6

1.2 Web Browsers




-

Mosaic


National Center of Supercomputing


Applications

(NCSA, Univ. of Illinois), in early 1993


-

First to use a GUI, led to explosion of Web use


-

Initially for X
-
Windows, under UNIX, but was


ported to other platforms by late 1993



-

Browsers are clients

-

always initiate, servers


react (although sometimes servers require


responses)



-

Most requests are for existing documents, using


HyperText Transfer Protocol (HTTP)



-

But some requests are for program execution,


with the output being returned as a document



1.3 Web Servers




-

Running to response to browser requests, either


existing documents or dynamically built documents



-

Request
-
driven

7

1.4 URLs (Uniform Resource Locators)



-

General form:



scheme:object
-
address



-

The scheme is often a communications protocol,


such as
http,
telnet

or
ftp



-

For the
http

protocol, the object
-
address is:


//fully qualified domain name
/
doc path



-

For the

file

protocol, only the doc path is needed



-

Host name may include a port number, as in


zeppo:80
(
80

is the default, so this is silly
)



-

URLs cannot include
spaces(? Anything unusual


about our web URL? )

or any of a collection


of other special characters (semicolons, colons, ...)



-

The doc path may be abbreviated as a
partial path


-

The rest is furnished by the server configuration



-

If the doc path ends with
a slash
, it means it is a


directory

8











1.5 Multipurpose Internet Mail


Extensions (MIME)



-

Originally developed for sending different kinds of


doc. Through Internet mail



-

identification of a doc. returned by the server (attached


by the server to the beginning of the document)



-

Type specifications


-

Form:


type/subtype



-

Examples:
text/plain
,
text/html
,
image/gif
,


image/jpeg, video/mpeg



-

Server gets type from the requested file name’s


suffix
(
.html

implies
text/html
)



-

Browser: gets the type explicitly from the server,



otherwise, a conversion table



-

Experimental types



-

Subtype begins with
x
-


e.g.,
video/x
-
msvideo



-

Experimental types

require the server to send


a helper application or plug
-
in so the browser


can deal with the files

9

1.6 The Web Programmer’s Toolbox



-

HTML



-

To describe the general form and layout of


documents



-

An HTML document is a mix of content and


controls



-

Controls are tags and their attributes



-

Tags
often delimit content and specify


something about how the content should be


arranged in the document



-

Attributes
provide additional information


about the content of a tag



<img src = “mypicture.jpg”>



-

Tools for creating HTML documents



-

HTML editors
-

make document creation easier


-

Shortcuts to typing tag names, spell
-
checker,



-

What You See Is What You Get (WYSIWYG) HTML


editors,
Macromedia, Adobe, Frontpage, … etc
.



10

1.6 The Web Programmer’s Toolbox


(continued)


-

eXtensible Markup Language (
XML)


-

A meta
-
markup language



-

Used to create a new markup language for a


particular purpose or area



-

Meaningful tags can be defined for a specific area,



-

No presentation details, only element definition



-

A simple and universal way of representing data


of any textual kind



-

JavaScript



-

A
client
-
side

HTML
-
embedded scripting


language


used to create dynamic HTML doc.



-

Only related to Java through syntax



-

Dynamically typed

and not object
-
oriented




interpreted by clients’ browsers



-

Provides a way to access elements of HTML


documents and dynamically change them

Ex 1

Ex 2

11

1.6 The Web Programmer’s Toolbox


(continued)




-

Java


-

General purpose object
-
oriented programming


language



-

Based on C++, but simpler and safer



-

Applets
: a special kind of Java program especially


for web programming




-

bytecodes



扲潷se牳



exec畴敳 批 Java


Virtual Machine (JVM)



-
Perl (Practical Extraction and


Report Language)


-

A general purpose language



-

Provides server
-
side computation for


HTML documents, through Common Gateway


Interface (CGI)



-

Perl is good for CGI programming because:



-

Direct access to operating systems functions


-

Powerful character string pattern
-
matching


operations


-

Access to database systems

Java
-
Ex1

12

1.6 The Web Programmer’s Toolbox


(continued)




-

Perl is highly platform independent, and has


been ported to all common platforms



-

Perl is not just for CGI



-

Syntax is similar to C, but, not compile to binary


codes, instead, through interpreting.








-

PHP


-

A server
-
side scripting language



-

An alternative to CGI



-

Similar to JavaScript, syntax and dynamic typed



-

Great for form processing and database access


through the Web


Perl
-
CGI

Perl
-

Concole

Interne
t

C

G

I

A

P

P

PHP
-
Ex1

13

1.7 Origins and Evolution of HTML



-

Derived from SGML



-

Original intent: General layout of documents that


could be displayed by a wide variety of computers



-

Recent versions:


-

HTML 4.0
-

1997


-

Introduced many new features and deprecated


many older features



-

HTML 4.01
-

1998
-

A cleanup of 4.0



-

XHTML 1.0


-

Just 4.01 modified to fit the XML syntax


-

We’ll stick to nearly all of this syntax



Basic Syntax



-

Elements are defined by tags (markers)



-

Tag format:


-

Opening tag:
<
name [
/
]
>


-

Closing tag:
</
name
>

14

Basic Syntax
(continued)



-

The
content

of a tag appears between its opening


tag and its closing tag



-

Not all tags have content


-

If a tag has no content, its form is
<
name

/>



-

If a tag has attributes, they appear between its


name and the right bracket (later)



-

Tag names and attribute names must be written in


lowercase letters



-

Every tag that has content must have a closing tag



-

Tags must be properly nested


<ol><li> …….. </li></ol>


-

Comment form:
<!
--


--
>



-

Browsers ignore comments, unrecognizable tags,


line breaks, multiple spaces, and tabs



-

Tags are
suggestions

to the browser, even if they


are recognized by the browser

15

1.8 Standard HTML Document Structure



-

<html>
,
<head>
,
<title>
,
<body>

(or
<frameset>
)


are required




-

All four can have attributes, but we’ll ignore them


for now



-

The whole document must have
<html>

as its root



-

A document consists of a head and a body or


frameset


-

The
<title>

tag is used to give the document a title,


which is normally displayed in the browser’s


window title bar (at the top of the display)



-

An SGML

DOCTYPE

command is required by


XHTML 1.0, but there is not enough room on these


slides to show it
-

see book for its exact form



<!DOCTYPE html PUBLIC “
-
//w3c//DTD XHTML 1.0

Strict//EN” “http://www.w3.org/TR/xhtml1/DTD

/xhtml1
-
strict.dtd” >



-

There are three DTDs, or standards


Strict
,
Frameset
, and
Transitional

16

For the full Specifications

of


HTML4.01

and

XHTML1.0

visit:

http://www.w3.org/

17

2 Cascading Style Sheet

18

That’s it for today!


Next week: Ch.5 XML basics

19

Bonus #1


Write 2 CSS rules that :


Gives all h1 and h2 elements a
padding of
.5 ems
, a grooved
border style and a margin of .5
ems


Changes the color of all
elements with attribute class =

green
-
Move
” to green and
shifts then down 25 pixels and
right 15 pixels.


Refer to P. 99

20

Bonus.html


<!DOCTYPE html PUBLIC "
-
//W3C//DTD HTML 4.0
Transitional//EN">


<!
--

bonus.html
--
>


<HTML>


<HEAD>


<TITLE>Solution: 19.8</TITLE>


<STYLE TYPE = "text/css">






H1, H2 { padding: .5em;



border
-
style: groove;



margin: .5em }






.greenMove { color: #00FF00;



position: relative;



top: 25px;



left: 15px }


</STYLE>


</HEAD>



<BODY>


<H1>This is an H1 header</H1>


<H2>This is an H2 header</H2>


<br>


<P>Normal text<SPAN CLASS = "greenMove">Text with
class greenMove</SPAN></P>


</BODY>


</HTML>

bonus.html

21

<!DOCTYPE html PUBLIC "
-
//w3c//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">


<!
--

roots.html


Compute the real roots of a given quadratic


equation (a*x*x + b*x + c). If the roots are imaginary,


this script displays NaN, because that is what results


from taking the square root of a negative number


--
>

<html>

<head>

<title> Real roots of a quadratic equation </title>

</head>

<body>

<script type = "text/javascript">

<!
--

// Get the coefficients of the equation from the user


var a = prompt("What is the value of 'a'?
\
n", "");

var b = prompt("What is the value of 'b'?
\
n", "");

var c = prompt("What is the value of 'c'?
\
n", "");


// Compute the square root and denominator of the result


var root_part = Math.sqrt(b * b
-

4.0 * a * c);

var denom = 2.0 * a;


// Compute and display the two roots


var root1 = (
-
b + root_part) / denom;

var root2 = (
-
b
-

root_part) / denom;

document.write("The first root is: ", root1, "<br />");

document.write("The second root is: ", root2, "<br />");

//
--
>

</script>

</body>

</html>



Html

22

HTML Document

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft
Visual Studio 6.0">

<TITLE>DHTML
--
> moving text around</TITLE>

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


</script>


</HEAD>

<BODY onload = "initText();">



<P>

<span id= 'theText' style = "position:relative; left : 0px;
top: 0px; font: bold 20pt 'comic'; color: blue;" >






Jump into JavaScript world!

</span>









</P>


</BODY>

</HTML>

23

textMoving.js

var dom, x, y, finalx = 300, finaly = 300;


function initText(){


dom = document.getElementById('theText').style;


//get the current position of the text


var x=dom.left;


var y=dom.top;


//convert the string values of left and top to


//numbers by stripping off the units


x = x.match(/
\
d+/);


y = y.match(/
\
d+/);




//call the function that moves it


moveText(x, y);

}//end of initText

//a function to move the text from its original position to
(finalx, finaly)

function moveText(x, y){


//if x coordinate is not equal, mover x toward finalx


if (x !=finalx){



if(x > finalx)




x
--
;



else if (x<finalx)




x++;


}




//if y coordinate is not equal, mover y toward finaly


if (y !=finaly){



if(y > finaly)




y
--
;



else if(y<finaly)




y++;


}


……..

HTML

24

Domain Name Conversion

Domain

Name

Domain

Name

Name

Server

IP

IP

Web

Server

Internet

Internet

25

Simple Java Applet

import java.awt.*;

import java.applet.Applet;


public class Drawing
extends Applet

//load applet class

{


public void paint (Graphics g)


{


g.setColor(Color.blue);


g.fillOval(30,30,50,50);


g.setColor(Color.orange);


g.fillOval(60,40,90,90);


}

}


Note: Applet can’t be run by “java
console”?

26

Applet applied in the HTML

<!DOCTYPE html PUBLIC "
-
//w3c//DTD XHTML
1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">


<
--

wel2.html

A document to test the Wel2 applet

--
>

<html>

<head>

<title> Wel2 </title>

</head>

<body>

<p>

<APPLET


code = “Drawing.class"


width = "500"


height = “300">

</APPLET>

</p>

</body>

</html>

Show

Don’t for get to

javac
” your
java file first

27

A Perl Example

<body>

<form action = "
http://127.0.0.1/cgi
-
bin/survey.pl
" method = "
post
" >

<h1> Welcome to Wei's Consumer Electronics Purchasing Survey
Center </h1>


<p></p><h2>Your Age Category</h2></p>

<input type = "radio" name = "age" value = "12" checked ="true" >10
-
25<br>

<input type = "radio" name = "age" VALUE="24">26
-
40<br>


<p></p><h2>Your Gender Category</h2></p>

<input type = "radio" name = "gender" value = "male"


checked ="true" >Male<br>

<input type = "radio" name = "gender" VALUE="female">Female<br>


<p></p><h2>Your Next Consuming Electronics Purchase will
be:</h2></p>

<input type = "radio" name = "product" VALUE="HDTV" >HDTV<br>

<input type = "radio" name = "product" VALUE="VCR">VCR<br>

<input type = "radio" name = "product" VALUE="CDR" >CD
Player<br>

<input type = "radio" name = "product" VALUE="MCDPR">Mini CD
Player/Recorder<br>

<input type = "radio" name = "product" VALUE="DVD" >DVD
Player<br>

<input type = "radio" name = "product" VALUE="Other">Others<br>


<p>

<input type = "submit" value = "Submit Order">


<input type = "reset" value = "CLear Order Form"></p>


</form>


<p>To see the results of the survey so far, click


<a href = "
http://127.0.0.1/cgi
-
bin/survey2.pl
">here

</a>

</p>

Server
-
side

Perl

28

# test the environment of perl running
on Windows


@environment = values %ENV;

print "All of the environmental settings
are:
\
n";

foreach $item (@environment){


print "$item
\
n";

}


A Perl Example to query

the Environment Settings

Console

29

PHP embed in HTML

<html>

<head>

<meta http
-
equiv="Content
-
Type"
content="text/html; charset=big5">

<title>PHP
-

practice 1: print date</title>

</head>


<body>

<p>

<?php


print "<b>Welcome to Wel's homepage<br
/><br />";


print "Today is:</b>";


print date("l, F js");


print "<br />";

?>

</p>

</body>


</html>

PHP