CIS 790                  BANNER-2                   PROF. AUCIELLO

Modify "Banner-1" by changing font (size and type),
speed, text, color, etc. Use "HTML Guide" to find answers.   
Screen Capture output, paste, and put in  HW Book.
Use your creativity to spice up technology!

Topics:  1.  Same as Explorer "Marquee" Command.     2.  time-delay
         3.  calling a function (on load)            4.  substring 
         5.  document, forms, boxes.                 




790-Banner-2 (ver 99.09.03)

Clues: Look at Page Source under 'View' Menu.

PROGRAM STEPS IN ENGLISH:

1.  start HTML
2.  start Head Section
3.  Create a title called "Scrolling Banner", end definition of title.

4.  Begin Script Language, using JavaScript.
5.    Define a string variable "ScrollString" containing "This banner .."
6.    Create a variable named 'timer' set to 0;
7.    Define a function called "Scrollon()"
8.    Opening brace.
9.       Put the name of the string variable in 'boxtext' within 'box'
         within 'document'.
10.      Create a message by extracting a substring starting at the 1st
         position going to then end of the string and chaining that to
         the character at 0, the 1st character in the string.
11.      Set time-delay of 100 milliseconds for function "Scrollon()".
12. Close brace.
13. End Script section of program.
14. End Head Section.

15. Begin Body Section, set background color to blue,
    when the html is loaded, call function "scrollon()"
16. Name the form "textform", and execute a script when form is submitted.
17. Define then Center a textbox 65 characters wide.
18. End Body
19. End HTML


Use the following JavaScript Statements to write the program:
(100 Points)
<INPUT TYPE="text" NAME="boxtext" SIZE="25" VALUE=""> <TITLE>Scrolling Banner</TITLE> <SCRIPT LANGUAGE="JavaScript"> { document.box.boxtext.value = ScrollString; ScrollString= ScrollString.substring(1,ScrollString.length) + ScrollString.charAt(0) function Scrollon() var ScrollString="ltor. This banner was created by Mauricio Chacon,<BR> with the understanding that he will help others put it on their web pages.<BR> Go Mauricio! "; timer = setTimeout("Scrollon()",200) ; } <HTML> <HEAD> <BODY BGCOLOR=yellow onLoad = Scrollon()> var timer = 0; <FORM NAME = "box" onSubmit = "0"> </SCRIPT> </HEAD> </BODY> </HTML> 
Activities:

Understanding Time-Delay:
    Drop 100 to 1.  read fast!

Understanding Substring:
    Can you extract the  substring  "Assignment" and display it?
    The substring's arguments are  substring(start, end)

    What is the 1st position -- 0 or 1?

Understanding charAt()
     What does it do?

Note the hierarchial method --   document.textform.textbox.value = 

says that within the document is a textform within it is textbox whose
value is ....

THERE IS A TEXTBOX WITHIN A TEXTFORM WITHIN A DOCUMENT!


add the alert statement to trace the flow.


Font types:

arial		arial narrow	boldoni		century
cursive		fantasy		graramond	helvetica	monospace
san-serif	times		serif