JavaScript vs JQuery vs Angular

In this blog we will see what is the difference between writing code in JavaScript, JQuery and Angular.

We will write code in each language for the same example.

The example shown below has two text boxes namely firstname and lastname.

When you will start typing the first name in the text box it will concurrently fill the full name also, similarly on typing the last name it will concurrently concatenate it to the text given in the full name, as shown below.

qqqq
When you enter first name
qqqqq
When you enter last name

Using Javascript 

<!DOCTYPE html>
<html>
<head>
<script>
function annotate() {
var fn = document.getElementById("fname").value;
var ln = document.getElementById("lname").value;
document.getElementById("fullname").innerHTML= fn + " " + ln;
}
</script>
</head>
<body style="background-color:lightgrey">
FirstName: <input type="text" id="fname" onkeyup="annotate()">
LastName: <input type="text" id="lname" onkeyup="annotate()">
Fullname: <span id="fullname"></span>
</body>
</html>

Using JQuery 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var fn = $('#fname').val();
var ln = $('#lname').val();
$('#fullname').html(fn + " " + ln);
});
});
</script>
</head>
<body style="background-color:lightgrey">
FirstName: <input type="text" id="fname">
LastName: <input type="text" id="lname">
Fullname: <span id="fullname"></span>
</body>
</html>

Check Fiddle

Using Angular 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="mycontroller">
First Name: <input type="text" ng-model="fname">
Last Name: <input type="text" ng-model="lname">
Full Name: {{fname + " " + lname}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.fname = "";
$scope.lname = "";
});
</script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s