JAVASCRIPT COMPLETE STUDY NOTES
Comprehensive Guide for Unit-III and Unit-IV Syllabus
UNIT-III: Core JavaScript & Foundations
Introduction to JavaScript
JavaScript is a high-level, interpreted, dynamic, and multi-paradigm programming language. It is primarily
known as the scripting language for web pages, allowing client-side script to interact with the user and create
dynamic, interactive features. Today, it is also widely used for server-side development (via [Link]).
Different Approaches to Place JavaScript Code in an HTML File
There are three primary ways to include JavaScript inside an HTML document:
1. Inline JavaScript: Written directly inside HTML elements using event attributes.
<button onclick="alert('Hello!')">Click Me</button>
2. Internal (Embedded) JavaScript: Written inside a <script> tag located within the <head> or
<body> sections.
<script>
[Link]("Internal JS executed");
</script>
3. External JavaScript: Written in a separate file with a .js extension and linked using the src attribute
of the script tag. This approach improves code readability and maintainability.
<script src="[Link]"></script>
JS Identifiers and Reserved Words
Identifiers: Names given to variables, functions, and loops. In JavaScript, identifiers must begin with a letter,
an underscore ( _ ), or a dollar sign ( $ ). Subsequent characters can also be digits. JavaScript is strictly
case-sensitive ( myVar and myvar are different).
Reserved Words: Keywords that are part of the JavaScript language syntax and cannot be used as
identifiers (e.g., break , case , catch , class , const , if , while , return ).
1
Optional Semicolons
JavaScript uses an explicit statement-termination sequence called Automatic Semicolon Insertion (ASI).
While semicolons are technically optional at the end of statements if they are on separate lines, it is best
practice to include them to prevent unexpected architectural bugs during file minification.
Comments and Literals
Comments: Used to explain code and make it more readable.
• Single-line comment: Starts with //
• Multi-line comment: Enclosed between /* and */
Literals: A fixed data value directly represented in the source code. Examples include:
• Number Literal: 34 , 3.14
• String/Text Literal: "Hello World" , 'JS'
• Boolean Literal: true , false
• Object Literal: {name: "John", age: 25}
• Array Literal: [1, 2, 3]
Types, Values, and Variables
JavaScript values are broadly categorized into Primitive Types and Object Types.
• Numbers: Represented as double-precision 64-bit floating-point format values. Includes special values
like Infinity and NaN (Not a Number).
• Text (Strings): Immutable sequences of 16-bit values representing Unicode characters.
• Booleans: Represent logical entities with two possible values: true and false .
• Null and Undefined:
◦ null is an assigned value indicating the intentional absence of any object value.
◦ undefined means a variable has been declared but has not yet been assigned a value.
Type Conversions
JavaScript is a loosely typed language, meaning it performs automatic conversion when needed:
• Implicit Conversion (Coercion): Handled automatically by JS (e.g., "5" + 2 results in "52" ).
• Explicit Conversion: Manually handled by developer using global functions like Number() , String() ,
or Boolean() .
2
Variable Declaration and Assignment: const, let, and var
Feature var let const
Scope Function Scope Block Scope {} Block Scope {}
Hoisted (initialized as Hoisted (Uninitialized - Hoisted (Uninitialized -
Hoisting
undefined ) Temporal Dead Zone) Temporal Dead Zone)
Reassignment Allowed Allowed Not Allowed
Expressions and Operators
• Arithmetic Operators: + , - , * , / , % , ** (Exponentiation), ++ , -- .
• Relational / Comparison Operators: > , < , >= , <= , == (loose equality), === (strict equality
checks both value and type).
• Logical Operators: && (AND), || (OR), ! (NOT).
• Assignment Operators: = , += , -= , *= , /= .
• Evaluation Expressions: Combinations of variables, literals, and operators that evaluate to a single
value.
Conditionals: if, else, and switch
Used to perform different actions based on different logical conditions.
// if-else statement
if (score >= 50) {
[Link]("Pass");
} else {
[Link]("Fail");
}
// switch statement
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
default: [Link]("Invalid Day");
}
Loops: while and for
Used to run a block of code repeatedly as long as a specified condition is met.
// for loop
for (let i = 0; i < 5; i++) {
[Link](i);
3
}
// while loop
let i = 0;
while (i < 5) {
[Link](i);
i++;
}
Loop Controls: Break, Continue, Return, and Yield
• break : Terminates the loop instantly and jumps execution to the statement immediately following the
loop.
• continue : Skips the current iteration of the loop and moves to the next evaluation iteration.
• return : Exits a function entirely and specifies the value to be returned to the function caller.
• yield : Used inside generator functions to pause execution and yield a value back to an iterator wrapper.
Functions: Defining, Invoking, Arguments, and Parameters
A function is a block of organized, reusable code designed to perform a targeted task.
• Defining: Can be done via function declaration or expression.
function greet(name) { return "Hello " + name; } // "name" is a parameter
• Invoking: Calling the function to execute its internals.
greet("Alice"); // "Alice" is an argument
• Functions as Values: In JavaScript, functions are first-class citizens. They can be assigned to variables,
passed as arguments to other functions, or returned from functions.
UNIT-IV: Advanced JavaScript - Objects, Arrays & DOM
Objects
An object is a standalone entity containing a collection of properties, where a property is an association
between a name (or key) and a value.
• Creating Objects: Can be created using Object Literals, the new Object() syntax, or constructors.
let person = { name: "John", age: 30 };
• Querying and Setting Properties: Handled via dot notation or bracket notation.
4
[Link]([Link]); // Querying
[Link] = 31; // Setting
• Deleting and Testing Properties:
◦ The delete operator removes a property from an object: delete [Link];
◦ Testing checking existence can be performed using the in operator or hasOwnProperty() method.
• Serializing Objects: Converting an object into a string format for transmission or storage. Done via
[Link](obj) and restored using [Link](str) .
Arrays
An array is an ordered list of values, where each value is called an element, specified by an index.
• Creating, Reading, and Writing Arrays:
let colors = ["Red", "Green", "Blue"]; // Create
let firstColor = colors[0]; // Read ("Red")
colors[1] = "Yellow"; // Write / Modify
• Array Length: The length property returns the total number of element slots tracked by the array
container (e.g., [Link] ).
• Iterating Arrays: Done using traditional loops or iterative prototypes like forEach() , map() , or
for...of loops.
• Strings as Arrays: In JavaScript, strings behave like read-only array indexing structures, meaning you
can access individual characters via str[0] , though elements cannot be directly mutated.
The Document Object Model (DOM)
The DOM is a programming interface for web documents. It represents the structure of an HTML or XML
document as a tree structure of objects, where each node is an object representing a part of the document
(elements, attributes, text nodes).
JavaScript utilizes the DOM API to perform programmatic changes:
• [Link](id) - Selects an element by its ID.
• [Link](selector) - Selects the first element matching a CSS selector.
• [Link] - Changes or reads the internal HTML markup inside an element.
Program Input and Output
• Input: Can be retrieved from the user via web forms, prompt boxes ( prompt() ), or interactive DOM
event capture structures.
5
• Output: Rendered using [Link]() , written directly to the document using [Link]() ,
injected via DOM element manipulation, or displayed using alert boxes ( alert() ).
Browser Events and Event Handling
Events are actions or occurrences that happen in the browser system (such as clicking a button, hovering a
mouse, pressing a key, or finishing a page load). JavaScript captures these events using Event Listeners.
let btn = [Link]("button");
[Link]("click", function() {
alert("Button was clicked!");
});
Common event types include: click , mouseover , keydown , submit , and load .