Overview and History

Transcript Overview and History

SEN 910 CSS/HTML Programming
Final Exam Review
1
Topics Covered
•
•
•
•
•
•
Client/Server Web Programming
Basic Web Development Concepts
HTML
JavaScript
(No Java)
(No database questions)
2
SEN 910 CSS/HTML Programming
Course goals:
 understand the technology and protocols underlying the World Wide
Web
 become familiar with common tools and techniques for developing
Web-based applications, both client-side and server-side
 develop a working knowledge of HTML, JavaScript, PHP, Perl as
languages for developing Web applications
3
Web  Internet
Internet: a physical network connecting millions of computers using the
same protocols for sharing/transmitting information (TCP/IP)
 in reality, the Internet is a network of smaller networks
World Wide Web: a collection of interlinked multimedia documents that are
stored on the Internet and accessed using a common protocol (HTTP)
Key distinction: Internet is hardware; Web is software
Many other Internet-based applications exist
e.g., email, telnet, ftp, usenet, Instant Messenger, Napster, …
4
Static vs. dynamic pages
most Web pages are static
 contents (text/links/images) are the same each time it is accessed
e.g., online documents, most homepages
HyperText Markup Language (HTML) is used to specify text/image format
as the Web moves towards online services and e-commerce, Web pages
must also provide dynamic content
 pages must be fluid, changeable (e.g., rotating banners)
 must be able to react to the user's actions, request and process info, tailor services
e.g., amazon.com, www.csuhayward.edu
this course is about applying your programming skills to the development
of dynamic Web pages and applications
5
Client-side programming
can download program with Web page, execute on client machine
 simple, generic, but insecure
JavaScript
 a scripting language for Web pages, developed by Netscape in 1995
 uses a C++/Java-like syntax, so familiar to programmers, but simpler
 good for adding dynamic features to Web page, controlling forms and GUI
Java applets
 can define small, special-purpose programs in Java called applets
 provides full expressive power of Java (but more overhead)
 good for more complex tasks or data heavy tasks, such as graphics
6
Server-side programming
can store and execute program on Web server, link from Web page
 more complex, requires server privileges, but secure
CGI programming
 programs can be written to conform to the Common Gateway Interface
 when a Web page submits, data from the page is sent as input to the
CGI program
 CGI program executes on server, sends its results back to browser as
a Web page
 good if computation is large/complex or requires access to private data
Active Server Pages, Java Servlets, PHP, Server Side Includes
 vendor-specific alternatives to CGI
 provide many of the same capabilities but using HTML-like tags
7
Uniform Resource Locators
Hypertext Transfer Protocol (HTTP)
 manages the hypertext links that are used to
navigate the Web
 ensures that Web browsers correctly process
and display the various types of information
contained in Web pages (text, graphics,
audio, and so on)
8
Uniform Resource Locators
The protocol portion of a URL is followed by a colon,
two forward slashes, and a host
A host refers to a computer system that is being
accessed by a remote computer
The host portion of a URL is usually www for “World
Wide Web”
9
HTML Basics
10
Hypertext & HTML
HyperText Markup Language (HTML) is the language for
specifying the static content of Web pages
 hypertext refers to the fact that Web pages are
more than just text
can contain multimedia, provide links for
jumping within & without
 markup refers to the fact that it works by
augmenting text with special symbols (tags)
that identify structure and content type
11
Web development tools
many high-level tools exist for creating Web pages
e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill,
Macromedia DreamWeaver, HotDog, …
also, many applications have "save to HTML" options (e.g., Word)
for most users who want to develop basic, static Web pages, these are
fine
assembly language vs. high-level language analogy
so, why are we learning low-level HTML using a basic text editor?




may want low-level control
may care about size/readability of pages
may want to "steal" page components and integrate into existing pages
may want dynamic features such as scripts or applets
12
Tags vs. elements
HTML specifies a set of tags that identify structure and content type
 tags are enclosed in < >
<img src="image.gif" /> specifies an image
 most tags come in pairs, marking a beginning and ending
<title> and </title> enclose the title of a page
an HTML element is an object enclosed by a pair of tags
<title>My Home Page</title> is a TITLE element
<b>This text appears bold.</b> is a BOLD element
<p>Part of this text is <b>bold</b>.</p>
is a PARAGRAPH element that contains a BOLD element
HTML document is a collection of elements (text/media with context)
13
Structural elements
an HTML document has two main structural elements
 HEAD contains setup information for the browser & the Web page
e.g., the title for the browser window, style definitions, JavaScript code, …
 BODY contains the actual content to be displayed in the Web page
<html>

-->
<head>
<title>Title for Page</title>
</head>
<body>
Text that appears in the page
</body>
</html>
HTML documents begin and end with <html>
and </html> tags
Comments appear between 
HEAD section enclosed between <head>
and </head>
BODY section enclosed between <body>
and </body>
14
Text layout
<html>

-->
<head>
<title>Title for Page</title>
</head>
<body>
This is a whole lot of text that
goes on
and
on
and
on
and
on
.
.
.
</body>
</html>
the BODY can contain multiple lines
of text
 text layout and spacing is pretty
much ignored by the browser
 every sequence of whitespace
is interpreted as a single space
 browser automatically wraps the
text to fit the window size
 can layout text in an HTML
document for readability, will not
affect how it is viewed
15
Overriding default layouts
<html>

-->
<head>
<title>Title for Page</title>
</HEAD>
<body>
<p>
This is a paragraph of text<br/>
made up of two lines.
</p>
<p>
This is another paragraph with a
  GAP   between
some of the words.
</p>
<p>
   This paragraph is<br/>
indented on the first line<br/>
but not on subsequent lines.
</p>
</body>
</html>
for the most part, layout of the text
must be left to the browser
WHY?
can override some text layout
 can cause a line break using the
<br/> tag (no closing tag)
 can specify a new paragraph
(starts on a new line, preceded
by a blank line) using
<p>…</p>
 can force a space character
using the symbol for a nonbreaking space:  
16
The concept of a
Cascading Style Sheets™ (CSS)
17
HTML Forms and JavaScript
Event-driven programs and HTML form elements
 event-driven programs
 ONLOAD, ONUNLOAD
 HTML forms & attributes
 button, text box, text area
 selection list, radio button, check box, password, hidden, …
 JavaScript form events
 properties: name, type, value, …
 methods: blur(), focus(), click(), …
 event handlers: onBlur(), onFocus(), onChange(), onClick(), …
 advanced features & techniques
 windows & frames, timeouts, cookies
Event-driven programs
in C++, programs are serially executed
 start with main function, execute sequentially from first statement
 may loop or skip sections of code, but the program proceeds step-bystep
the programmer specifies the sequence in which execution occurs
(with some variability due to input values)
there is a beginning and an end to program execution
computation within a Web page is rarely serial
instead, the page reacts to events such as mouse clicks, buttons, …
 much of JavaScript's utility is in specifying actions that are to occur in the page as a
result of some event
the programmer may have little or no control over when code will (if ever) be
executed, e.g., code that reacts to a button click
there is no set sequence, the page waits for events and reacts
19
OnLoad & OnUnload
<html>

<head>
<title>Hello/Goodbye page</title>
<script type="text/javascript">
function Hello()
{
globalName=prompt("Welcome to my page. " +
"What is your name?","");
}
function Goodbye()
{
alert("So long, " + globalName +
" come back real soon.");
}
</script>
</head>
<body onLoad="Hello();" onUnload="Goodbye();">
Whatever text appears in the page.
</body>
</html>
view page in browser
the simplest events are
when the page is loaded or
unloaded
the ONLOAD attribute of
the BODY tag specifies
JavaScript code that is
automatically executed
when the page is loaded
the ONUNLOAD
attribute similarly
specifies JavaScript
code that is
automatically executed
when the browser leaves
the page
20
HTML forms
most event-handling in JavaScript is associated with form elements
an HTML form is a collection of elements for handling input, output, and
events in a page
<form name="FormName">
…
</form>
form elements include:
for input:
button, selection list, radio button, check box, password,
…
for input/output:
text box, text area, …
we will revisit forms when we consider CGI programming
 a form groups together elements, whose contents are submitted as
21
one
Button element
the simplest form element is a button
 analogous to a real-world button, can click to trigger events
<input type="button" … />
attributes include: VALUE : specifies label that appears on the button
ONCLICK : specifies code to be executed when clicked
<html>

<head>
<title> Fun with Buttons</title>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Click Me"
onClick="alert('Thanks, I needed that.');" />
</form>
</body>
</html>
22
Buttons & JavaScript
the ONCLICK event-handler can specify any JavaScript code
 can be a sequence of statements inside quotes, can call functions, …
<html>

<head>
<title> Fun with Buttons</title>
<script type="text/javascript"
src="http://www.creighton.edu/~davereed/csc551/JavaScript/random.js">
</script>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Click for Lucky Number"
onClick="num = RandomInt(1, 100);
alert('The lucky number for the day is ' + num);" />
</form>
</body>
</html>
view page in browser
23
<html>

<head>
<title> Fun with Buttons</title>
<script type="text/javascript">
function Greeting()
// Results: displays a time-sensitive greeting
{
var now = new Date();
if (now.getHours() < 12) {
alert("Good morning");
}
else if (now.getHours() < 18) {
alert("Good afternoon");
}
else {
alert("Good evening");
}
}
</script>
</head>
Buttons &
functions
for complex tasks,
should define function(s)
and have the ONCLICK
event trigger a function
call
<body>
<form name="ButtonForm">
<input type="button" value="Click for Greeting"
onClick="Greeting();" />
</form>
</body>
</html>
24
Text areas
a TEXT box is limited to one line of input/output
a TEXTAREA is similar to a text box in functionality, but can specify any
number of rows and columns
<TEXTAREA NAME="TextAreaName" ROWS=NumRows COLS=NumCols
WRAP="virtual">
Initial Text
</TEXTAREA>
 Note: unlike a text box, a TEXTAREA has closing tag
initial contents of the TEXTAREA appear between the tags
 WRAP="virtual" specifies that text in the box will wrap lines as needed
 as with a text box, no HTML formatting of TEXTAREA contents
25
JavaScript & frames
alternatives for program output:
1.
2.
3.
4.
alert box : good for small messages
separate window : good for longer text, outside of page
text box / text area : integrated into page, but awkward & no formatting
frames : can easily write lots of output, integrated & fully formattable
<html>

<head>
<title>Table of Squares</title>
</head>
<frameset rows="20%,*">
<frame name="Input" src="form13.html">
<frame name="Output" src="about:blank">
</frameset>
src="about:blank" loads
a blank page into the frame
(ready to be written to)
</html>
26
JavaScript
client-side programming with JavaScript
JavaScript is not Java
•
•
•
•
JavaScript is a very simple scripting language.
Syntax is similar to a subset of Java.
Interpreted language.
Uses objects, but doesn't really support the creation
of new object types
28
Client-side programming
recall: HTML is good for developing static pages
 can specify text/image layout, presentation, links, …
 Web page looks the same each time it is accessed
 in order to develop interactive/reactive pages, must integrate
programming
client-side programming
 programs are written in a separate programming language
e.g., JavaScript, JScript, VBScript
 programs are embedded in the HTML of a Web page, with tags to identify the
program component
e.g., <script
type="text/javascript"> … </script>
 the browser executes the program as it loads the page, integrating the dynamic
output of the program with the static content of HTML
29
Scripts vs. programs
a scripting language is a simple, interpreted programming language
 scripts are embedded as plain text, interpreted by application
 simpler execution model: don't need compiler or development
environment
 saves bandwidth: source code is downloaded, not compiled
executable
 platform-independence: code interpreted by any script-enabled
browser
 but: slower than compiled code, not as powerful/full-featured
30
Common scripting tasks
adding dynamic features to Web pages
 validation of form data
 image rollovers
 time-sensitive or random page elements
defining programs with Web interfaces
 utilize buttons, text boxes, clickable images, prompts, frames
limitations of client-side scripting
 since script code is embedded in the page, viewable to the world
 for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
 since designed to run on any machine platform, scripts do not contain platform
specific commands
 script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development
31
Simple Transfer of Normal HTML
Server
.HTML HTML
File
Web
Server
Application
(Apache)
Client
HTML
Client’s
Browser
(MSIE,
Netscape,
Etc)
32
Client-side recap
JavaScript provides for client-side scripting
 source code is downloaded with the Web page
 interpreted by the browser as the page is loaded
 simple execution model, language is closely integrated with HTML
Java Applets provides for client-side programming
 source code is compiled into Java byte code on server
 byte code is downloaded with the Web page
 interpreted by the Java Virtual Machine in the browser
 more complicated model, requires compiler on server
 (slightly) faster execution, full-featured with extensive library support
both approaches yield platform independence
 requires JavaScript/Java enabled browser for desired platform
33
Server-side vs. client-side programming
instead of downloading the program and executing on the client,
 have the client make a request
 execute the program on the server
 download the results to the client
advantages
 cross-platform support
browser variations/bugs yield differences with JavaScript & Java applets
with server-side, only have to test & optimize program for server platform
 more options for applications
server-side program not limited for security reasons, can access files & databases
 increased power
server machines tend to be more powerful, better tools
 code integrity
do not have to give client access to source code or data in order to execute
34
Common server-side applications
search engines
 must maintain a large database of links & documents
 must be able to index, sort data, perform complex searches
 requires lots of storage, optimum performance  server-side
database access
 Web page can serve as front-end to a database
 make requests from browser, passed on to Web server, calls CGI
program to access the database, sends the results back to the browser
chat & bulletin board services
 user enters messages in a Web interface, passed on to server
 chat: CGI program distributes messages to all connected users
 bulletin board: CGI program adds to accessible database of messages
35
Final questions to ponder…
• What technologies are available for the internet?
• Why would you want to use a scripting languages?
• What the difference between client side and server
side applications?
• How can HTML be used with other languages?
• What are the basic parts of an HTML, Perl, PHP, CGI
document?
• How would you use these technologies to accomplish
a task or provide a solution to a problem?
36

Overview and History

Transcript Overview and History

Directory