JavaScript- Functions and arrays.pptx

JavaScript
Functions, Arrays
Megha V
Assistant Professor
Dept of IT,
Kannur University
14-10-2022 meghav@kannuruniv.ac.in 1

JavaScript Statements
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

JavaScript Programs
• A computer program is a list of "instructions" to be
"executed" by a computer.
• In a programming language, these programming
instructions are called statements.
• A JavaScript program is a list of
programming statements.
• In HTML, JavaScript programs are executed by the web
browser.

• JavaScript statements are composed of:
• Values, Operators, Expressions, Keywords, and
Comments.
• This statement tells the browser to write "Hello Dolly."
inside an HTML element with id="demo":
document.getElementById("demo").innerHTML = "Hello
Dolly.";

• Most JavaScript programs contain many JavaScript statements.
• The statements are executed, one by one, in the same order as
they are written.
• JavaScript programs (and JavaScript statements) are often called
JavaScript code.

Semicolons ;
• Semicolons separate JavaScript statements.
• Add a semicolon at the end of each executable
statement:
• Examples
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
JavaScript statements are separated by semicolons.
11

• When separated by semicolons, multiple statements on
one line are allowed:
a = 5; b = 6; c = a + b;
JavaScript White Space
• JavaScript ignores multiple spaces. You can add white
space to your script to make it more readable.
• The following lines are equivalent:
let person = "Hege";
let person="Hege";
• A good practice is to put spaces around operators ( = +
- * / ):
let x = y + z;

JavaScript Functions
• A JavaScript function is a block of code designed to
perform a particular task.
• A JavaScript function is executed when "something"
invokes it (calls it).

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
JavaScript Functions
This example calls a function which performs a calculation, and
returns the result:
12

JavaScript Function Syntax
• A JavaScript function is defined with the function keyword, followed
by a name, followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar
signs (same rules as variables).
• The parentheses may include parameter names separated by
commas:
• (parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly
brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
JavaScript Function Syntax

• Function parameters are listed inside the parentheses
() in the function definition.
• Function arguments are the values received by the
function when it is invoked.
• Inside the function, the arguments (the parameters)
behave as local variables.
• A Function is much the same as a Procedure or a
Subroutine, in other programming languages.

Function Invocation
• The code inside the function will execute when
"something" invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
• You will learn a lot more about function invocation later
in this tutorial.

Function Return
• When JavaScript reaches a return statement, the function will stop
executing.
• If the function was invoked from a statement, JavaScript will "return"
to execute the code after the invoking statement.
• Functions often compute a return value. The return value is
"returned" back to the "caller":

Example
Calculate the product of two numbers, and return the result:
let x=myFunction(4,3);//Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; //Function returns the product of a and b
}
The result in x will be:
12

The () Operator Invokes the Function
• Using the example above, toCelsius refers to the function object, and
toCelsius() refers to the function result.
• Accessing a function without () will return the function object instead
of the function result.
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML =
toCelsius;

Functions Used as Variable Values
• Functions can be used the same way as you use variables, in all types
of formulas, assignments, and calculations.

JavaScript Objects
• Real Life Objects, Properties, and Methods
• In real life, a car is an object.
• A car has properties like weight and color,
and methods like start and stop:

Object Properties Methods
Car
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
car.drive()
car.brake()
car.stop()
All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different
times.

JavaScript Objects
• You have already learned that JavaScript variables are
containers for data values.
• This code assigns a simple value (Fiat) to
a variable named car:
let car = "Fiat";
• Objects are variables too. But objects can contain many
values.
• This code assigns many values (Fiat, 500, white) to
a variable named car:
• const car = {type:"Fiat", model:"500", color:"white"};

JavaScript Objects
• The values are written as name:value pairs (name and
value separated by a colon)
• Object Definition
• You define (and create) a JavaScript object with an
object literal:
• const person = {firstName:"John", lastName:"Doe",
age:50, eyeColor:"blue"};

JavaScript Objects
• Spaces and line breaks are not important.
• An object definition can span multiple lines:
• Example
• const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

Object Properties
• The name:values pairs in JavaScript objects are
called properties:
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue

Accessing Object Properties
• You can access object properties in two ways:
objectName.propertyName
Or
objectName["propertyName"]
Example1
person.lastName;
Example2
person["lastName"];

Object Methods
• Objects can also have methods.
• Methods are actions that can be performed on objects.
• Methods are stored in properties as function
definitions.
• Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

Object Methods
• A method is a function stored as a property.
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

In the example above, this refers to the person object.
I.E. this.firstName means the firstName property of this.
I.E. this.firstName means the firstName property of person.
• In JavaScript, the this keyword refers to an object.
• Which object depends on how this is being invoked (used or called).
• The this keyword refers to different objects depending on how it is used:

The this Keyword
• In a function definition, this refers to the "owner" of the function.
• In the example above, this is the person object that "owns" the
fullName function.
• In other words, this.firstName means the firstName property of this
object.

Accessing Object Methods
• You access an object method with the following syntax:
objectName.methodName()

JavaScript Arrays
• An array is a special variable, which can hold more than one
value:
const cars = ["Saab", "Volvo", "BMW"];
Eg:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Why Use Arrays?
• If you have a list of items (a list of car names, for
example), storing the cars in single variables could look
like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
• An array can hold many values under a single name,
and you can access the values by referring to an index
number.

Creating an Array
• Using an array literal is the easiest way to create a
JavaScript Array.
• Syntax:
const array_name = [item1, item2, ...];
• It is a common practice to declare arrays with
the const keyword.
• Example
• const cars = ["Saab", "Volvo", "BMW"];

Creating an Array
• Spaces and line breaks are not important. A declaration can
span multiple lines:
const cars = [
"Saab",
"Volvo",
"BMW"
];
• Example
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Using the JavaScript Keyword new
• The following example also creates an Array, and
assigns values to it:
• Example
const cars = new Array("Saab", "Volvo", "BMW");
• The two examples above do exactly the same.
• There is no need to use new Array().
• For simplicity, readability and execution speed, use the array literal
method.

Accessing Array Elements
• You access an array element by referring to the index
number:
let car = cars[0];

<!DOCTYPE html>
<html>
<body>
<p>JavaScript array elements are accessed using numeric indexes
(starting from 0).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
JavaScript Arrays
JavaScript array elements are accessed using numeric indexes
(starting from 0).
Saab

• Note: Array indexes start with 0.
• [0] is the first element. [1] is the second element.
Changing an Array Element
• This statement changes the value of the first element in cars:
cars[0] = "Opel";
Example
cars[0] = "Opel";

Access the Full Array
• With JavaScript, the full array can be accessed by
referring to the array name:
• Example
• const cars = ["Saab", "Volvo", "BMW"];

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
</body>
</html>
JavaScript Arrays
Saab,Volvo,BMW

Arrays are Objects
• Arrays are a special type of objects. The typeof operator in JavaScript
returns "object" for arrays.
• But, JavaScript arrays are best described as arrays.
• Arrays use numbers to access its "elements". In this example,
person[0] returns John:
• Array:
const person = ["John", "Doe", 46];
• Objects use names to access its "members". In this example,
person.firstName returns John:

<!DOCTYPE html>
<html>
<body>
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>
JavaScript Arrays
Arrays use numbers to access its elements.
John

• Object:
const person = {firstName:"John", lastName:"Doe",
age:46};

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>
<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>
</body>
</html>
JavaScript Objects
JavaScript uses names to access object properties.
John

Array Elements Can Be Objects
• JavaScript variables can be objects. Arrays are special
kinds of objects.
• Because of this, you can have variables of different
types in the same Array.
• You can have objects in an Array. You can have
functions in an Array. You can have arrays in an Array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array Properties and Methods
• The real strength of JavaScript arrays are the built-in
array properties and methods:
cars.length // Returns the number of elements
cars.sort() // Sorts the array

The length Property
• The length property of an array returns the length of an array (the
number of array elements).
• Example
const fruits =
["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
JavaScript Arrays
The length property returns the length of an array.
4
The length property is always one more than the highest array index.

Accessing the First Array Element
• Example
const fruits =
let fruit = fruits[0];

Looping Array Elements
• Looping Array Elements
• Example
const fruits =
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

• You can also use the Array.forEach() function:
const fruits =
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}

Adding Array Elements
• The easiest way to add a new element to an array is using the push()
method:
• Example
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon)
to fruits
New element can also be added to an array using the length property:
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to
fruits

REFERENCES
1. Jeffrey C. Jackson, Web Technologies: A Computer Science Perspective, Prentice Hall
2. David Flanagan, JavaScript: The Definitive Guide, 6th Edn. O'Reilly Media.2011
3. Bob Breedlove, et al, Web Programming Unleashed, Sams Net Publishing, 1stEdn
4. Steven Holzner, PHP: The Complete Reference, McGraw Hill Professional, 2008
5. Steve Suehring, Tim Converse, Joyce Park, PHP6 and MY SQL Bible, John Wiley & Sons,2009
6. Pedro Teixeira, Instant Node.js Starter, Packt Publishing Ltd., 2013
7. Anthony T. HoldenerIII, Ajax: The Definitive Guide, O’Reilly Media, 2008
8. Nirav Mehta, Choosing an Open Source CMS: Beginner's Guide Packt Publishing Ltd, 2009
9. James Snell, Programming Web Services with SOAP, O'Reilly 2002
10. Jacob Lett , Bootstrap Reference Guide, Bootstrap Creative 2018
11. Maximilian Schwarzmüller, Progressive Web Apps (PWA) - The Complete Guide, Packt Publishing
2018
12. Mahesh Panhale, Beginning Hybrid Mobile Application Development, Apress 2016

JavaScript- Functions and arrays.pptx

Recommended

Recommended

More Related Content

Similar to JavaScript- Functions and arrays.pptx

Similar to JavaScript- Functions and arrays.pptx (20)

More from Megha V

More from Megha V (20)

Recently uploaded

Recently uploaded (20)

JavaScript- Functions and arrays.pptx