Introduction to JavaScript

JavaScript
Megha V
Asst. Professor
Dept. of IT
Kannur University
14-10-2022 1
meghav@kannuruniv.ac.in

Introduction to JavaScript
• JavaScript is a lightweight, cross-platform, and interpreted compiled
programming language which is also known as the scripting language for
webpages.
• It is well-known for the development of web pages, many non-browser
environments also use it.
• A scripting language is a programming language that employs a high-level
construct to interpret and execute one command at a time.
• In general, scripting languages are easier to learn and faster to code in than
more structured and compiled languages such as C and C++.
14-10-2022 2

Introduction to JavaScript
• JavaScript can be used for Client-side developments as well
as Server-side developments.
Client-side Programming :
• It is the program that runs on the client machine (browser) and
deals with the user interface/display and any other processing
that can happen on client machine like reading/writing cookies.
1) Interact with temporary storage
2) Make interactive web pages
3) Interact with local storage
4) Sending request for data to server
5) Send request to server
6) work as an interface between server and user
14-10-2022 3

• The Programming languages for client-side programming are :
1) JavaScript
2) VBScript
3) HTML
4) CSS
5) AJAX
14-10-2022 4

Server-side Programming :
• It is the program that runs on server dealing with the generation
of content of web page.
1) Querying the database
2) Operations over databases
3) Access/Write a file on server.
4) Interact with other servers.
5) Structure web applications.
6) Process user input.
• For example if user input is a text in search box, run a search
algorithm on data stored on server and send the results.
14-10-2022 5

• Examples :
The Programming languages for server-side programming are :
1) PHP
2) C++
3) Java and JSP
4) Python
5) Ruby on Rails
14-10-2022 6

• 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.
14-10-2022 7

Client-side:
• It supplies objects to control a browser and its Document Object Model
(DOM).
• When a web page is loaded, the browser creates
a Document Object Model of the page.
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
14-10-2022 8

• 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.
14-10-2022 meghav@kannuruniv.ac.in 9

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.
• The useful framework which is the most famous these days
is node.js.
14-10-2022 10

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.
14-10-2022 11

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.
14-10-2022 12

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.
14-10-2022 13

Syntax:
<script>
// JavaScript Code
</script>
14-10-2022 14

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>

<script>
console.log("Welcome to GeeksforGeeks");
</script>
</body>
</html>
14-10-2022 15

External JS
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
• External scripts are practical when the same code is used in many
different web pages.
• JavaScript files have the file extension .js.
• To use an external script, put the name of the script file in the src
(source) attribute of a <script> tag:
<script src="myScript.js"></script>
14-10-2022 meghav@kannuruniv.ac.in 16

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.
14-10-2022 17

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:
14-10-2022 18

• 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 another object.
• 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.
14-10-2022 19

Variables and Datatypes in JavaScript
Datatypes in JavaScript
• There are majorly two types of languages.
• First, one is Statically typed language where each variable
and expression type is already known at compile time.
• Once a variable is declared to be of a certain data type, it
cannot hold values of other data types.
• Example: C, C++, Java.
14-10-2022 20

// Java(Statically typed)
int x = 5 // variable x is of type int and it will not
store any other type.
string y = 'abc' // type string and will only accept
string values
Other, Dynamically typed languages: These languages can
receive different data types over time. For example- Ruby, Python,
JavaScript, etc.
// Javascript(Dynamically typed)
var x = 5; // can store an integer
var name = 'string'; // can also store a string.
14-10-2022 21

• JavaScript is a dynamically typed (also called loosely typed)
scripting language.
• That is, in JavaScript variables can receive different data types
over time.
• Datatypes are basically typed data that can be used and
manipulated in a program.
14-10-2022 22

• The latest ECMAScript(ES6)-European Computer Manufacturers Association
Script standard defines following data types:
• Out of which six data types are Primitive(predefined).
•Numbers: Represent both integer and floating-point numbers. Example: 5,
6.5, 7 etc.
•String: A string is a sequence of characters. In JavaScript, strings can be
enclosed within the single or double quotes. Example: “Hello GeeksforGeeks”
etc.
•Boolean: Represent a logical entity and can have two values: true or false.
•Null: This type has only one value : null.
•Undefined: A variable that has not been assigned a value is undefined.
14-10-2022 23

• Symbol: Unlike other primitive data types, it does not have any
literal form.
• It is a built-in object whose constructor returns a symbol-that is
unique.
• bigint: The bigint type represents the whole numbers that are
larger than 253-1.
• To form a bigint literal number, you append the letter n at the
end of the number.
• Object: It is the most important data-type and forms the building
blocks for modern JavaScript.
14-10-2022 24

Variables in JavaScript:
• Variables in JavaScript are containers that hold reusable data. It
is the basic unit of storage in a program.
• The value stored in a variable can be changed during program
execution.
• A variable is only a name given to a memory location, all the
operations done on the variable effects that memory location.
• In JavaScript, all the variables must be declared before they
can be used.
14-10-2022 25

• Before ES2015, JavaScript variables were solely declared using the var
keyword followed by the name of the variable and semi-colon.
• Below is the syntax to create variables in JavaScript:
var var_name;
var x;
• The var_name is the name of the variable which should be defined by
the user and should be unique.
• These types of names are also known as identifiers.
14-10-2022 26

• The rules for creating an identifier in JavaScript are, the name of
the identifier should not be any pre-defined word(known as
keywords), the first character must be a letter, an underscore (_),
or a dollar sign ($).
• Subsequent characters may be any letter or digit or an
underscore or dollar sign.
• Notice in the above code sample, we didn’t assign any
values to the variables. We are only saying they exist. If you
were to look at the value of each variable in the above code
sample, it would be undefined.
• We can initialize the variables either at the time of
declaration or also later when we want to use them.
14-10-2022 27

Below are some examples of declaring and
initializing variables in JavaScript:
// declaring single variable
var name;
// declaring multiple variables
var name, title, num;
// initializing variables
var name = "Harsh";
name = “Anu";
14-10-2022 28

JavaScript is also known as untyped language.
This means, that once a variable is created in JavaScript
using the keyword var, we can store any type of value in this
variable supported by JavaScript. Below is the example for
this:
// creating variable to store a number
var num = 5;
// store string in the variable num
num = "GeeksforGeeks";
14-10-2022 29

• The above example executes well without any error in JavaScr
unlike other programming languages.
• Variables in JavaScript can also evaluate simple mathematical
expressions and assume their value.
// storing a mathematical expression
var x = 5 + 10 + 1;
console.log(x); // 16
14-10-2022 30

• After ES2015, we now have two new variable containers: let and const.
• The variable type Let shares lots of similarities with var but unlike var, it
has scope constraints.
• To know more about them visit let vs var.
• Let’s make use of the let variable:
// let variable
let x; // undefined
let name = 'Mukul’;
// can also declare multiple values
let a=1,b=2,c=3;
// assignment
let a = 3;
a = 4; // works same as var
14-10-2022 31

Const is another variable type assigned to data whose value
and will not change throughout the script.
// const variable
const name = 'Mukul’;
name = 'Mayank'; // will give Assignment to constant error.
14-10-2022 32

Variable Scope in Javascript
• Scope of a variable is the part of the program from where the
variable may directly be accessible.
In JavaScript, there are two types of scopes:
1.Global Scope – Scope outside the outermost function attached
to Window.
2.Local Scope – Inside the function being executed.
14-10-2022 33

JavaScript
let globalVar = "This is a global variable";
function fun() {
let localVar = "This is a local variable";
console.log(globalVar);
console.log(localVar);
}
fun();
14-10-2022 34

Output
14-10-2022 35

• When we execute the function fun(), the output shows that both
global, and local variables, are accessible inside the function as
we are able to console.log them.
• This shows that inside the function we have access to both
global variables (declared outside the function) and local
variables (declared inside the function).
• Let’s move the console.log statements outside the function and
put them just after calling the function.
14-10-2022 36

JavaScript
let globalVar = "This is a global variable";
function fun() {
let localVar = "This is a local variable";
}
fun();
console.log(globalVar);
console.log(localVar);
14-10-2022 37

Output
14-10-2022 38

• We are still able to see the value of the global variable, but for
the local variable, console.log throws an error.
• This is because now the console.log statements are present in
global scope where they have access to global variables but
cannot access the local variables.
• Also, any variable defined in a function with the same name as
a global variable takes precedence over the global variable,
shadowing it.
14-10-2022 39

Reference
1. Jeffrey C. Jackson, Web Technologies: A Computer Science Perspective, Prentice Hall
2. David Flanagan, JavaScript: The Definitive Guide, 6th Edn. O'Reilly Media.2011
3. Bob Breedlove, et al, Web Programming Unleashed, Sams Net Publishing, 1stEdn
4. Steven Holzner, PHP: The Complete Reference, McGraw Hill Professional, 2008
5. Steve Suehring, Tim Converse, Joyce Park, PHP6 and MY SQL Bible, John Wiley & Sons,2009
6. Pedro Teixeira, Instant Node.js Starter, Packt Publishing Ltd., 2013
7. Anthony T. HoldenerIII, Ajax: The Definitive Guide, O’Reilly Media, 2008
8. Nirav Mehta, Choosing an Open Source CMS: Beginner's Guide Packt Publishing Ltd, 2009
9. James Snell, Programming Web Services with SOAP, O'Reilly 2002
10. Jacob Lett , Bootstrap Reference Guide, Bootstrap Creative 2018
11. Maximilian Schwarzmüller, Progressive Web Apps (PWA) - The Complete Guide, Packt Publishing
2018
12. Mahesh Panhale, Beginning Hybrid Mobile Application Development, Apress 2016
14-10-2022 40

Introduction to JavaScript

More Related Content

What's hot (20)

Similar to Introduction to JavaScript (20)

More from Megha V (20)

Recently uploaded (20)

Introduction to JavaScript