Scribd
Upload
16 views

Introducing JavaScript

The document provides an overview of JavaScript including what it is, why it is used, basic syntax, variables, data types, operators, conditional and loop statements, arrays and functions. Key points covered include JavaScript running in browsers, improving page load times, the structure of a basic JavaScript program, and different coding constructs like if/else statements, switch statements, for/while loops available in JavaScript.

Uploaded by

naimish6266
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Introducing JavaScript

The document provides an overview of JavaScript including what it is, why it is used, basic syntax, variables, data types, operators, conditional and loop statements, arrays and functions. Key points covered include JavaScript running in browsers, improving page load times, the structure of a basic JavaScript program, and different coding constructs like if/else statements, switch statements, for/while loops available in JavaScript.

Uploaded by

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

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…

You might also like