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.

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>