[Link].
maklumat
JAVASCRIPT
INTRODUCTION TO JAVASCRIPT
Javascript is a scripting language that will allow you to add real programming to your
webpages. You can create small application type processes with javascript, like a
calculator or a primitive game of some sort. However, there are more serious uses
for javascript:
Browser Detection
Detecting the browser used by a visitor at your page. Depending on the browser, another page
specifically designed for that browser can then be loaded.
Cookies
Storing information on the visitor's computer, then retrieving this information automatically next
time the user visits your page. This technique is called "cookies".
Control Browsers
Opening pages in customized windows, where you specify if the browser's buttons, menu line,
status line or whatever should be present.
Validate Forms
Validating inputs to fields before submitting a form.
An example would be validating the entered email address to see if it has an @ in it, since if not,
it's not a valid address.
WHERE TO PLACE IT
Since javascript isn't HTML, you will need to let the browser
know in advance 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.
BASIC RULES
Knowing that javascript needs to be entered between <script> tags, is a
start. But there are a few other things you need to know before writing your
first javascript:
Javascript lines end with a semicolon.
You may have noticed from the example on the previous page that javascript
lines end with a semicolon.
You can easily put all your javascript on a single line without destroying the
performance of it.
However, you would destroy the overview of your script so it is not advisable.
Always put the text within " ".
When entering text to be handled by javascript, you should always put the text
within " ". If you forget to enclose your text in " ", javascript will interpret your text
as being variables rather than text.
Capital letters are different from lowercase letters.
You should always remember that capital letters are different from lowercase
letters.
This means that when you write commands in javascript, you need to type
capital letters in the correct places, and nowhere else
ADDING INTO DOCUMENTS
Now consider this example: Instead of having
JavaScript write something in a popup box we
could have it write directly into the document
CASE SENSITIVE
It is extremely important to be aware that JavaScript
makes a sharp distinction between capital and
lowercase letters. JavaScript does not consider a
variable named myvalue to be the same as a variable
named MYVALUE. Consider these examples:
EXAMPLE
Instructions: Calculate the output of the following scripts. ANSWERS
CHOOSING RIGHT SYNTAX
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 variables in
capitals.
Which syntax you chose is not important
- as long as you chose just one!
[Link]
The [Link] command is a standard
JavaScript command for writing output to a
page
Eg:
[Link] (“Hello Word!”);
WHERE TO PUT JAVASCRIPT
Head
Body
Head+body
External
<script type="text/javascript" src=“[Link]"></script>
COMMENTS
Single line - //
Multi line
[Link]
VARIABLES
VARIABLES
Variables are "containers" for storing information
Variables can be compared to small boxes with names.
If you were to store 5 pair of shoes, you might have a box for each
pair. On each box you would write what is in it.
The boxes would be your variables.
- Places to store things.
The name on the boxes would be the variable names.
- The ones you'd use when referring to each of the boxes.
And finally the shoes, would be the content of the variables.
- What is stored in the boxes.
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.
EXAMPLE 1
Variable: Bus
Variable Name: SchoolBus
Contents: Students
JavaScript Statement: Var SchoolBus=“Student”;
EXAMPLE 2
Student Marks
Fatihah 90
var fatihah=90;
Siti 85
Sairul 78
Naimah 65
EXAMPLE
Instructions: Try to predict the output of the example before reading on
ANSWERS
my first name
[Link]
ARIMETHIC OPERATOR
ANSWERS
EXERCISE
Provide answer for the following question.
1.X=6, Y=10 Results
x++ 7
x+=y 16
y-- 9
y%x 4 ANSWERS
((x--)+y)/ 5 3
(x*2)/12 1
MOHAMAD RAHIMI MOHAMAD ROSMAN
EXERCISE
Indicate true or false
1. x=5, y=8, z= “Hello” Results
x==y False
x!=y True
x==5&&y==9 False
(x+3)>=y&& (y-3)>=x True
z!=“hello” True
my_string!=My_String True
z==“Hello”||z==“hello” True
[Link]
CONDITIONAL STATEMENT
PROBLEM 1
Create a simple JavaScript statement that
request a number from visitors. The script
should check whether the number is an odd or
even number. The result will de display in an
alert box.
PROBLEM 1.1
GRED MARKS
Questions
A+ 90-100 Convert the following table into a JavaScript
A 80-89 statement by using if functions. The student marks
will be inputted using the prompt box and the result
A- 75-79
will be displayed in the body of the documents. Alert
B+ 60-64 box will appear if the input greater than 100.
B 65-69
B- 60-64
C+ 55-59
C 50-54
C- 47-49
D 44-46
PROBLEM 1.2
Items Price
Coffee 1.00
Tea 0.80
Cappuccino 5.00
Orange 2.50
Create a program using Switch statement.
x=“Tea”
1. Displays the name of the items
2. Display the price of the items
3. Display (item prices x quantity) *- Quantity must not exceed 50
W eather =
Is intTemp > 32 False
"Freezing"
True
W eather =
No Is intTemp > 80
"Moderate"
Yes
W eather = "Hot"
Display
W eather
[Link]
ALERT BOX
[Link]
CONFIRM BOX
[Link]
PROMPT BOX
ALERTBOX WITH LINE BREAK
[Link]
FUNCTION
FUNCTIONS
To keep the browser from executing a script when the
page loads, you can put your script into a function.
A function contains code that will be executed by an
event or by a call to the function.
You may call a function from anywhere within a page (or
even from other pages if the function is embedded in an
external .js file).
Functions can be defined both in the <head> and in the
<body> section of a document. However, to assure that
a function is read/loaded by the browser before it is
called, it could be wise to put functions in the <head>
section.
[Link]
EVENTS
EVENTS
By using JavaScript, we have the ability to create dynamic web pages.
Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a
JavaScript. For example, we can use the onClick event of a button element
to indicate that a function will run when a user clicks on the button. We
define the events in the HTML tags.
Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
Note: Events are normally used in combination with functions, and the
function will not be executed before the event occurs!
Exercise
PROBLEM 2
Write a simple JavaScript statement that
request initial loan, interest, and payback
period. The end result should display monthly
payment in an alert box
[Link]
LOOPING STATEMENT
LOOPING
Often when you write code, you want the same
block of code to run over and over again in a row.
Instead of adding several almost equal lines in a
script we can use loops to perform a task like this.
In JavaScript, there are two different kind of loops:
for - loops through a block of code a specified number
of times
while - loops through a block of code while a specified
condition is true
PROBLEM 1.2
Denotations Quantity
Write a script that
RM100
request the user to input
RM50
amount of money, then RM10
displayed the money in RM 5
their denotations. The RM 2
amount inputted should RM 1
not exceed RM10,000 RM 0.50
(alert box will appear
incase of exceeding RM 0.20
amount)
[Link]
ARRAY
