1 of 50

Web Development Using Angular JS and MONGO

2 of 50

Unit 2

Array Methods :indexOf, join, lasIndexOf, toString - Array Methods : reduce, reverse, slice, some, sort - Function Definition - Function Parameters - Calling a Function - Return Statements - Nested Functions - Example Programs

Lab 4 – Functions

Web stacks introduction - LAMP and LEMP - Difference between php and java script - MEAN, MERN - Angular Environment set up – windows - Angular JS Framework - Angular JS with HTML - Angular ng directives

Lab 5 – Working with Angular js and HTML

Angular directives - Angular JS Expressions - Angular JS Applications - Angular JS Module

Angular JS Controller - Angular JS Numbers - Angular JS Strings - Angular JS Objects

Lab 6 – Work with numbers, strings and objects

3 of 50

References

https://morioh.com/p/d05e069353a9
teachcomputerscience.com
tutorialspoint.com
www.w3schools.com

3

4 of 50

Array Methods :indexOf� [forward search method]

indexOf() method is used to find the first occurrence position of an array
Returns the index of the first occurrence of the element.
If the element is not found, -1 return.

The search argument is the element that you want to find in the array.
The startIndex is an array index at which the function starts the search.

Note:- The startIndex parameter value can be a positive or negative integer.

4

Syntax: Array.indexOf(search, startIndex)

var arr = [10, 20, 30, 40, 50, 70, 10, 50];

document.write(arr.indexOf(10)); // 0

document.write(arr.indexOf(50)); // 4

document.write(arr.indexOf(70)); // 5

5 of 50

Array Methods :lasIndexOf�[backword search method]

lastIndexOf() method is used to find the last occurrence position of an array.
It returns -1 if it cannot find the element.

5

Syntax:

Array.lastIndexOf(searchElement[, fromIndex = Array.length - 1])

var arr = [10, 20, 30, 40, 50, 70, 10, 40];

console.log(arr.lastIndexOf(10)); // 6

console.log(arr.lastIndexOf(40)); // 7

console.log(arr.lastIndexOf(100)); // -1

6 of 50

Convert Array to string Separated By Comma javaScript

array built-in methods like

toString()
join()�

6

7 of 50

Array Methods :toString

This is an inbuilt javascript method, which is used to converts an array into a String and returns the new string.

7

Syntax: array.toString();

!DOCTYPE html>

<title>JavaScript Convert Array into Comma-Separated String with toString() Method</title>

</head>

<body>

</body> </html>

var lang = ['php','javascript','python', 'c', 'c+', 'java'];

document.write( "JavaScript - convert an array into comma-separated strings are :-" + lang.toString() );

</script>

8 of 50

Array Methods :join

The join() method creates and returns a new string by concatenating all of the elements in an array.
Note: The elements of the array will be separated by a specified separator. If not specified, Default separator comma (, ) is used.

8

Syntax: array.join(separator);

<!DOCTYPE html>

<title>JavaScript Convert Array into Comma-Separated String With join() Method</title>

</head>

<body>

</body> </html>

var lang = ['php','javascript','python', 'c', 'c+', 'java'];

document.write( "JavaScript - convert an array into comma-separated strings are :-" + lang.join(',') );

</script>

9 of 50

Array Methods : reduce

reduce() method reduces the array to a single value.

reducer callback function.
intialValue is optional parameter

Initial Value current iteration value current iteration index called array

9

Syntax: reduce() method arayObject.reduce(reducer [, initialValue])

Syntax: reducer() function

function reducer(accumulator, currentValue, currentIndex, array){ }

10 of 50

Cont..�The initialValue argument

10

initialValue	accumulator	currentValue
passed	accumulator = initialValue	currentValue = array[0]
not passed	accumulator = array[0]	currentValue = array[1]

let numbers = [1, 2, 3, 4, 5];

console.log(total); // 15

let total = numbers.reduce(

);

function (accumulator, current)

{

return accumulator + current;

}

Example 1:

11 of 50

Cont..�Example 2: Array of object

11

let cartItem = [

{

product: 'phone',

qty: 1,

price: 699

},

{

product: 'Screen Protector',

qty: 1,

price: 9.98

},

{

product: 'Memory Card',

qty: 2,

price: 20.99

}

];

let total = itemCart.reduce(

console.log(total);

function (acc, curr) {

return acc + curr.qty * curr.price;

}

,0);

12 of 50

Cont..�Example 3: Multiple arrays

12

let numbersArr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

console.log(res); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

let res = numbersArr.reduce(

);

(total, amount) => {

return total.concat(amount);

}

, [ ]

13 of 50

Array Methods : reverse

The method is used for reverses the order of the elements in an array.

13

Syntax: array.reverse();

var lang = ["PHP", "Python", "Java", "C"];

lang.reverse();

// Outuput

�array: C, Java, PHP, Python

14 of 50

Array Methods : slice

slice() method extracts a part of an array from a given array and returns a new array.
It perform different tasks without changing the original array

Clone an array
Create a new array from given array/ Copy a portion of an array

14

Syntax: slice(begin, end);

The begin is a position where to start the extraction.

The end is a position where to end the extraction.

If begin is undefined, slice begins from the index 0.

If end is omitted, slice extracts through the end of the sequence (arr.length).

15 of 50

Cont..�Example 1: Clone an array

res array contains all the elements of the nums array.

15

var nums = [1,2,3,4,5];

var res = nums.slice();

16 of 50

Cont..�Example 2: Copy a portion of an array

Copy the portion of an array without changing the original array

The res array contains the first 4 elements of the lang array. The original array lang remains entire.�

16

var lang = ['php','java','c','c#','.net', 'python'];

var res = lang.slice(0,4);

console.log(res); // ["php", "java", "c", "c#"]

17 of 50

Array Methods : some

some() method checks whether at least one element of the array matches the given predicate.
if none of the array elements match the predicate, then it will return false

17

var nums = [3, 18, 19, 20, 25];

function checkNumber(num) { return num >= 25; }

document.write(nums.some(checkNumber)); //true

Syntax: arrayObject.some(callback[, thisArg]);

Executes each element in the array continuously and return true if the match found.
If no element match found, the callback() method returns false.

Syntax: function callback(currentElement [[, currentIndex], array]){ // ...}

18 of 50

Array Methods : sort

Alphabetic or numeric sorts an array

Categories of sort

1: Basic array.Sort

2: Numeric array.sort() in asc order

3: Numeric array.sort() in desc order

4: String Array Sort

5: Extract minimum using array.sort()

18

Syntax: arr.sort([compareFunction])

var lang = ["PHP", "Python", "Java", "C"];

lang.sort(); // C, Java, PHP, Python

19 of 50

Function

Function allows you to define

Block of code designed to perform a particular task
Give it a name
Execute it when "something" invokes it (calls it) as many times as you want

19

20 of 50

Function definition

It can be defined using function keyword

Function names can contain letters, digits, underscores, and dollar signs

20

function name(parameter1, parameter2, parameter3)

{� // code to be executed�}

function ShowMessage()

{

alert("Hello World!");

}

21 of 50

Function parameters

A function can have one or more parameters

Parameters will be supplied by the calling code
Can be used inside a function.
JavaScript is a dynamic type scripting language, so a function parameter can have value of any data type.
Can pass less or more arguments while calling a function.

If you pass less arguments then rest of the parameters will be undefined.
If you pass more arguments then additional arguments will be ignored.

21

function ShowMessage(firstName, lastName)

{

alert("Hello " + firstName + " " + lastName);

}

22 of 50

The Arguments Object

All the functions in JavaScript can use arguments object by default.
An arguments object includes value of each parameter.
The arguments object is an array like object.
Can access its values using index similar to array. However, it does not support array methods.

22

function ShowMessage(firstName, lastName)

{

alert("Hello " + arguments[0] + " " + arguments[1]);

}

23 of 50

Cont..�The Arguments Object

An arguments object is still valid even if function does not include any parameters.

An arguments object can be iterated using for loop.

23

function ShowMessage()

{

alert("Hello " + arguments[0] + " " + arguments[1]);

}

ShowMessage("Steve", "Jobs"); // display Hello Steve Jobs

function ShowMessage()

{

for(var i = 0; i < arguments.length; i++)

{ alert(arguments[i]);

}

ShowMessage("Steve", "Jobs");

24 of 50

Calling a Function / 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)

24

25 of 50

Invoking a Function as a Function

25

function myFunction(a, b)

{� return a * b;�}�myFunction(10, 2); // Will return 20

26 of 50

Invoking a Function as a Method

26

const myObject = {� firstName:"John",� lastName: "Doe",� fullName: function () {� return this.firstName + " " + this.lastName;� }�}�myObject.fullName(); // Will return "John Doe"

27 of 50

Invoking a Function with a Function Constructor

27

// This is a function constructor:�function myFunction(arg1, arg2) {� this.firstName = arg1;� this.lastName = arg2;�}��// This creates a new object�const myObj = new myFunction("John", "Doe");��// This will return "John"�myObj.firstName;

28 of 50

call() Method

The call() method is a predefined JavaScript method.
It can be used to invoke (call) a method with an owner object as an argument (parameter).
With call(), an object can use a method belonging to another object.
This example calls the fullName method of person, using it on person1:

28

const person = {� fullName: function() {� return this.firstName + " " + this.lastName;� }�}�const person1 = {� firstName:"John",� lastName: "Doe"�}�const person2 = {� firstName:"Mary",� lastName: "Doe"�}��// This will return "John Doe":�person.fullName.call(person1);

29 of 50

The call() Method with Arguments

The call() method can accept arguments:

29

const person = {� fullName: function(city, country)

{

return this.firstName + " " + this.lastName + "," + city + "," + country;� }�}��const person1 = {� firstName:"John",� lastName: "Doe"�}��person.fullName.call(person1, "Oslo", "Norway");

30 of 50

Return Statements

A function can return zero or one value using return keyword.

30

function Sum(val1, val2)

{

return val1 + val2;

};

var result = Sum(10,20); // returns 30

function Multiply(val1, val2)

{

console.log( val1 * val2);

};

result = Multiply(10,20); // undefined

function multiple(x)

{

function fn(y)

{ return x * y;

}

return fn;

}

var triple = multiple(3);

triple(2); // returns 6

triple(3); // returns 9

Example: Return value From a Function

Example: Function Returning a Function

31 of 50

Nested Functions

A function can have one or more inner functions.
These nested functions are in the scope of outer function.
Inner function can access variables and parameters of outer function.
However, outer function cannot access variables defined inside inner functions.

31

function ShowMessage(firstName)

{

return SayHello();

}

ShowMessage("Steve");

Example: Nested Functions

function SayHello()

{

alert("Hello " + firstName);

}

32 of 50

Points to Remember

JavaScript a function allows you to define a block of code, give it a name and then execute it as many times as you want.
A function can be defined using function keyword and can be executed using () operator.
A function can include one or more parameters. It is optional to specify function parameter values while executing it.
JavaScript is a loosely-typed language. A function parameter can hold value of any data type.
You can specify less or more arguments while calling function.
All the functions can access arguments object by default instead of parameter names.
A function can return a literal value or another function.
A function can be assigned to a variable with different name.
JavaScript allows you to create anonymous functions that must be assigned to a variable.

32

33 of 50

Assignment on functions

Create a JavaScript programs for the following
Return Statements
Nested Functions

33

34 of 50

Unit 2

Array Methods :indexOf, join, lasIndexOf, toString - Array Methods : reduce, reverse, slice, some, sort - Function Definition - Function Parameters - Calling a Function - Return Statements - Nested Functions - Example Programs

Lab 4 – Functions

Web stacks introduction - LAMP and LEMP - Difference between php and java script - MEAN, MERN - Angular Environment set up – windows - Angular JS Framework - Angular JS with HTML - Angular ng directives

Lab 5 – Working with Angular js and HTML

Angular directives - Angular JS Expressions - Angular JS Applications - Angular JS Module

Angular JS Controller - Angular JS Numbers - Angular JS Strings - Angular JS Objects

Lab 6 – Work with numbers, strings and objects

35 of 50

Web stacks / web application stack

35

36 of 50

Web stacks / web application stack

A Web stack is the collection of software required for Web development, especially for developing web applications and implementing websites.
A web stack is a type of solution stack, which is a collection of software for performing specific tasks.
Web stacks are critical components for web applications as well as websites.
A web stack is usually comprised of:

Operating system
Database application
Programming language
Web server

Web stacks also help in improving the performance and stability of the projects, compared to other alternatives.

36

37 of 50

LAMP, LEMP, MEAN, MERN

Web stacks consisting of a bundle of software and frameworks or libraries which are used for building full-stack web apps.
A stack usually consists of a

database,
server-side and client-side technologies,
a web server,
a particular Operating system.

Sometimes

back-end technologies are cross-platform hence no particular OS.

37

38 of 50

LAMP

LAMP is one commonly used Web stack
The open-source bundle LAMP which makes use of

Linux as the operating system,
Apache as the web server,
MySQL as the relational database management system and
PHP as the object-oriented scripting language.

38

39 of 50

The Four Layers/ Component of LAMP Stack

Linux: The operating system (OS) makes up our first layer. Linux sets the foundation for the stack model. All other layers run on top of this layer.
Apache: The second layer consists of web server software, typically Apache Web Server. This layer resides on top of the Linux layer. Web servers are responsible for translating from web browsers to their correct website.
MySQL: Our third layer is where databases live. MySQL stores details that can be queried by scripting to construct a website. MySQL usually sits on top of the Linux layer alongside Apache/layer 2. In high end configurations, MySQL can be off loaded to a separate host server.
PHP: Sitting on top of them all is our fourth and final layer. The scripting layer consists of PHP and/or other similar web programming languages. Websites and Web Applications run within this layer.

39

40 of 50

LEMP

LEMP Stands For:

L- Linux Operating System
E- Nginx Server
M- MySQL Database
P- PHP

40

41 of 50

Why use Nginx?

Simple installations and configurations.
Load balancing support.
More concurrent connections can be handled compared to Apache.
Fastest for serving static files.
Compatible with commonly-used applications.

41

42 of 50

Why use PHP?

Large community support.
More options for database connectivity.
Inexpensive web hosting.
Open-source and free.
The most popular CMS WordPress runs on PHP.

42

43 of 50

Why use MySQL?

It is Open-source.
Strong data protection.
Highly extensible
High performance.
Scalability and Flexibility

43

44 of 50

Why use Linux?

Highly secure.
Highly stable.
Free and open-source.
Strong community support.
Flexible in customization.

44

45 of 50

Advantages Of LEMP

One of the benefits of using LEMP is its widespread community support.
PHP and MySQL in the backend together are very powerful also with large community support and several hosting providers support.
LEMP is open-source.
Another benefit of LEMP is that Nginx is faster and is capable of handling a good amount of load.

45

46 of 50

Disadvantages of LEMP

If configurations are considered Nginx does not allow additional configurations which is a downside unlike Apache as it is more flexible in this case.
Not flexible enough to support dynamic modules and loading.

46

47 of 50

47

48 of 50

48

49 of 50

49

50 of 50

50