Advanced Web Technology

BCA- E1UA510C

Unit 3- JavaScript

Introduction:

All scripting languages are programming languages. The scripting language is basically a
language where instructions are written for a run time environment. They do not require the
compilation step and are rather interpreted. It brings new functions to applications and glue
complex system together. A scripting language is a programming language designed for
integrating and communicating with other programming languages.
There are many scripting languages some of them are discussed below:
• bash: It is a scripting language to work in the Linux interface. It is a lot easier to
use bash to create scripts than other programming languages. It describes the tools
to use and code in the command line and create useful reusable scripts and
conserve documentation for other people to work with.
• Node js: It is a framework to write network applications using JavaScript.
Corporate users of Node.js include IBM, LinkedIn, Microsoft, Netflix, PayPal,
Yahoo for real-time web applications.
• Ruby: There are a lot of reasons to learn Ruby programming language. Ruby’s
flexibility has allowed developers to create innovative software. It is a scripting
language which is great for web development.
• Python: It is easy, free and open source. It supports procedure-oriented
programming and object-oriented programming. Python is an interpreted
language with dynamic semantics and huge lines of code are scripted and is
currently the most hyped language among developers.
• Perl: A scripting language with innovative features to make it different and
popular. Found on all windows and Linux servers. It helps in text manipulation
tasks. High traffic websites that use Perl extensively include priceline.com,
IMDB.
Advantages of scripting languages:
• Easy learning: The user can learn to code in scripting languages quickly, not
much knowledge of web technology is required.
• Fast editing: It is highly efficient with the limited number of data structures and
variables to use.
• Interactivity: It helps in adding visualization interfaces and combinations in web
pages. Modern web pages demand the use of scripting languages. To create
enhanced web pages, fascinated visual description which includes background
and foreground colors and so on.
• Functionality: There are different libraries which are part of different scripting
languages. They help in creating new applications in web browsers and are
different from normal programming languages.
Application of Scripting Languages: Scripting languages are used in many areas:
• Scripting languages are used in web applications. It is used in server side as well
as client side. Server side scripting languages are: JavaScript, PHP, Perl etc. and
client side scripting languages are: JavaScript, AJAX, jQuery etc.
• Scripting languages are used in system administration. For example: Shell, Perl,
Python scripts etc.
 • It is used in Games application and Multimedia.
• It is used to create plugins and extensions for existing applications.

What is JavaScript:

JavaScript is a lightweight, cross-platform and interpreted compiled programming

language. It is also known as the scripting language for webpages. It is well-known for the
development of web pages, and many non-browser environments also use it. JavaScript is
a weakly typed language (dynamically typed). JavaScript can be used for Client-
side developments as well as Server-side developments. JavaScript is both an imperative
and declarative type of language. JavaScript contains a standard library of objects,
like Array, Date, and Math, and a core set of language elements like operators, control
structures, and statements.

• Client-side: It supplies objects to control a browser and its Document Object

Model (DOM).Like if client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation. Useful libraries for the client side
are AngularJS, ReactJS, VueJS, and so many others.
• Server-side: It supplies objects relevant to running JavaScript on a server. For if
the server-side extensions allow an application to communicate with a database,
and provide continuity of information from one invocation to another of the
application, or perform file manipulations on a server. The useful framework
which is the most famous these days is node.js.
• Imperative language – In this type of language we are mostly concerned about
how it is to be done. It simply controls the flow of computation. The procedural
programming approach, object, oriented approach comes under this as async await
we are thinking about what is to be done further after the async call.
• Declarative programming – In this type of language we are concerned about
how it is to be done, basically here logical computation requires. Her main goal is
to describe the desired result without direct dictation on how to get it as the arrow
function does.

Features of JavaScript
According to a recent survey conducted by Stack Overflow, JavaScript is the most popular
language on earth. With advances in browser technology and JavaScript having moved into
the server with Node.js and other frameworks, JavaScript is capable of so much more. Here
are a few things that we can do with JavaScript:
• JavaScript was created in the first place for DOM manipulation. Earlier websites
were mostly static, after JS was created dynamic Web sites were made.
• Functions in JS are objects. They may have properties and methods just like
other objects. They can be passed as arguments in other functions.
• Can handle date and time.
• Performs Form Validation although the forms are created using HTML.
• No compiler is needed.
Applications of JavaScript
• Web Development: Adding interactivity and behavior to static sites JavaScript
was invented to do this in 1995. By using AngularJS that can be achieved so
easily.
• Web Applications: With technology, browsers have improved to the extent that
a language was required to create robust web applications. When we explore a
map in Google Maps then we only need to click and drag the mouse. All detailed
view is just a click away, and this is possible only because of JavaScript. It uses
Application Programming Interfaces(APIs) that provide extra power to the code.
The Electron and React are helpful in this department.
• Server Applications: With the help of Node.js, JavaScript made its way from
client to server and Node.js is the most powerful on the server side.
• Games: Not only in websites, but JavaScript also helps in creating games for
leisure. The combination of JavaScript and HTML 5 makes JavaScript popular in
game development as well. It provides the EaseJS library which provides
solutions for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible devices and applications.
It provides a library PebbleJS which is used in smartwatch applications. This
framework works for applications that require the Internet for their functioning.
• Art: Artists and designers can create whatever they want using JavaScript to
draw on HTML 5 canvas, and make the sound more effective also can be
used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used in web
development by using machine learning.
• Mobile Applications: JavaScript can also be used to build an application for
non-web contexts. The features and uses of JavaScript make it a powerful tool for
creating mobile applications. This is a Framework for building web and mobile
apps using JavaScript. Using React Native, we can build mobile applications for
different operating systems. We do not require to write code for different systems.
Write once use it anywhere!
Limitations of JavaScript
• Security risks: JavaScript can be used to fetch data using AJAX or by
manipulating tags that load data such as <img>, <object>, <script>. These attacks
are called cross-site script attacks. They inject JS that is not part of the site into
the visitor’s browser thus fetching the details.
• Performance: JavaScript does not provide the same level of performance as
offered by many traditional languages as a complex program written in JavaScript
would be comparatively slow. But as JavaScript is used to perform simple tasks
in a browser, so performance is not considered a big restriction in its use.
• Complexity: To master a scripting language, programmers must have a
thorough knowledge of all the programming concepts, core language objects, and
client and server-side objects otherwise it would be difficult for them to write
advanced scripts using JavaScript.
• Weak error handling and type checking facilities: It is a weakly typed
language as there is no need to specify the data type of the variable. So wrong
type checking is not performed by compile.
Why JavaScript is known as a lightweight programming language ?
JavaScript is considered lightweight due to the fact that it has low CPU usage, is easy to
implement, and has a minimalist syntax. Minimalist syntax as in, has no data types.
Everything is treated here as an object. It is very easy to learn because of its syntax similar
to C++ and Java.
A lightweight language does not consume much of your CPU’s resources. It doesn’t put
excess strain on your CPU or RAM. JavaScript runs in the browser even though it has
complex paradigms and logic which means it uses fewer resources than other languages. For
example, NodeJs, a variation of JavaScript not only performs faster computations but also
uses fewer resources than its counterparts such as Dart or Java.
Additionally, when compared with other programming languages, it has fewer in-built
libraries or frameworks, contributing as another reason for it being lightweight. However,
this brings a drawback in that we need to incorporate external libraries and frameworks.
Is JavaScript Compiled or Interpreted or both ?
JavaScript is both compiled and interpreted. In the earlier versions of JavaScript, it used only
the interpreter that executed code line by line and shows the result immediately. But with
time the performance became an issue as interpretation is quite slow. Therefore, in the newer
versions of JS, probably after the V8, the JIT compiler was also incorporated to optimize the
execution and display the result more quickly. This JIT compiler generates a bytecode that is
relatively easier to code. This bytecode is a set of highly optimized instructions.
The V8 engine initially uses an interpreter, to interpret the code. On further executions, the
V8 engine finds patterns such as frequently executed functions, and frequently used variables,
and compiles them to improve performance.
JavaScript is best known for web page development but it is also used in a variety of non-
browser environments.

Uses of JavaScript:
JavaScript is a versatile programming language extensively used in web development. It
empowers interactive features like form validation, dynamic content updates, and user
interface enhancements. Furthermore, it’s employed in server-side scripting, mobile app
development, game development, and even desktop application development through
frameworks like Electron.
Let’s discuss the uses of JavaScript:

Web Development
Web development encompasses the creation of websites and web applications. It involves
front-end development for user interfaces and back-end development for server-side
functionality. HTML, CSS, and JavaScript are fundamental languages, while frameworks and
tools enhance efficiency and interactivity.
Web Applications
Web applications are software programs accessible via web browsers. They provide various
services and functionalities, including online shopping, social media, and productivity tools.
They rely on technologies like HTML, CSS, and JavaScript for user interaction and data
processing.
Front-End Development
JavaScript is essential for front-end web development. It enables the creation of interactive
user interfaces, form validation, and the manipulation of the Document Object Model (DOM)
to update the content and structure of web pages dynamically.
Server Applications
Server applications in JavaScript, using platforms like Node.js, leverage its event-driven,
non-blocking architecture. They manage network requests, perform data processing, and
enable real-time communication, making JavaScript a versatile choice for building scalable
and efficient server-side solutions.
Back-End Development
JavaScript is primarily a client-side language, it can also be used for server-side development
using platforms like Node.js. Node.js allows developers to build scalable and high-
performance server applications using JavaScript, making it possible to use the same
language for both front-end and back-end development.
Web Servers
Web servers in JavaScript, often implemented using Node.js, handle incoming HTTP
requests, process data, and generate responses for websites and applications. JavaScript’s
non-blocking I/O and event-driven nature enable high-performance, scalable web servers.
Games
JavaScript is used to create web-based games, from simple puzzles to complex 3D
adventures. Libraries like Phaser and Three.js facilitate game development, making it
accessible and interactive for users in web browsers.
Art
JavaScript is used in digital art creation and generative art. Artists use code to create
interactive, visual, and dynamic pieces, leveraging libraries like p5.js and Three.js to
manipulate graphics, animations, and user interactions.
Smartwatch Apps
JavaScript is used in smartwatch app development, particularly for platforms like Fitbit and
Garmin. Developers utilize JavaScript to create custom watch faces, widgets, and interactive
applications, enhancing the functionality and user experience of smartwatches.
Mobile Apps
JavaScript is employed in mobile app development through frameworks like React Native
and Apache Cordova. It enables cross-platform app creation for iOS and Android, using a
single codebase, making it efficient for building mobile applications.
Data Visualization
Data Visualization involves presenting data in graphical or pictorial formats to make complex
datasets easier to understand, analyze, and interpret, aiding in identifying patterns, trends,
and insights.
API Development
API Development involves designing, building, and maintaining Application Programming
Interfaces (APIs) that enable communication between different software applications or
services. APIs define the methods and protocols for data exchange, allowing seamless
integration and interaction between systems.

How to Link JavaScript File in HTML ?

JavaScript can be added to HTML file in two ways:
• Internal JS: We can add JavaScript directly to our HTML file by writing the
code inside the <script> tag. The <script> tag can either be placed inside the
<head> or the <body> tag according to the requirement.
• External JS: We can write JavaScript code in another files having an
extension.js and then link this file inside the <head> tag of the HTML file in which
we want to add this code.
Syntax:
<script>
// JavaScript Code
</script>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>
<!-- JavaScript code can be embedded inside
head section or body section -->
<script>
console.log("Welcome to GeeksforGeeks");
</script>
</body>
</html>

Output: The output will display on the console.

Welcome to GeeksforGeeks
JavaScript Variables:

Variables are used to store data in JavaScript. Variables are used to store reusable values.
The values of the variables are allocated using the assignment operator(“=”).

Examples of JavaScript Variables

JavaScript Assignment Operator

JavaScript assignment operator is equal (=) which assigns the value of the right-hand operand
to its left-hand operand.
y = "Geek"
JavaScript Identifiers
JavaScript variables must have unique names. These names are called Identifiers.

Basic rules to declare a variable in JavaScript:

• These are case-sensitive
• Can only begin with a letter, underscore(“_”) or “$” symbol
• It can contain letters, numbers, underscore, or “$” symbol
• A variable name cannot be a reserved keyword.

JavaScript is a dynamically typed language so the type of variables is decided at runtime.

Therefore there is no need to explicitly define the type of a variable. We can declare variables
in JavaScript in three ways:
• JavaScript var keyword
• JavaScript let keyword
• JavaScript const keyword
Note: In JavaScript, variables can be declared automatically.
Syntax
// Declaration using var
var geek = "Hello Geek"
// Declaration using let
let $ = "Welcome"
// Declaration using const
const _example = "Gfg"

All three keywords do the basic task of declaring a variable but with some differences
Initially, all the variables in JavaScript were written using the var keyword but in ES6 the
keywords let and const were introduced.

Example 1: In this example, we will declare variables using var.

var a = "Hello Geeks";
var b = 10;
var c = 12;
var d = b + c;

console.log(a);
console.log(b);
console.log(c);
console.log(d);
Output
Hello Geeks
10
12
22
Example 2: In this example, we will declare variables using let.
let a = "Hello learners"
let b = "joining";
let c = " 12";
let d = b + c;

console.log(a);
console.log(b);
console.log(c);
console.log(d);
Output
Hello learners
joining
12
joining 12
To learn more about JavaScript let check this article JavaScript Let
Example 3: In this example, we will declare the variable using the const keyword.
const a = "Hello learners"
console.log(a);

const b = 400;
console.log(b);

const c = "12";
console.log(c);
// Can not change a value for a constant
c = "new"
console.log(c)
When to Use var, let, or const
• We declare variables using const if the value should not be changed
• We use const if the type of the variables should not be changed such as working
with Arrays and objects
• We should use let if we want mutable value or we can not use const
• We use var only if we support old browser.

Variable Scope in JavaScript

Variable scope is the context of the program in which it can be accessed. In programming, a
variable is a named storage location that holds data or a value. Think of it as a container that
you can use to store and manipulate information in your code. Variables allow you to work
with data in a flexible way, as the values they hold can change during the execution of a
program.
Table of Content
• Variable Scope
• Block scope
• Function scope
• Local scope
• Global scope

Block scope
Earlier JavaScript had only Global Scope and Function Scope. let and const are the two new
important keywords that were introduced by the ES6 and these two keywords provide Block
Scope in JavaScript. ECMAScript (ES6) 2015 was the second major revision to JavaScript.
Variables that are declared inside a { } block cannot be accessed from outside the block.

Example: Below is the example of let keyword.

{
let x = 2;
}
x cannot be used here

Example: Below is the example of var keyword.

{
var x = 2;
}
x can be used here

Variables declared with the var keyword cannot have block scope and they can be declared
inside a { } block and can be accessed from outside the block.

Example: Below is an example of Block scope.

function foo() {
if (true) {
var x = '1'; // Exist in function scope
const y = '2'; // Exist in block scope
let z = '3'; // Exist in block scope
}
console.log(x);
console.log(y);
console.log(z);
}foo();

Output (In Console):

1
y is not defined

Function scope
JavaScript has function scope and each function creates a new scope. Variables defined inside
a function are not accessible from outside the function and variables declared
with var, let and const are quite similar when declared inside a function.

Example: Below is an example of var keyword.

function myFunction() {
var firstName = "Krishna"; // Function Scope
}

Example: Below is an example of let keyword.

function myFunction() {
 let firstName = "Krishna"; // Function Scope
}

Example: Below is an example of const keyword.

function myFunction() {
const firstName = "Krishna"; // Function Scope
}

Local scope
Variables declared inside a function become local to the function. Local variables are created
when a function starts and deleted when the function is executed. Local variables have
Function Scope which means that they can only be accessed from within the function.

Example:
// This part of code cannot use firstName
function myFunction() {
let firstName = "Krishna";
// This part of code can use firstName
}
This part of code cannot use firstName
Example: Below is an example of Local scope.

function foo() {
var x = '1';
console.log('inside function: ', x);
}

foo(); // Inside function: 1

console.log(x); // Error: x is not defined

Output (In Console):

inside function: 1
x is not defined

Global scope
Variables declared Globally (outside of any function) have Global Scope and Global
variables can be accessed from anywhere in a program. Similar to function scope variables
declared with var,let and const are quite similar when declared outside a block.
let keyword:
let x = 2; // Global scope

const keyword:
const x = 2; // Global scope

var keyword:
var x = 2; // Global scope
Example: Below is an example of Global scope.
// Global scope
var x = '1'
const y = '2'
let z = '3'

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

function getNo() {
console.log(x); // x is accessible here
console.log(y); // y is accessible here
console.log(z); // z is accessible here
}
getNo();

Convert a number to a string in JavaScript

Converting numbers to strings in JavaScript is a common task that can be achieved using
various methods. Understanding these methods is essential for data manipulation and
presentation in web development. This guide will cover the different ways to convert
numbers to strings in JavaScript, including using the toString(), String(), and template
literals. Mastering these techniques ensures efficient and accurate data handling in your
projects.
In JavaScript, you can change any number into string format using the following methods:

Method 1: Using toString() Method

This method belongs to the Number.Prototype object. It takes an integer or a floating-point
number and converts it into a string type.
Syntax:
num.toString();

Example: This example uses the toString() method to convert a number into a string.

let a = 20;
console.log(a.toString());
console.log((50).toString());
console.log((60).toString());
console.log((7).toString(2)); // (7 in base 2, or binary)
Output
20
50
60
111

Method 2: Using the String() function

This method accepts an integer or floating-point number as a parameter and converts it into
string type.
Syntax:
String(object);
Example: This example uses the String() function to convert a number into a string.

let a = 30;
console.log(String(a));
console.log(String(52));
console.log(String(35.64));

Output
30
52
35.64
Note: It does not do any base conversations as .toString() does.

Method 3: Concatenating an Empty String

This is arguably one of the easiest ways to convert any integer or floating-point number into
a string.
Syntax:
let variable_name =' ' + value;
Example: In this example, we will concatenate a number into a string and it gets converted
to a string.
let a = '' + 50;
console.log(a);
Output
50

Method 4: Using Template Strings

Injecting a number inside a String is also a valid way of parsing an Integer data type or Float
data type.
Syntax:
let variable_name = '${value}';
Example: This example uses template strings to convert a number to a string.
let num = 50;
let flt = 50.205;
let string = `${num}`;
let floatString = `${flt}`;
console.log(string);
console.log(floatString);
Output
50
50.205

Method 5: Using toLocaleString() Method

The toLocaleString() method converts a number into a string, using a local language format.
Example:
let number = 92;
let numberString = number.toLocaleString();
console.log(numberString);
Output
92
Method 6: Using Lodash _.toString() Method
In this approach, we are using Lodash _.toString() method that convert the given value into the
string only.
Example: This example shows the implementation of the above-explained approach.
// Requiring the lodash library
const _ = require("lodash");

// Use of _.toString() method

console.log(_.toString(-0));
Output:
'-0'
Converting numbers to strings in JavaScript is straightforward with methods like toString(),
String(), and template literals. Each method offers unique benefits depending on your specific
use case. By mastering these techniques, you can enhance your JavaScript skills and ensure
precise data manipulation in your web development projects. Start implementing these
methods to improve your coding efficiency and accuracy.