MST unit2

MEAN STACK TECHNOLOGIES
UNIT-2
JAVASCRIPT
Topic 1: The Basic of Javascript
Definition of Java-script:
JavaScript is a programming language commonly used to make

websites interactive and dynamic. It runs on your web browser, allowing
websites to respond to user actions like clicking buttons, filling out
forms, and scrolling.
Here's a simple example: imagine you have a button on a webpage that

changes the text color when clicked. JavaScript can make this happen.
When someone clicks the button, JavaScript can change the color of the
text from black to red.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function changeColor() {
document.getElementById("text").style.color = "red";
UNIT-2
JAVASCRIPT
}
</script>
</head>
<body>
<h1 id="text">Hello, World!</h1>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
JavaScript isn't limited to just changing colors; it can do a lot more. It's
used for things like form validation (checking if users entered correct
information), creating animations, fetching data from servers without
reloading the page (using AJAX), building interactive games, and much
more.
Advantages of JavaScript:
1. Interactivity: JavaScript allows you to create dynamic and interactive

elements on websites, making them more engaging for users.
UNIT-2
JAVASCRIPT
2. Versatility: It can be used for both frontend and backend
development (Node.js).
3. Large Community: JavaScript has a vast community of developers, so

finding resources and help is easy.
4. Speed: It's executed on the client-side, which can lead to faster

loading times and smoother user experiences.
Disadvantages of JavaScript:
1. Browser Compatibility: Different browsers may interpret JavaScript

differently, leading to compatibility issues.
2. Security Risks: Being executed on the client-side, JavaScript can be

exploited by attackers for malicious purposes.
3. Performance: Poorly written JavaScript code can slow down websites

and negatively impact user experience.
4. Dependency: Websites heavily reliant on JavaScript may not function

properly if users disable JavaScript in their browsers.
Topic 2: Objects, Primitives Operations and Expressions, Control

Statements, Arrays, Functions, Constructors
Sure! Let's go through each concept with simple examples:

UNIT-2
JAVASCRIPT
1. Objects:
- Definition:
 Objects in JavaScript are collections of key-value pairs. They are

used to store and manipulate data.
-Example 1: Creating and accessing properties of an object.
// Creating an object
let person = {
name: "John",
age: 30,
country: "USA"
};
// Accessing properties of the object
console.log(person.name); // Output: John
console.log(person.age); // Output: 30
- Example 2: Modifying properties of an object.
// Modifying properties of the object
person.age = 35;
UNIT-2
JAVASCRIPT
console.log(person.age); // Output: 35
2. Primitive Operations and Expressions:
Definition:
 Primitive operations are basic operations performed on

primitive data types like numbers, strings, and booleans.
Expressions are combinations of values and operators that
produce a result.
- Example 1: Arithmetic operations.
// Arithmetic operations
let x = 5;
let y = 3;
console.log(x + y); // Output: 8
console.log(x * y); // Output: 15
- Example 2: String concatenation.
// String concatenation
let greeting = "Hello";
let name = "John";

UNIT-2
JAVASCRIPT
console.log(greeting + ", " + name + "!"); // Output: Hello, John!
3. Control Statements:
- Definition:
 Control statements are used to control the flow of execution in

a program.
- Example 1: If statement.
// If statement
let num = 10;
if (num > 0) {
console.log("Positive number");
} else {
console.log("Negative number");
// Output: Positive number
- Example 2: For loop.
// For loop
for (let i = 1; i <= 5; i++) {

UNIT-2
JAVASCRIPT
console.log(i);
// Output:
// 1
// 2
// 3
// 4
// 5
4. Arrays:
 Definition: Arrays are used to store multiple values in a single

variable.
- Example 1: Creating and accessing elements of an array.
// Creating an array
let fruits = ["apple", "banana", "orange"];
// Accessing elements of the array
console.log(fruits[0]); // Output: apple

UNIT-2
JAVASCRIPT
console.log(fruits[1]); // Output: banana
- Example 2: Modifying elements of an array.
// Modifying elements of the array
fruits[2] = "grape";
console.log(fruits); // Output: ["apple", "banana", "grape"]
5. Functions:
 Definition: Functions are blocks of reusable code that perform

a specific task.
- Example 1: Defining and calling a function.
// Defining a function
function greet(name) {
console.log("Hello, " + name + "!");
// Calling the function
greet("Alice"); // Output: Hello, Alice!

UNIT-2
JAVASCRIPT
- Example 2: Function with return value.
// Function with return value
function add(x, y) {
return x + y;
// Calling the function
console.log(add(3, 4)); // Output: 7
6. Constructors:
 Definition: Constructors are functions used for creating objects

with the same properties and methods.
- Example 1: Creating objects using a constructor function.
// Constructor function
function Person(name, age) {
this.name = name;
this.age = age;
UNIT-2
JAVASCRIPT
}
// Creating objects
let person1 = new Person("John", 30);
console.log(person1.name); // Output: John
console.log(person1.age); // Output: 30
- Example 2: Adding methods to objects created with constructor

functions.
// Constructor function with method
function Circle(radius) {
this.radius = radius;
this.area = function() {
return Math.PI * this.radius * this.radius;
};
// Creating object
let circle = new Circle(5);

UNIT-2
JAVASCRIPT
console.log(circle.area()); // Output: 78.53981633974483
Sure! Let's break down each concept in the context of AngularJS and
provide simple examples:
TOPIC 3:
Angular-JS Expressions, Array, Seval, Strings, Angular JS Form

Validation Submission
1. AngularJS Expressions:
 Definition: AngularJS expressions are used to bind data to

HTML. They are written inside double curly braces (`{{ }}`) and
are evaluated and replaced with their values.
- Example 1: Displaying a variable in HTML using expressions.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.
js"></script>
<body>
UNIT-2
JAVASCRIPT
<div ng-app="">
<p>{{ message }}</p>
</div>
<script>
// AngularJS controller
angular.module('', []).controller('', function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>
</body>
</html>
- Example 2: Performing arithmetic operations in expressions.
<div ng-app="">
<p>5 + 3 = {{ 5 + 3 }}</p>
</div>
UNIT-2
JAVASCRIPT
2. Arrays and Objects:
 Definition of Arrays and Objects in Angular-JS are data

structures used to store and manipulate collections of values.
- Example 1: Using arrays and objects in Angular-JS controller.
<div ng-app="">
<div ng-controller="myCtrl">
<p ng-repeat="fruit in fruits">{{ fruit }}</p>
</div>
</div>
<script>
angular.module('', []).controller('myCtrl', function($scope) {
$scope.fruits = ["apple", "banana", "orange"];
});
</script>
- Example 2: Accessing object properties in AngularJS expression.
<div ng-app="">
UNIT-2
JAVASCRIPT
<p>Name: {{ person.name }}, Age: {{ person.age }}</p>
</div>
</div>
<script>
$scope.person = { name: "John", age: 30 };
});
</script>
3. $eval:
 Definition: $eval is an Angular-JS function used to evaluate

expressions dynamically.
-Example 1: Evaluating an expression dynamically using $eval.
<div ng-app="">
<p>{{ $eval('5 + 3') }}</p>

UNIT-2
JAVASCRIPT
</div>
</div>
<script>
$scope.$eval = function(expression) {
return eval(expression);
};
});
</script>
- Example 2: Using $eval to dynamically change object properties.
<div ng-app="">
<p>{{ person.name }}</p>
<button ng-click="changeName()">Change Name</button>
</div>
</div>
UNIT-2
JAVASCRIPT
<script>
$scope.person = { name: "John" };
$scope.changeName = function() {
$scope.$eval("person.name = 'Alice'");
};
});
</script>
4. Strings:
 Definition: Strings in AngularJS are sequences of characters

enclosed in single or double quotes.
- Example 1: Using strings in AngularJS expressions.
<div ng-app="">
<p>{{ "Hello, " + name }}</p>
</div>
- Example 2: Manipulating strings in AngularJS controller.

UNIT-2
JAVASCRIPT
<div ng-app="">
<p>{{ reverseString("hello") }}</p>
</div>
</div>
<script>
$scope.reverseString = function(str) {
return str.split('').reverse().join('');
};
});
</script>
5. AngularJS Form Validation and Submission:
 Definition: AngularJS provides built-in form validation

features to validate user input and form submission handling.
- Example 1: Simple form validation in AngularJS.

UNIT-2
JAVASCRIPT
<form ng-app="" name="myForm">
<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$error.required">Email is
required.</span>
<span ng-show="myForm.email.$error.email">Invalid email

address.</span>
</form>
- Example 2: Handling form submission in AngularJS.
<form ng-app="" ng-controller="myCtrl" ng-

submit="submitForm()">
<input type="text" ng-model="name" required>
<button type="submit">Submit</button>
</form>
<script>
$scope.submitForm = function() {
UNIT-2
JAVASCRIPT
alert("Form submitted successfully! Name: " + $scope.name);
};
});
</script>
These examples provide a basic understanding of AngularJS

expressions, arrays, objects, $eval, strings, form validation, and form
submission.
Sure, I can provide a brief explanation of single-page application (SPA)

development using AngularJS along with two simple examples.
Topic 4:
Single Page Application Using Angular-JS
What is AngularJS?
Angular-JS is a JavaScript framework maintained by Google for building

dynamic web applications. It extends HTML with new attributes and
binds data to HTML with expressions and directives.
Single Page Application (SPA):

UNIT-2
JAVASCRIPT
A single-page application (SPA) is a web application that interacts with
the user by dynamically rewriting the current page rather than loading
entire new pages from the server. This provides a smoother and more
fluid user experience similar to that of a desktop application.
Example 1: Basic SPA with Angular-JS
Let's create a simple SPA with AngularJS that consists of two views -
Home and About.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS SPA Example</title>
<script
js"></script>
</head>
<body>
<div ng-view></div>
<script>
UNIT-2
JAVASCRIPT
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/about", {
templateUrl : "about.html"
});
});
</script>
</body>
</html>
 home.html
<h1>Welcome to the Home Page</h1>
<p>This is the home page of our SPA.</p>

UNIT-2
JAVASCRIPT
 about.html
<h1>About Us</h1>
<p>This is the about page of our SPA.</p>
Output:
When you navigate to the root URL, you'll see the home page content.
When you navigate to `/about`, it'll display the about page content
without reloading the entire page.
Example 2: Simple SPA with Data Binding
Let's extend the previous example to include data binding.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS SPA Example</title>

UNIT-2
JAVASCRIPT
<script
js"></script>
</head>
<body>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl : "about.html",
controller: "AboutController"
});
});
UNIT-2
JAVASCRIPT
app.controller("HomeController", function($scope) {
$scope.message = "Welcome to the Home Page";
});
app.controller("AboutController", function($scope) {
$scope.message = "Welcome to the About Page";
});
</script>
</body>
</html>
 home.html
<h1>{{ message }}</h1>
<p>This is the home page of our SPA.</p>
 about.html
<h1>{{ message }}</h1>

UNIT-2
JAVASCRIPT
<p>This is the about page of our SPA.</p>
Output:
Both home and about pages will display a message fetched from their
respective controllers without reloading the page.
These examples provide a basic understanding of how to build SPAs

using Angular-JS, including routing and data binding.

MST unit2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MST unit2

Uploaded by

Copyright:

Available Formats

MEAN STACK TECHNOLOGIES

Topic 1: The Basic of Javascript

JavaScript is a programming language commonly used to make

Here's a simple example: imagine you have a button on a webpage that

<h1 id="text">Hello, World!</h1>

<button onclick="changeColor()">Change Color</button>

1. Interactivity: JavaScript allows you to create dynamic and interactive

3. Large Community: JavaScript has a vast community of developers, so

4. Speed: It's executed on the client-side, which can lead to faster

1. Browser Compatibility: Different browsers may interpret JavaScript

2. Security Risks: Being executed on the client-side, JavaScript can be

3. Performance: Poorly written JavaScript code can slow down websites

4. Dependency: Websites heavily reliant on JavaScript may not function

Topic 2: Objects, Primitives Operations and Expressions, Control

Sure! Let's go through each concept with simple examples:

 Objects in JavaScript are collections of key-value pairs. They are

-Example 1: Creating and accessing properties of an object.

// Accessing properties of the object

console.log(person.name); // Output: John

- Example 2: Modifying properties of an object.

// Modifying properties of the object

2. Primitive Operations and Expressions:

 Primitive operations are basic operations performed on

- Example 1: Arithmetic operations.

console.log(x + y); // Output: 8

console.log(x * y); // Output: 15

- Example 2: String concatenation.

let greeting = "Hello";

let name = "John";

 Control statements are used to control the flow of execution in

let num = 10;

// Output: Positive number

- Example 2: For loop.

for (let i = 1; i <= 5; i++) {

 Definition: Arrays are used to store multiple values in a single

- Example 1: Creating and accessing elements of an array.

let fruits = ["apple", "banana", "orange"];

// Accessing elements of the array

console.log(fruits[0]); // Output: apple

- Example 2: Modifying elements of an array.

// Modifying elements of the array

console.log(fruits); // Output: ["apple", "banana", "grape"]

 Definition: Functions are blocks of reusable code that perform

- Example 1: Defining and calling a function.

console.log("Hello, " + name + "!");

// Calling the function

greet("Alice"); // Output: Hello, Alice!

// Function with return value

// Calling the function

console.log(add(3, 4)); // Output: 7

 Definition: Constructors are functions used for creating objects

- Example 1: Creating objects using a constructor function.

function Person(name, age) {

let person1 = new Person("John", 30);

console.log(person1.name); // Output: John

- Example 2: Adding methods to objects created with constructor

// Constructor function with method

return Math.PI * this.radius * this.radius;

let circle = new Circle(5);

Angular-JS Expressions, Array, Seval, Strings, Angular JS Form

 Definition: AngularJS expressions are used to bind data to

- Example 1: Displaying a variable in HTML using expressions.

<p>{{ message }}</p>

angular.module('', []).controller('', function($scope) {