You are on page 1of 24

INTRODUCTION TO

JAVASCRIPTS
JAVASCRIPT ORIGIN

• JavaScript was released by Netscape and Sun


Microsystems in 1995.
• However, JavaScript is not the same thing as Java.
WHAT IS JAVASCRIPT

• JavaScript is a Scripting Language


• A scripting language is a lightweight programming
language.
• JavaScript is programming code that can be
inserted into HTML pages.
• JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
• JavaScript is easy to learn.
USES OF JAVASCRIPT

• Use it to add multimedia elements


With JavaScript you can show, hide, change, resize
images, and
create image rollovers. You can create scrolling text across
the status
bar.
• Create pages dynamically
Based on the user's choices, the date, or other external
data, JavaScriptcan produce pages that are customized
to the user.
• Interact with the user
It can do some processing of forms and can validate user
input whenthe user submits the form.
WRITING JAVASCRIPT

• JavaScripts in HTML must be inserted between


<script> and </script> tags.
• JavaScripts can be put in the <body> and in
the <head> section of an HTML page.
• JavaScript code is case sensitive
• White space between words and tabs are
ignored
• Line breaks are ignored except within a
statement
• JavaScript statements end with a semi- colon ;
THE SCRIPT TAG

• The <script> tag alerts a browser that JavaScript


code follows. It is
• typically embedded in the HTML.
<script>
statements
</script>
Example:
<script>
alert("Welcome to the script tag test page.")
</script>
Programming Basics
VARIABLES
• JavaScript variables are "containers" for storing information.

Variable Names
There are rules and conventions in naming variables in any programming
language. It is good practice to use descriptive names for variables. The
following are the JavaScript rules:
• The variable name must start with a letter or an underscore.
firstName or _myName

• You can use numbers in a variable name, but not as the first
character.
name01 or tuition$

• You can't use space to separate characters.


userName not user Name
DECLARATION AND ASSIGNING
VALUES TO VARIABLES
• To declare variables, use the keyword var and the
variable name:
var userName;
• To assign values to variables, add an equal sign and the
value:
var userName = "Smith“;
var price = 100;

One Statement, Many Variables


• You can declare many variables in one statement. Just
start the statement with var and separate the variables
by comma:
var lastname="Doe", age=30, job="carpenter";
EXAMPLE
<html>
<body>
Output:
5
<script>
var x=5; 6
var y=6; 11
var z=x+y;

document.write(x + "<br>");
document.write(y +
"<br>");
document.write(z + "<br>");
</script> document.write is used to write the output
directly into the document output.
</body>
</html>
DATA TYPES

• Undefined - var x;
• String - var x=“college”;
• Number - var x=8; var x=9.30;
• Boolean, - var x=true;
• Array, - var
cars=["Saab","Volvo","BMW"];
• Null - var s=null;
OPERATORS

What is an operator?
Simple answer can be given using expression 4 + 5 is
equal to 9. Here 4 and 5 are called operands and + is
called operator. JavaScript language supports
following type of operators.
• Arithmetic Operators
• Comparision Operators
• Logical (or Relational) Operators
• Assignment Operators
• Conditional (or ternary) Operators
THE ARITHMETIC OPERATORS:
Operator Description Example
+ Adds two operands A + B will give
30
- Subtracts second operand from the first A - B will give -
10
* Multiply both operands A * B will give
200
/ Divide numerator by denumerator B / A will give 2
% Modulus Operator and remainder of B % A will give 0
after an integer division
++ Increment operator, increases integer A++ will give 11
value by one
-- Decrement operator, decreases integer A-- will give 9
value by one
OTHER OPERATORS

• = is used to assign values.


• + is used to add values.
• To add two values
X=5;
Y=7;
Z=x+y;

• To add two or more string variables together, use the +


operator.
t1="What a very";
t2="nice day";
t3=t1+t2;
CONT..

• Equality and Relational Operators


• == Equal to
• != Not equal to
• > Greater than
• >= Greater than or equal to
• < Less than <= Less than or equal to
ASSIGNMENT OPERATOR
Operator Example Same As Result

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0


IF- ELSE CONDITION

If Statement
• Use the if statement to execute some code only if a
specified condition is true.
• if (condition)
{
code to be executed if condition is true
}
• Example:
if (time<10)
{
x="Good day";
}
CONT..
If...else Statement
Use the if....else statement to execute some code if a condition is true and
another code if the condition is not true.
• if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
• Example:
If(a!=b)
{document.write(“both are unequal”);
}
else
{document.write(“equal”);
}
CONT..

If...else if...else Statement


• Use the if....else if...else statement to select one of several blocks
of code to be executed.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
FOR LOOP

• Loops are handy, if you want to run the same code over
and over again, each time with a different value.
• The for loop has the following syntax:
• for (statement 1; statement 2; statement 3)
{
the code block to be executed
}
• Statement 1 is executed before the loop (the code
block) starts.
• Statement 2 defines the condition for running the loop
(the code block).
• Statement 3 is executed each time after the loop (the
code block) has been executed.
EXAMPLE- FOR LOOP

for (var i=0; i<5; i++)


{
document.write("The number is " + i + "<br>");
}
• Output:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
WHILE LOOP

• The While Loop


The while loop loops through a block of code as long as a
specified condition is true.
Syntax
while (condition)
{
code block to be executed
}
Example:
var i=0;
while (i<5)
{
document.write("The number is " + i + "<br>");
i++;
}
DO/WHILE LOOP

• The do/while loop is a variant of the while loop. This loop will
execute the code block once, before checking if the condition is
true, then it will repeat the loop as long as the condition is true.
Syntax
do
{
code block to be executed
}
while (condition);
Example:
var i=0;
do
{
document.write("The number is " + i + "<br>");
i++;
}
while (i<5);
ACTIVITIES TO DO
1. Wirte a javascript program to mutiply two numbers.
2. Wite a javascript program to display the following text: welcome to
javascript
3. Write a javascript program for the following.
assign a=10 and b=20. Check if a is equal to b.
4. Write a javascript program to find the biggest of three numbers.
5. Wirte a javascript program to display the following result using for loop:
Count:0
Count:1
Count:2
Count:3
Count:4
Count:5
6. Write a javascript code to display the following output using while loop.
X=3
X=2
X=1

You might also like