Basic Idea of Javascript, jQuery and Angular JS
Introduction:
| Javascript | jQuery | Angular JS |
| Javascript is a programming language of HTML which run in a client browser | jQuery is a lightweight, “write less, do more”, JavaScript Library that simplifies JavaScript programming. It make your javascript code shorter,faster and cross-browser. | AngularJS is a JavaScript framework that was designed in a structural way. |
| Developers can work freely | Developers can work freely | Some rules are to follow the developer. |
| It was introduced to the market in 1995. It is used to create dynamic websites and web applications. | Since 2006, jQuery has been manipulating the DOM (Document Object Model) with Javascript. | It was introduced to the market in 2009. AngularJS version 1.0 was released in 2012. AngularJS gave developers a powerful methodology to create a single page application (SPAs). It extends HTML with new attribute |
Features:
Features that are available in the javascript and jQuery:
- CSS manipulation — EX.- JS- document.getElementById(“p1”).style.background=“red” or JQ- $(“p”).css(“background-color”,”red”);
- HTML/DOM manipulation — EX.- document.getElementById(“demo”).innerHTML = “Hello World!”;
- Event Handling— EX.-
<html>
<head>
<script type=”text/javascript”>
function sayHello() {
alert(“Hello World”)
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form><input type=”button” onclick=”sayHello()” value=”Say Hello” /> </form>
</body>
</html>
- Ajax/ JSONP—EX—
<?php $myJSON = ‘{ “name”:”John”, “age”:30, “city”:”New York” }’; echo “myFunc(“.$myJSON.“);”; ?>
<!DOCTYPE html>
<html>
<body>
<h2>Click the Button.</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button onclick=”clickButton()”>Click me!</button>
<p id=”demo”></p>
<script>
function clickButton() {
var s = document.createElement(“script”);
s.src = “demo_jsonp.php”;
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById(“demo”).innerHTML = myObj.name;
}
</script></body></html>
- Effects and animations—Ex—
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left: ‘250px’});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<div style=”background:#98bf21; height:100px; width:100px; position:absolute;”></div>
</body></html>
- Cross browser compatibility
- Lightweight
-
- Angular directives (extension to HTML) :- Angular Js extends HTML with new atrributes called directives.
- Dependency injection:- Dependency Injection is a software design pattern in which an object is given its dependencies, rather than the object creating them itself.
- Support MVC:– It follows Model View Controller architecture.
- Two-way data binding:– Two way data binding in AngularJS is the synchronization between the model and the view. When data of the model is updated then this updation reflects to the view and vice versa.
- RESTful API:- RestFull API is a application programming interface that allows HTTP requests to GET, POST, DELETE and PUT data.
- Form validation:– AngularJS offers client-side form validation.
Function of Javascript, jQuery and Angular JS:
Javascript and jQuery is suited for DOM manipulation while AngularJS is most suited for web application development.When We will use Javascript, jQuery and Angular JS:
JavaScript and jQuery is used when we are looking for a lightweight and powerful dom manipulation and when we are looking for a SPA website then we will use Angular JS.Expressions of Javascript, jQuery and Angular JS:
JavaScript and jQuery expressions support loops, conditionals and exceptions but Angular js expressions do not. On the other hand, Angular JS expressions support filters, whereas JavaScript expressions do not support filters. >Pros and cons for using jQuery:
| Pros | Cons |
| Eliminates a lot of cross-browser javascript issues. | Each new version is not compatible with earlier versions. |
| Remove complicated Javascript operations. | Functionality may be limited. |
| Can easily add Ajax functionality to app. |
Pros and cons for using AngularJS:
| Pros | Cons |
| Easy to learn | If the end-user disables JavaScript on their browsers then they only see the basic HTML page. |
| Perfect use for Single Page Application | Applications written in AngularJS are not secure. |
| Code less, get more functionality | |
| Code reusability | |
| Easy to unit test |
