Scribd
Upload
8 views

Javascript

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Javascript

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

JavaScript

 Was designed to add interactivity to


HTML pages
 Is a powerful client-side scripting language
(a scripting language is a lightweight
programming language)
 JavaScript code is usually embedded
directly into HTML pages
 JavaScript is an interpreted language
(means that scripts execute without
preliminary compilation)
lecture 5 1
What can a JavaScript do
 JavaScript gives HTML designers a
programming tool
 JavaScript can put dynamic text into an
HTML page
 JavaScript can react to events
 JavaScript can read and write HTML
elements
 JavaScript can be used to validate input data
 JavaScript can be used to detect the visitor's
browser
 JavaScript can be used to create cookies

lecture 5 2
How to put a JavaScript code into
an HTML page
 Use the <script> tag (also use the type
attribute to define the scripting language)
 In the HTML page itself:
<html>
<head>
<script language=“javascript”>
// JavaScript code
</script>
</head>

lecture 5 3
 Scripts can be in the either <head>
section or <body> section
 Can implement in 3 ways
◦ Within the body tag
◦ Inside head tag
◦ In an external file (with .js externsion)
Placing scripts in the Head

<html>
<head>
<script type="text/JavaScript">
....
</script>
</head>
As a file, linked from the HTML page:

Scripts can be provided locally or remotely accessible JavaScript file


using src attribute.

<body>
<script language=“javascript” src=“script.js”>
</script>
</body>

Script.js file
document.write(“hello world”);
Placing scripts in the body
<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = “JavaScript”>
document. write("Hello World")
</SCRIPT>
</BODY>
</HTML>
A Simple Program: Printing a Line of
Text in a Web Page
 Correct method call syntax:
◦ object.method( “string”, “[additional arguments]” );
 document.writeln( “<H1>argument</H1>”
);
◦ Case-sensitive, like all JavaScript functions
◦ Uses the writeln method in the browser’s document
object
◦ Prints the string, which can consist of any text and
HTML tags
◦ String must be surrounded by quotation marks (“…”)
 Statement terminators
◦ All statements must end with semi-colons (;)

lecture 7 8
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0
Outline
Transitional//EN">
2 <HTML>
3 <!-- Fig. 8.2: welcome.html -->
4
5 <HEAD>
6 <TITLE>Printing a Line with Multiple
Statements</TITLE>
7
8 <SCRIPT LANGUAGE = "JavaScript">
9 document.write( "<FONT COLOR='magenta'><H1>Welcome to " );
10 document.writeln( "JavaScript
Programming!</H1></FONT>"
11 </SCRIPT> );
12
13 </HEAD><BODY></BODY>
14 </HTML>

 2000 Deitel & Associates, Inc.


Object: document methods:
 writeln
◦ Positions output cursor on next line when
finished
 write
◦ Leaves the output cursor where it is when done
executing
 Both begin output where previous statement
stopped
 Line breaks inserted in two ways:
◦ document.writeln( “Have a<br>Nice Day!” )
◦ document.writeln( “Have a\nNice Day!” )

10
JavaScript Comments

 JavaScript comments can be used to make


the code more readable.

 Comments can be added to explain the


JavaScript, or to make the code more
readable.
Single line comments start with //.
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a
heading</h1>");
// Write two paragraphs:
document.write("<p>This is a
paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>
JavaScript Multi-Line
Comments
 Multi line comments start with /* and end with
*/.
 <script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a
heading</h1>");
document.write("<p>This is a
paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>
Variables
 Variables are like storage units.
 You can create variables to hold values.
 You create a variable with or without the var
statement
◦ var strname = some value
◦ strname = some value
 It is ideal to name a variable something that is
logical, so that you'll remember what you are
using it for.
Rules of Javascript variables
 They must start with a letter or underscore
("_")
 Subsequent characters can also be digits (0-9)
or letters (A-Z and/or a-z).
 Remember, JavaScript is case-sensitive.
 (That means that My Variable and my Variable
are two different names to JavaScript,
because they have different capitalization.)
Variables scope
 When you declare a variable within a
function, the variable can only be accessed
within that function

• If you declare a variable outside a function, all


the functions on your page can access it.

• The lifetime of these variables starts when


they are declared, and ends when the page is
closed
Variables scope
 When you declare a variable by assignment
outside of a function, it is called a global
variable, because it is available everywhere
in the current document.

 When you declare a variable within a


function, it is called a local variable,
because it is available only within the
function.
JavaScript Popup Boxes

JavaScript has three kinds of popup boxes:

1. Alert box,
2. Confirm box,
3. Prompt box.
Alert Box

 An alert box is often used if you want to


make sure information comes through to the
user.

 When an alert box pops up, the user will


have to click "OK" to proceed.

syntax
alert("sometext")
example
<html>
<head>
<body>
<script type="text/javascript">
alert("Hello world")
</script>
</head>
</body>
</html>
 <html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()"
value="Show alert box" />
</body>
</html>
Confirm box

 A confirm box is often used if you want the


user to verify or accept something.

 When a confirm box pops up, the user will


have to click either "OK" or "Cancel" to
proceed.

 If the user clicks "OK", the box returns true.


If the user clicks "Cancel", the box returns
false.
<html>
<head>
<body>
<script type="text/JavaScript">
var x=window.confirm("Are you sure you are
ok?")
if (x)
window.alert("Good!")
else
window.alert("Too bad")
</script>
</head>
</body>
</html>
 Syntax
 confirm("sometext");

 <html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write(“congratulations!");
}
else
{
document.write(“bad of you!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Prompt Box

 A prompt box is often used if you want the


user to input a value before entering a page.
 User will have to click either "OK" or
"Cancel" to proceed after
entering an input value
syntax
prompt("sometext","defaultvalue")
 If the user clicks "OK" the box returns the
input value. If the user clicks "Cancel" the
box returns null.
<html>
<Head>
<body>

<script type="text/javascript">
var y=prompt("please enter your name")
alert(y)
</script>
</head>
</body>
</html>
 <html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name",“jane");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you
today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()"
value="Show prompt box" />
</body>
</html>
<html>
<head>
<script language="JavaScript">
var n = prompt("Check your number", "Type your number here");
n = parseInt(n);
if (n == 0)
{
document.write(n)
alert("The number is zero");
}
else if (n%2)
{
document.write(n)
alert("The number is odd");
}
else
{
document.write(n)
alert("The number is even");
}
</script>
</head>
JavaScript Operators

 JavaScript has many different


operators, which come in
several flavors, including
binary.
Selected assignment operators

 An assignment operator assigns a value to


its left operand based on the value of its
right operand.

 The basic assignment operator is equal


(=), which assigns the value of its right
operand to its left operand.
Operator Description
= Assign

Add and assign. For example, x+=y


+=
is the same as x=x+y.
Subtract and assign. For example,
-=
x-=y is the same as x=x-y.
Multiply and assign. For example,
*=
x*=y is the same as x=x*y.

Divide and assign. For example,


/=
x/=y is the same as x=x/y.

Modulus and assign. For example,


%=
x%=y is the same as x=x%y.
Comparison operators

 A comparison operator compares its


operands and returns a logical value
based on whether the comparison is true
or not.

 The operands can be numerical or string


values
Operator Description Example
x == y evaluates
Evaluates to true if the
Equal (= =) to true if x equals
operands are equal.
y.
x != y evaluates
Not equal Evaluates to true if the
to true if x is not
(!=) operands are not equal.
equal to y.
Evaluates to true if left x > y evaluates to
Greater than
operand is greater than true if x is greater
(>)
right operand. than y.
Evaluates to true if left x >= y evaluates
Greater than
operand is greater than to true if x is
or equal
or equal to right greater than or
(>=)
operand. equal to y.
Evaluates to true if left x < y evaluates to
Less than
operand is less than true if x is less
(<)
right operand. than y.
Evaluates to true if left x <= y evaluates
Less than or
operand is less than or to true if x is less
equal (<=)
equal to right operand. than or equal to y.
Arithmetic Operators
 Arithmetic operators take numerical
values (either literals or variables) as their
operands Artithmetic Operators
Arithmetic operators

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (remainder of a division)
++ Increment
-- Decrement
String Operators
 In JavaScript, a string is simply a piece of text.

Operator Description

= Assignment

+ Concatenate (join two strings together)

+= Concatenate and assign


Logical Operators

 Logical operators take Boolean (logical)


values as operands and return a Boolean
value.

 That is, they evaluate whether each sub-


expression within a Boolean expression is
true or false, and then execute the
operation on the respective truth values.
Operator Usage Description
expr1 True if both logical
and
&& expressions expr1 and expr2
(&&)
expr2 are true. False otherwise.
True if either logical
expr1 || expression expr1 or expr2 is
or (||)
expr2 true. False if both expr1 and
expr2 are false.
False if expr is true; true if
not (!) !expr
expr is false.
EXAMPLES:
 If x = 4 and y = 7, ((x + y + 2) == 13) &&
(((x + y) / 2) == 2) returns FALSE.

 If x = 4 and y = 7, ((y - x + 9) == 12) || ((x


* y) == 2) returns TRUE.

 If x = 4 and y = 7, !((x/2 + y) == 9) || ((x *


(y/2)) == 2) returns FALSE.
Functions
 Functions are one of the fundamental
building blocks in JavaScript

 A function is a JavaScript procedure -- a set


of statements that performs a specific task.
 A function contains code that will be
executed by an event or by a call to the
function .
 A function definition has these basic parts:
A function definition has these basic
parts:
1. The function keyword
2. A function name
3. A comma-separated list of arguments to
the function in parentheses
4. The statements in the function in curly
braces: { }
 You define a function within the
<SCRIPT>...</SCRIPT> tags within the
<HEAD>...</HEAD> tags.

 In defining a function, you must also declare


the variables which you will be calling in that
function.
syntax
function functionname(var1,var2,...,varX)
{
some code
}
example

function popupalert()
{
alert('This is an alert box.');
}
Popupalert();
Calling a function
 To call a function that takes an argument,
you must supply the argument. If you
know the value of the argument, you can
provide it:
<html>
<head>
<script language="JavaScript">
function test()
{
document.write("Hi there");
}
test();
</script>
</head>
</html>
<html>
<head>
<script language="JavaScript">
function area(w1, w2, h){
var area=(w1+w2)*h/2
alert(area+" sq ft")
}
area(2,3,7)
area(5,7,4)
area(3,2,1)
</script>
</head>
</html>
<html>
<head>

<Script Language="JavaScript">
function showAddress()
{
document.write(“170-90200 Kitui Kenya ");
}
</Script>

<Script Language="JavaScript">
showAddress();
</Script>
</head>
</html>
<html>
<head>
<title>Module two students</title>

<Script Language="JavaScript">
function welcomeMessage()
{
document.write("<b>Welcome to module two class!</b>");
}
</Script>

</head>
<body>

<h1>Module 2 class of 2011</h1>


<h3>Processing of transcripts</h3>

<Script Language="JavaScript">
welcomeMessage();
</Script>

</body>
</html>
<html>
<head>
<Script Language="JavaScript">
function circleArea(radius)
{
var area;
area = radius * radius * 3.14159;
document.write("The area of the circle is ", area);
}
</Script>
<Script Language="JavaScript">
circleArea(7)
</Script>
</head>
</html>
Calculating Sum of two numbers
<html>
<head>
<script language="JavaScript">
function sum(a,b)
{
var sum;
sum=a+b;
document.write("The sum is ", sum);
}
</script>
<script language="JavaScript">
var num1,num2;
num1 = 3;
num2 = 2;
sum(num1, num2);
</Script>
</head>
<html>
<html>
<head>
<script type="text/javascript">
function product (a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Using Prompt to calculate the area
of a rectangle
<html>
<head>
<Script Language="JavaScript">
function rectangleArea(length, height)
{
var area;
area = length * height ;
document.write("The area of the rectangle is ", area);
}
</Script>
<Script Language="JavaScript">
var L, H;
L = prompt("enter L",3);
H = prompt("enter H",2);
rectangleArea(L, H);
</Script>
</head>
<html>
Functions that return a value
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
a=window.prompt("enter a value",4);
b=window.prompt("enter a vlaue",6);
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">

document.write(product());
</script>

</body>
</html>
Thankyou…

You might also like