1

SEN 910 CSS/HTML Programming

Final Exam Review

2

Topics Covered

• Client/Server Web Programming• Basic Web Development Concepts• HTML• JavaScript• (No Java)• (No database questions)

3

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

4

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)

e.g., email, telnet, ftp, usenet, Instant Messenger, Napster, …

Key distinction: Internet is hardware; Web is software

Many other Internet-based applications exist

5

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

6

Client-side programming

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

can download program with Web page, execute on client machine simple, generic, but insecure

7

Server-side programming

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

can store and execute program on Web server, link from Web page more complex, requires server privileges, but secure

8

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)

Uniform Resource Locators

9

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”

Uniform Resource Locators

10

HTML Basics

11

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 textcan 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

12

Web development tools

many high-level tools exist for creating Web pagese.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

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

so, why are we learning low-level HTML using a basic text editor?

13

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)

14

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><!-- page01.html --><!-- Demo web page -->

<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 <!-- and -->

HEAD section enclosed between <head> and </head>

BODY section enclosed between <body> and </body>

15

Text layout

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

<html><!-- page02.html --><!-- Demo web page -->

<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>

16

Overriding default layouts

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 non-breaking space: &nbsp;

<html><!-- page03.html --><!-- Demo web page -->

<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 &nbsp; GAP &nbsp; between some of the words. </p>

<p> &nbsp;&nbsp; This paragraph is<br/> indented on the first line<br/> but not on subsequent lines. </p></body>

</html>

17

The concept of aCascading Style Sheets™ (CSS)

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

19

Event-driven programsin 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-by-step

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 serialinstead, 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

20

OnLoad & OnUnload

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

<html> <!-- form01.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

21

HTML forms

most event-handling in JavaScript is associated with form elementsan 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 one

22

Button element

<html> <!-- form02.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>

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 buttonONCLICK : specifies code to be executed when clicked

23

Buttons & JavaScript

<html> <!-- form03.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

the ONCLICK event-handler can specify any JavaScript code can be a sequence of statements inside quotes, can call functions, …

24

Buttons & functions

<html> <!-- form04.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>

<body> <form name="ButtonForm"> <input type="button" value="Click for Greeting" onClick="Greeting();" /> </form> </body></html>

for complex tasks, should define function(s) and have the ONCLICK event trigger a function call

25

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 taginitial 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

26

JavaScript & frames

<html> <!-- frame13a.html -->

<head> <title>Table of Squares</title> </head>

<frameset rows="20%,*"> <frame name="Input" src="form13.html"> <frame name="Output" src="about:blank"> </frameset>

</html>

alternatives for program output:1. alert box : good for small messages2. separate window : good for longer text, outside of page3. text box / text area : integrated into page, but awkward & no formatting4. frames : can easily write lots of output, integrated & fully formattable

src="about:blank" loads a blank page into the frame (ready to be written to)

JavaScript

client-side programming with JavaScript

28

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

29

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 componente.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

30

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

31

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

32

ClientServer

Simple Transfer of Normal HTML

.HTMLFile

WebServer

Application(Apache)

Client’sBrowser(MSIE,

Netscape,Etc)

HTML HTML

33

JavaScript provides for client-side scriptingsource code is downloaded with the Web page interpreted by the browser as the page is loadedsimple execution model, language is closely integrated with HTML

Client-side recap

Java Applets provides for client-side programmingsource code is compiled into Java byte code on serverbyte code is downloaded with the Web page interpreted by the Java Virtual Machine in the browsermore 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

34

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 appletswith server-side, only have to test & optimize program for server platform

more options for applicationsserver-side program not limited for security reasons, can access files &

databases

increased powerserver machines tend to be more powerful, better tools

code integritydo not have to give client access to source code or data in order to

execute

35

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

36

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?