JavaScript
1. Introduction to JavaScript
JavaScript is a scripting language designed to add interactivity, dynamic behavior, and logic
to HTML pages.
It is a lightweight programming language, executed directly by the browser without prior
compilation (interpreted language).
JavaScript code consists of executable statements and is usually embedded inside HTML.
It is free to use — no license is required.
2. What JavaScript Can Do
2.1 Dynamic Content
Allows writing dynamic text into HTML pages, e.g.:
o [Link]("<h1>" + name + "</h1>");
2.2 Event Handling
JavaScript can respond to events such as:
o Page load
o Button click
o Mouse movement
o Form submission
2.3 DOM Manipulation
Can read, modify, and update HTML elements.
Enables dynamic UI changes without reloading the page.
2.4 Form Validation
Validates user input before sending data to the server.
Improves performance by reducing unnecessary server calls.
2.5 Browser Detection
Detects the visitor’s browser and allows browser-specific behavior.
2.6 Cookies
Can create, read, and store cookies for user preferences and session data.
3. Placing JavaScript in HTML
3.1 Script in <head>
Used when scripts should load first and be available for event-based execution.
Typically used for:
o Function definitions
o Scripts used multiple times
3.2 Script in <body>
Used when scripts should execute while the page loads.
Commonly used for:
o Content generation
o Inline dynamic behavior
3.3 Scripts in Both Sections
HTML pages can contain multiple scripts in both <head> and <body>.
4. External JavaScript
Useful when the same script is used across multiple pages.
Saved with .js extension.
Must not include <script> tags inside external files.
Included using:
<script src="[Link]"></script>
5. Variables in JavaScript
5.1 Definition
A variable is a container for storing data values.
Values can change during execution.
5.2 Naming Rules
Case-sensitive
Must begin with a letter or underscore
Example: strname and STRNAME are different
5.3 Lifetime & Scope
Local Variables:
o Declared inside a function
o Accessible only within that function
o Destroyed when the function finishes executing
Global Variables:
o Declared outside all functions
o Accessible from any script on the page
o Lifetime lasts until the page is closed
6. Data Types & Number Conversion
6.1 parseInt()
Used to convert a string to an integer.
Syntax
parseInt(string, radix);
Radix Behavior
"0x" prefix → hexadecimal (16)
"0" prefix → octal (8) (deprecated)
Otherwise → decimal (10)
Notes
Parses only the first integer in the string.
Ignores leading/trailing spaces.
Invalid conversion → returns NaN.
7. Case Sensitivity
JavaScript is strictly case sensitive.
Examples:
o myFunction ≠ myfunction
o myVar ≠ myvar
8. Whitespace & Line Breaks
JavaScript ignores extra spaces.
Readability spacing is allowed.
To split long strings, use \ inside the string.
Cannot break code arbitrarily or with comment blocks.
9. JavaScript as an Object-Oriented Language
JavaScript supports:
Objects
Properties
Methods
Constructors
Classes (ES6)
Prototype-based inheritance
Examples
Property
var txt = "Hello World!";
[Link]([Link]);
Method
var str = "Hello";
[Link]([Link]());
10. ECMAScript Standard
JavaScript is defined by the ECMAScript standard.
JavaScript 2.0 aligns with ECMAScript Edition 4.
Specification link: [Link]
11. DHTML (Dynamic HTML)
JavaScript is core to DHTML, which includes:
HTML
CSS
DOM
JavaScript
Used to create dynamic, animated, interactive web pages.
JavaScript Error Types
1. ReferenceError
Definition
Occurs when JavaScript tries to access a variable, function, or object that does NOT exist in the
current scope.
Common Causes
Using a variable before declaring it (especially with let or const)
Using an undeclared variable
Misspelled variable/function name
Accessing something out of scope
Example
[Link](x); // ReferenceError: x is not defined
Key Point
Happens at runtime.
Strict mode ("use strict") makes ReferenceErrors more common (prevents accidental globals).
2. TypeError
Definition
Occurs when an operation is performed on a value of the wrong data type OR on a value that does
not support that operation.
Common Causes
Calling a non-function as a function
Accessing properties of undefined or null
Using methods on a wrong data type
Example
let x = 5;
[Link](); // TypeError: [Link] is not a function
Another example:
let obj = undefined;
[Link]; // TypeError: Cannot read property 'name' of undefined
Key Point
Happens at runtime when the type doesn’t match the operation.
3. SyntaxError
Definition
Occurs when JavaScript code violates grammar rules of the language.
Common Causes
Missing parentheses, brackets, or curly braces
Wrong variable/function declaration syntax
Using reserved keywords incorrectly
Invalid or incomplete code
Example
if (true {
[Link]("Hello");
// SyntaxError: Unexpected token {
Another example:
let 1name = "abc"; // SyntaxError: Invalid or unexpected token
Key Point
Occurs before execution begins (during parsing).
Script won’t run until corrected.
Summary Table (Exam-Friendly)
Error Type Cause Example When Detected
ReferenceEr Using a variable/function that does [Link](x) Runtime
ror not exist
TypeError Wrong operation on a value of [Link] Runtime
incorrect type e()
SyntaxError Invalid code structure, grammar if(x {} Compile-time
mistake (parsing)
[Link]() vs [Link]() vs [Link]()
1. [Link]()
Most strict — makes object fully immutable
❌ Cannot add new properties
❌ Cannot delete existing properties
❌ Cannot modify property values
❌ Cannot change property attributes (writable/configurable = false)
⚠ Freezing is shallow, not deep
Example
[Link](obj);
2. [Link]()
Moderately strict — object structure fixed but values can change
❌ Cannot add new properties
❌ Cannot delete properties
✔ Can modify existing property values
✔ writable = true, configurable = false
Example
[Link](obj);
3. [Link]()
Least strict — only stops adding new properties
❌ Cannot add new properties
✔ Can delete existing properties
✔ Can modify existing properties
✔ configurable/writable unchanged
Example
[Link](obj);
SUPER SHORT EXAM SUMMARY
Feature / Method freeze() seal() preventExtensions()
Add new properties ❌ No ❌ No ❌ No
Delete properties ❌ No ❌ No ✔ Yes
Modify existing values ❌ No ✔ Yes ✔ Yes
Change property descriptors ❌ No ❌ No ✔ Yes
Strictness level Highest Medium Lowest
Data Types
1. Default Value of an Unassigned Variable
In JavaScript, a declared but unassigned variable has the value undefined.
Example:
let x;
[Link](x); // undefined
2. var vs let vs const
2.1 var
Function-scoped. (Not block Scoped)
Can be redeclared and updated.
Hoisted (initialized with undefined).
2.2 let
Block-scoped.
Cannot be redeclared in the same block.
Can be updated.
Hoisted but not initialized → accessing before declaration gives ReferenceError.
2.3 const
Block-scoped.
Must be initialized at the time of declaration.
Cannot be reassigned (but objects and arrays can be mutated).
3. "use strict" Mode
Enables strict mode for safer, cleaner coding.
Prevents:
o Using undeclared variables
o Duplicate parameter names
o Silent errors
Example:
"use strict";
x = 10; // ❌ Error: x is not defined
4. Order of Execution
JavaScript executes code top to bottom, line by line.
Exceptions:
o Asynchronous code
o Event-driven code
o Promises/callbacks
o Function calls interrupting the flow
5. JavaScript Inside HTML
All JavaScript code must be inside <script>...</script> when embedded in HTML.
HTML itself does not understand JavaScript; the browser’s JavaScript engine interprets the
script.
Example:
<script>
[Link]("Hello from script");
</script>
6. JavaScript Engine (Browser)
Every browser contains a built-in JavaScript engine:
o Chrome → V8
o Firefox → SpiderMonkey
o Safari → JavaScriptCore
o Edge → Chakra (old), now V8
Function
Parses, interprets, and compiles JS into native machine code.
Executes it inside the browser environment.
7. JavaScript Can Be Disabled
Browsers allow users to disable JavaScript for security or performance reasons.
If disabled:
o Dynamic content will not work
o Events and DOM manipulation stop functioning
8. JavaScript as an Object-Oriented Language
JavaScript supports OOP concepts:
o Objects
o Properties
o Methods
o Classes (ES6+)
o Inheritance (prototype-based)
9. DOM, Document, and Window Objects
Consider the code:
<script>
[Link]("hello in head");
[Link](document);
[Link](window);
</script>
9.1 window Object
Top-level object in the browser environment.
Represents the browser window/tab.
Contains:
o document
o Timers (setTimeout, setInterval)
o Console
o Location, history, screen info
All global variables and functions become properties of window.
9.2 document Object
Property of window.
Represents the entire HTML page loaded in the browser.
Provides methods to:
o Select elements (getElementById, querySelector)
o Modify content (innerHTML, write)
o Handle events
o Manipulate attributes and styles
Example:
[Link]("Hello");
write() is a method of the Document class.
9.3 Console Output
[Link](document) shows the Document object with its properties and methods.
Helps developers inspect:
o DOM tree
o Methods like createElement, appendChild, etc.
o Properties like title, URL, body, etc.
10. Observing Methods and Properties
Opening Developer Tools → Console will show:
o Document object structure
o All methods (like write, getElementById)
o All properties (like head, body, title)
This helps understand the DOM API and the browser object model (BOM).