Final Exam Review
JavaScript Concepts
Variables & Data types
A
variable is a memory location where data is stored. It is given a name by the user.
var payRate=9.25;
Data
types that are assigned a single value are called primitive types and
JavaScript has the following 5 primitive data types.
1. Number --- positive and negative numbers with
or without decimal places
2. Boolean—True or false (logical values)
3. String—A sequence of
characters enclosed in double quotes
4.
Undefined—A variable that has not had a value assigned to it
5. Null---An empty value.
The type
of data is indicated when data is placed in a variable.
6 fundamental instructions
1) Write
in javaScript we do this through the Document Object Model (DOM) document.write(“Text) or document.writeln(“Text”)
2) Read
This is generally done by getting user
information from some form element.
"document.forms[0].pizzaDesc.value=hawaiian"
3) Assignment Statement
2 parts. The left side contains one and only one variable the right
side contains an expression whose value will be assigned to the variable on the
right. The = separates the two
var vegetarian="Lots of mushrooms”
var
payRate=9.25
4) Conditional Statement
if ( some condition) The condition will evaluate to a Boolean
data type (true or false)
{
instruction1;
instruction;2;
}
If the condition is true then instruction 1 & 2 will be executed, if
false then the won’t be executed.
It can also have an else section
if (some condition)
{
instruction1;
instruction;2;
}
else
{
instruction3;
instruction4;
}
If the condition is true then
instruction 1 &2 will be executed but not 3 & 4.
If the condition is false then
instruction 3 & 4 will be executed but not 1 & 2.
The switch statement is a form of
the conditional statement but it is used only when the data tested is an
integer or character data
switch(number)
{ case 1:
if
(answer=='a')
window.alert("Correct Answer");
else
window.alert("Incorrect Answer");
break;
case 2:
if
(answer=='c')
window.alert("Correct Answer");
else
window.alert("Incorrect Answer");
break;
5) Loops
(they come in 3 flavors)
while (condition) do for
(int count=1; count<=max; count++) counter controlled
{ { {
loop
Inst1; instr1; inst1;
Inst2; instr2; inst2;
} } while (condition); }
The while and do while are
conditional controlled loops, the for loop is a
counter controlled loop. The while loop
is a pre condition loop, the do while is a post condition loop
6) Call to a method
Methods
and Functions
Methods
and functions are little programs that perform specified operations.
A method
is self contained in that it is a program that is called to due some task(s)
but does not report (return) any values to the place in which it was called. The call to a method is a stand alone
instruction and that is why call to a method is considered a fundamental
instruction.
A
function is a program that is called from inside an existing instruction and
its sole purpose is to find some value which is returned back to where it is
called. That returned value will replace
the call to the function. A function
MUST have a return statement.
Examples: The following is a method. NOTE:
JavaScript calls both methods and functions: functions but we know this
is a method because there is no return statement.
function recordAnswer(question,answer)
{
answers[question-1]=answer;
}
It was
called by recordAnswer(4,'d')"
Methods
and functions have ( ) after their
name. If there is nothing in there then
we call them parameterless methods or functions.
Both
Methods and functions can have parameters.
Parameters are the means through which communication is made between the
call to the
method or function and the method or function itself. Parameters in the call are called arguments
(or actual parameters)
In the above example 4 and d are arguments or actual
parameters. Parameters in the heading
of a method or function are called formal parameters. In the example above question and answer are
formal parameters.
Actual
and formal parameters have a one to one correspondence. The 4 argument matches is paired with the
question formal parameter. The formal
parameter question actually takes on the value of 4.
Function
example
function addGuest(name,relationship){
var
guestInfo=name + ",";
guestInfo
+=relationship + "\r";
return guestInfo;
}
We know
this is a function because it has a return statement.
guestInfo is a variable that has string
data which is returned to the place from which the function was called.
Example
of a call to a function.
var newGuest=addGuest(Dean, groom);
Arrays
An array
is a set of data represented by a single variable name in which each datum in
the array is called by the name and an index (enclosed in []) that indicate the
position the element is in the array.
Array indexes always start at 0 NOT 1.
var cellPhone = new Array(3);
cellPhone[0]=4435678667;
cellPhone[1]=4434312129;
cellPhone[2]=4434564312;
Reference data Types
In
addition to primitive data types, there are many reference data types. A reference data type is in fact an address
to the starting location of some object (or array)
In
the cellPhone example above. The variable cellPhone has an address stored
in its location that points to the starting location of the first element of
the array.
Variables
can thus be the home of arrays, images, forms etc.
In fact
the forms and images on a page are actually stored in the JavaScript arrays
forms[]
for forms images[] for images
Pictures on a Page
Pictures can be shown randomly,
in sequence, in a slide show or as part of an animation.
Examples.
Clicking on a picture to change
the picture. Thumb Nail Example: Lab 5 Lecture (thumbnail example.htm)
<a href="paperboy.gif">
<img src="pb1.gif" alt="paper boy"/>
</a>
This is
an anchor tag (a link) that will when clicked go to the picture
“paperboy.gif”. The icon to link on is
the pb1.gif which is a different picture (It is a portion of the paperboy.gif picture)
<a
href="paperboy.gif">
<img
height="50" width="50" src="paperboy.gif"
alt="paper boy"/></a>
This is
also a link to the paperboy.gif but the picture to click is the same picture
only with smaller (thumbnail) dimensions.
Build in
JavaScript Functions
Math.random() This returns a value between 0 and 1
(including 0 but NOT including 1)
Math.floor() This returns a value that truncates
(cuts off) any fractional component
setTimeout( call to function,
timeInter) This will call a function and
repeat the function every timeInterval milliseconds)
Displaying pictures in a random
order
Pictures need image elements to
be stored.
Example
of Random display of pictures
<script
type="text/javascript">
/* <![CDATA[ */
var imgArray = new
Array(4); //
creates an array of 4 undefined elements
var index=0;
function startup() //
this assigns image objects to the array elements
{
imgArray[0]="lions.jpg";
imgArray[1]="tigers.jpeg";
imgArray[2]="black-bear.jpg";
imgArray[3]="ohmy.jpeg";
select();
return;
}
function select()
{
index=Math.floor(Math.random()
* 4); // assigns an integer between
0 and 3 to index
document.images[0].src=imgArray[index]; //places an image of the array (depending on
the index)
//
in the first picture frame of the document
setTimeout("select()",2000); // calls the select function and continues to
run it
return; //
ever 2 seconds
}
/*
]]>*/
</script>
</head>
<body
onload="startup()"> // on load
means when the page is rendered the startup function will be called
<div >
<img class="center" src="ohmy.jpg" alt="banner" />
</div>
</body>
Slide Show Example:
<script
type="text/javascript">
/* <![CDATA[ */
var imgArray = new Array(4);
var index=0;
function doBack()
{
if (index >
0)
{
index--;
document.images[0].src=imgArray[index];
}
else
{
index=3;
document.images[0].src=imgArray[index];
}
return;
}
function doNext()
{
if (index
<3)
{
index++;
document.images[0].src=imgArray[index];
}
else
{
index=0;
document.images[0].src=imgArray[index];
}
return;
}
function startup()
{
imgArray[0] =
"wed.jpg";
imgArray[1] =
"Venice1.jpg";
imgArray[2] =
"Venice2.jpg";
imgArray[3] =
"Venice3.jpg";
return;
}
Use of JavaScript to keep track
of scores
<script
type="text/javascript">
/*
<![CDATA[
*/
var answers=new
Array(5);
var
correctAnswers = new Array(5);
correctAnswers[0]='c';
correctAnswers[1]='b';
correctAnswers[2]='a';
correctAnswers[3]='d';
correctAnswers[4]='a';
function
recordAnswer(question,answer)
{
answers[question-1]=answer;
}
function
scoreQuiz()
{
var
totalCorrect=0;
for (var
count =0; count < correctAnswers.length; ++ count)
{
if
(answers[count]==correctAnswers[count])
{
++totalCorrect;
}
} // end of forLoop
document.forms[0].score.value="You
scored " + totalCorrect + " out of 5 answers correctly!";
} // end of function
/* ]]>*/
</script>
</head>
<body>
<form
action="" >
<p><strong>1. Who was the thrid president to
be assassinated in office?</strong></p>
<p><input
type="radio" name="question1" value="a" onclick="recordAnswer(1,'a')"
/> Abraham Lincoln<br />
<input
type="radio" name= "question1" value="b"
onclick="recordAnswer(1,'b')" /> John F. Kennedy<br />
<input
type="radio" name= "question1" value="c"
onclick="recordAnswer(1,'c')" /> William McKinley<br />
<!--
correct answer -->
<input
type="radio" name= "question1" value="d"
onclick="recordAnswer(1,'d')" /> James Garfield<br />
</p>
…………
<p>
<input
type ="button"
value="Score"
onclick="scoreQuiz();"
/>
<textarea name="score"
cols="75" rows="2" style="color: black;
background-color: white; border: none; overflow: hidden; font: 10px tahoma;
color: #3F3F3F"> </textarea> </p>
Make
sure you know how to organize a web page.
Various divisions
Be sure you know how to lay out a web page and
use the appropriate css
Wrapper
#rightcolumn { margin-left:
130px; background-color: #ffffff; color: #000000; } #footer {
font-size: xx-small; text-align:
center; clear:
right; padding-bottom: 20px; }
<body>
<div
id="wrapper">
<div id="leftcolumn">
(Navigation list)
</div>
<div id="rightcolumn">
<div id="logo">
(Header Headlines)
</div>
<div
class="content">
(picture and words)
</div>
<div id="footer">
(footer info)
</div>
</div>
</div>
</body>
Navigation Information CSS information
a:link { padding (space between the element content & the border)
color: #0000FF; Padding is the inward spacing margin sets the outward
} spacing. Border the size of border (if any)
a:visited {
color: #FF0000;
}
a:hover {
background: #FFFF00;
}
a:active {
color: #00FF66;
}
#leftcolumn a { display:block; this treats the content (in this case the
Navigation information) as a block with line breaks before and
margin: 15px; after each element. This organizes the navigation block.
display: block;
}
CSS
Web page
style is generally done with css. We can
create id’s or classes that have formats and then link
blocks on our pages to those styles.
Examples:
<style
type=”text/css”>
.center{display:block; margin:0 auto} centers a block (image
etc.) on the page
.centerText
{text-align:center;}
centers text on a page
body li { list-style: none;} removes
dot from lists
body li { list-style-image:
url(blubtn.jpg);} list with image
body li {list-style-type: upper-alpha;}
body {font-family: verana; font-size:
14pt;}
ol { list-style-type: upper-roman} // the first level of an ordered list will
have Upper Roman I. II.
ol ol {list-style-type:upper-alpha} // the next level of the ordered list will
have upper Alpha A. B.
see appendix B for more on css
</style>
Understand
the difference between block and inline tags
Block
tags A block-level element is an element that creates
large blocks of content like paragraphs
or page divisions.
They start new lines of text when you use them, and can contain other blocks as
well as inline elements and text or data.
<p> <div>
<h1> are examples of block tags
Inline tags An inline
element is an element that defines text or data in the document
<strong>
<span> are examples of
inline tags.
Look up
and know the definitions or how the following is used or what they produce:
<em> <p> (space) <meta /> <input…> <strong> <dd>
© <title> <hr /> <dl> <dt> #000000 <br />
text-decoration PHP z-index #ff0000 #00ff00 #ffffff
JavaScript text-align #0000ff #777777 repeat-x while loop
<ol> <ul> repeat-y event do-while
for loop
onmouseout onmouseover
Be able
to write code to do a slide show with back and next buttons that loop around
(at last slide next goes to first slide and at first slide back goes to last
slide)
Be able
to write code to show a multiple choice test on a web page that will tally the
number of correct answers.
Be able
to write code to verify (validate) radio or text boxes or checkboxes to assure
that required data is given.
See Lab
11 problem 2.