Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML Review - bhecker.com
Transcript
HTML Review
HTML
and
JavaScript
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.
2
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”.
3
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}
4
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>
5
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.
6
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.
7
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!
8
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).
9
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
10
Text-Related Tags
• To center a header, the tag pair
<CENTER> </CENTER> is used.
• An example:
<CENTER>
<H1>TRAINS</H1>
</CENTER>
displays…
TRAINS
11
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}
12
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.
13
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.
14
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.
15
List Examples
These tags…
• <UL>
• <LI>Dogs</LI>
• <LI>Cats</LI>
• <LI>Lizards</LI>
• </UL>
Produce this list…
• Dogs
• Cats
• Lizards
16
List Examples
These tags…
• <OL>
• <LI>Dogs</LI>
• <LI>Cats</LI>
• <LI>Lizards</LI>
• </OL>
Produce this list…
1. Dogs
2. Cats
3. Lizards
17
List Examples
These tags…
• <OL TYPE=“A”>
• <LI>Dogs</LI>
• <LI>Cats</LI>
• <LI>Lizards</LI>
• </OL>
Produce this list…
A. Dogs
B. Cats
C. Lizards
18
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.
19
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>
20
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>
21
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)
22
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.
23
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.
24
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.
25
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>
26
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).
27
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?)
red
green
blue
28
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
29
Colors in HTML
• Here are some sample color numbers:
RED
GREEN
BLUE
BLACK
WHITE
YELLOW
CYAN
MAGENTA
#FF0000 (high red, no green, no blue)
#00FF00 (no red, high green, no blue)
#0000FF (no red, no green, high blue)
#000000 (no red, no green, no blue)
#FFFFFF (high red, high green, high blue)
#FFFF00 (high red, high green, no blue)
#00FFFF (no red, high green, high blue)
#FF00FF (high red, no green, high blue)
30
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”>
31
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”>
32
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>
33
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.
34
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.
35
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.
36
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 4pixel border.
<CENTER>
<IMG SRC=“BOG.gif” HEIGHT=200 WIDTH=200 BORDER=4>
</CENTER>
37
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.
38
Image Maps
• If you could see an image with its map, it
These areas
might look like this:
Each area
could be a
separate link.
might link to
EAR.HTM
This area
might link to
FEET.HTM
39
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)
40
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”).
41
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.
42
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.
43
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.
44
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 >
45
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>
WELCOME!
Links
•One
•Two
•Three
Join us..etc.
left.htm
right.htm
46
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.
47
Self Check - Example Questions
• Which of the following is NOT a required
tag?
<HTML>
</BODY>
<H1>
<HEAD>
48
Self Check - Example Questions
• Which of the following is NOT a required
tag?
<HTML>
</BODY>
<H1>
{headings/headlines are common, but not required}
<HEAD>
49
Self Check - Example Questions
• 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>
50
Self Check - Example Questions
• 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>
51
Self Check - Example Questions
• 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>
52
Self Check - Example Questions
• 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.
53
Self Check - Example Questions
• To put a blank line after typing…
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.
54
Self Check - Example Questions
• To put a blank line after typing…
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.
55
Self Check - Example Questions
• Which the the following makes a
“numbered” list (1., 2., etc.)?
• <OL></OL>
• <LI></LI>
• <UL></UL>
• <NL></NL>
56
Self Check - Example Questions
• 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>
57
Self Check - Example Questions
• To draw a line across the web page, use…
<HR>
<LINE>
<LI></LI>
Must use a graphic.
58
Self Check - Example Questions
• To draw a line across the web page, use…
<HR>
{a line is a “horizontal rule”}
<LINE>
<LI></LI>
Must use a graphic.
59
Self Check - Example Questions
• 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
60
Self Check - Example Questions
• 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
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”>
62
Self Check – Example Questions
• To set the background color of a web page
to white…
<BODY BGCOLOR=“WHITE”>
<BODY BGCOLOR=“#000000”>
<BODY BGCOLOR=“NONE”>
63
Self Check – Example Questions
• 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”>
64
Self Check - Example Questions
• 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”>
65
Self Check - Example Questions
• 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>
66
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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>
68
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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>
70
Self Check - Example Questions
• 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}
71
Self Check - Example Questions
• 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
1. See Me
1. See Me
2. GO AWAY!
2. GO AWAY!
2. GO AWAY!
72
Self Check - Example Questions
• 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
1. See Me
1. See Me
2. GO AWAY!
2. GO AWAY!
2. GO AWAY!
73
Self Check - Example Questions
• Which is the correct text placement if this
tag is used? <IMG SRC=“SOS.GIF”
ALIGN=TOP>SINK!
SINK!
SINK!
SINK!
74
Self Check - Example Questions
• Which is the correct text placement if this
tag is used? <IMG SRC=“SOS.GIF”
ALIGN=TOP>SINK!
SINK!
SINK!
SINK!
75
Self Check - Example Questions
• 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.
76
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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).
78
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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>
80
Self Check - Example Questions
• 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
Self Check – Example Questions
• Which of the following graphics formats
would need to be converted before using
on a web page?
GIF
JPG
TIFF
BMP
PICT
82
Self Check - Example Questions
• Which of the following graphics formats
would need to be converted before using
on a web page?
GIF
JPG
TIFF
BMP
PICT
{You will need a graphics
conversion program}
83
Self Check - Example Questions
• 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!
84
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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”>
86
Self Check - Example Questions
• 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}
87
JavaScript
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.
89
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.
90
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.
91
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.
92
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.
93
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>
94
JavaScript - Sample
• The script tags are needed to identify this code
as JavaScript.
<script language="JavaScript">
var stName="XX"
function getName( )
{
stName=prompt("Please enter your name"," ")
alert("Hi, " + stName)
}
</script>
95
JavaScript - Sample
• The line beginning var sets up a variable called
stName with a beginning value of XX.
<script language="JavaScript">
var stName="XX"
function getName( )
{
stName=prompt("Please enter your name"," ")
alert("Hi, " + stName)
}
</script>
96
JavaScript - Sample
• function getName() defines the name of the
function (notice the two parentheses).
<script language="JavaScript">
var stName="XX"
function getName( )
{
stName=prompt("Please enter your name"," ")
alert("Hi, " + stName)
}
</script>
97
JavaScript - Sample
• The braces ({ and }) show where the function
begins and ends.
<script language="JavaScript">
var stName="XX"
function getName( )
{
stName=prompt("Please enter your name"," ")
alert("Hi, " + stName)
}
</script>
98
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>
99
JavaScript - Sample
• The line beginning alert displays Hi, and the value
of the variable stName.
<script language="JavaScript">
var stName="XX"
function getName( )
{
stName=prompt("Please enter your name"," ")
alert("Hi, " + stName)
}
</script>
100
JavaScript - Sample
• Something has to start the getName()
function.
• This can be done by the user clicking on a
graphic or a “form” button.
101
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.
102
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.
103
Self Check – Example Questions
• True or false - JavaScript and Java are
exactly the same thing.
104
Self Check - Example Questions
• 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.
105
Self Check - Example Questions
• JavaScript is most often found in the
_____ section of the HTML code for a web
page.
<HEAD>
<BODY>
<TABLE>
<LIST>
106
Self Check - Example Questions
• JavaScript is most often found in the
_____ section of the HTML code for a web
page.
<HEAD>
<BODY>
<TABLE>
<LIST>
{may be here, too}
107
Self Check - Example Questions
• Which of the following is the correct way to
begin JavaScript?
<SCRIPT LANGUAGE=“Javascript”>
<SCRIPT LANGUAGE=“JavaScript”>
<JAVASCRIPT>
<JavaScript>
108
Self Check - Example Questions
• 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}
109
Self Check - Example Questions
• Suppose you created the function shown
below. What command would activate the
function?
function HAPPY()
• happy()
• HAPPY
• HAPPY()
110
Self Check - Example Questions
• Suppose you created the function shown
below. What command would activate the
function?
function HAPPY()
• happy()
• HAPPY
• HAPPY()
{case sensitive; must include ( )}
111
Self Check - Example Questions
• Which of the following commands waits for
input?
prompt
alert
112
Self Check - Example Questions
• Which of the following commands waits for
input?
prompt
alert
{waits for input and Return/Enter}
{displays message only}
113
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.
114
Object-Oriented Programming
• JavaScript (and other contemporary
languages) are classified as objectoriented, because they can affect objects
on the screen.
• For example, JavaScript can be used to
change an image when the mouse rolls
over it.
115
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).
116
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”).
117
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.
118
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”
119
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.
120
Example - The Status Bar
• 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).
121
Example - The Status Bar
• 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 (‘).
122
Example - The Status Bar
• 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).
123
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.
124
Example - Text in a Box
• 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:
125
Example - Text in a Box
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.
126
Example - Text in a Box
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>
127
Example - Text in a Box
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 afternoon!"
else document.greet.greetingbox.value="Good evening!"
</script>
128
Example - Text in a Box
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>
129
Example - Text in a Box
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 afternoon!"
else 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() )
130
Example - Text in a Box
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.
131
Example - Text in a Box
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.
132
Example - Text in a Box
• 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.
133
Example - Text in a Box
• 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.
134
Self Check – Example Questions
• True or false - all programming languages
are object-oriented.
True
False
135
Self Check - Example Questions
• True or false - all programming langauges
are object-oriented.
True
False
{most current languages are objectoriented, but older languages like
BASIC are not}
136
Self Check - Example Questions
• 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.
137
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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
139
Self Check - Example Questions
• 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.
140
Self Check - Example Questions
• The dot address of a text box called B in a
form called MYFORM would be:
window.document.B.MYFORM
window.document.MYFORM.B
141
Self Check - Example Questions
• 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
Self Check - Example Questions
• 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”
143
Self Check - Example Questions
• 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
End of Review
145
