JavaScript Essentials
topicTwelve
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Learning Objectives
IMD208 – Introduction to Web Content Management & Design
• At the end of this chapter the students
should be able to:
– Understand the difference between HTML
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
and JavaScript
– Understand how the browser recognize
and handle JavaScript
– Understand the basic syntax of JavaScript
– Understand the different functions of
JavaScript
[Link]
Introduction
IMD208 – Introduction to Web Content Management & Design
• JavaScript is a scripting language that was
design to add programming functions into
your standard HTML web pages.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• It can help you to collect information
regarding web visitors, setting up page
counter and much more.
• JavaScript is a client-side scripting.
• It can be written either internally or
externally
Other functions of JavaScript
[Link]
IMD208 – Introduction to Web Content Management & Design
are:
• Browser Detection
– You can use JavaScript to detect the type of browser used by a
visitor at your page. Some web pages work well under certain
kind of browsers
• Cookies
– Cookies are essential in any programming code because it can be
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
used as an indicator for a certain record and to store information
on the visitor's computer. The value of the cookies can be
anything, from username to time, date, personal id and etc.
• Control Browsers
– JavaScript can be used to open pages in customized windows,
where you can specify if the browser's buttons, menu line, status
line or whatever should be present.
• Validate Forms
– Each form must be validate before it can be processed, in order to
prevent visitors from entering empty or wrong character in the
form. An example would be validating the entered email address
to see if it has a @ in it, since if not, it's not a valid address.
[Link]
Using JavaScript
IMD208 – Introduction to Web Content Management & Design
• JavaScript isn’t a HTML file, so how does
the browser recognize it?
• In order to process the JavaScript, you will
need to let the browser know in advance
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
when you enter JavaScript to an HTML
page.
• This is done using the <script> tag.
• The browser will use the <script
type="text/javascript"> and </script> to
tell where JavaScript starts and ends.
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Using JavaScript
IMD208 – Introduction to Web Content Management & Design
• By entering the command/statement between the
<script type="text/javascript"> and </script> tags,
it will help the browser to recognize it as a
JavaScript command.
• If we had not entered the <script> tags, the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
browser would simply recognize it as pure text,
and just write it on the screen.
• You are permitted to enter JavaScript in both the
<head> and <body> sections of the document.
• However, it is advisable to keep as much as
possible in the <head> section.
• Besides that, you could also use JavaScript in both
(Head+body) and external JavaScript.
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
JavaScript Rules
IMD208 – Introduction to Web Content Management & Design
– Must always end with semicolon.
• You may have noticed from the example on the previous
page that JavaScript lines end with a semicolon. Failing to
end it with semicolon will generate a script error and your
JavaScript will not be functioning. You can write the code
in a single line as long as it is separated by semicolon, but
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
it’s not advisable.
– Always put the text within " ".
• When entering text to be handled by JavaScript, you
should always put the text within " " bracket. Filing to do
so will resulting JavaScript to interpret your text as being
variables rather than text.
– Case sensitive.
• JavaScript is case-sensitive programming language. You
should always remember that capital letters are different
from lowercase letters.
[Link]
Variables
IMD208 – Introduction to Web Content Management & Design
•
A variable is simply a place in the computer's memory to
store information.
• All variables are referred to by the unique name you
assigned to them.
• Variables can be compared to a classroom full with
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
students.
• Let’s say that we have four (4) classrooms, each
classroom comprises of 25 students. We can summarize
that:
[Link]
Assigning value to variable
IMD208 – Introduction to Web Content Management & Design
• The most common way to assign a
value to a variable is using the equals
sign.
• Variable is a case sensitive.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• For example, myVar is different with
MyVar.
• Even though the mistake is minimal,
the JavaScript will consider that it’s a
different kind of variables
Some of the way to assigning
[Link]
IMD208 – Introduction to Web Content Management & Design
values is:
Value Assignment Result (as printed in web pages)
MyVar= 100; 100
MyVar=100; MyVar++; 101
MyVar=100; MyVar--; 99
MyVar=5; a=MyVar-5; 0
MyVar=5; a=MyVar+5; 10
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
Name1= “Malik”; Malik
Name2= “Aziz”; Aziz
Name3=Name1+“ “+Name2; Malik Aziz
a=4*3; 12
d=12/4; 3
e=(1+3)*4; 16
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Choosing Right Syntax
IMD208 – Introduction to Web Content Management & Design
• The best advice is to use the same syntax
on all variables.
• Either write all variables in small letters,
start with one capital letter or write all
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
variables in capitals.
• Which syntax you chose is not important -
as long as you chose just one.
• For example, you could capitalize each of
the variables or using a particular jargon
to representing each element, such as int
for Integer, txt for text and etc.
[Link]
Concatenation
IMD208 – Introduction to Web Content Management & Design
• The + operator can be used to add
string variables or text values together.
For example:
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
varFname= “Rahimi”;
varLName= “Rosman”;
varFullName= varFname + varLName;
[Link]
Comparison Operator
IMD208 – Introduction to Web Content Management & Design
• Comparison operator is used in logical
statement to determine equality or
difference between variables or values.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
Logical Operator
the logic between values and variables.
• Logical operator is used to determine
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Conditional statement
IMD208 – Introduction to Web Content Management & Design
• Conditional statement is used to perform a
different action for a different decision. There
are three types of conditional statement:
– If statement – execute some code if condition is
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
true
– If..else statement - execute some code if
condition is true and another if condition is false
– If…else if…else statement – used this statement
to select one of many code to be executed
– Switch statement - used this statement to select
one of many code to be executed
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
JavaScript: Pop Up Boxes
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
JavaScript: Alert Box
IMD208 – Introduction to Web Content Management & Design
• The syntax for an alert box is: alert("yourtext");
• The user will need to click "OK" to proceed.
• Typical use is when you want to make sure
information comes through to the user.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• Examples could be warnings of any kind. (Typical
examples are "Adult Content", or technical matters
like "This site requires Shockwave Flash plug-in").
[Link]
JavaScript: Confirm Box
IMD208 – Introduction to Web Content Management & Design
• The syntax for a confirm box is: confirm("yourtext");
• The user needs to click either "OK" or "Cancel" to
proceed.
• Typical use is when you want the user to verify or
accept something.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• Examples could be age verification like "Confirm that
you are at least 57 years old" or technical matters
like "Do you have a plug-in for Shockwave Flash?“
▪ If the user clicks "OK", the box returns the value true.
▪ If the user clicks "Cancel", the box returns the value false
[Link]
JavaScript: Prompt Box
IMD208 – Introduction to Web Content Management & Design
• The prompt box syntax is: prompt("yourtext","defaultvalue");
• The user must click either "OK" or "Cancel" to proceed after
entering the text.
• Typical use is when the user should input a value before
entering the page.
• Examples could be entering user's name to be stored in a
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
cookie or entering a password or code of some kind.
▪ If the user clicks "OK" the prompt box returns the entry.
▪ If the user clicks "Cancel" the prompt box returns null.
• Since you usually want to use the input from the prompt box
for some purpose it is normal to store the input in a variable:
[Link]
JavaScript: Example 1 (alert)
IMD208 – Introduction to Web Content Management & Design
<html>
<head><title>Alert Box</title>
<script type="text/javascript">
alert("Selamat datang ke website saya");
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
</script>
</head>
<body>
</body>
</html>
[Link]
JavaScript: Example 2 (prompt)
IMD208 – Introduction to Web Content Management & Design
<html>
<head><title>Prompt Box</title>
<script type="text/javascript">
pengguna=prompt("Masukan Nama Anda","Nama Anda");
</script></head>
<body>
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
Selamat datang ke website ini,
<script type="text/javascript">
[Link] (pengguna);
</script><br>
Umur anda: <br>
Tarikh Lahir:<br>
email:<br>
</body>
</html>
[Link]
JavaScript: Example 3(Confirm)
IMD208 – Introduction to Web Content Management & Design
<html>
<head><title>Confirm Box</title></head>
<body>
<script type="text/javascript">
pengguna=confirm("Adakah anda Mahasiswa/i IS110?");
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
if (pengguna==true)
{
[Link] ("Selamat datang ke Website <a href='[Link]
}
else
{
[Link] ("Maaf, website ini hanya untuk student IS110 sahaja");
}
</script>
</body>
</html>
[Link]
A Taste Of Javascript
IMD208 – Introduction to Web Content Management & Design
• Many of the most popular effects created on
Web pages these days have little or nothing to
do with HTML and everything to do with
JavaScript, a scripting language originally
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
developed by Netscape Communications and
now supported by all major browsers.
• This topic will discuss a sampler of very simple
scripts.
• Hopefully, they will give you the beginning of
an idea of what you can do with JavaScript
Adding the Current Date and
[Link]
IMD208 – Introduction to Web Content Management & Design
Time
• Nothing makes your page seem more
current than adding the date and the
time.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• While they're a bit more complicated
to format in a particular way, just
adding them is not difficult at all.
• To add the current date and time to
your page:
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Setting a New Window's Size
IMD208 – Introduction to Web Content Management & Design
• Previously you have learned how to
open a link in a new window.
• JavaScript lets you control how big that
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
window should be.
[Link]
To set the size of a new window:
IMD208 – Introduction to Web Content Management & Design
1. Type <a href="javascript:location='[Link]';, where
[Link] is the URL of the page that contains the link.
2. Type [Link]('[Link]', where [Link] is
the URL of the page to be opened in the new window.
3. Type 'label', where label is the name of the new window.
4. Type 'height=h,width=w, where h and w are the desired
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
height and width for the new window. (No spaces!)
5. If desired, type ,chrome=yes, where chrome is scrollbars,
toolbar, status, menubar, location, or resizable.
6. If desired, type a, (comma) and repeat step 5 as desired. Each
window part should be separated from the previous one with
a comma but no spaces.
7. Type ' (a straight apostrophe)whether or not you've set the
window parts.
8. Type )" to finish the JavaScript code.
9. Type >clickable text</a>.
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
Changing an Image When a
[Link]
IMD208 – Introduction to Web Content Management & Design
Visitor Points
• You can make an image change when
the visitor points at it.
• This is commonly called a "rollover". To
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
change an image when the visitor
points at it:
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Changing a Link’s Status Label
IMD208 – Introduction to Web Content Management & Design
<html><head>
<title>Link Status</title>
</head>
<body>
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
<img src="[Link]" alt="Big Bang Theory" align="left"
width="384" height="256" border="0"
hspace="5" vspace="0"
onmouseover="[Link]='Sun to earth';
return true"
onmouseout="[Link]='Testing'; return
true" />
</body>
</html>
Changing Multiple Frames with
[Link]
IMD208 – Introduction to Web Content Management & Design
One Link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-
1" />
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Table of Contents</title>
</head>
<body>
<h1>Wild Animals</h1>
<br />
<a
href="javascript:location='[Link]';[Link]='birdbuttons.
html';[Link]='[Link]'">
Birds</a> <br />
</body></html>
[Link]
Loading Images into Cache
IMD208 – Introduction to Web Content Management & Design
• You can use JavaScript to load all of the
images into your browser's cache as
the page is initially displayed on the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
screen.
• One benefit is that rollovers are
instantaneous
[Link]
To load images into cache:
IMD208 – Introduction to Web Content Management & Design
1. In a separate text document, on the first line, type label=, where
label is a word that identifies the image.
2. Type new Image(h,w), where h and w are the image's height and
width, in pixels.
3. On the next line, type label, where label matches the label used in
step 1.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
4. Directly following the name in step 3 (i.e., with no extra spaces),
type .src="[Link]", where [Link] is the location of the image
on the server.
5. Repeat steps 1-4 for each image you wish to load into cache
6. Save the script in text-only format and call it [Link].
7. In the head section of the (X)HTML document that uses the images,
type <script type="text/javascript" language="javascript"
src="[Link]"> </script>, where [Link] is the name of
the file you saved in step 6.
8. When you refer to the images in other scripts, use [Link] (without
quotes), where label is the word you used to describe the images in
step 1
IMD208 – Introduction to Web Content Management & Design
[Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Exercise
IMD208 – Introduction to Web Content Management & Design
• Create a simple JavaScript statement
that request a number from visitors.
The script should check whether the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
number is an odd or even number. The
result will be display in an alert box.
[Link]
Exercise
IMD208 – Introduction to Web Content Management & Design
• Convert the following
table into a JavaScript
statement by using if
functions.
• The student marks will
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
be inputted using the
prompt box and the
result will be displayed in
the body of the
documents.
• Alert box will appear if
the input greater than
100
[Link]
Exercise
IMD208 – Introduction to Web Content Management & Design
• Create a script that request initial loan,
interest, payback period, and display
the data in the document alongside
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
expected monthly payment.
[Link]
Exercise
IMD208 – Introduction to Web Content Management & Design
• Create a JavaScript statement that
request 2 input from user (page title
and background color/picture) and
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
display it on the screen.