1 Summer Seminar 2004 Dr. Don Needham USNA’83 Associate Professor Computer Science Dept U.S. Naval...

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


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


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


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


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


For additional information, check For additional information, check out our website:out our website:

http://www.cs.usna.edu

13


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

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


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>


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> 

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


<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


<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

<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


<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


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 pixCount = 3;

var imageNum = 1;

var delay = 1000;


</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 pixCount = 3;

var imageNum = 1;

var delay = 1000;


pixArray[1] = new Image();



pixArray[1].src ="image1.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


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!

54

Please fill out an online surveyPlease fill out an online survey http://www.summerseminar.cs.usna.edu/sum

merseminar/survey.aspxThen press <Ctrl>-<Alt>-

<Delete>

to Logout! Thank You!

Date post:	21-Dec-2015
Category:	Documents
View:	213 times
Download:	0 times