SRB Computer Institute
JavaScript
Short Notes
Introduction:
JavaScript is a scripting language used to make web pages interactive and dynamic. It works with HTML and
CSS to create modern websites.
Uses of JavaScript:
Form Validation
Calculations
Animations
Interactive web pages
Web applications
History of JavaScript:
Created By Brendan Eich in 1995.
Developed at Netscape Communications.
Originally named Mocha, then LiveScript, and finally JavaScript.
Standardized as ECMAScript (Es).
Way of Adding JavaScript in HTML:
1. Internal JavaScript – We can add Javascript code in HTML file inside the head or body section. JavaScript code
written inside <script> … </script> tag.
<!DOCTYPE html>
<html>
<head>
<title> Internal JavaScript </title>
</head>
<body>
<script>
[Link]("Hello World");
</script>
</body>
</html>
2. External JavaScript – In this method we create a separate javascript file which has .js extension and contain only
javascript code. After creating that file we will link external javascript file in HTML document with the help of <script>
tag using src attribute.
<head>
<title> External JavaScript </title>
<script src = “[Link]”> </script>
</head>
3. Inline JavaScript – Using this method we can add javascript directly inside HTML tag.
<body>
<input type = “button” value = “Click Here” onclick = “alert(‘Hello World’)”>
</body>
Output Statements in JavaScript:
Output statements are used to display data to the user on browser or console window.
1. [Link]() – Displays output on the web page.
2. [Link]() – Displays output in the browser console.
3. alert() – Display output in a popup message box.
SRB COMPUTER INSTITUTE Page |1 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
Variables in JavaScript
A variable is a named container used to store data values. The value stored in a variable can be used and
changed during program execution.
Syntax:
Keyword variable_name = value;
Rules for Naming Variables:
1. Variable names can contain letters, digits, _ (underscore) and $ (dollar sign).
2. Variable names cannot start with a digit.
3. Variable names are case-sensitive (name and Name are different).
4. Reserved keywords cannot be used as variable name.
5. White space characters (space, tab, enter) are not allowed.
Types of Variables
JavaScript provides three ways to declare variables:
1. var – Old method of declaring variables.
a. Can be re-declared.
b. Can be updated
c. Function Scoped.
2. let – Modern way, value can be changed.
a. Cannot be re-declared in the same scope.
b. Can be updated.
c. Block scoped.
3. const – Used for constant values.
a. Cannot be re-declared.
b. Cannot be updated.
c. Must be initialized at declaration.
Data Types in JavaScript
A Data Type specifies the type of value that a variable can store. JavaScript is dynamically typed language,
which means a variable can hold different types of data at different times.
Types of Data Types
JavaScript data types are divided into two categories:
1. Primitive Data Types
2. Non-Primitive Data Types
Primitive Data Types
Primitive data types store a single value.
1. String – Collection of characters, which is enclosed within single or double quotes.
Eg:
let x = “JavaScript”
let y = “20”
2. Number – Integer or decimal number (float)
Eg:
let x = 10; // integer
let y = 15.75 // float
3. Boolean – True or False
4. Undefined – Variable declared but not assigned a value.
5. Null – Represents an empty value
SRB COMPUTER INSTITUTE Page |2 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
Non-Primitive Data Types
1. Object – Collection of key-value pairs.
2. Array – Collection of multiple value in a single variable.
3. Function – Reusable block of code.
Typeof Operator:
The typeof operator is used to check the data type of a variable.
Eg:
let x = 12;
[Link](typeof x);
output:
number
Type Casting in JavaScript:
Type casting (type conversion) is the process of converting one data type into another data type.
Types of Type Casting:
1. Implicit Type Casting (Automatic Conversion)
2. Explicit Type Casting (Manual Conversion)
Implicit Type Casting:
JavaScript automatically converts one data type into another when required.
Eg:
let x = 10;
let y = 3;
let z = x/y;
[Link](z);
output:
3.333333333 // float
Explicit Type Casting:
The programmer manually converts one data type into another.
Common Conversion Functions:
1. Number() – Converts value to number..
2. String() – Converts value to string.
3. Boolean() – Converts value to Boolean.
4. parseInt() – Converts value to integer.
5. parseFloat() – Converts value to float.
Eg:
let x = 10;
let y = 3;
let z = x/y;
let a = parseInt(z)
[Link](z);
output:
3 // integer
prompt() in JavaScript
SRB COMPUTER INSTITUTE Page |3 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
The prompt() method is used to take input from the user through a dialog box.
It display a message and a text field where the user can enter a value.
Note: prompt() always takes a value in the form of string, so if we need another type of data we have to use
explicit type conversion.
Eg:
let name = prompt(“Enter Your Name”)
[Link](“Hello “,name);
Operators in JavaScript
Operators are special symbols used to perform operations on variables and values.
Types of Operators in JavaScript
1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. Logical Operators
5. Conditional (Ternary) Operator
6. String Operators
7. Type Operators
1. Arithmetic Operators - Used to perform mathematical calculations.
Operator Name Example Result
+ Addition 10 + 5 15
- Subtraction 10 - 5 5
* Multiplication 10 * 5 50
/ Division 10 / 5 2
% Modulus (Remainder) 10 % 3 1
** Exponentiation 2 ** 3 8
++ Increment a++ Increase by 1
-- Decrement a-- Decrease by 1
2. Assignment Operators - Used to assign values to variables.
Operator Example Equivalent To
= x = 10 x = 10
+= x += 5 x=x+5
-= x -= 5 x=x-5
*= x *= 5 x=x*5
/= x /= 5 x=x/5
%= x %= 5 x=x%5
**= x **= 2 x = x ** 2
3. Comparison (Relational) Operators - Used to compare two values. The result is always true or false.
SRB COMPUTER INSTITUTE Page |4 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
Operator Meaning Example
== Equal To 5 == "5" → true
=== Strict Equal To (Identical) 5 === "5" → false
!= Not Equal To 5 != 3 → true
!== Strict Not Equal To (Not Identical 5 !== "5" → true
> Greater Than 10 > 5 → true
< Less Than 10 < 5 → false
>= Greater Than or Equal To 10 >= 10 → true
<= Less Than or Equal To 5 <= 10 → true
4. Logical Operators - Used to combine multiple conditions.
Operator Name Description
&& Logical AND True if both conditions are true
|| Logical OR True if at least one condition is true
! Logical NOT Reverses the result
5. Conditional (Ternary) Operator - A shorthand (alternative) form of if...else.
Syntax
condition ? expression1 : expression2;
Example
let age = 18;
let result = (age >= 18) ? "Adult" : "Minor";
[Link](result);
Output:
Adult
6. String Operators - Used to join strings together.
Operator Description Example
+ Concatenation "Hello" + " World"
+= Append String str += " JS"
7. Type Operators - Used to determine the type of a variable.
Operator Description
typeof Returns the data type of a variable
instanceof Checks whether an object belongs to a specific type
SRB COMPUTER INSTITUTE Page |5 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
Conditional Statements in JavaScript
Conditional Statements are used to make decisions in a program. They execute different blocks of code based
on whether a condition is true or false.
Types of Conditional Statements
1. if Statement
2. if...else Statement
3. if…else if…else statement
4. Nested if
5. switch Statement
6. Ternary Operator (?:)
1. if Statement - The if statement executes a block of 3. if…else if…else - Used when multiple conditions
code only when the condition is true. need to be checked.
Syntax Syntax
if(condition) if(condition1)
{ {
// code to execute // code
} }
Example else if(condition2)
let age = 20; {
if(age >= 18) // code
{ }
[Link]("Eligible for Voting"); else
} {
Output // code
Eligible for Voting }
Example
2. if...else Statement - The if...else statement executes let marks = 75;
one block if the condition is true and another block if if(marks >= 80)
it is false. {
Syntax [Link]("Grade A");
if(condition) }
{
// true block
else if(marks >= 60)
} {
else
[Link]("Grade B");
{
// false block }
} else
Example {
let age = 16;
[Link]("Grade C");
if(age >= 18)
{ }
[Link]("Eligible for Voting"); Output
}
else
Grade B
{
[Link]("Not Eligible for Voting");
}
Output
Not Eligible for Voting
SRB COMPUTER INSTITUTE Page |6 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
4. Nested if Statement - An if statement inside
another if statement is called a Nested if.
Example Iterative Statements (Loops) in JavaScript
let age = 20; Iterative Statements or Loops are used to
let citizen = true; execute a block of code repeatedly until a specified
condition becomes false.
if(age >= 18) Types of Loops in JavaScript
{ 1. for Loop
if(citizen) 2. while Loop
{ 3. do...while Loop
[Link]("Eligible for Voting"); 4. Nested Loop
} 1. for Loop - The for loop is used when the number of
} iterations is known.
Output Syntax
Eligible for Voting for(initialization; condition; increment/decrement)
{
5. switch Statement - The switch statement is used to // code
select one block of code from multiple options. }
Syntax Example
switch(expression) for(let i = 1; i <= 5; i++)
{
{
case value1:
// code [Link](i + "<br>");
break; }
Output
case value2:
// code 1
break; 2
default:
3
// code 4
}
5
Example
let day = 3; 2. while Loop - The while loop executes as long as the
switch(day) condition is true.
{ Syntax
case 1:
while(condition)
[Link]("Monday");
{
break;
// Block of code
case 2: // increment / decrement
[Link]("Tuesday"); }
break; Example
let i = 1;
case 3: while(i <= 5)
[Link]("Wednesday");
{
break;
[Link](i + "<br>");
default: i++;
[Link]("Invalid Day"); }
} Output
Output 1
Wednesday 2
3
SRB COMPUTER INSTITUTE Page |7 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
4 Example
5
let i = 10;
do
3. do...while Loop - The do...while loop executes the {
loop body at least one time, even if the condition is [Link](i + "<br>");
false. i++;
Syntax }
do while(i <= 5);
{ Output
// code 10
}
while(condition);
Functions in JavaScript
A Function is a block of code designed to perform a specific task. Functions help avoid code repetition and
make programs easier to manage.
Advantages of Functions
Reusability of code
Reduces code duplication
Makes programs modular
Improves readability and maintenance
Types of Functions:
1. Built-in / Pre-defined / Library functions – These functions are stored in JavaScript library. We only have to call
function when we have to use these functions.
Eg:
alert(), prompt(), parseInt(), write() etc.
2. User defined functions – It is created by the user according to his need. We can create user defined function with
the help of ‘function’ keyword followed by a function name with parenthesis ().
Syntax:
function function_name()
{
Block of code;
}
Types of user define function:
1. Function without parameters – A function that does not accept any input value and always return the same result.
Syntax:
function function_name()
{
Local variables;
Statements;
}
Eg:
function add()
{
let x = 10;
SRB COMPUTER INSTITUTE Page |8 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
let y = 20;
let z = x+y;
[Link](z);
}
2. Function with parameters – Parameters are variables used to receive values when a function is called.
Syntax:
function function_name(parameter1,parameter2,parameterN)
{
Statements;
}
Eg:
function add(x,y)
{
let z = x+y;
[Link](z);
}
3. Function with return statement – return statement sends a value back to the function caller.
Eg.:
Function square(n):
{
let sq = n*n;
return sq;
}
// Calling a function
let x = square(6);
[Link](x);
JavaScript Events:
A JavaScript event is an action that happens in the browser such as a button click, mouse movement, key
press or page loading. JavaScript can respond to these events and perform specific actions.
List of Events:
1. Input Events:
a. onchange – When an element has been changed.
b. onblur – When an user leaves and input field.
c. onfocus – When an input field get focused.
d. onselect – When a text of input field get selected.
e. onsubmit – Click on submit button.
f. onreset – Click on reset button.
g. onkeypress / onkeydown – When an user is pressing or holding a key.
h. onkeyup – When user release a key.
2. Mouse Events:
a. onmouseover – When user moves the mouse over an HTML element.
b. onmouseout – When user moves the mouse away from an HTML element.
c. onmousescroll – When user scroll the mouse wheel.
3. Click Events:
a. onclick – When user clicks on an element or button.
b. ondblclick – When user double clicks on an element or button.
SRB COMPUTER INSTITUTE Page |9 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN
SRB Computer Institute
JavaScript
Short Notes
4. Load Events:
a. onload – When the page or image has been loaded.
b. onunload – When the page or image completely unloaded.
c. onresized – When the browser window is resized.
SRB COMPUTER INSTITUTE P a g e | 10 Prepared By:
KARELI, PRAYAGRAJ. MOHD FARHAN