Introduction To JavaScript

Introduction to JavaScript
• JavaScript is a cross-platform, object-oriented scripting language used to make

webpages interactive(e.g., having complex animations, clickable buttons, popup
menus, etc ). It is also known as the scripting language for webpages.
• It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical
web browsers. With JavaScript, users can build modern web applications to
interact directly without reloading the page every time.
• JavaScript can be used for Client-Side development as well as Server-side
developments. JavaScript is both 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 elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation.
• Server-Side: It supplies objects relevant to running JavaScript on a Server. Like 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.
• Imperative Language: In this type of language we are mostly concern about how
it is to be done. It simply control the flow of computation. The procedural
programming approach, object, oriented approach comes under this like async
await we are thinking what it is to be done further after async call.
• Declarative programming – In this type of language we are concern about how it
is to be done , basically here logical computation require . Here main goal is to
describe the desired result without direct dictation on how to get it like arrow
function do .
JavaScript can be added to your 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 other file 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.
History of JavaScript
• It was created in 1995 by Brendan Eich while he was an engineer at Netscape. It
was originally going to be named LiveScript but was renamed.
• Unlike most programming languages, the JavaScript language has no concept of
input or output. It is designed to run as a scripting language in a host environment,
and it is up to the host environment to provide mechanisms for communicating
with the outside world. The most common host environment is the browser.
• Syntax of JavaScript:
Features of JavaScript
• Scripting Language: JavaScript is a lightweight scripting language made for
client-side execution on the browser. Since it is not designed as a general-purpose
language and is specially engineered for web applications, the set of libraries is
also geared primarily towards web applications.
• Interpreter Based: JavaScript is an interpreted language instead of a compiled
one. In that sense, it is closer to languages like Ruby and Python. The browser
interprets JavaScript’s source code, line by line and runs it. In contrast, a compiled
language needs to be compiled into a byte-code code executable. Java and C++
are examples of compiled languages.
• Event Handling: An event is an action or an occurrence in a system that
communicates about said occurrence so that you can respond to it somehow. For
example, a user clicks on a button, and the system tells you to respond to the
button click event with an action, say an information box. JavaScript enables you
to handle events and even generate custom events.
• Light Weight: JavaScript isn’t a compiled language, so it doesn’t get converted
to byte-code beforehand. However, it does follow a paradigm called Just-In-Time
(JIT) Compilation. Meaning it gets converted to bytecode just as it’s about to run.
This enables JS to be lightweight. Even less powerful devices are capable of
running JavaScript.
• Case Sensitive: JavaScript is highly case sensitive. All keywords, variables,
functions names and other identifiers can and must only follow a consistent
capitalisation of letters. E.g.:
• var hitCounter = 5
var hitcounter = 5
• Here variables hitCounter and hitcounter are both different variables because of
the difference in the case. Also, all keywords such as “var” are case sensitive.
• Control Statements: JavaScript is equipped with control statements like if-else-
if, switch-case, and loops like for, while, and do-while loops. These control
statements make it a powerful programming language, enabling its user to write
complex logic.
• Client-side validations: JavaScript is heavily used for easing the interactions
between users and web applications. Towards this, validation plays a significant
role. Validations can guide users to fill forms correctly with valid data and prevent
spam submissions.
• Platform Independent: JavaScript is platform-independent; it can run on any
computer irrespective of the operating systems used. JavaScript is built into
Netscape 2.0 and greater. Since the JavaScript interpreter is part of Netscape, it
runs on platforms that support Netscape, which means that a piece of Javascript
code will give the same output with the same setup on all platforms.
• Dynamic Typing: JavaScript supports dynamic typing which means types of the
variable are defined based on the stored value. For Example, if you declare a
variable x then you can store either string or a Number type value or an array or
an object. This is known as dynamic typing.
• Functional Style: This implies that JavaScript uses a functional approach, even
objects are created from the constructor functions and each constructor function
represents a unique object-type. Also, functions in JavaScript can be used as
objects and can be passed to other functions too.
JavaScript Variables
• Variables are containers for storing data. There are some rules while declaring a
JavaScript variable(also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore(_), or dollar($) sign.
2. After first letter we can use digits (0 to 9), for example value 1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.
Var keyword: The var statement declares a variable. Variables are containers for
storing information. Creating a variable in JavaScript is called “declaring” a
variable.
Syntax: var x;
Example:
In this example, x, y and z are variables, declared with the var keyword.
• Example: Output :
Let Keyword: It allows you to declare variables that are limited to the scope of a
block statement, or expression on which it is used.
Example: Output:
• Const Keyword: ES6 introduced the const keyword, which is used to define a
new variable in JavaScript. Generally, the var keyword is used to declare a
JavaScript variable. Const is another keyword to declare a variable when you do
not change the value of that variable for the whole program.
• The difference is just that var is for normal whose value can be changes, whereas
a variable value declared using const keyword cannot be changed.
• Example: Output:
JavaScript Expressions
• An expression is a valid unit of code that resolves to a value. There are two types
of expressions: those that have side effects (such as assigning values) and those
that purely evaluate.
• The Expression 3+4 is an example of the second type. This expression uses the +
operator to add 3 and 4 together and produces a value 7.
• There are five primary categories of expression in JavaScript:
Array in JavaScript
• In JavaScript, the array is a single variable that is used to store different elements.
It is often used when we want to store a list of elements and access them by a
single variable. Unlike most languages where the array is a reference to the
multiple variables, in JavaScript array is a single variable that stores multiple
elements.
• JavaScript array is an object that represents a collection of similar type of
elements.
• There are 3 ways to construct array in JavaScript
• By array literal
• By creating instance of Array directly (using new keyword)
• By using an Array constructor (using new keyword)
Array in JavaScript
1) JavaScript array literal
The syntax of creating array using array literal is given below:
Example: Output:
Array in JavaScript
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
• Here, new keyword is used to create instance of array.

• Let's see the example of creating array directly.
• Example:
Array in JavaScript
3) JavaScript array constructor (new keyword): Here, you need to create
instance of array by passing arguments in constructor so that we don't have to
provide value explicitly.
Example: Output:
Control Structures in JavaScript
• The JavaScript if-else statement is used to execute the code whether condition is
true or false. There are three forms of if statement in JavaScript.
• If Statement
• If else statement
• if else if statement
1. JavaScript If statement: It evaluates the content only if expression is true. The
signature of JavaScript if statement is given below.
Control structures in JavaScript
• Flowchart of IF Statement Example:
Output:
•
•
Control structures in JavaScript
2. IF-Else Statement: It evaluates the content whether condition is true of false.
The syntax of JavaScript if-else statement is given below.
Flowchart:
Example: Output:
3. JavaScript If...else if statement: It evaluates the content only if expression is true
from several expressions. The signature of JavaScript if else if statement is given
below.
•
• Switch Statement: The JavaScript switch statement is used to execute one code
from multiple expressions. It is just like else if statement that we have learned in
previous page. But it is convenient than if..else..if because it can be used with
numbers, characters etc.
• The signature of JavaScript switch statement is given below.
•
Looping Statements
• The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.
• There are four types of loops in JavaScript.
• for loop
• while loop
• do-while loop
1) JavaScript For loop : The JavaScript for loop iterates the elements for the
fixed number of times. It should be used if number of iteration is known. The syntax
of for loop is given below.
Looping Statements
• Example:
Output:
Looping Statements
2. While Loop: The JavaScript while loop iterates the elements for the infinite
number of times. It should be used if number of iteration is not known. The syntax
of while loop is given below.
Example: Output:
Looping Statements
• 3. Do-While Loop: The JavaScript do while loop iterates the elements for the
infinite number of times like while loop. But, code is executed at least once
whether condition is true or false. The syntax of do while loop is given below.
Example: Output:
Document Object Model
• The document Object represents the whole html document. When html document
is loaded in the browser , it becomes a document object. It is the root element that
represents the html document. It has properties and methods. By the help of
document object, we can add dynamic content to our web page.
• The Document Object Model(DOM) is a programming interface for
HTML(Hyper Text Markup Language) and XML(Extensible Markup language)
documents. It defines the logical structure of documents and the way a document
is accessed and manipulated.
• DOM is a way to represent the webpage in a structured hierarchical way so that it
will become easier for programmers and users to glide through the document.
With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or
Elements of HTML using commands or methods provided by the Document
object. Using DOM, the JavaScript gets access to HTML as well as CSS of the
web page and can also add behavior to the HTML elements. So basically
Document Object Model is an API that represents and interacts with HTML or
XML documents.
• Why DOM is required?
HTML is used to structure the web pages and JavaScript is used to add behavior to
our web pages. When an HTML file is loaded into the browser, the JavaScript can
not understand the HTML document directly . So, a corresponding document is
created(DOM). DOM is basically the representation of the same HTML document
but in a different format with the use of objects. JavaScript interprets DOM easily
i.e. javascript can not understand the tags(<h1>H</h1>) in HTML document but
can n understand object h1 in DOM. Now, JavaScript can access each of the objects
(h1, p, etc) by using different functions.
• Structure of DOM: DOM can be thought of as a Tree or Forest(more than one
tree). The term structure model is sometimes used to describe the tree-like
representation of a document. Each branch of the tree ends in a node, and each
node contains objects Event listeners can be added to nodes and triggered on an
occurrence of a given event.
• One important property of DOM structure models is structural isomorphism: if
any two DOM implementations are used to create a representation of the same
document, they will create the same structure model, with precisely the same
objects and relationships.
• Properties of DOM: Let’s see the properties of the document object that can be
accesses and modified by the document object.
• Representation of the DOM
• Window Object: Window Object is object of the browser which is always at top of the hierarchy.
It is like an API that is used to set and access all the properties and methods of the browser. It is
automatically created by the browser.
• Document object: When an HTML document is loaded into a window, it becomes a document
object. The ‘document’ object has various properties that refer to other objects which allow access
to and modification of the content of the web page. If there is a need to access any element in an
HTML page, we always start with accessing the ‘document’ object. Document object is property
of window object.
• Form Object: It is represented by form tags.
• Link Object: It is represented by link tags.
• Anchor Object: It is represented by a href tags.
• Form Control Elements:: Form can have many control elements such as text fields, buttons,
radio buttons, checkboxes, etc.

Introduction To JavaScript

Uploaded by

Introduction To JavaScript

Uploaded by

Introduction to JavaScript

• JavaScript is a cross-platform, object-oriented scripting language used to make

• Here, new keyword is used to create instance of array.

You might also like