Transcript Javascript
Introduction to Javascript
Peter Atkinson
1
Objectives
• To understand and use appropriately some of
the basic elements of Javascript:
–
–
–
–
–
–
–
–
–
–
–
alert and prompt methods
window.write method
string, number and Boolean variables
functions
array objects
date objects
conditionals
multiple conditionals
while loop
for loop
objects, methods and events
2
Page Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
3
Using Alert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<title>Greeting Page</title>
</head>
<body>
<a href=“#” onclick=“alert(‘Hello’)”>Click here for greeting</a>
</body>
</html>
Embedded Javascript
4
What is a Variable?
• A variable is a container
• Create a variable
var myname
• Creates a container called ‘myname’
• Put something in to the container by
assigning a value to the variable using =
myname = “Fred”
5
Create a Variable and Assign a
Value
• So you can create a variable and give it a
value like this:
var myname
myname = “Fred”
• But, Javascript lets you make a shortcut
by creating a variable and assigning it a
value at the same time:
myname = “Fred”
6
Points to Notice
• Javascript is case sensitive so:
myName is a different variable to myname
• At the end of every line of Javascript code you
do not need to put a ; but put one anyway. From
now on:
myname = “Fred”; is correct
• You can use double quotes “Fred” or single
quotes ‘Fred’ as long as you use them
consistently
• Javascript is “weakly typed” so you do not need
to specify what kind of data will be stored in your
7
variable
Let’s Use a Variable
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using a Variable</title>
<script type="text/javascript" language="javascript">
var myname;
myname = “Fred”;
</script>
</head>
<body>
<p><a href=“#” onclick=“alert(myname);”>Click for message telling you the
name</a></p>
</body>
Hands On
Rewite this page using document.
write to write the name to the page
when it loads
8
Types of Variable
• String
– When you specify a text variable it must be enclosed
in quote marks eg. “Fred”
• Number
– Integer (no decimals)
– Floating Point – has decimals
• Boolean – true or false
– eg. myanswer = (2 + 2 ==3)
– myanswer contains the value false
• Object
9
Manipulating Strings
To join two strings, use the concatenation
operator +:
var mystring;
mystring = “Flossie”;
document.write(“My name is: “ + mystring);
Hands On
Put this code into an HTML page
Modify it so that it obtains the user’s name
using a prompt
10
Manipulating Number Variables
Put this Javascript into a blank page:
var mystring, mynumber, shownumber;
mystring = "56";
mynumber = 44;
shownumber = mystring + mynumber;
document.write(shownumber);
Hands On
Alter this code using the parseInt() function so that
it adds 56 and 44 and writes the result 100 to the
page
11
Using Number Operators
• Be careful how you use numeric operators
• Examine this piece of code:
var myanswer;
myanswer = 1 + 2 * 3;
document.write(myanswer);
• Hands On
• What number do you think will be written
to the page
• Test it. Were you right? If not, why not?
12
Arrays
• An array is like a variable but it can hold
more than one value at a time
var beatleArray = new Array();
beatleArray[0] = “John”;
beatleArray[1] = “Paul”;
beatleArray[2] = “George”;
beatleArray[3] = “Ringo”;
13
Arrays
• Hands On
• Write a piece of code using an array
containing the names of your four best
friends
• Have your code write each of these pieces
of data to your HTML page
14
Arrays Hands On
– suggested solution
<script language="javascript" type="text/javascript">
myFriends = new Array();
myFriends[0] = "John";
myFriends[1] = "Paul";
myFriends[2] = "George";
myFriends[3] = "Ringo";
document.write(myFriends[0] + "<br />");
document.write(myFriends[1] + "<br />");
document.write(myFriends[2] + "<br />");
document.write(myFriends[3]);
</script>
15
What is a Function?
• A function is a block of code that may be used
over and over.
• The structure of a function is:
function functionName() {
code that does something;
}
• So for example, a function that shows our
greeting:
function greeting() {
alert(“Hello”);
}
16
Using a Function
Hands On: try this code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Greeting Function</title>
<script type="text/javascript" language="javascript">
function greeting() {
alert("Hello");
}
</script>
</head>
<body>
<a href="#" onclick="greeting();">Click here for greeting</a>
</body>
What are the advantages of using a function?
17
Conditional
if (test condition) {
some code that executes if condition is true;
}
else {
some other code that executes if condition is false;
}
18
Example Conditional
if (myage < 30) {
document.write(“You are too young!”);
}
else {
document.write(“You are too old!”);
}
• Hands On
• Place this code in an HTML page with a prompt
to collect the reader’s age
19
Operators Used in Conditionals
• Comparison Operators
==
<
>
<=
>=
!=
Tests if LHS is equal to RHS
Tests if LHS is less than RHS
Tests if LHS is greater than RHS
Tests if LHS is less than or equal to RHS
Tests if LHS is greater than or equal to RHS
Tests if LHS is not equal to RHS
• Logical Operators
&& AND both LHS and RHS must be true
|| OR LHS or RHS must be true
!
NOT reverses condition
20
Using a Conditional
• Hands On
• Use a prompt to obtain a number from the user
• Write some code to test the number using a
comparison operator to return one of two
messages
• Try each of the comparison operators in turn
• Put another prompt into your code to obtain a
second number from the user
• Write some code that tests both numbers at the
same time using a logical operator
21
Multiple Conditional
Hands On : try out this code
switch (myBeatle)
{
case “John”:
alert(“Just Imagine!”);
break;
case “Paul”:
alert(“Sorry about the divorce!”);
break;
case “George”:
alert(“You are sadly missed!”);
break;
case “Ringo”:
alert(“Where are you now?”);
break;
default:
alert(“You are not a Beatle!”)
break;
}
22
For Loop
for (initialise; test; update) {
do something;
}
For example, we could write out the
contents of an array:
myArray = new Array(“John”,”Paul”’”George”,”Ringo”);
for (i = 0; i < 4; i++) {
document.write(myArray[i] + “<br />”);
}
Hands On
Try out this piece of code
23
For Loop
• Hands On
• Use prompts to collect data from the user
and store it in an array
• Write the contents of the array to an HTML
page
24
While Loop
• The while loop allows you to test a
condition and keep looping while it is true
while (test condition) {
do something;
}
25
While Loop Example
• Hands On: try this code
var gameon = true;
var i = 0;
while(gameon == true) {
var myguess = prompt("Guess what number between 1 and 5 I am
thinking of: ","");
if (myguess == "3") {
gameon = false;
alert("You got it right! It is 3.");
i++;
}
else
{
alert("You got it wrong! Try again.");
i++;
}
}
document.write("You took " + i + " guesses!");
26
Function – Hands On
• Using Javascript features that you have learned
so far, write some code for this game:
• User to pick a number from 1 to 5
• If user guesses correctly, the user wins
• If user guesses incorrectly, user can guess again
• User can keep on guessing until user gets it right
• Page displays number of guesses the user had
27
Javascript Concepts
• Object – a car
• Attributes – colour, insurance group
• Methods – drive, reverse
• Events – start, stop, collision
28
Native Objects
• There are a number of built-in objects in
Javascript eg Date and Array
• To create an Array eg.
var myarray = new Array();
• To create a Date object:
var thisdate = new Date();
– Methods of the Date object: getDate() getDay()
getMonth() getFullYear()
eg. mydate = thisdate.getDate()
Hands On
• Use the Date object and its methods to write
today’s date to your HTML page in the format
Tuesday 1 January 2007
29
Events
• Applies to the window object
– onload – when window opens
– onunload – on moving to another page
– eg. window.onload = myFunction;
• Applies to all HTML elements
–
–
–
–
–
onmousedown – user depresses mouse button
onmouseover – user moves mouse onto element
onmouseout – user moves mouse off element
onclick – user clicks mouse
eg. <p onclick=“myFunction();”>Some text</p>
30
Using Events
• Hands On
• Write a function that triggers an alert
• Call the function from each of the events
listed in turn
31
Finding Bugs
• Hands On
• You have been provided with a file
HandsOn1.html that contains some
common coding errors
• Find the errors and correct them
32
Rollovers
• Hands On
• Copy the code from the Rollovers sheet
into an HTML page
• Write notes on the sheet explaining the
use of the if…else feature used in this
code
33
Cycling Banner
• Hands On
• Copy the code from the Cycling Banner
sheet into an HTML page
• Write notes on the sheet explaining the
use of the setTimeout() feature used in this
code
34
Objectives
• To understand and use appropriately some of
the basic elements of Javascript:
–
–
–
–
–
–
–
–
–
–
–
alert and prompt methods
window.write() method
string, number and Boolean variables
functions
array objects
date objects
conditionals
multiple conditionals
while loop
for loop
objects, methods and events
35