FaaDoOEngineers.
com
Engaging Peers, Inspiring Careers!
India’s No.1 website for:
• IIT-JEE/AIEEE preparation resources
• Coaching centre packages
• Engineering Major and Minor projects
• Seminar reports
• Paper presentations
• EBOOKS
• Resumes/CVs, and so much more…
Introducing JavaScript
• What is javascript?
• Why JavaScript?
• Introducing JavaScript Syntax
• Statements
• Blocks
• Comments
• Datatypes
• Variables
• Expressions
• Flow control
• Arrays
• Functions
What is javascript?
• JavaScript is a client – side scripting language for the world wide web, that
is similar to the syntax of the Java programming language.
• JavaScript is designed to provide limited programming functionality.
Why JavaScript?
• By executing more web functionality on the user’s machine, webmasters
can optimize their servers to serve more pages.
• The decrease in traffic from constant interaction with the server can also
improve a server's performance.
• Because the local machine is doing the script processing, the user can
view web pages much faster
Introducing JavaScript Syntax
• A simple JavaScript program:
<html>
<head>
<Title> Hello World </Title>
</head>
<body>
<script language=“JavaScript”>
document.write(“Hello,World wide web”);
</script>
</body>
</html>
Statements
• It is simply a line of code that contains some kind of instructions.
• Example
Document.write(“<h2> Hello, WWW </h2>”);
Blocks
• The grouping of statements is a block:
document.write(“<h2> Each line is a statement </h2>”);
document.write(“<P> These statements, <BR>”);
document.write(“are part of a block”);
}
Comments
• A single line comment is denoted with two slashes ( // )
// this is comment, it will be ignored by the browser.
• Multi line comments
/*
some text
*/
Data Types
• There are 5 basic data types in JavaScript: string, number, Boolean, object
and function.
Variables
• Variables are "containers" for storing information.
Rules for JavaScript variable names:
• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter or the underscore character
Declaring (Creating) JavaScript Variables
• Creating variables in JavaScript is most often referred to as "declaring"
variables.
• You can declare JavaScript variables with the var statement:
var x;
var carname;
• After the declaration shown above, the variables are empty (they have no
values yet).
• However, you can also assign values to the variables when you declare
them:
var x=5;
var carname="Volvo";
Expressions
• The methods that can be employed to manipulate the data are called
expressions.
• There are 2 types of expressions: numerical and logical
• Numerical expressions deal with the number data type.
• Logical expression might compare two data values, including strings, to
see if they match.
Numerical expressions
• Addition, subtraction, multiplication and division are all types of numeric
expressions.
• Numeric operators are: +, -, *, /, %
Flow Control
• Conditional statements are used to perform different actions based on
different conditions.
• In JavaScript we have the following conditional statements:
• if statement - use this statement to execute some code only if a specified
condition is true
• if...else statement - use this statement to execute some code if the
condition is true and another code if the condition is false
• if...else if....else statement - use this statement to select one of many
blocks of code to be executed
• switch statement - use this statement to select one of many blocks of
code to be executed
Logical Expressions
• These are expressions that, when evaluated, can return either a true or a
false.
• Logical Operators
&& - And
|| - Or
! - Not
== - Equal
!= - Not Equal
> - Greater than
>=
<
<=
If Statement
• Use the if statement to execute some code only if a specified condition is
true.
Syntax
if (condition)
{
code to be executed if condition is true
}
Example
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
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.
• Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
If...else Statement
• Example
• <script type="text/javascript">
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
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 condition1 and condition2 are not true
}
JavaScript Switch Statement
• Conditional statements are used to perform different actions based on
different conditions.
• The JavaScript Switch Statement
• Use the switch statement to select one of many blocks of code to be
executed.
• Syntax
• switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
JavaScript Switch Statement
• <script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday"); break;
case 6:
document.write("Super Saturday"); break;
case 0:
document.write("Sleepy Sunday"); break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
JavaScript For Loop
• Loops execute a block of code a specified number of times, or while a
specified condition is true.
• JavaScript Loops
• 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
The for Loop
• The for loop is used when you know in advance how many times the script
should run.
Syntax
• for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
JavaScript For Loop
Example
• <html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
JavaScript While Loop
• The while loop loops through a block of code while a specified condition is
true.
Syntax
• while (var<=endvalue)
{
code to be executed
}
JavaScript While Loop
Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
Arrays
• The array concept is used to store a set of values in a single variable name.
This is a very important concept in any programming language
Array Definition:
• The array must first be defined before it is accessed or used. There are a
variety of ways this can be accomplished in JavaScript. Below are some of
the ways of defining arrays in JavaScript.
Defining an Array in JavaScript:
• Array is defined in JavaScript by making use of the keyword new.
• General format of defining array in JavaScript is as follows:
var varaiblename = new Array( )
• For example, if a programmer wants to define an array exforsys, it is
written as follows:
var exforsys = new Array( )
Arrays
• The format for adding elements in this structure is as follows:
var varaiblename = new Array( )
variablename*0+=”element1”
variablename*1+=”element2”
variablename*2+=”element3”
variablename*3+=”element4”
………………………
• var Exforsys = new Array( )
Exforsys*0+=”Training”
Exforsys*1+=”Division”
Exforsys*2+=”Institute”
Exforsys*3+=”Company”
Arrays
• It is also possible that if the programmer is certain of the array length, it
can be defined while defining the array itself as:
var Exforsys = new Array(4)
Shorter form:
• The elements can also be defined in a shorter form as:
var variablename=new Array(“element1”,”element2”,”elements3”,….)
Accessing Arrays in JavaScript
• You can access an array element by referring to the name of the array and
the element's index number.
Displaying Array Elements
document.write(Exforsys[1])
Functions
• A function is simply a block of code with a name, which allows the block of
code to be called by other components in the scripts to perform certain
tasks.
• Functions can also accept parameters that they use complete their task.
• JavaScript actually comes with a number of built-in functions to
accomplish a variety of tasks.
Creating Custom Functions
• In addition to using the functions provided by javaScript, you can also
create and use your own functions.
• General syntax for creating a function in JavaScript is as follows:
function name_of_function(argument1,argument2,…arguments)
{
…………………………………………
//Block of Code
…………………………………………
}
Creating Custom Functions
Calling functions
• There are two common ways to call a function: From an event handler and
from another function.
• Calling a function is simple. You have to specify its name followed by the
pair of parenthesis.
<SCRIPT TYPE="TEXT/JAVASCRIPT">
name_of_function(argument1,argument2,…arguments)
</SCRIPT>
Creating Custom Functions
<html> <head> <title>Henley's Department Store</title>
<Script Language="JavaScript">
function welcomeMessage()
{ document.write("Welcome to Henley's Department Store!"); }
</Script>
</head> <body>
<h1>Henley's Department Store</h1>
<h3>Customers Order Processing</h3>
<Script Language="JavaScript">
welcomeMessage();
</Script>
</body> </html>
FaaDoOEngineers.com
Engaging Peers, Inspiring Careers!
India’s No.1 website for:
• IIT-JEE/AIEEE preparation resources
• Coaching centre packages
• Engineering Major and Minor projects
• Seminar reports
• Paper presentations
• EBOOKS
• Resumes/CVs, and so much more…
