Final Exam Review Web Programming with HTML and Java

1
Final Exam ReviewWeb Programming with HTML and
Java
2
Topics Covered

• Basic Web Development Concepts
• HTML
• JavaScript

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 lt gt
• ltimg src"image.gif" /gt specifies an image
• most tags come in pairs, marking a beginning and
  ending
• lttitlegt and lt/titlegt enclose the title of a page

• an HTML element is an object enclosed by a pair
  of tags
• lttitlegtMy Home Pagelt/titlegt is a TITLE element
• ltbgtThis text appears bold.lt/bgt is a BOLD element
• ltpgtPart of this text is ltbgtboldlt/bgt.lt/pgt
• 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

lthtmlgt lt!-- page01.html --gt lt!-- Demo web page
--gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt Text that appears
in the page lt/bodygt lt/htmlgt
HTML documents begin and end with lthtmlgt and
lt/htmlgt tags Comments appear between lt!-- and
--gt HEAD section enclosed between ltheadgt and
lt/headgt BODY section enclosed between ltbodygt and
lt/bodygt
14
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

lthtmlgt lt!-- page02.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt This is a whole
lot of text that goes on and on and
on and on . . . lt/bodygt lt/htmlgt
15
Overriding default layouts
lthtmlgt lt!-- page03.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/HEADgt ltbodygt ltpgt This is a
paragraph of textltbr/gt made up of two lines.
lt/pgt ltpgt This is another paragraph with a
nbsp GAP nbsp between some of the words.
lt/pgt ltpgt nbspnbsp This paragraph
isltbr/gt indented on the first lineltbr/gt but
not on subsequent lines. lt/pgt lt/bodygt lt/htmlgt

• 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 ltbr/gt tag (no
  closing tag)
• can specify a new paragraph (starts on a new
  line, preceded by a blank line) using ltpgtlt/pgt
• can force a space character using the symbol for
  a non-breaking space nbsp

16
The concept of aCascading 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

18
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-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 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
lthtmlgt lt!-- form01.html --gt ltheadgt
lttitlegtHello/Goodbye pagelt/titlegt ltscript
type"text/javascript"gt function Hello()
globalNameprompt("Welcome to my page.
" "What is your
name?","") function Goodbye()
alert("So long, " globalName
" come back real soon.")
lt/scriptgt lt/headgt ltbody onLoad"Hello()"
onUnload"Goodbye()"gt Whatever text appears
in the page. lt/bodygt lt/htmlgt

• 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

view page in browser
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
• ltform name"FormName"gt
• lt/formgt
• 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

21
Button element

• the simplest form element is a button
• analogous to a real-world button, can click to
  trigger events
• ltinput type"button" /gt
• attributes include VALUE specifies label that
  appears on the button
• ONCLICK specifies code to be executed when
  clicked

lthtmlgt lt!-- form02.html --gt ltheadgt
lttitlegt Fun with Buttonslt/titlegt lt/headgt
ltbodygt ltform name"ButtonForm"gt ltinput
type"button" value"Click Me"
onClick"alert('Thanks, I needed that.')" /gt
lt/formgt lt/bodygt lt/htmlgt
22
Buttons JavaScript

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

lthtmlgt lt!-- form03.html --gt ltheadgt lttitlegt
Fun with Buttonslt/titlegt ltscript
type"text/javascript" src"http//www.creigh
ton.edu/davereed/csc551/JavaScript/random.js"gt
lt/scriptgt lt/headgt ltbodygt ltform
name"ButtonForm"gt ltinput type"button"
value"Click for Lucky Number"
onClick"num RandomInt(1, 100)
alert('The lucky number for the day is '
num)" /gt lt/formgt lt/bodygt lt/htmlgt
view page in browser
23
Buttons functions
lthtmlgt lt!-- form04.html --gt ltheadgt
lttitlegt Fun with Buttonslt/titlegt ltscript
type"text/javascript"gt function
Greeting() // Results displays a
time-sensitive greeting var now
new Date() if (now.getHours() lt 12)
alert("Good morning")
else if (now.getHours() lt 18)
alert("Good afternoon") else
alert("Good evening")
lt/scriptgt lt/headgt ltbodygt ltform
name"ButtonForm"gt ltinput type"button"
value"Click for Greeting"
onClick"Greeting()" /gt lt/formgt
lt/bodygt lt/htmlgt
for complex tasks, should define function(s) and
have the ONCLICK event trigger a function call
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
• ltTEXTAREA NAME"TextAreaName" ROWSNumRows
  COLSNumCols WRAP"virtual"gt
• Initial Text
• lt/TEXTAREAgt
• 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
• 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

lthtmlgt lt!-- frame13a.html --gt ltheadgt
lttitlegtTable of Squareslt/titlegt lt/headgt
ltframeset rows"20,"gt ltframe name"Input"
src"form13.html"gt ltframe name"Output"
src"aboutblank"gt lt/framesetgt lt/htmlgt
src"aboutblank" loads a blank page into the
frame (ready to be written to)
26
JavaScript
client-side programming with JavaScript
27
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., ltscript type"text/javascript"gt lt/scriptgt
• 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
JavaScript

• JavaScript code can be embedded in a Web page
  using SCRIPT tags
• the output of JavaScript code is displayed as if
  directly entered in HTML

lthtmlgt lt!-- js01.html --gt ltheadgt
lttitlegtJavaScript Pagelt/titlegt lt/headgt ltbodygt
ltscript type"text/javascript"gt // silly code
to demonstrate output document.write("Hello
world!") document.write("ltpgtHow are ltbr /gt"
"ltigtyoult/igt?lt/pgt")
lt/scriptgt ltpgtHere is some static text as
well. lt/pgt lt/bodygt lt/htmlgt
document.write displays text in page text to be
displayed can include HTML tags the tags are
interpreted by the browser when the text is
displayed as in C/Java, statements end with
JavaScript comments similar to C/Java //
starts a single line comment // enclose
multi-line comments
32
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, and
  JavaScript document?
• How would you use these technologies to
  accomplish a task or provide a solution to a
  problem?

33
20 QuestionsShort answer questionsSome minimal
programming will be requiredGood Luck!