Unit-3
JavaScript: Adding Interactivity to Web Pages
JavaScript is a high-level, interpreted programming language primarily used to make web
pages interactive and dynamic.
Fundamentals of JavaScript Programming:
o Variables and Data Types:
Variables: Containers for storing data. Declared using var, let, or
const. let and const are preferred for block-scoping and immutability
respectively.
Data Types: JavaScript is dynamically typed. Common data types
include:
Primitives: string (text), number (integers and floats), boolean
(true/false), null (intentional absence of any object value),
undefined (variable declared but no value assigned), symbol
(unique identifier), bigint (arbitrary-precision integers).
Objects: Complex data structures like Object, Array, Function,
Date, RegExp.
o Operators: Perform operations on values and variables.
Arithmetic: +, -, *, /, % (modulus), ** (exponentiation).
Assignment: =, +=, -=, etc.
Comparison: == (loose equality), === (strict equality), !=, !==, >, <,
>=, <=.
Logical: && (AND), || (OR), ! (NOT).
o Control Flow: Dictates the order in which statements are executed.
Conditional Statements: if, else if, else, switch for executing different
code blocks based on conditions.
Loops: for, while, do...while, for...in (for object properties), for...of
(for iterable objects like arrays) for repeatedly executing code.
o Functions: Reusable blocks of code that perform a specific task. Can accept
arguments and return values.
JavaScript
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World")); // Output: Hello, World!
o Objects and Arrays:
Objects: Collections of key-value pairs. Used to represent real-world
entities.
JavaScript
let person = {
name: "Alice",
age: 30,
isStudent: false
};
console.log(person.name); // Output: Alice
Arrays: Ordered lists of values.
JavaScript
let colors = ["red", "green", "blue"];
console.log(colors[0]); // Output: red
DOM Manipulation (Document Object Model): The DOM is a programming
interface for HTML and XML documents. It represents the page structure as a tree of
objects, allowing JavaScript to access and manipulate the content, structure, and style
of web pages.
o Selecting Elements:
document.getElementById('idName'): Selects an element by its ID.
document.getElementsByClassName('className'): Selects a collection
of elements by their class name.
document.getElementsByTagName('tagName'): Selects a collection of
elements by their tag name.
document.querySelector('selector'): Selects the first element that
matches a CSS selector.
document.querySelectorAll('selector'): Selects all elements that match
a CSS selector.
o Changing Content:
element.innerHTML: Gets or sets the HTML content inside an
element.
element.textContent: Gets or sets the text content inside an element
(sanitizes HTML).
o Modifying Attributes:
element.setAttribute('attributeName', 'value'): Sets the value of an
attribute.
element.getAttribute('attributeName'): Gets the value of an attribute.
element.removeAttribute('attributeName'): Removes an attribute.
o Changing Styles:
element.style.propertyName: Directly manipulates inline styles (e.g.,
element.style.color = 'blue').
element.classList.add('className'),
element.classList.remove('className'),
element.classList.toggle('className'): Best practice for
adding/removing/toggling CSS classes.
o Creating and Removing Elements:
document.createElement('tagName'): Creates a new HTML element.
parentNode.appendChild(childNode): Adds a child element to a parent.
parentNode.removeChild(childNode): Removes a child element from a
parent.
Event Handling: Events are actions or occurrences that happen in the browser, such
as a user clicking a button, a page loading, or an input field changing. JavaScript
allows you to respond to these events.
o Event Listeners: The primary way to handle events.
JavaScript
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
// Event object provides information about the event
button.addEventListener('mouseover', function(event) {
console.log('Mouse over at X:', event.clientX);
});
o Common Events: click, mouseover, mouseout, keydown, keyup, submit,
load, change, focus, blur.
Asynchronous Programming with Promises and async/await: JavaScript is single-
threaded, meaning it executes one task at a time. However, many operations (like
fetching data from a server) are time-consuming and would block the main thread,
making the UI unresponsive. Asynchronous programming handles these operations
without blocking.
o Callbacks (Traditional): Functions passed as arguments to be executed when
an asynchronous operation completes. Can lead to "callback hell" (deeply
nested callbacks).
o Promises (ES6): Objects that represent the eventual completion (or failure) of
an asynchronous operation and its resulting value. They provide a cleaner way
to handle asynchronous code than callbacks.
new Promise((resolve, reject) => { ... }): Creates a new promise.
resolve is called on success, reject on failure.
.then(onFulfilled, onRejected): Handles the successful resolution or
rejection of a promise.
.catch(onRejected): Handles only rejections.
.finally(): Executes a callback regardless of success or failure.
JavaScript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // Simulate success/failure
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data.");
}
}, 2000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation complete."));
o async/await (ES2017): Syntactic sugar built on top of Promises, making
asynchronous code look and behave more like synchronous code. It
significantly improves readability and maintainability for complex
asynchronous flows.
async keyword: Used before a function declaration to indicate that the
function will perform asynchronous operations and implicitly returns a
Promise.
await keyword: Can only be used inside an async function. It pauses
the execution of the async function until the Promise it's waiting on
resolves or rejects.
JavaScript
async function getAndDisplayData() {
try {
const data = await fetchData(); // Wait for the promise to resolve
console.log(data);
} catch (error) {
console.error("Failed to get data:", error);
} finally {
console.log("Cleanup after async operation.");
}
}
getAndDisplayData();
IV. Web Development Tools: Essential for Workflow
Efficient web development relies heavily on a set of specialized tools.
Text Editors and IDEs (Integrated Development Environments): These are the
primary interfaces for writing code.
o Text Editors: Lightweight tools focused on code editing, often with syntax
highlighting, auto-completion, and plugin support.
VS Code (Visual Studio Code): Highly popular, free, and open-
source, with extensive extensions for various languages and
frameworks. Offers built-in Git integration and debugging.
Sublime Text: Fast, powerful, and highly customizable, but
proprietary.
Atom: Hackable text editor from GitHub.
o IDEs (Integrated Development Environments): More comprehensive tools
that bundle a text editor with a debugger, build automation tools, and often a
version control system. Typically used for larger, more complex projects.
WebStorm (JetBrains): A powerful commercial IDE specifically for
JavaScript and web development, offering advanced features like
refactoring, smart code completion, and integrated tools.
Version Control with Git: Git is a distributed version control system (VCS) that
tracks changes in source code during software development. It's essential for
collaboration, tracking history, and managing different versions of a project.
o Repositories (Repos): A project's codebase managed by Git. Can be local or
remote (e.g., GitHub, GitLab, Bitbucket).
o Commits: Snapshots of your code at a specific point in time, along with a
message describing the changes.
o Branches: Separate lines of development. Allow developers to work on
features or bug fixes independently without affecting the main codebase.
o Merging: Combining changes from one branch into another.
o Cloning: Creating a local copy of a remote repository.
o Pulling/Pushing: Fetching changes from a remote repository (pull) and
sending local changes to a remote repository (push).
o Key Commands:
git init: Initializes a new Git repository.
git add .: Stages all changes for the next commit.
git commit -m "Message": Creates a new commit.
git status: Shows the status of your working directory.
git log: Displays the commit history.
git branch: Lists, creates, or deletes branches.
git checkout <branch-name>: Switches to a different branch.
git pull: Fetches and integrates changes from a remote repository.
git push: Uploads local commits to a remote repository.
Browser Developer Tools: Modern web browsers come with built-in developer tools
that are indispensable for debugging, inspecting, and optimizing web pages.
Accessible by right-clicking on a page and selecting "Inspect" or pressing F12 (or
Cmd+Option+I on Mac).
o Elements Panel: Inspects and modifies the HTML and CSS of the current
page in real-time. Useful for debugging layout and styling issues.
o Console Panel: Displays JavaScript errors, warnings, and messages logged by
console.log(). Crucial for debugging JavaScript code.
o Sources Panel: Debugs JavaScript code by setting breakpoints, stepping
through code, and inspecting variables.
o Network Panel: Monitors network requests (e.g., fetching images, CSS,
JavaScript files, API calls), showing their status, size, and timing. Essential for
performance optimization.
o Performance Panel: Analyzes the rendering performance of a web page.
o Application Panel: Inspects local storage, session storage, cookies, and
service workers.
o Lighthouse/Audits Panel: Runs audits for performance, accessibility, best
practices, and SEO.
