INTRODUCTION TO JAVASCRIPT
JavaScript is the most popular programming language which is used to
create interactive webpages
JavaScript is the client-server side scripting language which is used to
create dynamic web pages
JavaScript was invented by Brendan Eich in 1995, and became an ECMA
standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official
name of the language.
Current version of JS is ES6 (introduced after 2015)
Characteristic of JavaScript
Client-side scripting language: The code is readable analyzable and
executable by browser itself
Interpreted Language: JavaScript is an interpreted language, meaning it
is executed line by line at runtime.
Dynamically types Language: JavaScript is dynamically-typed, which
means you don't need to specify the data type of a variable when
declaring it. The type is determined at runtime.
Weakly Typed Language: Semicolon is not mandatory at all the time
Synchronous in nature: It will execute line by line; we can make it as
asynchronous using promise and async await
Advantages of JS
Easy to learn and implement
Reduces server load
Efficient performance
Regular updates
Platform independent
It has more frameworks and libraries
Environmental Setup
We can run JavaScript code in two environments.
o Browser
o [Link]
Browser understand the js through JS engine and every browser consists
of JavaScript engine which helps to run JS code
Browser JS engine
Chrome V8
Mozilla Firefox Spider monkey
Microsoft Edge Chakra
Safari JavaScript Core Webkit
How to include JS into HTML
We can insert JS code to HTML in two ways
[Link] JS: In the HTML file we use <script></script> tags and we
will write JS code
[Link] JS : We will create new file with .js extension and we can
link this to html file using <script src=’[Link]’></script>
Output Methods
[Link](“hello”)
It will print the output in console window
[Link](“Hello”)
It will print the output in user interface
[Link](“Hello”)
It will print the output in user interface
Tokens
Building blocks of every programming language
1. Keywords: Predefined words whose task is already predefined
Ex: for, if, while, var, let, const
2. Identifiers: The name given for the variables, arrays, objects etc.
3. Literals: The values written by developer
Variable in JS
Variable is a named memory allocation to store the data
In JavaScript We have 3 keywords to declare variables (var, let, const)
Syntax To declare variable:
var/let/const identifier;
var/let/const identifier=value;
EX: let age = 27
Here let is keyword, age is identifier and 27 is literal
Difference between var, let and const
var let const
Declaration var a let b const c = 40
Initialization a = 30 b = 45 NP
Re-initialization a = 700 b = 90 NP
Re-declaration var a; NP NP
Scope global script script
Hoisting
Hoisting is JavaScript's default behavior of moving all declarations to the
top of the current scope (to the top of the current script or the current
function).
In JavaScript, a variable can be declared after it has been used.
Example:
[Link](myVar); // Outputs: undefined
var myVar = 42;
The let and const Keywords
Variables defined with let and const are hoisted to the top of the block, but
not initialized.
Meaning: The block of code is aware of the variable, but it cannot be used until it has
been declared.
Using a let variable before it is declared will result in a Reference Error.
The variable is in a "temporal dead zone" from the start of the block until it is
declared:
A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible
until the moment the computer completely initializes it with a value.
Datatypes in JS
Datatype defines the type of data to be stored in a particular memory
allocation
JavaScript has 2 types of Datatypes
[Link]
string: We can declare the string in js in 3 ways
Example: const emp = ‘suman’,
var str =” hello”
let str = `Hello everyone`
number: Integer and floating-point numbers
Ex: let num = 80
var salary = 90008.67
boolean: True or false
Ex: var isDeveloper = true
bigint: large amount of data
o to create bigInt variable suffix number with ‘n’
Ex: var hike = 8798798n
undefined: It represents the value of an uninitialized values
Ex: let project;
null: It is empty variable and for future use
Ex: let company = null
symbol: It will create function
o Ex: let work = symbol
[Link] primitive
A function
An object
An array
The typeOf() operator
This is used to check the which type of data is stored in the
variable
Ex: typeOf(age)
JavaScript Template Strings
Also known as String Templates, Template Strings and Template
Literals
Template Strings use back-ticks (``) rather than the quotes ("")
to define a string
Ex: let text = `Hello World!`;
Template Strings allow both single and double quotes inside a
string:
o let text = `He's often called "Johnny"`;
Template Strings allow multiline strings:
o let text =
`The quick
brown fox
jumps over
the lazy dog`;
Template String provide an easy way to interpolate variables
and expressions into strings.
The method is called string interpolation.
The syntax is: ${var_name}
Variable Substitutions
Template Strings allow variables in strings:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}! `;
let res = ` ${50+67} `;
Operators in JS
Predefined symbols used to perform particular task
Types of operators
• Arithmetic Operators: +, -, *, /, %, ++, --
• Assignment Operators: +=, -=, *=, /=, %=, =
• Comparison Operators: >, <, !=, >=,<=,==,===
• Logical Operators: &&, ||, !
• Ternary Operators:
The ternary operator is a simplified conditional operator like if / else.
Syntax: condition? <expression if true>: <expression if false>
Conditional Statements
• Conditional statements are used to perform different actions
based on different conditions.
• Use if to specify a block of code to be executed, if a specified
condition is true
• Use else to specify a block of code to be executed, if the same
condition is false
• Use else if to specify a new condition to test, if the first
condition is false
• Use switch to specify many alternative blocks of code to be
executed
Loops in JS
Loops can execute a block of code a number of times
while loop : Repeats a statement or group of statements while a
given condition is true. It tests the condition before executing the
loop body
Do while loop : It is more like a while statement, except that it tests
the condition at the end of the loop body.
For loop : Executes a sequence of statements multiple times and
abbreviates the code that manages the loop variable