html review html and javascript. 2 what is html? html stands for hypertext markup language it is the...

HTML Review

HTMLand

JavaScript

2

What is HTML?

• HTML stands for HyperText Markup Language

• It is the set of instructions hidden behind every web page (called the source of the page)

• HTML “tags” tell the browser (like Internet Explorer) how to display the page.

• For example, <B>HI THERE</B> would display the words HI THERE in bold.

3

What is HTML?

• HTML “tags” are contained within < > • The letters inside the < > are the

instructions (like <B> for bold) and may be upper or lower case.

• Tags often come in pairs…one to begin a feature, and another to end it.

• In the previous example, <B> means “begin bold here” and </B> means “end bold here”.

4

HTML Structure

• Each web page has a HEAD and a BODY.

• All web pages have required tags like these: <HTML> {begin the page} <HEAD> {some set up instructions </HEAD> are here} <BODY> {the main part of the page </BODY> is here} </HTML> {end the page}

5

HTML Structure

• The HEAD section often contains tags to display a page title.

• The title is displayed at the top of the window (not on the page).

• Here is an example: <HEAD> <TITLE>My Web Page</TITLE> </HEAD>

6

HTML Structure

• The BODY section contains all the instructions for the actual page display.

• Inside the body section of a web page you will find tags that control text, graphics, lines, links, tables and other special functions.

• Remember that some, but not all, tags come in pairs.

7

Text-Related Tags

• Text is most often displayed in paragraphs, using block form.

• The paragraph tags <P> and </P> are used before and after a paragraph.

• <BR> (“line break”) is like pressing Return/Enter. The text that follows is displayed on the next line.

• NOTE: Just pressing Return/Enter when you are writing a page in HTML does not guarantee that it will be displayed on the next line.

8

Text-Related Tags

• Text is sometimes displayed in BOLD or ITALICS.

• The tag pair <B> and </B> make the text between display in bold.

• The tag pair <I> and </I> make the text between display in italics.

• Examples: <B>This is bold text.</B> This is bold

text. <I>Here is italics.</I> Here is italics. <B><I>Both!</I></B> Both!

9

Text-Related Tags

• NOTE: Though there is a tag for underlining (<U> </U>) it is not a good idea to underline text. It may be confused with a link, since they are usually underlined.

• The <FONT> </FONT> tag pair can be used to change other aspects of text (e.g., color).

10

Text-Related Tags

• You will often see text displayed in large, bold type, almost like a newspaper headline.

• The “header” tags are used for this purpose.• The largest “header” tag is <H1> </H1>

(larger numbers make smaller headers).

• An example: <H1>MY PAGE</H1> displays

MY PAGE• <H6>MY PAGE</H6> displays MY PAGE

11

Text-Related Tags

• To center a header, the tag pair <CENTER> </CENTER> is used.

• An example:<CENTER><H1>TRAINS</H1></CENTER>

displays… TRAINS

12

Lines

• Many web pages use horizontal lines to divide the page.

• The <HR> tag is used to draw a line.• You can control the size (thickness in

pixels) and width (% of the window).• Examples:

<HR> {one pixel thick, 100% of window} <HR SIZE=4 WIDTH=50%>

{4 pixels thick, 50% of window}

13

IMAGE Tags

• The <IMG> tag is used to display graphics on web pages.

• The main requirement for the IMG tag is the file name (“source”) of the image.

• NOTE: Web page images DO NOT become part of a web page file. They are separate files and must be located in the same folder as the web page file unless otherwise noted.

14

IMAGE Tags

• An example of an IMG tag that displays a graphic called ME.JPG <IMG SRC=“ME.JPG”>

• In the example above, the name (“source” or SRC) of the picture file is ME.JPG (stored in the same folder as the web page file).

• NOTE: The image file’s name must be exactly as stored (upper/lower case, etc.)

• .JPG and .GIF indicate types of images appropriate for web pages.

15

Lists

• Many web pages contain lists.• Lists can be “unordered” (using bullets

like this list) or “ordered” (with numbers or letters).

• <UL> </UL> indicates an unordered (bulleted) list.

• <OL> </OL> indicates an ordered list.• <LI> </LI> is used for each list item.

16

List Examples

These tags…• <UL>• <LI>Dogs</LI>• <LI>Cats</LI>• <LI>Lizards</LI>• </UL>

Produce this list…• Dogs• Cats• Lizards

17

List Examples

These tags…• <OL>• <LI>Dogs</LI>• <LI>Cats</LI>• <LI>Lizards</LI>• </OL>

Produce this list…1. Dogs2. Cats3. Lizards

18

List Examples

These tags…• <OL TYPE=“A”>• <LI>Dogs</LI>• <LI>Cats</LI>• <LI>Lizards</LI>• </OL>

Produce this list…A. DogsB. CatsC. Lizards

19

A Word about Links

• All links use the tag that begins <A HREF=

• The A stands for “anchor” (think of an anchor chain..it’s made of links…right?).

• The HREF part will be the name of a web page or a web address.

20

A Word about Links

• Here are a couple of examples, you will see the actual message to click on between the “A” tags.

• This link shows the words Go Back and sends the user to a page called HOME.HTM that is stored in the same folder as the current page. <A HREF=“HOME.HTM”>Go Back</A>

21

A Word about Links

• This link shows the words More Info and sends the user to the CSUH home page.

<A HREF=“http://www.csuhayward.edu/”>More Info</A>

22

More about Links

• Virtually every web page has links…it’s the basic idea of the web and HTML (HyperText refers to links).

• Link tags look like this:<A HREF=“address”>what to click

on</A>• The address can be a file name (like

home.htm) or a web address (like http://www.csuhayward.edu)

23

More about Links

• The “what to click on” is quite often text.• Whatever is placed between the <A> tags

is displayed on the screen and usually underlined (though you can change it in your browser settings).

• You can also place an < IMG> tag between the <A> tags, making the image into a link.

24

More about Links

• The example below shows an image called TOY.JPG as a link to a page called TOYSTORY.HTM :

<A HREF=“TOYSTORY.HTM”><IMG SRC=“TOY.JPG”></A>

• The <IMG> tag may also contain HEIGHT, WIDTH, and BORDER information.

• This way, however, the user will not know that the image is a link. See the next slide for a better idea.

25

More about Links

• In the example below, both the image TOY.JPG and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM.

<A HREF=“TOYSTORY.HTM”>GO TO TOY STORY<IMG SRC=“TOY.JPG”></A>

• The words in the link can come before or after the <IMG> tag. Placement of text is next to images.

26

More about Links

• Sometimes it is convenient to have a list of links. See the example below:

<UL><LI><A HREF=“http://www.csuhayward.edu/”>CSUH

</A></LI><LI><A HREF=“http://www.csuhayward.edu/math/>”

College of Math </A></LI><LI><A

HREF=“http://www.csuhayward.edu/bhecker”> Barbara’s Classes</A></LI>

</UL>

27

Colors in HTML

• When you specify colors in HTML, you can either enter a color by name (for simple colors) OR…

• You can put in codes that specify the amount of red, green and blue to include in the color (which gives you millions of combinations).

28

Colors in HTML

• Here is an example of the use of color in a <FONT> tag. The text will print in red.

<FONT color=“red”>The text.</FONT>• Here is another way to say “red”: <FONT color=“#FF0000”>The

text.</FONT> (weird, huh?)

greenred

blue

29

Colors in HTML

• What’s all this “#FF” stuff?• If you want more than simple colors, you

must specify the amount of red, green, and blue in the color.

• This is done with six hexadecimal (base 16) numbers (that’s what # means) - two each for red, green and blue.

• Each pair of numbers ranges from 00 to FF (yes, FF is a number) 00 = none, FF = highest

30

Colors in HTML

• Here are some sample color numbers:RED #FF0000 (high red, no green, no blue)GREEN #00FF00 (no red, high green, no blue)BLUE #0000FF (no red, no green, high blue)BLACK #000000 (no red, no green, no blue)WHITE #FFFFFF (high red, high green, high blue)YELLOW #FFFF00 (high red, high green, no blue)CYAN #00FFFF (no red, high green, high blue)MAGENTA #FF00FF (high red, no green, high blue)

31

Colors in HTML

• Another place to use color is for a background.

• Background color is specified in the <BODY> tag.

• For example, to set the background of a page to light blue, use

<BODY BGCOLOR=“light blue”>

32

Colors in HTML

• You can also set the link color and text color for the whole page in the <BODY> tag.

• Here is a tag that sets the background to yellow, the text to red, the links to blue, and the visited links (the ones you have already been to) to purple:

<BODY BGCOLOR=“yellow” TEXT=“red” LINK=“blue” VLINK=“purple”>

33

More about Text Size

• You know “header” tags make large text (like <H1></H1>)

• You can also specify text size with a <FONT> tag.

• Here is an example of very small text:<FONT SIZE=1>Write this.</FONT>

34

More about Images

• Web page images are displayed on the left side of a page and in their actual stored size unless otherwise instructed.

• The HEIGHT and WIDTH of an image can be specified in the IMG tag.

• HEIGHT and WIDTH are measured in pixels.

35

More about Images

• Example:<IMG SRC=“MyPicture.gif” HEIGHT=100

WIDTH=50>

• The example above displays the graphic file MyPicture.gif with a height of 100 pixels and a width of 50 pixels.

• NOTE: If you do not specify HEIGHT and WIDTH, the image will appear the size at which it was stored.

36

More about Images

• To align an image at the center or the right of the screen, it is easiest to use one of the following tag pairs:<CENTER> </CENTER><RIGHT> </RIGHT>

• The IMG tag is placed between the alignment tags:<CENTER><IMG SRC=“picture.jpg”></CENTER> NOTE: If you place several IMG tags in a row (one for each picture),

they will appear next to each other when the page is displayed.

37

More about Images

• If you want a border (like a frame) around the image, you can put BORDER=thickness in pixels in the IMG tag. Example:<IMG SRC=“kitty.jpg” BORDER=3>

• Here is an example of an image called BOG.gif which is centered, displayed 200 x 200, with a 4-pixel border.

<CENTER><IMG SRC=“BOG.gif” HEIGHT=200 WIDTH=200

BORDER=4></CENTER>

38

Image Maps

• You have learned that a graphic can be a link.

• With an image map, a single graphic can be used to link to several different sites.

• Coordinates within an image are used to “map” various areas, each of which may be used as a link to a different web page.

39

Image Maps

• If you could see an image with its map, it might look like this:

Each area could be a separate link.

This area might link to FEET.HTM

These areas might link to EAR.HTM

40

Image Maps

• Each area is defined by coordinates in pixels.

• For rectangular areas, it is the upper left and lower right.

This area might be defined as 2,200 (upper left) 205,300 (lower right)

41

Image Maps

• The HTML code to make an image map begins with the IMG tag.

• Here is a sample: <IMG SRC=“pig.gif” USEMAP=“#MIG”>• USEMAP says that the graphic is an

image map.• MIG is the name of the map definition (#

means “look in this same document”).

42

Image Maps

• The image map definition begins with a map tag:

<MAP NAME=“MIG”>• The name of this map definition is

MIG.• </MAP> ends the definition.• The lines in between describe the

areas (by coordinates) and the web pages that they link to.

43

Image Maps

• The lines between <MAP NAME=“MIG”> and </MAP> define the areas, one tag for each area.

• Here is an example from the pig: <AREA SHAPE=RECT HREF=“FEET.HTM”

COORDS=“2,200 205,300”>• The shape of the area is a rectangle, the

link goes to FEET.HTM, the upper left of the rectangle is at 2,200 and the lower right of the rectangle is at 205,300.

44

Image Maps

• How can I find the coordinates?• You can search shareware sites for

image map programs.• You can use a graphics program, if it

shows the position of the cursor with “pixels”.

• Move the cursor over the picture and write down the appropriate coordinates.

45

Frames

• A FRAMESET document uses <FRAMESET> and </FRAMESET> instead of <BODY> and </BODY>.

• The type of frames (rows or columns) must be specified, and each frame must be described with a <FRAME> tag like this:

<FRAME SRC =”content1.htm" border="0" NORESIZE >

46

FRAMESET Sample

• Here is the FRAMESET code for the example --><HTML><HEAD></HEAD><FRAMESET

COLS=“100,*”><FRAME SRC=“left.htm”><FRAME SRC=“right.htm”></FRAMESET></HTML>

Links•One•Two•Three

WELCOME!

Join us..etc.

left.htm

right.htm

47

FRAMESET Sample

<HTML><HEAD></HEAD><FRAMESET

COLS=“100,*”><FRAME

SRC=“left.htm”><FRAME

SRC=“right.htm”></FRAMESET></HTML>

• Two “column” frames - the first (left) is 100 pixels wide. The right frame takes up whatever space is left over (*) on the screen.

• left.htm is the web page file for the left frame.

• right.htm fills the right frame.

48

Self Check - Example Questions

• Which of the following is NOT a required tag? <HTML> </BODY> <H1> <HEAD>

49


• Which of the following is NOT a required tag? <HTML> </BODY> <H1> {headings/headlines are common, but

not required}

<HEAD>

50


• Which of the tags below will show the words MY PAGE on the page in very large type? <TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1> <H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT>

51


• Which of the tags below will show the words MY PAGE on the page in very large type? <TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1> {H1 shows the largest

“headline”}

<H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT>

52


• Which set of tags below would display this text in italics and bold: CLICK HERE <I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I> <B>CLICK HERE</B> <H1>CLICK HERE</H1>

53


• Which set of tags below would display this text in italics and bold: CLICK HERE <I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I> * <B>CLICK HERE</B> <H1>CLICK HERE</H1>

*Explanation: Tags must be “nested” - the first to be turned on must be the last to be turned off.

54


• To put a blank line after typing… <BR> <P> and </P> Just press Return/Enter Either <BR> or <P></P> will work.

55


• To put a blank line after typing… <BR> <P> and </P> Just press Return/Enter Either <BR> or <P></P> will work.

56


• Which the the following makes a “numbered” list (1., 2., etc.)?

• <OL></OL>• <LI></LI>• <UL></UL>• <NL></NL>

57


• Which the the following makes a “numbered” list (1., 2., etc.)?

• <OL></OL> {a numbered list is an “ordered” list}

• <LI></LI>• <UL></UL>• <NL></NL>

58


• To draw a line across the web page, use… <HR> <LINE> <LI></LI> Must use a graphic.

59


• To draw a line across the web page, use… <HR> {a line is a “horizontal rule”}

<LINE> <LI></LI> Must use a graphic.

60


• Which of the following displays the words CLICK ME as a link to homepage.htm?

<LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK

ME</A> <LINKTO “homepage.htm”>CLICK ME

61


• Which of the following displays the words CLICK ME as a link to homepage.htm?

<LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK

ME</A> <LINKTO “homepage.htm”>CLICK ME

62

Self Check – Example Questions

• Which command is used to set the background color of a web page to white…

<BODY BGCOLOR=“WHITE”><BODY BGCOLOR=“#000000”><BODY BGCOLOR=“NONE”>

63


• To set the background color of a web page to white…

<BODY BGCOLOR=“WHITE”><BODY BGCOLOR=“#000000”><BODY BGCOLOR=“NONE”>

64


• Which of the following places a graphic called “dog.jpg” on a web page?

<IMG SRC=“dog.jpg”><IMG SRC=“DOG.JPG”><GRP SRC=“dog.jpg”><IMG GRP=“dog.jpg”>

65


• Which of the following places a graphic called “dog.jpg” on a web page?

<IMG SRC=“dog.jpg”><IMG SRC=“DOG.JPG”> {case must match file name}

<GRP SRC=“dog.jpg”><IMG GRP=“dog.jpg”>

66


• Which of the following sets the size of dog.jpg to 100 x 100 pixels?

<IMG SRC=“dog.jpg” SIZE = “100x100”><IMG SRC=“dog.jpg” SIZE1=100

SIZE2=100><IMG SRC=“dog.jpg” HEIGHT=100

WIDTH=100>

67


• Which of the following sets the size of dog.jpg to 100 x 100 pixels?

<IMG SRC=“dog.jpg” SIZE = “100x100”><IMG SRC=“dog.jpg” SIZE1=100

SIZE2=100><IMG SRC=“dog.jpg” HEIGHT=100

WIDTH=100>

68


• Which of the following creates a link to HOME.HTM by clicking GO HOME?

<A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO

HOME</A> <IMG HREF=“GO

HOME”>HOME.HTM</A>

69


• Which of the following creates a link to HOME.HTM by clicking GO HOME?

<A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO

HOME</A> <IMG HREF=“GO

HOME”>HOME.HTM</A>

70


• Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM?

<A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A>

<A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A>

<A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A>

71


• Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM?

<A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A>

<A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A>

<A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A>

{Either graphics first or words first}

72


• Which of the lists below will results from these tags?<OL><LI><A HREF=“MINE.HTM”>See Me</A></LI><LI>GO AWAY!</LI></OL>

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!

73


• Which of the lists below will results from these tags?<OL><LI><A HREF=“MINE.HTM”>See Me</A></LI><LI>GO AWAY!</LI></OL>

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!

74


• Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK!

SINK!SINK!

SINK!

75


• Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK!

SINK!SINK!

SINK!

76


• To use a graphic (back1.gif) as a page background, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG

SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You cannot use a graphic as a

background.

77


• To use a graphic (back1.gif) as a page background, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG

SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You cannot use a graphic as a

background.

78


• If a background graphic is smaller than the page display… The image is displayed larger to fill the

window. The image is centered on the page

window. The image is tiled (repeated).

79


• If a background graphic is smaller than the page display… The image is displayed larger to fill the

window. The image is centered on the page

window. The image is tiled (repeated).

80


• To use an image (lineup.gif) as a line, use the following tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>

81


• To use an image (lineup.gif) as a line, use the following tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>

82


• Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP PICT

83


• Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP {You will need a graphics

PICT conversion program}

84


• An image map is… A GIF that shows a map of a country A graphic that links to several different

web pages A graphic that links to a single web page There is no such thing!

85


• An image map is… A GIF that shows a map of a country A graphic that links to several different

web pages A graphic that links to a single web page There is no such thing!

86


• Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 300,400?

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”>

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”>

87


• Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 200,400?

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”>

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”>

{No comma between sets of coordinates}

JavaScript

89

What is JavaScript?

• JavaScript is a programming language. This means that the instructions you write in JavaScript will make something happen.

• You can include it easily within the HTML code of a web page to customize the page.

90

What is JavaScript?

• JavaScript is related to Java and C++, but it does not need to be “compiled” (translated to binary) before it is used.

• JavaScript is not the same as Java.

91

What is JavaScript?

• JavaScript code is “interpreted” - the browser executes each line of code as it is encountered.

• JavaScript is free and many existing samples are available.

92

How do you add JavaScript to a web page?

• When you copy or type the code, notice where it should go.

• JavaScript is most commonly placed in the <HEAD> section of a page, but there are often parts that must go elsewhere.

93

JavaScript - Sample

• Here is an explanation of a simple use of JavaScript - asking a question and displaying an answer.

• In this case, there will be a JavaScript function (small program) called getName() placed in the HEAD section of the HTML.

• It will ask for a name and print Hi and the name.

94

JavaScript - Sample

• Here’s what the function looks like:

<script language="JavaScript">var stName="XX"function getName( ) {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>

95

JavaScript - Sample

• The script tags are needed to identify this code as JavaScript.


96

JavaScript - Sample

• The line beginning var sets up a variable called stName with a beginning value of XX.


97

JavaScript - Sample

• function getName() defines the name of the function (notice the two parentheses).


98

JavaScript - Sample

• The braces ({ and }) show where the function begins and ends.


99

JavaScript - Sample

• The line beginning stName= displays the message Please enter your name and waits for an entry, which will be the value of stName.<script language="JavaScript">var stName="XX"function getName( ) {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>

100

JavaScript - Sample

• The line beginning alert displays Hi, and the value of the variable stName.


101

JavaScript - Sample

• Something has to start the getName() function.

• This can be done by the user clicking on a graphic or a “form” button.

102

JavaScript - Sample

• To start a function, its name will be somewhere in the HTML: getName()

• You will see this code in an IMG tag: onclick=“getName()”

• When the graphic is clicked, the function starts.

103

JavaScript - Sample

• You will also see this code between <FORM> tags: <input value="HI" onclick="getName()" type="button">

• FORMs are used to make buttons and input boxes appear on a web page.

104


• True or false - JavaScript and Java are exactly the same thing.

105


• True or false - JavaScript and Java are exactly the same thing.

• False - Java must be “complied” (translated to binary) before running, while JavaScript runs automatically every time the web page is opened. Java is also much more powerful than JavaScript.

106


• JavaScript is most often found in the _____ section of the HTML code for a web page.

<HEAD> <BODY> <TABLE> <LIST>

107


• JavaScript is most often found in the _____ section of the HTML code for a web page.

<HEAD> <BODY> {may be here, too}

<TABLE> <LIST>

108


• Which of the following is the correct way to begin JavaScript?

<SCRIPT LANGUAGE=“Javascript”> <SCRIPT LANGUAGE=“JavaScript”> <JAVASCRIPT> <JavaScript>

109


• Which of the following is the correct way to begin JavaScript?

<SCRIPT LANGUAGE=“Javascript”> <SCRIPT LANGUAGE=“JavaScript”> * <JAVASCRIPT> <JavaScript>* {upper and lower case must be exact}

110


• Suppose you created the function shown below. What command would activate the function? function HAPPY()

• happy()• HAPPY• HAPPY()

111


• Suppose you created the function shown below. What command would activate the function? function HAPPY()

• happy()• HAPPY• HAPPY() {case sensitive; must include ( )}

112


• Which of the following commands waits for input?

prompt alert

113


• Which of the following commands waits for input?

prompt {waits for input and Return/Enter}

alert {displays message only}

114

Object-Oriented Programming

• Programming languages come in many varieties.

• Older languages like BASIC and FORTRAN accepted input from the user and displayed information.

• They could not directly influence “objects” such as graphics or text boxes.

115

Object-Oriented Programming

• JavaScript (and other contemporary languages) are classified as object-oriented, because they can affect objects on the screen.

• For example, JavaScript can be used to change an image when the mouse rolls over it.

116

Addressing Objects

• In order to affect objects, JavaScript must have a way of addressing (naming) them.

• JavaScript uses a “dot scheme” (parts of the web page are addressed using certain terms with periods/dots in between).

117

Addressing Objects

• For example, a graphic on a web page might be window.document.button or window.document.images[1]

• The largest part (window) is first, then a subset of window (document), and finally a subset of document (the image named “button”).

118

Properties

• Objects on the screen often have properties (attributes) that can be addressed by JavaScript.

• For example, each image has a source.

• A web page document may have a background color.

119

Properties

• Here are some “dot” addresses: image source (image place named M) window.document.M.src=“me.gif” image source (2nd image on the page)

window.document.images[2].src=“me.gif”

web page background color:

window.document.bgcolor.value=“blue”

120

Example - The Status Bar

• JavaScript can be used to put text into the status bar.

• For example, a message can be placed in the status bar when the mouse moves over images.

121


• The “dot address” of the status bar is window.status (it doesn’t have anything to do with the web page document, so the term document is not included).

122


• Here is the code to add to an IMG tag to put text into the status bar:

onMouseOver=“window.status=‘HI!’”

• Notice that the entire instruction (from window.status to the end is in quotes (“).

• The message itself (HI!) is inside single quotes (‘).

123


• The IMG tag might look like this (name of image file is “hello.jpg”)

<IMG src=”hello.jpg” onMouseOver=“window.status=‘HI!’”>

• Other choices for images are onClick (if you click on the image) and onMouseOut (when you move the mouse away from the image).

124

Example - Text in a Box

• Forms are used to put buttons and input boxes on the web page.

• The next JavaScript example will put a message in a text box.

• The message will depend on the time of day.

125


• This page uses FORM tags for the box:

<form name="greet"><input type="text"

size="20”name="greetingbox"></form>

This results in a text box (20 characters long) called greetingbox:

126


The dot address for the box is: document.greet.greetingbox.value

The box is called greetingbox. The box called greetingbox is in the form

called greet.The form called greet in in the current

web page document.value shows that something will be put

into the box.

127


Here is the JavaScript code:

<script language="JavaScript">currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good

afternoon!"else document.greet.greetingbox.value="Good

evening!"</script>

128


The SCRIPT tags begin and end the JavaScript:<script language="JavaScript">

currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good


evening!"</script>

129


new Date() puts the current time/date (from your computer) into the variable currentTime:

<script language="JavaScript">currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!"else document.greet.greetingbox.value="Good

evening!"</script>

130


Look at the structure of the IF statements:if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good


evening!”

The computer must make a decision about the message, depending on the hour (12=noon, 17=5 pm). currentTime.getHours() contains the hour information (originally from new Date() )

131


JavaScript IF statements look like this: IF (condition) instructions

The condition usually contains == (is equal to) or < (less than) or > (greater than).

If the condition is true, the instructions are carried out.

If the condition is false, the program goes to the next line without performing the instructions.

132


In this case there are three choices:The hour is < 12 (before noon) - Good

morning!The hour is between 12 and 17 (noon and 5

pm) - Good afternoon!The hour is > 17 (after 5 pm) - Good evening!

Using IF, ELSEIF and ELSE lets the computer make the choice among these three options.

133


• If you have looked at the HTML code for this example, you will see something very strange.

• The JavaScript is in the BODY section, not the HEAD.

134


• The reason for this difference is that computer must be instructed to start the JavaScript.

• In past examples, we have clicked buttons to start the JavaScript instructions.

• This time, the instructions start automatically when the browser reaches that part of the HTML.

135


• True or false - all programming languages are object-oriented.

True False

136


• True or false - all programming langauges are object-oriented.

True False

{most current languages are object- oriented, but older languages like BASIC are not}

137


• In order to address objects on the screen, object-oriented languages use:

Pixel addresses (form top, from left) Dot addresses (e.g., window.status) They cannot address objects.

138


• In order to address objects on the screen, object-oriented languages use:

Pixel addresses (form top, from left) Dot addresses (e.g., window.status) They cannot address objects.

139


• The dot address of the source of an “image place” called M1 would be:

window.document.src. M1 window.document.M1.src document.M1.src

140


• The dot address of the source of an “image place” called M1 would be:

window.document.src. M1 window.document.M1.src document.M1.src

window may be deleted when the address refers to the web page document.

141


• The dot address of a text box called B in a form called MYFORM would be:

window.document.B.MYFORM window.document.MYFORM.B

142


• The dot address of a text box called B in a form called MYFORM would be:

window.document.B.MYFORM window.document.MYFORM.B

143


• The code to put “HI” into a box called B in a form called MYFORM would be:

window.document.MYFORM.B=“HI” window.document.MYFORM.B.src=“HI” document.MYFORM.B.value=“HI”

144


• The code to put “HI” into a box called B in a form called MYFORM would be:

window.document.MYFORM.B=“HI” window.document.MYFORM.B.src=“HI” document.MYFORM.B.value=“HI”

145

End of Review

html review html and javascript. 2 what is html? html stands for hypertext markup language it is the...

Documents