1
Summer Seminar 2004Summer Seminar 2004
Dr. Don Needham USNA’83Dr. Don Needham USNA’83Associate ProfessorAssociate Professor
Computer Science DeptComputer Science DeptU.S. Naval AcademyU.S. Naval Academy
www.cs.usna.edu/~needhamwww.cs.usna.edu/~needham
2
WelcomeWelcome
Admin ItemsRestrooms: Located next to the elevatorPlease sign Name and Address Sheet
Login Procedures1. Press <Ctrl>-<Alt>-<Delete> Keys <Ctrl>-<Alt>-<Delete> Keys simultaneously2. User name: sseminarsseminar
3. Password: sseminarsseminar
4. Log on to: CS-STUDENTS CS-STUDENTS
5. Press OkOk Button
3
WelcomeWelcome
AdministriviaPlease open Internet Explorer and visit the following site:
http://www.summerseminar.cs.usna.edu/summerseminar/summerseminar.aspx
If you want to see these slides on your own computer (and copy and paste from them!), you can download them from:
http://www.cs.usna.edu/~needham/SummerSeminar/SummerAY04/SummerSeminar2004.ppt
4
Today’s ScheduleToday’s Schedule
USNA Computer Science DeptUSNA Computer Science Dept
Introduction to HTML
Programming with Java Script
5
USNA Computer Science DeptUSNA Computer Science Dept
USNA Computer Science Departmenthttp://www.cs.usna.eduhttp://www.cs.usna.edu
Two Majors within CS Department• B.S. in Computer Science• B.S. in Information Technology
Faculty members• Seven Civilian• Ten Military
6
USNA Computer Science DeptUSNA Computer Science Dept
Computer Science CurriculumStrong Core Curriculum
• Nationally Accredited by the Accreditation Board for Engineering and Technology (ABET)
Opportunities to explore the following areas in depth• Computer Networks/Information Assurance• Software Engineering• Artificial Intelligence and Robotics• Computer Architecture• Computer Graphics
7
USNA Computer Science DeptUSNA Computer Science Dept
Computer Science Curriculum (cont)Learning opportunities at USNA
• Programming skills– C++, Java– LISP / Scheme– Assembler
• Tools/Environments– Visual C++– JBuilder, Linux– PC Labs– Beowulf Cluster– Sun Workstations
8
AUV Mission AUV Mission
Depth Sensor and Altimeter work together to figure out depth of pinger
Camera takes picture and stores barcode in file – the depth of the barcode is also stored
BEAT ARMY
NAVY ‘02
U S N A
UNITED STATESNAVAL ACADEMY
9
Basic AUV ControlBasic AUV Control
Sensors PC104 Thrusters
Desired Course Actual CourseControl
Algorithm+
_
10
USNA Computer Science DeptUSNA Computer Science Dept
Information Technology Curriculum Designed to fill the critical requirement for professionals trained
with the following skills• Strong analytical and critical thinking• Strong interpersonal and team communications• Ability to implement IT solutions which enhance organizational performance
Core curriculum includes instruction in the following areas • Computer Architecture• Information Systems• System Analysis and Design• Networks and Information Assurance• Database Management Systems
11
USNA Computer Science DeptUSNA Computer Science Dept
Information Technology Curriculum (cont) Increased educational opportunities through the completion of
a second discipline in the following areas• Information Technology Management • Computational Science Engineering• Environmental Applications• National Security Affairs• Space Operations• Language Studies• Microeconomics• Macroeconomics• History
12
USNA Computer Science DeptUSNA Computer Science Dept
For additional information, check For additional information, check out our website:out our website:
http://www.cs.usna.edu
13
Today’s ScheduleToday’s Schedule
USNA Computer Science Dept
Introduction to HTMLIntroduction to HTML
Programming with Java Script
14
HTMLHTML
Hypertext Markup Language (HTML)Hypertext Markup Language (HTML)Set of "markup" symbols or codes called TAGSTAGS,
inserted in a text file which is intended for display using a Web browser
• TAGSTAGS tell Web browser how to display the Web page's contents
15
Creating HTML DocumentsCreating HTML Documents
Requirements:1. An HTML editorHTML editor to create an ASCII file with an
extension of .html or .htm (use html for our purposes)• Text Editor (e.g. Notepad)• Word Processor (e.g. WordPad or MS Word)
– Need to save document as an ASCII text file
• HTML Editor (e.g. MS FrontPage)
2. A Web browserWeb browser to test your pages, such as:• MS Internet Explorer• Netscape Navigator
16
Getting StartedGetting Started
Start NotepadNotepad Do notnot use WordPadWordPadSave blank document
• Click File/Save As…File/Save As…• Save in: S:\ drive• File name: May use any name BUTBUT must append .html after name
– Enclose filename within quotes to prevent Notepad from appending the “.txt” extension
Start Internet ExplorerInternet ExplorerOpen newly created blank file
• Click File/Open…/Browse…File/Open…/Browse…• Select your file
Browser should appear blank
17
General <TAG> SyntaxGeneral <TAG> Syntax
<<TAGNAMETAGNAME attribute1=”value1” …> attribute1=”value1” …>Item to be formatted</</TAGNAMETAGNAME>>
1. Begin TAG by enclosing TAGNAME within a ‘<‘ and >’ May include 1 or more formatting attributes
• Attribute values placed within quotes Are not case sensitive
• <HR> and <hr> are both okay
2. Insert Item(s) to be formatted Text Pictures Other TAG formatted material
3. End or close TAG using same starting format with ‘/’ in front of the tag name Note: Some tags do not require closing tags
18
Basic HTML DocumentBasic HTML Document
An HTMLHTML document consists of two sections HEADHEAD – Used to provide descriptive
information about the document BODYBODY – Used to identify the contents of
the Web page
CommentsComments – Everything between the ‘<!—’ and ‘-->’ is treated as a comment which is not displayed by the browser
Duplicate the basic HTML skeleton in the Notepad document
<HTML> <HEAD>
<!--head elements--></HEAD> <BODY>
<!--body elements--></BODY> </HTML>
19
Creating a TitleCreating a Title
The <TITLE><TITLE> tags Goes between the <HEAD> and
</HEAD> tags• Displayed in title bar of browser
window Should provide a concise
description of page• Used as default bookmark
description• Can affect how document is
indexed by some search engines Enter a TITLE for your Web
pageEx: <TITLE>Your Title</TITLE>
<HTML> <HEAD>
<TITLE>…</TITLE></HEAD> <BODY>
<!--body elements--></BODY> </HTML>
20
Update Web Page ViewUpdate Web Page View
1.1. SaveSave Notepad document Click File/SaveFile/Save
2.2. RefreshRefresh browser Click View/RefreshView/Refresh Title text now appears in
browser’s Title Bar
<HTML> <HEAD>
<TITLE>…</TITLE></HEAD> <BODY>
<!--body elements--></BODY> </HTML>
21
HTML and Basic TextHTML and Basic Text
WhitespaceWhitespace Ignored in HTMLIgnored in HTML
• Extra spaces are removed• Carriage returns and tabs are
converted to a single space Use it in your HTML code to
increase readability
Enter your Bio within the BODY section of the Web page using the example on the right.
Save file and refresh Browser.
<BODY> <!--body elements-->
Bio Born: ... School: ... Interests: ...</BODY> </HTML>
22
Paragraph FormattingParagraph Formatting
Text Formatting tags <P><P> – Paragraph tag
• Used to divide text into logical blocks
• Forces a blank line between paragraphs
• Ex: <p><p>Text</p></p> <BR><BR> – Break tag
• Creates a line break• Does not use a closing TAG
Format your Bio using the example on the right as a guide
Save file and refresh Browser
<BODY> <!--body elements-->
<P>Bio</P> Born: ... <BR> School: ... <BR> Interests: ... <BR></BODY>
23
Paragraph FormattingParagraph Formatting
Text Formatting TAGS <PRE><PRE> – Pre-formatted Text tag
• Used to prevent browser from altering text– White space is NOT removed
• Ex: <PRE><PRE>Text</PRE></PRE>
Re-format your Bio using the <PRE> TAG
Save file and refresh Browser
<BODY> <!--body elements-->
<PRE>Bio Born: ... School: ... Interests: ... </PRE></BODY>
24
Creating HeadingsCreating Headings
Heading tags <H<Hnn>> Level
• Six levels of headings (n is a value between 1 and 6)
– Most prominent <H1>…<H1>…</H1></H1>
– Least prominent <H6>...</H6><H6>...</H6>
Create a level 1 heading of your name
Change the “Bio” line to a heading of your choice
<!--body elements--><H1>Your Name</H1><H2>Bio</H2><PRE> Born: ... School: ... Interests: ... </PRE></BODY>
25
ColorsColors
Two ways of defining colors in HTML Color NamesColor Names
• May vary from browser to browser• www.learningwebdesign.com/colornames.html
Color NumberingColor Numbering• 216 safe colors (i.e. non-dithering)• www.learningwebdesign.com/webpalette.html
FF F7 E3
RedGreen
Blue
26
A Matter of ‘Style’A Matter of ‘Style’
The <STYLE>…</STYLE> <STYLE>…</STYLE> tags Located within the <HEAD> and </HEAD> tags Used to set default properties of other tags used within the BODY
• Each TAG requiring modification is placed within <STYLE> tag with a list of semi-colon separated property:value pairings enclosed within braces {...}
Some Style Properties• color color – Sets the color of text• background background – Sets the background color or image of the Web Page
– Possible values: color-value | url(image-path/filename)– Note: Use faint images to increase readability of Web page content
• text-aligntext-align – Aligns text within page– Possible values: left, center, right, justify
27
Font ControlFont Control
Style properties for fonts font-familyfont-family – Chooses the typeface
• Browser recognized values: serif | sans-serif | cursive | fantasy | monospace• Can also assign type face by name (e.g. courier)
– Note: User must have font installed on their computer font-sizefont-size – Sets the size of the font
• Possible values for specific control: xpt | %-of-current-value• Possible values for control relative to browser defaults: larger | smaller | xx-
small thru xx-large font-stylefont-style – Sets the font to normal or italic
• Possible values for specific control: normal | italic font-Weightfont-Weight– Makes text lighter or darker
• Possible values for specific control: normal | bold | bolder | lighter
28
Setting DefaultsSetting Defaults
Choosing your own colors and/or images, set the Web page background
Modify the default settings of any other desired tag
<HEAD> <TITLE>My Summer Seminar Web Page</TITLE> <STYLE> BODY { color:#8B4513; background:beige; } H1 { color:black; text-align:center; background:url(acexpdtn.gif) } PRE { font-family: sans-serif; font-size: 14pt; } </STYLE></HEAD>
29
Inline FormattingInline Formatting
Individual blocks can be modified using the stylestyle attribute
Used within opening the block’s opening <TAG>• <TAGNAME style=“property1:value1;
property2:value2;…”>• Example:
<H2 style=“text-align:center”>…</H2>
Add a new heading after the Bio section called: Weekly Schedule
Format the new heading with center alignment
<BODY> <!--body elements-->
<PRE>Bio Born: ... School: ... Interests: ... </PRE><H2 style=“text-align:center”>Weekly
Schedule</H2></BODY>
30
TablesTables
The <TABLE><TABLE> tag – Defines the structure of a table (data presented in rows and columns) Frequently used attributes
• borderborder – The thickness of the line around the table measured in pixels– Ex: <TABLE border=“5”>
• alignalign – Alignment of table within page (deprecated attribute)– Possible values: left | center | right
• widthwidth – Sets the actual or relative size of the table– For a set size of n pixels, enter width=“n”width=“n”– For x percentage of the viewing area, enter width=“x%”width=“x%”
The <TR><TR> tag – Creates a table row Frequently used attributes
• align – Sets the default alignment of data for every cell within the row– Possible values: left | center | right
31
TablesTables
The <TH><TH> tag – Defines a table cell which holds a row/column heading for the table Frequently used attributes
• align – Sets the default alignment of data for heading cell only– Possible values: left | center | right
• Width – Sets the width of the column– For a set size of n pixels, enter width=“n”width=“n”– For x percentage of the viewing area, enter width=“x%”width=“x%”
The <TD><TD> tag – Defines a table cell used to hold table data Frequently used attributes
• align – Sets the default alignment of data for data cell only– Possible values: left | center | right
32
TablesTables
Create a table to display your weekly schedule
<H2 style="text-align:center">Weekly Schedule</H2>
<TABLE align="center" border="3" width="85%">
<TR><TH>Time</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH><TH>Fri</TH></TR>
<TR align="center"><TH>7am-<BR>4pm</TH><TD>USNA</TD><TD>USNA</TD>
<TD>USNA</TD><TD>USNA</TD><TD>USNA</TD></TR>
<TR align="center"><TH>6pm-<BR>10pm</TH><TD>Hockey<BR>Practice</TD><TD>Music<BR>Lesson</TD>
<TD>Band<BR>Rehearsal</TD><TD>N/A</TD><TD>N/A</TD></TR>
</TABLE>
33
ListsLists
The <OL><OL> tag – Defines an ordered list of itemsFrequently used attribute
• Style=“list-style-type:xxxx”Where xxxx can be: upper-alpha | lower-alpha | upper-roman |
lower-roman | decimal
The <UL><UL> tag – Defines an unordered list of ItemsThe <LI><LI> tag – Identifies an item within <OL> or <UL> tags that will be displayed as a list item
34
Creating HyperlinksCreating Hyperlinks
<A> <A> – Anchor TagTag used to place hyperlinks in hypertext documents
• Browsers change hyperlink text color & underlineThree basic parts of a hyperlink
• Beginning and ending anchor tag pair <a> ... </a>• The href (hyperlink reference )attribute
– URL of page to be loaded when hyperlink is selected• Text (or graphic) that appears on-screen as the hyperlink
Examples• <a href=“http://www.usna.edu”>U.S. Naval Academy</a>• <a href=“mailto:[email protected]”>E-mail me!</a>
35
Favorite LinksFavorite Links
Create a new sectionCreate and center the heading: Favorite LinksCreate a list of links to your favorite Web sites
<TD>Band<BR>Rehearsal</TD><TD>N/A</TD><TD>N/A</TD></TR>
</TABLE>
<H2 style=“text-align:center;">Favorite Links</H2>
<UL>
<LI><A href="http://www.snoopy.com">The Official Peanuts Site</A></LI>
<LI><A href="http://www.espn.com">ESPN Sports</A></LI>
</UL>
36
ImagesImages
The <IMG><IMG> tag – Defines and names an image in the Web page documentAttributes:
• src – URL to retrieve image from• name – Optional name used to identify image within HTML code• alt – Text to be displayed when moused over (or when using a text
browser)• height – expressed in pixels or percentage of browser window• width – expressed in pixels or percentage of browser window
37
ImagesImages
Adding an ImageDownload 3 images/pictures of personal interest from the
Internet Add one of the images to add to your Web page
• Center the image
Note that copyright law applies to downloaded images
<P align="center">
<IMG NAME="animation" SRC="image1.gif" ALT="[Meet the Peanuts Gang]" height="200" border="2">
</P>
38
Today’s ScheduleToday’s Schedule
USNA Computer Science Dept
Introduction to HTML
Programming with Programming with Java ScriptJava Script
39
Script ProgrammingScript Programming
The <SCRIPT><SCRIPT> tag – Encloses elements of a scripting programming language (e.g. Java Script) Important Attribute:
• Type – Identifies the scripting language to the browser (e.g. type=“javascript”)
Java ScriptJava Script – A scripting language used to make Web Page ApplicationsConsists of multiple statements, located in the HEAD section
of a Web page between the <SCRIPT> and </SCRIPT> tags
40
Java Script – StatementsJava Script – Statements
Java Script Programs StatementStatement – A single line of a script or program that
is evaluated and completed by the browser / interpreter
• Statements can be:– The declaration of a variable or function– The assignment of a value to a variable– Instructions to the browser
• Two or more statements are separated by semicolons
41
Java Script – VariablesJava Script – Variables
Variables – Named containers that can store data• Names consist of letters, digits, and the underscore character
– First character must be a letter or an underscore– Names are case sensitive
• Variables are automatically declared when first used– Should use the optional varvar keyword for all declarations
• The type of data stored is determined by variable usageArraysArrays – A list of variables identified by a single name
• Individual variables in the array identified by an index number which represents the elements position from the beginning of the list
42
Java Script – BeginningsJava Script – Beginnings
Writing Java Scripts (cont) Add the variable
declarations from the example code to the HEAD section of your Web page
<HEAD>
<SCRIPT>
var pixArray = new Array();
var pixCount = 3;
var imageNum = 1;
var delay = 1000;
var cyclePix = true;
</SCRIPT>
</HEAD>
43
Java Script – BeginningsJava Script – Beginnings
pixArray – An array we will use to hold the images
pixCount – The number of images we will add to the array
imageNum – The image element the Java Script will instruct the browser to display
delay – The number of milliseconds each image will be displayed
cyclePix – A variable used as an ON/OFF switch for the animation
<HEAD>
<SCRIPT>
var pixArray = new Array();
var pixCount = 3;
var imageNum = 1;
var delay = 1000;
var cyclePix = true;
</SCRIPT>
</HEAD>
44
Java Script – Creating ImagesJava Script – Creating Images
Loading the images1. Each element of the array must
be assigned a blank image object2. Images are then loaded into the
individual array elements by assigning the image’s filename to the srcsrc field of the image object• Include image’s pathname if
necessary
Using the example code, load the images into your Web page Be sure to use the actual names
of your images
<SCRIPT>
var pixArray = new Array();
var pixCount = 3;
var imageNum = 1;
var delay = 1000;
var cyclePix = true;
pixArray[1] = new Image();
pixArray[2] = new Image();
pixArray[3] = new Image();
pixArray[1].src ="image1.gif";
pixArray[2].src ="image2.gif";
pixArray[3].src ="image3.gif";
</SCRIPT>
45
Java Script – FunctionsJava Script – Functions
FunctionFunction – A group of statements that can be referenced using a single nameA function can be viewed as creating a new command for use
within other scriptsThe keyword functionfunction is used to declare the functionLeft and right curly braces ( i.e. ‘{‘ and ‘}’) are used to enclose
the group of statements
Function CallFunction Call – Using the function name as a command or statementCauses the statements of the named function to be evaluated
in sequential order
46
Java Script – Web DocumentJava Script – Web Document
documentdocument – The built-in reference to the current Web pageCan be used to send output to the current Web page
• Example: document.write(“Some text”);– Prints the string of characters: Some text on the Web page
Can be used to access named objects (e.g. an image created with the IMG tag) of the Web page
• Example: document.animation.src = pixArray[5].src– Instructs the browser to display the image in the 5th element of the
pixArray in the area created by the <IMG> tag with the name=animation attribute
47
Java Script – Time DelaysJava Script – Time Delays
setTimeout(‘functionName()’,delay)The built-in Java Script function to specify a
command to be executed after waiting for a specific period of time
• functionName() – The command to be executed • delay – The amount of time to wait in milliseconds
48
Java Script – Creating FunctionsJava Script – Creating Functions
Using the example code as a guide, create functions to step through the images in pixArray function next()
• Instructs the browser to display the next image in pixArray, – Selects the first element in the
array if the last element is the image currently displayed
function animate()• If cyclePix is turned on, advances
the display to the next image and then tells the browser to execute animate again after a time delay
pixArray[3].src ="image3.gif";
function next(){
imageNum = imageNum + 1;
if(imageNum > pixCount){
imageNum = 1;
}
document.animation.src = pixArray[imageNum].src
}
function animate(){
if(cyclePix){
next();
setTimeout('animate()',delay);
}
}
</SCRIPT>
</HEAD>
49
Java Script – Cycling the ImagesJava Script – Cycling the Images
Starting the Scripts Place a function call
between a <SCRIPT> and </SCRIPT> within the BODY
Using the example code as a guide, create a call to the animate() function
</P>
<SCRIPT>
animate();
</SCRIPT>
</BODY>
</HTML>
50
HTML FormsHTML Forms
The <FORM><FORM> tag – Used to contain various input/output elements, creating interactive Web formsThe form is treated similar to an embedded image
The <INPUT><INPUT> tag – Creates an input control elementDoes not use a closing tagSome Possible Attributes:
• name – Provides form access throughout Web page• type – Defines the type of control
– Possible values: button | checkbox | image | radio | text• value – Assigns initial/default value• onClick – Activates/executes assigned script function()
51
HTML FormsHTML Forms
Create a form that contains four input buttons to perform the following functions Start cycling the images Stop cycling the images Display the next image Display the previous image
<P align="center">
<IMG name="animation" SRC="image1.gif" alt="[Meet the Peanuts Gang]"
height="200" border="2">
<FORM>
<INPUT TYPE="button" Value="Start“
onClick="startAnimation()">
<INPUT TYPE="button" Value="Stop“
onClick="stopAnimation()">
<INPUT TYPE="button" Value="Next"
onClick="next()">
<INPUT TYPE="button" Value="Previous“
onClick="previous()">
</FORM>
</P>
52
Java Script – Final FunctionsJava Script – Final Functions
Create the following functions in your Java Script declaration section function previous()
• Instructs the browser to display the previous image in pixArray, – Selects the last element in the
array if the first element is the image currently displayed
function startAnimation()• Turns image cycling to on
function stopAnimation()• Turns image cycling to off
function previous(){
imageNum = imageNum - 1;
if(imageNum < 1){
imageNum = pixCount;
}
document.animation.src = pixArray[imageNum].src;
}
function startAnimation(){
cyclePix = true;
animate();
}
function stopAnimation(){
cyclePix=false;
}
</SCRIPT>
53
ResourcesResources
TutorialsGOOGLE Search on: HTML TutorialGOOGLE Search on: Java Script Tutorial
Free Clipartwww.freegraphics.com www.clipart.com
Free Counters, Guest Books, Chat Roomswww.freecenter.com www.thefreesite.com
One last thing to do today!