Scribd
Upload
15 views

Javascript

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Javascript

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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