18CSC311J WEB DESIGN AND DEVELOPMENT UNIT-2

18CSC311J WEB DESIGN AND DEVELOPMENT 2023-24 EVEN SEMESTER REGULATION 2018 Prepared by Dr.M.Sivakumar AP,NWC, SRMIST, KTR DEPARTMENT OF NETWORKING AND COMMUNICATIONS Prepared by Dr.M.Sivakumar 1

UNIT II Introduction to single page application using Angular JS, Expression Module ,Directive Databinding Controllers,Scope -Filter Introduction to Mongo, DB-Documents Collection-Database Datatypes Creating , Updating Deleting documents-Querying Basic AJAX, History of AJAX AJAX- Enabled Application using JSON. JQuery basic,J Query core,events,effects - Plugins - user interface using jQuery Prepared by Dr.M.Sivakumar 2

Introduction to single page application using Angular JS, Expression SESSION 01 Prepared by Dr.M.Sivakumar 3

Introduction to AngularJS Angular JS is a JavaScript MVC framework to build web applications with good architecture and maintainable features. Developed by Google in 2010. Used to create single page web applications It can be added to HTML using <script> AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. Prepared by Dr.M.Sivakumar 4

Why Angular JS? Or Design goals of Angular JS Decouple DOM manipulation from application logic DOM operation are costly. Less JavaScript code. Prepared by Dr.M.Sivakumar 5

Benefits Dependency Injection Two-way Binding Regard testing equal to writing application Model View MVC (Model View Controller) Directives, Filters - Control the behavior of HTML elements Events or user action or view load Maps to particular model after fetching the data Implements the business logic on response data and bind it to view Prepared by Dr.M.Sivakumar 6

MVC (Model View Controller) Model The model represents the application's data and business logic. It encapsulates the data and behavior of the application and is responsible for managing the application's state. In AngularJS , the model is typically represented by JavaScript objects or data structures that are manipulated and accessed by the application. Prepared by Dr.M.Sivakumar 7

MVC (Model View Controller) View The view is the presentation layer of the application, responsible for rendering the user interface and displaying data to the user. In AngularJS , views are created using HTML templates enhanced with AngularJS directives and expressions. Views are declarative and bind to the model to reflect changes in the data. Prepared by Dr.M.Sivakumar 8

MVC (Model View Controller) Controller The controller acts as an intermediary between the model and the view. It contains the application's business logic, handles user input and events, and updates the model accordingly. Controllers in AngularJS are JavaScript functions defined using the controller function provided by the AngularJS framework. They are responsible for initializing the scope (data context) for the view and exposing functions and properties that can be used in the view. Prepared by Dr.M.Sivakumar 9

MVC Example <script> // Define the Controller angular.module (' myApp ', []) .controller(' UserController ', function($scope) { // Define the model - user object $ scope.user = { name: 'Raj kumar ', email: '[email protected]‘ }; }); </script> </body> </html> <!DOCTYPE html> <html lang ="en" ng -app=" myApp "> <head> <meta charset ="UTF-8"> <title> AngularJS Model Example</title> <script src =".../ angular.min.js "></script> </head> <body> <div ng -controller=" UserController "> <h1>User Information</h1> <!– View --> <p>Name: {{ user.name }}</p> <p>Email: {{ user.email }}</p> </div> Prepared by Dr.M.Sivakumar 10

Prepared by Dr.M.Sivakumar 11

Components of AngularJS Directives Directives are markers on a DOM element that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform it and its children. Directives are the foundation of AngularJS components and are used to create custom HTML elements, attributes, and behaviors . Examples: ng -app, ng -controller, ng -model, ng -bind, ng -repeat, ng -click, ng -show/ ng -hide, ng -if, ng -submit Prepared by Dr.M.Sivakumar 12

Components of AngularJS Controllers Controllers in AngularJS are JavaScript functions that contain the application's business logic and manage the interaction between the model and the view . They are responsible for initializing the scope (data context) for the view and exposing functions and properties that can be used in the view. Controllers are often associated with a specific view or component and are defined using the controller function provided by AngularJS . Prepared by Dr.M.Sivakumar 13

Components of AngularJS Services Services in AngularJS are singleton objects or functions that are used to organize and share code across the application. They provide a way to encapsulate reusable logic, such as data manipulation, communication with external APIs, or business operations. AngularJS comes with several built-in services ( e.g., $http, $location, $timeout ) and allows you to create custom services using the service, factory, or provider functions. Prepared by Dr.M.Sivakumar 14

Components of AngularJS Templates Templates in AngularJS are HTML files that define the structure of the view. They contain static HTML markup enhanced with AngularJS directives and expressions, which allow for dynamic data binding and behavior. Templates are associated with controllers and components and are rendered by AngularJS to produce the final UI that the user interacts with. Prepared by Dr.M.Sivakumar 15

Components of AngularJS Filters Filters in AngularJS allow you to format and transform data directly within templates. They are used to apply various transformations to data displayed in the view, such as formatting dates, sorting arrays, filtering lists, etc. AngularJS provides several built-in filters ( e.g., date, uppercase, orderBy ) and allows you to create custom filters as needed. Prepared by Dr.M.Sivakumar 16

Components of AngularJS Modules Modules in AngularJS provide a way to organize and structure the application into reusable and manageable units . They serve as containers for controllers, services, directives, filters, and other components of the application. Modules help in keeping the codebase modular, maintainable, and scalable by defining clear boundaries and dependencies between different parts of the application. Prepared by Dr.M.Sivakumar 17

First Angular JS Application <!DOCTYPE html> <html> <head> <title>Angular JS Example</title> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1> Angular JS Example</h1> <div ng -app="" ng -init=" msg ='Welcome to Angular JS'"> <p>Hello!. <span ng -bind=" msg "></span></p> </div> </body> </html> Prepared by Dr.M.Sivakumar 18

Simple Angular JS Application <!DOCTYPE html> <html> <head> <title>Angular JS Example</title> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1> Angular JS Example</h1> <div ng -app="" ng -init=" firstname =' siva';lastName =' kumar '"> <p>Hello <span ng -bind=" firstname+lastName "></span></p> </div> </body> </html> Prepared by Dr.M.Sivakumar 19

AngularJS Expressions Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is written. The expressions in AngularJS are written in double braces: {{ expression }} to ng-bind directives: ng -bind=“expression” Prepared by Dr.M.Sivakumar 20

AngularJS Expressions <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1>Angular JS Expression using {{}}</h1> <div ng -app="" ng -init=" msg ='Welcome'"> {{ msg }} </div> </body> </html> Prepared by Dr.M.Sivakumar 21

AngularJS Expressions <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1>Angular JS Expression using ng -bind</h1> <div ng -app="" ng -init=" msg ='Welcome'"> <p ng -bind=" msg "></p> </div> </body> </html> Prepared by Dr.M.Sivakumar 22

Angular JS Expression Angular JS Number Angular JS Strings Angular JS Arrays Angular JS Objects Prepared by Dr.M.Sivakumar 23

AngularJS Extends HTML AngularJS extends HTML with ng -directives . ng -app directive defines an AngularJS application. ng -model directive binds the value of HTML controls (input, select, textarea ) to application data. ng -bind directive binds application data to the HTML view. Prepared by Dr.M.Sivakumar 24

Simple Web Application using Angular JS Expression Output <!DOCTYPE html> <html > <head> < script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script > </head> <body> <div ng -app=“” > 10 + 20 = {{10+20}} <p>Hello {{"User"}}</p> <p> {{{ name:'David ', age:'35'}.name}} </p> {{1==2}} <p> {{['Kumar', 'Arun', 'Sara'][2]}} </div> </body> </html> Prepared by Dr.M.Sivakumar 25

Simple Web Application using Angular JS Strings <!DOCTYPE html> <html > <head> < script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js "> </ script > </head> <body> <div ng -app =“” ng -init =" firstName ='Vijay'" > <p>The name is <span ng-bind=" firstName " ></ span></p> </div> </body> </html > Output Prepared by Dr.M.Sivakumar 26

Simple Web Application using Angular JS Strings <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1>Angular JS Expression using ng -bind</h1> <div ng -app="" ng -init=" fname =' Siva';lname =' kumar '"> <p>Hello <span ng -bind=" fname+lname "></span></p> </div> </body> </html> Prepared by Dr.M.Sivakumar 27

AngularJS Expressions Strings ( input from user)- Example using ng -model <!DOCTYPE html> <html > <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script > </head> <body> <div ng-app=""> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name" ></p> <p> {{name}} </p> or <p ng-bind="name" ></p> </div> </body> </html> Output Prepared by Dr.M.Sivakumar 28

Angular JS Objects - Example <!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"> </script> <title>AngularJS Expression</title> </head> <body> </h1> <h3>AngularJS Expressions</h3> <div ng-app="" ng- init ="sort={ one:'quick sort', two:'merge sort', three:'bubble sort'}"> < p> Sorting Algorithms: < ul > <li>{{ sort.one }}</li> <li>{{ sort.two }}</li> <li>{{ sort.three }}</li> </ ul > </div> </body> Output Prepared by Dr.M.Sivakumar 29

Angular JS Numbers - Example <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng -app=“ ” ng -init="quantity=5;cost=5"> <p>Total in dollar: {{ quantity * cost }}</p> </div> </body> </html> Prepared by Dr.M.Sivakumar 30

Angular JS Numbers - Example <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <h1> ng -model example</h1> <div ng -app="" ng -init="val1=1;val2=3"> <p>Input something in the input box:</p> <p><input type="number" ng -model="val1" placeholder="Enter Value1"></p> <p><input type="number" ng -model="val2" placeholder="Enter Value2"></p> <p>Result:{{val1+val2}}</span></p> </div> </body> </html> Prepared by Dr.M.Sivakumar 31

Angular JS Arrays <!DOCTYPE html> <html> <head> <meta chrset ="UTF 8"> <title>Angular JS Array Example</title> <script src ="https://code.angularjs.org/1.6.9/angular.min.js"></script> </head> <body> <h1>Angular JS Array Example</h1> <div ng -app="" ng -init="marks=[1,15,19]"> Student Marks< br > Subject1 : {{marks[0] }}< br > Subject2 : {{marks[1] }}< br > Subject3 : {{marks[2] }}< br > </div> </body> </html> Prepared by Dr.M.Sivakumar 32

Angular JS Module and Controller In AngularJS , a module defines an application. It is a container for the different parts of your application like controller, services, filters, directives etc. A module is used as a Main() method. Controller always belongs to a module. The angular object's module() method is used to create a module. It is also called AngularJS function angular.module Add a controller to your application, and refer to the controller with the ng -controller directive. Prepared by Dr.M.Sivakumar 33

Adding Controller to Application using Module and Controller Syntax: <div ng -app=" myApp " ng -controller=“ myCtrl "> </div> <script> var app= angular.module (“ myApp ”,[]) app.controller (“ myCtrl”,function ($scope){ }); </script> Prepared by Dr.M.Sivakumar 34

Module and Controller Example <!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div ng -app=" myApp " ng -controller=" personCtrl "> First Number: <input type="number" ng -model="num1">< br >< br > Second Number: <input type="number" ng -model="num2">< br > < br > Full Name: {{result()}} </div> <script> var app = angular.module (' myApp ', []); app.controller (' personCtrl ', function($scope) { $scope.num1 = 0; $scope.num2 = 0; $ scope.result = function() { return $scope.num1 + $scope.num2; }; }); </script> </body> </html> Prepared by Dr.M.Sivakumar 35

Angular JS Directive Directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behaviour to a DOM element (or transform it, replace it, etc.) AngularJS directives are extended HTML attributes with the prefix ng - The ng -app directive initializes an AngularJS application. The ng -init directive initializes application data. The ng -model directive binds the value of HTML controls (input, select, textarea ) to application data. ng -repeat − This directive repeats HTML elements for each item in a collection. Prepared by Dr.M.Sivakumar 36

ng -repeat Example <!DOCTYPE html> <html> <head> <title> AngularJS Directives</title> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h1> ng -repeat Example</h1> <div ng -app = "" ng -init ="students = [{id:'101',name:'Arun'},{id:'102',name:'Ashok'},{id:'103',name:'David'}]"> <p>List of Students:</p> < ol > < li ng -repeat = "s in students"> {{' ID:'+s.id +', Name:'+s.name }} </ li > </ ol > </div> </body> </html> Prepared by Dr.M.Sivakumar 37

ng -submit Example <body> <script> angular.module (' submitExample ', []) .controller(' ExampleController ', ['$scope', function($scope){ $ scope.list = []; $ scope.text = 'hello'; $ scope.submit = function(){ if ($ scope.text ) { $ scope.list.push ( this.text ); $ scope.text = ''; } }; }]); </script> <div ng -app=" submitExample "> <form ng -submit="submit()" ng -controller =" ExampleController "> Enter text and hit enter: <input type="text" ng -model="text" name="text"> <input type="submit" id="submit" value="Submit"> <pre>list={{list}}</pre> </form> </div> </body> Prepared by Dr.M.Sivakumar 38

Angular js Event Directives ng -blur ng -change ng -click ng -copy ng -cut ng-dblclick ng -focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng -paste Prepared by Dr.M.Sivakumar 39

<!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div ng -app=" myApp " ng -controller=" myCtrl "> <h1 ng-mousemove ="count = count + 1">Mouse Over Me!</h1> <h2>{{ count }}</h2> </div> <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope){ $ scope.count = 0; }); </script> </body> </html> ng-mousemove Example Prepared by Dr.M.Sivakumar 40

<!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div ng -app=" myApp " ng -controller=" myCtrl "> <button ng -click ="count = count + 1">Click Me!</button> <p>{{ count }}</p> </div> <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.count = 0; }); </script> </body> </html> ng -click Example Prepared by Dr.M.Sivakumar 41

<!DOCTYPE html> <html> <head> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div ng -app=" myApp " ng -controller=" myCtrl "> <button ng -click=" myFunc ()">Click Me!</button> <div ng -show=" showMe "> <h1>Courses:</h1> <div>CSE</div> <div>EEE</div> <div>ECE</div> </div> </div> ng -click Example <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.showMe = false; $ scope.myFunc = function() { $ scope.showMe = !$ scope.showMe ; } }); </script> <p>Click the button to show/hide the courses.</p> </body> </html> Prepared by Dr.M.Sivakumar 42

Two – way Binding The ng -model directive provides a two-way binding between the model and the view. Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times. Prepared by Dr.M.Sivakumar 43

Two – way Binding - Example <div ng -app=" myApp " ng -controller=" myCtrl "> Name: <input ng -model=" firstname "> <h1>{{ firstname }}</h1> </div> <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.firstname = "John"; $ scope.lastname = "Doe"; }); </script> Prepared by Dr.M.Sivakumar 44

Angular JS Data Binding <!DOCTYPE html> <html> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div data- ng -app="" data- ng -init="quantity=1;price=5"> <h2>Cost Calculator</h2> Quantity: <input type="number" ng -model ="quantity"> Price: <input type="number" ng -model ="price"> <p><b>Total in dollar:</b> {{quantity * price}}</p> </div> </body> </html> Prepared by Dr.M.Sivakumar 45

Angular JS Controllers AngularJS controllers control the data of AngularJS applications. A controller is a JavaScript Object, created by a standard JavaScript object constructor. The ng -controller directive defines the application controller. Prepared by Dr.M.Sivakumar 46

Example <!DOCTYPE html> <html> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body> <div ng -app=" myApp " ng -controller=" myCtrl "> First Name: <input type="text" ng -model=" firstName ">< br > Last Name: <input type="text" ng -model=" lastName ">< br > < br > Full Name: {{ firstName + " " + lastName }} </div> <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.firstName = "John"; $ scope.lastName = "Doe"; }); </script> </body> </html> Prepared by Dr.M.Sivakumar 47

Example The AngularJS application is defined by ng -app=" myApp ". The application runs inside the <div>. The ng -controller=" myCtrl " attribute is an AngularJS directive. It defines a controller. The myCtrl function is a JavaScript function. AngularJS will invoke the controller with a $scope object. In AngularJS , $scope is the application object (the owner of application variables and functions). The controller creates two properties (variables) in the scope ( firstName and lastName ). The ng -model directives bind the input fields to the controller properties ( firstName and lastName ). Prepared by Dr.M.Sivakumar 48

AngularJS Form Validation AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea , select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not. Prepared by Dr.M.Sivakumar 49

Form State and Input State Forms have the following states: $pristine No fields have been modified yet $dirty One or more have been modified $invalid The form content is not valid $valid The form content is valid $submitted The form is submitted Input fields have the following states: $untouched The field has not been touched yet $touched The field has been touched $pristine The field has not been modified yet $dirty The field has been modified $invalid The field content is not valid $valid The field content is valid Prepared by Dr.M.Sivakumar 50

AngularJS Filters AngularJS provides filters to transform data: currency Format a number to a currency format. date Format a date to a specified format. filter Select a subset of items from an array. json Format an object to a JSON string. limitTo Limits an array/string, into a specified number of elements/characters. lowercase Format a string to lower case. number Format a number to a string. orderBy Orders an array by an expression. uppercase Format a string to upper case. Prepared by Dr.M.Sivakumar 51

AngularJS Filters Example <!DOCTYPE html> <html> <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng -app=" myApp " ng -controller=" myCtrl "> <p>The name is {{ lastName | uppercase }}</p> </div> <script> angular.module (' myApp ', []).controller(' myCtrl ', function($scope) { $ scope.firstName = "Raja", $ scope.lastName = " Sekar " }); </script> </body> </html> Prepared by Dr.M.Sivakumar 52

Controllers, Scope-Filter Prepared by Dr.M.Sivakumar 53

MongoDB Prepared by Dr.M.Sivakumar 54

Introduction to MongoDB MongoDB is a document database . It stores data in a type of JSON format called BSON . A record in MongoDB is a document, which is a data structure composed of key value pairs similar to the structure of JSON objects. Prepared by Dr.M.Sivakumar 55

What is MongoDB Most popular No SQL database. Scalable high-performance Document-oriented database. Built for Speed Rich Document based queries for Easy Readability Full Index Support for High Performance Replication and Failover for High Availability Auto Sharding for Easy Scalability Map/ Reduce for Aggregation Prepared by Dr.M.Sivakumar 56

Advantages of MongoDB over RDBMS Schema less − MongoDB is a document database in which one collection holds different documents. Number of fields, content and size of the document can differ from one document to another. Structure of a single object is clear. No complex joins. Deep query-ability. MongoDB supports dynamic queries on documents using a document-based query language that's nearly as powerful as SQL. Tuning. Ease of scale-out − MongoDB is easy to scale. Conversion/mapping of application objects to database objects not needed. Uses internal memory for storing the (windowed) working set, enabling faster access of data. Prepared by Dr.M.Sivakumar 57

Why Use MongoDB ? Document Oriented Storage − Data is stored in the form of JSON style documents. Index on any attribute Replication and high availability Auto- Sharding Rich queries Fast in-place updates Professional support by MongoDB Prepared by Dr.M.Sivakumar 58

Where to Use MongoDB ? Big Data Content Management and Delivery Mobile and Social Infrastructure User Data Management Data Hub Prepared by Dr.M.Sivakumar 59

RDBMS vs MangoDB RDBMS MongoDB Database Database Table Collection Tuple/Row Document column Field Table Join Embedded Documents Primary Key Primary Key (Default key _id provided by MongoDB itself) Prepared by Dr.M.Sivakumar 60

MongoDB MongoDB is a cross-platform, document oriented database that provides, high performance, high availability, and easy scalability. MongoDB works on concept of collection and document. Prepared by Dr.M.Sivakumar 61

MongoDB – Database, Collections and Documents Database Database is a physical container for collections. Each database gets its own set of files on the file system. A single MongoDB server typically has multiple databases . Collection Collection is a group of MongoDB documents. It is the equivalent of an RDBMS table. A collection exists within a single database . Collections do not enforce a schema. Document A document is a set of key-value pairs. Documents have dynamic schema. Prepared by Dr.M.Sivakumar 62

How to create a database? MongoDB use DATABASE_NAME is used to create database. The command will create a new database if it doesn't exist, otherwise it will return the existing database . Syntax: use db-name Example >use mydb switched to db mydb Prepared by Dr.M.Sivakumar 63

collections Create Collection MongoDB creates collection automatically, when you insert some document . Syntax > db.collection-name.insert (document) Example mydb > db.student.insert ({"name":" raja","age ":"20 "}) Check collections mydb > show collections movie student Drop Collection mydb > db.student.drop () Prepared by Dr.M.Sivakumar 64

A MongoDB Document Records in a MongoDB database are called documents, and the field values may include numbers, strings, booleans , arrays, or even nested documents . Example { title : "Post Title 1", body : "Body of post.", category : "News", likes : 1, tags : ["news", "events"], date : Date() } Prepared by Dr.M.Sivakumar 65

Datatypes String − This is the most commonly used datatype to store the data. String in MongoDB must be UTF-8 valid. Integer − This type is used to store a numerical value. Integer can be 32 bit or 64 bit depending upon your server. Boolean − This type is used to store a boolean (true/ false) value. Double − This type is used to store floating point values. Min/ Max keys − This type is used to compare a value against the lowest and highest BSON elements. Arrays − This type is used to store arrays or list or multiple values into one key . Prepared by Dr.M.Sivakumar 66

Datatypes Timestamp − ctimestamp . This can be handy for recording when a document has been modified or added. Object − This datatype is used for embedded documents. Null − This type is used to store a Null value. Symbol − This datatype is used identically to a string; however, it's generally reserved for languages that use a specific symbol type. Date − This datatype is used to store the current date or time in UNIX time format. You can specify your own date time by creating object of Date and passing day, month, year into it. Object ID − This datatype is used to store the document’s ID. Binary data − This datatype is used to store binary data. Code − This datatype is used to store JavaScript code into the document. Regular expression − This datatype is used to store regular expression. Prepared by Dr.M.Sivakumar 67

MongoDB - Environment Login using email id https :// account.mongodb.com/account/login?signedOut=true Click connect Select shell Copy your connection string Run your connection string in your command line Prepared by Dr.M.Sivakumar 68

Login using email id Prepared by Dr.M.Sivakumar 69

Click connect Prepared by Dr.M.Sivakumar 70

Select shell Prepared by Dr.M.Sivakumar 71

Copy your connection string and Run your connection string in your command line Prepared by Dr.M.Sivakumar 72

MongoDB - Environment Run your connection string in your command line You will be prompted for the password for the Database User, sivakumm3 . When entering your password, make sure all special characters are URL encoded Prepared by Dr.M.Sivakumar 73

MongoDB - Environment Prepared by Dr.M.Sivakumar 74

Creating documents Create document insert() insertOne () insertMany () Syntax > db.COLLECTION_NAME.insert (document ) Example mydb > db.student.insert ({"name":" raja","age ":" 20“,”dept”:”NWC”}) Prepared by Dr.M.Sivakumar 75

Creating documents insertOne () mydb > db.student.insertOne ({"name":" raja","age ":"20 "}) insert() mydb > db.student.insert ([{"name":" sharma","age ":"20"},{"name":" manish","age ":"19 "}]) insertMany () > db.student.insertMany ( [ { First_Name : " Radhika ", Last_Name : "Sharma", Date_Of_Birth : "1995-09-26", e_mail : "[email protected]", phone: "9000012345" }, { First_Name : "Rachel", Last_Name : "Christopher", Date_Of_Birth : "1990-02-16", e_mail : "[email protected]", phone: "9000054321" }, { First_Name : " Fathima ", Last_Name : "Sheik", Date_Of_Birth : "1990-02-16", e_mail : "[email protected]", phone: "9000054321" } ] ) Prepared by Dr.M.Sivakumar 76

Querying documents find() method is used to query data from MongoDB collection Syntax > db.COLLECTION_NAME.find () Example > db.student.find () findOne () method returns only one document . > db.student.findOne () Prepared by Dr.M.Sivakumar 77

Updating documents MongoDB's update() and save() methods are used to update document into a collection. update () - updates the values in the existing document save () - replaces the existing document with the document passed in save() method . Syntax > db.COLLECTION_NAME.update (SELECTION_CRITERIA, UPDATED_DATA) Prepared by Dr.M.Sivakumar 78

Updating documents Example mydb > db.student.update ({"name":"raja"},{$set:{"name":" nithun "}}) mydb > db.student.findOne () { _ id: ObjectId ("65f8da73c8b32d65fbbada3c"), name : ' nithun ', age : '20' } Prepared by Dr.M.Sivakumar 79

Deleting documents remove() method is used to remove a document from the collection . remove() method accepts two parameters. deletion criteria (Optional ) deletion criteria according to documents will be removed. justOne flag . (Optional) if set to true or 1, then remove only one document . Syntax > db.COLLECTION_NAME.remove (DELLETION_CRITTERIA) Prepared by Dr.M.Sivakumar 80

Deleting documents Example mydb > db.student.remove ({"name":"raja"}) { acknowledged: true, deletedCount : 1 } Remove Only One If there are multiple records and you want to delete only the first record, then set justOne parameter in remove() method . > db.COLLECTION_NAME.remove (DELETION_CRITERIA,1 ) Remove All Documents If you don't specify deletion criteria, then MongoDB will delete whole documents from the collection . > db.student.remove ({}) Prepared by Dr.M.Sivakumar 81

INTRODUCTION TO AJAX Ajax Client Server Architecture XML Http Request Object Call Back Methods Prepared by Dr.M.Sivakumar 82

AJAX AJAX ("Asynchronous JavaScript and XML ") is a set of web development techniques using many web technologies on the client side to create asynchronous web applications With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page Prepared by Dr.M.Sivakumar 83

What is AJAX? "Asynchronous JavaScript and XML" JavaScript + DHTML + CSS + XMLHttpRequest Use JavaScript asynchronously behind the scenes to load additional data (typically XML) without discarding and reloading the entire Web page. creating “better, faster, more responsive web applications” Prepared by Dr.M.Sivakumar 84

AJAX Applications Google Maps Google Suggest Gmail Yahoo Maps (new) Login Forms Auto-Complete Voting and Rating Updating With User Content Form Submission & Validation Chat Rooms And Instant Messaging External Widgets Slicker Uis Lightboxes instead of pop-ups Using AJAX With Flash Using AJAX with CAPTCHA Ajax Dropdown Menu Prepared by Dr.M.Sivakumar 85

How Ajax works You do something with an HTML form in your browser JavaScript on the HTML page sends an HTTP request to the server The server responds with a small amount of data, rather than a complete web page JavaScript uses this data to modify the page This is faster because less data is transmitted and because the browser has less work to do Prepared by Dr.M.Sivakumar 86

Underlying technologies JavaScript HTML CSS XML XML is often used for receiving data from the server Plain text can also be used, so XML is optional HTTP XMLHttpRequest Object Prepared by Dr.M.Sivakumar 87

Traditional vs AJAX Web Page Prepared by Dr.M.Sivakumar 88

Ajax Client Server Architecture Prepared by Dr.M.Sivakumar 89

Ajax Client Server Architecture Prepared by Dr.M.Sivakumar 90

Ajax Client Server Architecture Prepared by Dr.M.Sivakumar 91

XMLHttpRequest Object XMLHttpRequest ( XHR ) is an API in the form of an object whose methods transfer data between a web browser and a web server Prepared by Dr.M.Sivakumar 92

XMLHttpRequest Object Properties onreadystatechange readyState s tatus responseText responseXML response responseType responseURL statusText Timeout Methods open() send() setRequestHeader () getResponseHeader () getAllResponseHeader () abort() Prepared by Dr.M.Sivakumar 93

XMLHttpRequest Properties onreadystatechange Event handler (your code) that fires at each state change readyState 0 = uninitialized 1 = loading 2 = loaded 3 = interactive (some data has been returned) 4 = complete status HTTP Status returned from server: 200-299 = OK responseText String version of data returned from server responseXML XML DOM document of data returned statusText Status text returned from server Prepared by Dr.M.Sivakumar 94

XMLHttpRequest Methods open (“method”, “URL”, [ async , username, password]) Assigns destination URL, method, etc. send ( params ) Sends request including postable string or DOM object data abort () Terminates current request getAllResponseHeaders () Returns headers (name/value pairs) as a string getResponseHeader (“header”) Returns value of a given header setRequestHeader (“ label”,”value ”) Sets Request Headers before sending Prepared by Dr.M.Sivakumar 95

Steps for creating AJAX application C reate an XMLHttpRequest object Prepare the XMLHttpRequest object Send the XMLHttpRequest object Get the response from server Using response data Displaying the response Prepared by Dr.M.Sivakumar 96

1. create an XMLHttpRequest object T hree ways of doing this For most browsers, just do var request = new XMLHttpRequest (); For some versions of Internet Explorer, do var request = new ActiveXObject (" Microsoft.XMLHTTP "); For other versions of Internet Explorer, do var request = new ActiveXObject ("Msxml2.XMLHTTP"); Prepared by Dr.M.Sivakumar 97

2. Prepare the XMLHttpRequest object request .open ( method , URL , asynchronous ) The method is usually 'GET' or 'POST ' The URL is where you are sending the data If using a 'GET' , append the data to the URL If using a 'POST' , add the data in a later step If asynchronous is true , the browser does not wait for a response (this is what you usually want) request .open ( method , URL ) As above, with asynchronous defaulting to true Prepared by Dr.M.Sivakumar 98

3. Send the XMLHttpRequest object request .send (null); This is the version you use with a GET request request .send ( content ); This is the version you use with a POST request The content has the same syntax as the suffix to a GET request POST requests are used less frequently than GET requests For POST , you must set the content type: request.setRequestHeader ('Content- Type','application /x-www-form- urlencoded '); request.send ('var1=' + value1 + '&var2=' + value2 ); Prepared by Dr.M.Sivakumar 99

Method: GET or POST ? GET is simpler and faster than POST POST requests A cached file is not an option (update a file or database on the server) Sending a large amount of data to the server (POST has no size limitations) Sending user input (which can contain unknown characters), POST is more robust and secure than GET Syntax: xmlhttp.open (" GET","demo_get.asp",true ); xmlhttp.send (); xmlhttp.open (" POST","demo_post.asp",true ); xmlhttp.send (); Prepared by Dr.M.Sivakumar 100

4. Server Response responseText - get the response data as a string responseXML - get the response data as XML data Example: document.getElementById (" myDiv "). innerHTML = xmlhttp.responseText ; xmlDoc = xmlhttp.responseXML ; txt =""; x= xmlDoc.getElementsByTagName ("ARTIST"); for (i=0;i< x.length;i ++) { txt=txt + x[i]. childNodes [0]. nodeValue + "< br >"; } document.getElementById (" myDiv "). innerHTML =txt; Prepared by Dr.M.Sivakumar 101

AJAX Example <!DOCTYPE html> <html> <head> <script> function loadXMLDoc () { xmlhttp =new XMLHttpRequest (); xmlhttp.open (" GET","myfile.txt "); xmlhttp.send (); xmlhttp.onreadystatechange =function() { if( xmlhttp.readyState ==4 && xmlhttp.status ==200) { document.getElementById (" myDiv "). innerHTML = xmlhttp.responseText ; } } } </script> </head> <body> <h1><center>ABC TECHNOLOGIES LTD.</center></h1> <hr> <div id=" myDiv "><h2>Let AJAX change this text</h2></div> <button type="button" onclick =" loadXMLDoc ()">Change Content</button> </body> </html> Prepared by Dr.M.Sivakumar 102

AJAX Example for Reading XML <!DOCTYPE html> <html> <head> <script> function loadDoc () { xhttp = new XMLHttpRequest (); xhttp.onreadystatechange = function() { if ( this.readyState == 4 && this.status == 200) { var xmlDoc = xhttp.responseXML ; var table="<table border='1'>< tr >< th >Title</ th >< th >Artist</ th ></ tr >"; var x = xmlDoc.getElementsByTagName ("CD"); for ( i = 0; i < x.length ; i ++) { table += "< tr ><td>" + x[ i ]. getElementsByTagName ("TITLE")[0]. childNodes [0]. nodeValue + "</td><td>" + x[ i ]. getElementsByTagName ("ARTIST")[0]. childNodes [0]. nodeValue + "</td></ tr >"; } table+="</table>"; document.getElementById ("demo"). innerHTML = table; } }; xhttp.open ("GET", "cdcatalog.xml", true); xhttp.send (); } </script> </head> <body onload =" loadDoc ()"> <h1>Reading XML Data</h1> <div id="demo"></div> </body> </html> Prepared by Dr.M.Sivakumar 103

AJAX Example with Database <!DOCTYPE html> <html> <head> <script> function viewScore () { request=new XMLHttpRequest (); try { request.onreadystatechange =function() { if( request.readyState ==4) { document.getElementById ('score'). innerHTML = request.responseText ; } }; request.open ("GET","dbaccess2.php",true); request.send (); } catch(e) { alert("Unable to connect to server"); } } setInterval ( viewScore , 1000); </script> </head> <body> <h1> Retrive data from database using AJAX</h1> <h2><span id="score"></span></h2> </body> </html> Prepared by Dr.M.Sivakumar 104

dbaccess2.php <? php // Create connection $ conn = new mysqli ("localhost","abcd","1234", "test"); // Check connection if ($ conn -> connect_error ) { die("Connection failed:".$ conn -> connect_error ); } $ sql = "SELECT * FROM IPL"; $result = $ conn ->query($ sql ); if ($result-> num_rows > 0) { // output data of each row while($row = $result-> fetch_assoc ()) { echo "Score:".$row["score"]."/".$row["wicket"]." Overs :".$row["over"]; } } else { echo "0 results"; } $ conn ->close(); ?> Prepared by Dr.M.Sivakumar 105

Callback function A JavaScript Callback Function is a function that is passed as a parameter to another JavaScript function, and the callback function is run inside of the function it was passed into JavaScript Callback Functions can be used synchronously or asynchronously Prepared by Dr.M.Sivakumar 106

Call Back Method Prepared by Dr.M.Sivakumar 107

Callback F unction Syntax function functionOne (x) { alert(x); } function functionTwo (var1, callback ) { callback (var1); } functionTwo (2, functionOne ); Prepared by Dr.M.Sivakumar 108

<!DOCTYPE html> <html> <body> <div id="demo"> <h2>The XMLHttpRequest Object</h2> <button type="button" onclick =" loadDoc ('ajaxinfo.txt', myFunction )">Change Content</button> </div>  <script> function myFunction ( xhttp ) { document.getElementById ("demo"). innerHTML = xhttp.responseText ; } function loadDoc ( url,cFunction ) { var xhttp ; xhttp =new XMLHttpRequest (); xhttp.onreadystatechange = function() { if ( this.readyState == 4 && this.status == 200) { cFunction (this);//Call Back Function, executes myFunction ( xhttp ) } }; xhttp.open ("GET", url , true); xhttp.send (); } </script> </body> </html> Prepared by Dr.M.Sivakumar 109

AJAX- Enabled Application using JSON. <!DOCTYPE html> <html> <head> <title>AJAX Example</title> </head> <body> <h1>Fetch Data Using AJAX</h1> <button id=" fetchDataBtn ">Fetch Data</button> <div id=" dataContainer "></div> <script> document.getElementById (' fetchDataBtn '). addEventListener ('click', fetchData ); function fetchData () { var xhr = new XMLHttpRequest (); xhr.open ('GET', ' data.json ', true); // Assuming data.json contains the JSON data xhr.onload = function() { if ( xhr.status >= 200 && xhr.status < 300) { var responseData = JSON.parse ( xhr.responseText ); var dataContainer = document.getElementById (' dataContainer '); dataContainer.innerHTML = ''; // Clear previous content responseData.forEach (function(item) { var listItem = document.createElement ('p'); listItem.textContent = item.name + ' - ' + item.age ; dataContainer.appendChild ( listItem ); }); } else { console.error ('Request failed with status:', xhr.status ); } }; // Handle errors xhr.onerror = function() { console.error ('Request failed'); }; // Send the request xhr.send (); } </script> </body> </html> Prepared by Dr.M.Sivakumar 110

Jquery basic jQuery is a fast, small, and feature-rich JavaScript library It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers . jQuery is a lightweight, " write less, do more ", JavaScript library . Simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation Prepared by Dr.M.Sivakumar 111

J Query core jQuery Core, often simply referred to as jQuery jQuery Core provides a foundation upon which many plugins and frameworks are built, making it widely used in web development . It's designed to be lightweight and efficient, offering a concise and expressive API for common tasks, which helps developers write less code and achieve more with fewer lines of JavaScript. Prepared by Dr.M.Sivakumar 112

J Query core Features DOM manipulation Easily select elements from the DOM and manipulate their properties, attributes, and content. Event handling Simplify event binding and handling for interactive web applications. Ajax interactions Perform asynchronous HTTP requests and handle responses without reloading the entire page. Animation Create smooth animations and transitions with ease. Utilities Includes various utility functions for tasks like data manipulation, browser detection, and feature detection. Prepared by Dr.M.Sivakumar 113

jQuery Syntax <script> $( document).ready(function(){ $(“selector"). action (function (){ $(“selector").effect(); }); }); </script> Prepared by Dr.M.Sivakumar 114

jQuery Example <script> $(document).ready(function(){ $("button"). click (function(){ $("p").hide(); }); }); </script > Prepared by Dr.M.Sivakumar 115

jQuery Example <!DOCTYPE html> <html> <head> <title> jQuery Example</title> <script src ="jquery-3.7.1.js"> </script> <script> $(document).ready(function() { $("p"). css ("background-color", "cyan"); }); </script> </head> <body> <p>The first paragraph</p> <p>The second paragraph</p> <p>The third paragraph</p> </body> </html> Prepared by Dr.M.Sivakumar 116

jQuery Syntax $( selector ). action () A $ sign to define/access jQuery A ( selector ) to "query (or find)" HTML elements A jQuery action () to be performed on the element(s ) The Document Ready Event all jQuery methods in our examples, are inside a document ready event $( document).ready(function(){ // jQuery methods go here... }); This is to prevent any jQuery code from running before the document is finished loading (is ready). Prepared by Dr.M.Sivakumar 117

Example <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function (){ $("button"). click (function (){ $("p").hide(); }); }); </script > </head> <body> <h2>This is a heading</h2> <p>This is a paragraph-1</p> <p>This is a paragraph-2</p> < button>Click me to hide paragraphs</button> </ body> </html> Prepared by Dr.M.Sivakumar 118

Events jQuery provides several methods for handling events on HTML elements . Syntax $( selector).action () $ is a shorthand alias for the jQuery object . selector is used to select one or more HTML elements to perform an action on action() is a jQuery method that performs an action on the selected element(s). Prepared by Dr.M.Sivakumar 119

Events Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Prepared by Dr.M.Sivakumar 120

Events Example Example 1: Hide all paragraphs $(" p").hide (); Example 2: Add a class to all div elements with class "box" $(" div.box"). addClass ("highlight "); Example 3: Change the text of the element with ID " myElement " $("# myElement ").text("Hello, world!"); Prepared by Dr.M.Sivakumar 121

Events Example click () The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element . Example $("p"). click (function(){ $(this).hide(); }); Prepared by Dr.M.Sivakumar 122

Events Example dblclick () The dblclick () method attaches an event handler function to an HTML element . Example $("p"). dblclick (function(){ $(this).hide(); }); Prepared by Dr.M.Sivakumar 123

Events Example mouseenter () The mouseenter () method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element Example $("# p1"). mouseenter (function(){ alert("You entered p1!"); }); Prepared by Dr.M.Sivakumar 124

Events Example mouseleave () The mouseleave () method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element Example $("#p1"). mouseleave (function(){ alert("Bye! You now leave p1!"); }); Prepared by Dr.M.Sivakumar 125

Events Example hover() The hover() method takes two functions and is a combination of the mouseenter () and mouseleave () methods. Prepared by Dr.M.Sivakumar 126

Effects Hide and Show Toggle Slide Fade Animate Prepared by Dr.M.Sivakumar 127

Effects hide() and show() <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js "></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p"). hide() ; }); $("#show").click(function(){ $("p"). show() ; }); }); </script> </head> <body> < p>If you click on the "Hide" button, I will disappear.</p> < button id="hide">Hide</button> <button id="show">Show</button> </ body> </html> Prepared by Dr.M.Sivakumar 128

Effects – toggle() <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js "></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p"). toggle(); }); }); </script> </head> <body> < button>Toggle between hiding and showing the paragraphs</button> < p>This is a paragraph with little content.</p> < p>This is another small paragraph.</p> </ body > </ html> Prepared by Dr.M.Sivakumar 129

jQuery Fading Methods fadeIn () fadeOut () fadeToggle () fadeTo () Prepared by Dr.M.Sivakumar 130

fadeIn () <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1"). fadeIn (); $("#div2"). fadeIn ("slow"); $("#div3"). fadeIn (5000); }); }); </script> </head> <body> <p> fadeIn () Demo</p> <button>Click to fade in boxes</button>< br >< br > <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>< br > <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>< br > <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html> Prepared by Dr.M.Sivakumar 131

<!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></ script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1"). fadeOut (); $("#div2"). fadeOut ("slow"); $("#div3"). fadeOut (3000); }); }); </script> </head> <body> < p> fadeOut () Demo</p> <button>Click to fade in boxes</button>< br >< br > <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>< br > <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>< br > <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html> fadeOut () Prepared by Dr.M.Sivakumar 132

<!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></ script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> < p> fadeToggle () Demo</p> <button>Click to fade in boxes</button>< br >< br > <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>< br > <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>< br > <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html> fadeToggle () Prepared by Dr.M.Sivakumar 133

jQuery Animations The jQuery animate() method is used to create custom animations . Syntax: $( selector ).animate({ params } , speed,callback ); params - defines the CSS properties to be animated Speed -specifies the duration of the effect callback - a function to be executed after the animation completes Prepared by Dr.M.Sivakumar 134

jQuery Animations Example-1 <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '350px'}); }); }); </script> </head> <body> <button>Start Animation</button> <p> jQuery Animation Example</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> </html> Prepared by Dr.M.Sivakumar 135

jQuery Animations Example-2 Manipulate Multiple Properties <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px ', opacity : '0.5 ', height : '150px ', width : '150px' }); }); }); </script> </head> <body> < button>Start Animation</button> < p> jQuery Animation Example</p> < div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </ body> </html> Prepared by Dr.M.Sivakumar 136

jQuery Animations Example-3 Using Relative Values <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px ', height : '+=150px ', width : '+=150px' }); }); }); </script> </head> <body> < button>Start Animation</button> < p> jQuery Animation Example</p> < div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </ body> </html> Prepared by Dr.M.Sivakumar 137

jQuery Animations Example-4 Using Pre-defined Values <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); }); </script> </head> <body> < button>Start Animation</button> < p> jQuery Animation Example</p> < div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </ body> </html> Prepared by Dr.M.Sivakumar 138

jQuery Animations Example-5 Uses Queue Functionality <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); }); </script> </head> <body> < button>Start Animation</button> < p> jQuery Animation Example</p> < div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </ body> </html> Prepared by Dr.M.Sivakumar 139

jQuery Stop Animations stop() Method to stop an animation or effect before it is finished $( selector ).stop( stopAll,goToEnd ); The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards. The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false. $("#stop").click(function(){ $("#panel").stop(); }); Prepared by Dr.M.Sivakumar 140

jQuery - AJAX With jQuery AJAX methods, we can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post We can load the external data directly into the selected HTML elements of your web page! Prepared by Dr.M.Sivakumar 141

jQuery load() Method The load() method loads data from a server and puts the returned data into the selected element. Prepared by Dr.M.Sivakumar 142

jQuery - AJAX <!DOCTYPE html> <html> <head> <script src ="jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1"). load ("demo_test.txt"); }); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html> Prepared by Dr.M.Sivakumar 143

jQuery Traversing jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire . Traversing Up the DOM Tree Traversing Down the DOM Tree Traversing Sideways in The DOM Tree Filtering Prepared by Dr.M.Sivakumar 144

Traversing Up the DOM Tree Three useful jQuery methods for traversing up the DOM tree are: parent () - returns the direct parent element of the selected element parents () - returns all ancestor elements of the selected element, all the way up to the document's root element (<html>) parentsUntil () - returns all ancestor elements between two given arguments Prepared by Dr.M.Sivakumar 145

Traversing Down the DOM Tree Two useful jQuery methods for traversing down the DOM tree are: children () - returns all direct children of the selected element find () - returns descendant elements of the selected element, all the way down to the last descendant Prepared by Dr.M.Sivakumar 146

Traversing Sideways in The DOM Tree There are many useful jQuery methods for traversing sideways in the DOM tree: siblings() next() nextAll () nextUntil () prev () prevAll () prevUntil () Prepared by Dr.M.Sivakumar 147

jQuery Traversing - Filtering first () - returns the first element of the specified elements. last() - returns the last element of the specified elements eq () - returns an element with a specific index number of the selected elements filter() - Elements that do not match the criteria are removed from the selection, and those that match will be returned not() - returns all elements that do not match the criteria Prepared by Dr.M.Sivakumar 148

Jquery user interface Prepared by Dr.M.Sivakumar 149

U ser I nterface using jQuery Prepared by Dr.M.Sivakumar 150

JqueryUI Interactions Prepared by Dr.M.Sivakumar 151

JqueryUI Interactions – Example ( Draggable ) <!DOCTYPE html> <html> <head> <link href = " jquery-ui /jquery-ui.css" rel =" stylesheet "> <script src = "jquery-3.7.1.js"></script> <script src = " jquery-ui /jquery-ui.js"></script> <style> # draggable { width: 150px; height: 150px; padding: 0.5em; background:# eee ;} </style> <script> $(function() { $( "# draggable " ). draggable (); }); </script> </head> <body> <div id = " draggable " class = " ui -widget-content"> <p>Drag me !!!</p> </div> </body> </html> Prepared by Dr.M.Sivakumar 152

JqueryUI Widgets Prepared by Dr.M.Sivakumar 153

JqueryUI Widgets – Example (Menu) <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> jQuery UI Menu functionality</title> <link href = " jquery-ui /jquery-ui.css" rel =" stylesheet "> <script src = "jquery-3.7.1.js"></script> <script src = " jquery-ui /jquery-ui.js"></script> <style> . ui -menu { width: 200px; } </style>  <script> $(function() { $( "#menu-1" ).menu(); }); </script> </head> <body> < ul id = "menu-1"> < li ><a href = "#">ECE</a></ li > < li ><a href = "#">DSBS</a></ li > < li ><a href = "#">NWC</a> < ul > < li ><a href = "#">Cloud Computing</a></ li > < li ><a href = "#">IT</a></ li > < li ><a href = "#">Cyber Security</a></ li > </ ul > </ li > < li ><a href = "#">CTECH</a></ li > < li ><a href = "#">CINTEL</a></ li > </ ul > </ body> </html> Prepared by Dr.M.Sivakumar 154

JqueryUI Effects Prepared by Dr.M.Sivakumar 155

JqueryUI Effects– Example (effect) <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> jQuery UI effect Example</title> <link href = " jquery-ui /jquery-ui.css" rel =" stylesheet "> <script src = "jquery-3.7.1.js"></script> <script src = " jquery-ui /jquery-ui.js"></script> <style> #box-1 {height: 100px;width: 100px;background: #b9cd6d; } </style> <script> $(document).ready(function() { $('#box-1').click(function() { $( "#box-1" ).effect( "shake",{times:10,distance:100},3000,function(){ $( this ). css ( "background", "# cccccc " ); }); }); }); </script> </head> <body> <div id = "box-1">Click On Me</div> </body> </html> Prepared by Dr.M.Sivakumar 156

Free jQuery UI Plugins fullPage.js is yet another jQuery plugin for one page website that allows you to create vertical or horizontal scrolling web page with smooth animations and easing options. Fancy Tree is a plugin for jQuery and jQuery UI that allows to create dynamic tree view controls with support for persistence, keyboard, checkboxes, drag and drop, and lazy loading. Iris is an awesome jQuery plugin that makes use of jQuery UI and CSS3 gradients to embed a color picker with HiDPI display support within an input field. MultiDialog is a powerful and touch-enabled plugin that takes advantage of jQuery and jQuery UI Dialog Widget for creating full featured Modalbox / Lightbox on your web page. File Picker is a jQuery plugin for file upload control that allows you to style the default file input with Bootstrap, jQuery UI or custom CSS styles. ProBars is a jQuery & jQuery UI plugin to create animated progress bars as they're scrolled into the viewport. Rich Date Picker is a jQuery & jQuery UI based data picker that supports localization(i18n), date autocomplete , drag'n'drop to select months & years and mousewheel date scroller . Prepared by Dr.M.Sivakumar 157

Free jQuery UI Plugins Bootstrap - A Beautiful and powerful jQuery File Upload Plugin with multiple file selection, drag&drop support, progress bars and preview images. ParamQuery Grid - A jQuery Data Grid Plugin for displaying the data in an MS Excel like Data Grid with a lot of options. It also can display any data source format like HTML Table, Array, XML, JSON, etc. treetable is a lightweight jquery plugin that allows you to display a tree of data in an HTML table that's good for creating a directory structure or a nested list. containerPlus is a jQuery plugin for creating full featured overlayed windows, similar to the modal boxes. The overlayed window is fully skinnable and can be set to be draggable , resizable, collapsible and minimizable . Phantom Touch Slider is a jQuery plugin to create a responsive, touch-enabled and mobile-optimized image slider for your featured contents. File Tree is a small jQuery plugin that helps you build a nice clean, sortable and selectable file tree structure from a JSON object. ModalWindow helps you create a simple jQuery modal window with amazing jQuery UI based open/close effects. Prepared by Dr.M.Sivakumar 158

Free jQuery UI Plugins Pines Notify is a javascript Notification Plugin that allows you to add popup Notification windows on your website that allow the user to click elements behind the notice without even having to dismiss it. Gridly - A touch-enabled, jQuery based draggable grid layout plugin that allows your visitors to dynamically rearrange grid items through drag'n'drop or touch events. jQRangeSlider is a powerful range slider plugin buitl with jquery for selecting value ranges, supporting dates and more. jQRangeSlider has been tested with iOS and Android that supports all the touch devices. jQuery tagtacular is a Flexible and easy-to-use jQuery plugin that makes it easy to add, edit, remove tags with flexible customization options. acescroll is a jQuery UI widget that allows to create custom horizontal or vertical scrollbars as an alternative to the default browser scrollbars in jQuery . Input-O- Saurus Text is an input field enhancement plugin that makes use of jQuery and jQuery that allows a text input field to have multiple values. Autocomplete Multiselect is a plugin for jQuery & jQuery UI that turns a standard text input filed into a tokenized autocomplete box. Prepared by Dr.M.Sivakumar 159

Free jQuery UI Plugins jtable is a jQuery plugin that automatically creates HTML table and loads records from server using AJAX. Feedback_Me is a plugin for jQuery and jQuery UI that creates a customizable feedback widget on your web page that slides out from the left side of your web page when clicking the tab. Click context menu plugin - A jQuery UI and jQuery based plugin that displays a clean and animated context menu by right-clicking in an element or using open and close methods. Slider Pips is a jQuery plugin that extends the native jQuery UI slider component to add small "pips", "float", "labels" to the slider with plenty of custom API options. Collections is a jQuery plugin for creating a tiles grid gallery that allows you to re-sort & re-organize images using jQuery UI draggabble functionality. Scroll Slider is a jQuery & jQuery UI based gallery plugin which allows you scroll through a set of images with thumbnails by dragging the inner scrollbar. wPaint is a simple jQuery paint plugin for creating a drawing surface based on jQuery UI that allows you to import and export existing images. Prepared by Dr.M.Sivakumar 160

Free jQuery UI Plugins imgViewer is a simple and flexible jQuery plugin that allows to zoom in and out an image with mousewheel or drag it with mouse click. tagEditor is a simple yet powerful jQuery plugin that converts a text input into a tag editor with support for jQuery UI sortable & autocomplete , cursor navigation and callbacks . yadcf is yet another data table column filter plugin for jQuery that integrates with jQuery DataTables Plugin to make your data tables sortable , filterable and searchable. Vanderlee Coverflow is a jQuery and jQuery based plugin for creating Apple cover flow effects with optional mousewheel , CSS3 interpolation, keyboard interaction, transformations, touch swipe, reflections and more. jQuery Bootstrap Tokenfield is a pretty jQuery plugin that takes advantage of jQuery and Twitter's Bootstrap to manage tags / tokens in a input field. dAlerta is a minimal jQuery & jQuery UI plugin for creating draggable , resizable and themeable dialog boxes on your web page. To-Do list manager powered by jQuery and jQuery UI that supports drag and drop, datepicker and has the ability to save the list data to client side using Html5 localStorage . Prepared by Dr.M.Sivakumar 161

end Prepared by Dr.M.Sivakumar 162

18CSC311J WEB DESIGN AND DEVELOPMENT UNIT-2

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

18CSC311J WEB DESIGN AND DEVELOPMENT UNIT-2

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77