Graphic Era Hill University
Haldwani Campus
Assignment – 02
Name: Abhay Kumar
Subject: Full Stack Development
Student ID: 23711095
Course: MCA/1st Sem
Submitted To: Submitted By:
Mrs. Richa Pandey Abhay Kumar
1. What is JavaScript? Write code for the display of prompt boxes?
JavaScript is a versatile programming language primarily used in web
development to enhance and add interactivity to websites. It is a high-level,
interpreted language known for its flexibility and widespread use across browsers.
JavaScript empowers developers to create dynamic and responsive web pages by
enabling functionalities like form validation, interactive maps, animations, and
more.
As a client-side scripting language, JavaScript runs directly in the web browser,
allowing it to manipulate the Document Object Model (DOM) dynamically. This
means it can alter the structure, content, and style of web pages in response to user
actions, without the need for server interaction.
Beyond front-end development, JavaScript is also used in back-end development
through frameworks like [Link], allowing developers to write server-side code,
access databases, and build full-stack applications using a single language.
JavaScript's simplicity, along with its rich ecosystem of libraries and frameworks
like React, Angular, and [Link], has made it an integral part of modern web
development. Its adaptability and extensive community support continue to drive
innovations, making JavaScript a cornerstone of the interactive web experience.
Displaying a simple prompt box to get user input
var userInput = prompt("Please enter your name:");
// Checking if the user entered something
if (userInput !== null) {
alert("Hello, " + userInput + "! Welcome to JavaScript!");
} else {
alert("You didn't enter your name.");
}
2. Describe the various control structures in JavaScript include if statement,
loop, and switch statement. Provide examples and how they are used for flow
control?
JavaScript offers several control structures that dictate the flow of code execution.
Here's an overview of some of the most commonly used control structures:
If Statement: The `if` statement allows conditional execution of code based on
a specified condition. It can be accompanied by `else if` and `else` blocks for
multiple condition checks.
let num = 10;
if (num > 0) {
[Link]("Number is positive");
} else if (num === 0) {
[Link]("Number is zero");
} else {
[Link]("Number is negative");
}
Loops:
a. For Loop: Executes a block of code a specified number of times.
for (let i = 0; i < 5; i++) {
[Link](i);
}
b. While Loop: Executes a block of code while a specified condition is true.
let i = 0;
while (i < 5) {
[Link](i);
i++;
}
c. Do-While Loop: Similar to `while` loop but guarantees execution of the
block at least once before checking the condition.
let i = 0;
do {
[Link](i);
i++;
} while (i < 5);
Switch Statement: Allows the execution of different code blocks based on
different cases.
let day = "Monday";
switch (day) {
case "Monday":
[Link]("It's Monday!");
break;
case "Tuesday":
[Link]("It's Tuesday!");
break;
default:
[Link]("Another day of the week.");
}
These control structures provide the ability to create conditional pathways, iterate
over data, and execute code based on different conditions, enhancing the flexibility
and functionality of JavaScript programs.
3. Explain event handling in JavaScript with code.
Event handling in JavaScript enables the response to user actions or system events
in web applications. It involves listening for specific events, like clicks, key
presses, or page loads, and executing corresponding actions or functions in
response.
Event handling uses event listeners, which are functions that "listen" for events on
specified DOM elements. When the event occurs, the associated function, known
as an event handler, is triggered. For instance, a button click can trigger a function
to display a message or update the page content.
To implement event handling, developers use methods like `addEventListener` to
attach event listeners to HTML elements. These listeners can detect various events,
allowing for dynamic interactions, form validation, data updates, and more.
Understanding event handling is crucial in web development as it allows the
creation of responsive, interactive web applications by enabling code execution
based on user interactions or predefined triggers.
To handle events, JavaScript uses event listeners. Event listeners "listen" for
specific events to occur and execute a function (event handler) in response. Here's
an overview of event handling with code examples:
1. Adding Event Listeners:
[Get a reference to an HTML element with the ID "myButton"]
let button = [Link]("myButton");
[Add an event listener to the button for the 'click' event]
[Link]("click", function() {
[Link]("Button clicked!");
});
In this example, a click event listener is added to a button element. When the
button is clicked, the provided function (an event handler) is executed, displaying
"Button clicked!" in the console.
2. Event Types:
There are various event types, such as click, hover, keypress, submit, etc. For
instance:
let inputField = [Link]("myInput");
[Link]("keypress", function(event) {
[Link]("Key pressed: " + [Link]);
});
This code listens for keypress events on an input field and logs the pressed key to
the console.
3. Event Propagation and Event Objects:
Events propagate through the DOM hierarchy. Additionally, event objects
contain information about the event, like the target element or event properties
(e.g., `[Link]`, `[Link]`).
4. Removing Event Listeners:
To remove an event listener, use `removeEventListener()` with the same
parameters used to add the listener.
Event handling in JavaScript enables the creation of interactive and responsive
web applications. It's essential for building features like form validation, user
interactions, and dynamic content updates based on user actions or system events.
Understanding how to handle events is crucial for effective web development and
creating engaging user experiences.