10 Marks Ques ons

1. Explain absolute posi oning and rela ve posi oning in detail with examples.

CSS-P (Cascading Style Sheets - Posi oning) gives precise control over element posi oning and allows
for dynamic reposi oning using JavaScript1111. The key style proper es involved are le , top, and
posi on2.

Absolute Posi oning

Absolute posi oning places an element at an exact, specific loca on on the page, ignoring the flow
of other elements33.

 Reference Point: Coordinates (le and top) are defined rela ve to the nearest posi oned
ancestor (an ancestor element that has its posi on property set to something other than
sta c). If no posi oned ancestor exists, the element is posi oned rela ve to the document
body4444.

 Key Uses:

o Fixed Placement: Used when an element needs to be in an exact, sta c spot

regardless of surrounding content5.

o Layering Elements: Can be used to superimpose text or images over other elements,
for example, to create a watermark effect666.

 Example Syntax:

HTML

<p style="posi on: absolute; le : 100px; top: 200px"> text </p>

o posi on: absolute; $\rightarrow$ Enables absolute posi oning7.

o le : 100px; $\rightarrow$ Places the element 100 pixels from the le edge of the
containing element/window8.

o top: 200px; $\rightarrow$ Places the element 200 pixels from the top edge of the
containing element/window9.

 Nested Absolute Posi oning: If an absolutely posi oned element is inside another
posi oned element, its top and le values are measured from the upper-le corner of the
enclosing element, not the browser window's upper-le corner10.

Rela ve Posi oning

Rela ve posi oning places an element rela ve to its natural posi on in the normal document flow11.

 Displacement: If top and le proper es are specified, the element is displaced by the given
amount from where it would naturally be (its original posi on)12.

 Default Behavior: If top and le are not specified, the element is posi oned like a sta cally
posi oned element, but it can be moved later using JavaScript13.
  Key Uses: It is o en used for crea ng visual effects, such as highligh ng special words in text
or crea ng superscripts14141414.

 Example ([Link]):

The following example highlights the word "GOOD" by posi oning it 15 pixels below its natural
baseline:

CSS

.spectext {font: 2em Times; color: red; posi on: rela ve; top: 15px;}

/* ... */

<p class = "regtext"> Apples are <span class = "spectext"> GOOD </span> for you. </p>

This displaces "GOOD" ver cally downward, achieving the effect151515.

2. Describe how JavaScript can dynamically manipulate element visibility, style, colors, fonts, and
content. Explain with suitable examples.

Dynamic HTML (DHTML) is a collec on of technologies, including HTML, CSS, JavaScript, and the
DOM, that allows for real- me, dynamic changes to an HTML document a er it has been loaded and
while it is being displayed161616. JavaScript, by accessing HTML elements via the DOM (Document
Object Model), is the mechanism that triggers these changes, o en based on user or browser
events17171717.

1. Visibility (Showing/Hiding Elements)

 Mechanism: Controlled by the CSS visibility property, which has two possible values: visible
and hidden18181818.

 Dynamic Change: A JavaScript func on can access the element's style property via the DOM
and toggle its value.

 Example ([Link]):

The flipImag() func on toggles the visibility of an element with the ID "saturn":

JavaScript

func on flipImag() {

dom = [Link]("saturn").style;

// Flip the visibility adjec ve to whatever it is not now

if ([Link] == "visible")

[Link] = "hidden";

else

[Link] = "visible";
}
19

2. Colors (Background and Foreground)

 Mechanism: Changed by modifying the backgroundColor (for the document background) or

color (for the foreground text) style proper es of the [Link]
object20202020202020202020.

 Dynamic Change: An event handler (like onchange for an input box) calls a JavaScript
func on that takes the new color and the target property as parameters and updates the
style.

 Example ([Link]):

JavaScript

func on setColor(where, newColor) {

if (where == "background")

[Link] = newColor; // Changes background color

else

[Link] = newColor; // Changes foreground color

}
21

3. Fonts and Style

 Mechanism: Proper es like fontStyle and fontSize are changed using event handlers,
par cularly those triggered by mouse events22.

 Dynamic Change: The mouseover event triggers a change (e.g., color and size change), and
the mouseout event reverts the element back to its original style23.

 Example ([Link] Inline Handlers):

The example changes the font style, size, and color of a <span> element when the mouse hovers
over it:

HTML

<span class = "wordText";

onmouseover="[Link] = 'red';

[Link] = 'italic';

[Link] = '2em';"

onmouseout="[Link] = 'blue';

[Link] = 'normal';
[Link] = '1.1em';">

Washington

</span>
24

4. Content (Element Value)

 Mechanism: Dynamic changes to the content inside elements are achieved by manipula ng
the value property of the associated JavaScript object25.

 Dynamic Change: An event handler calls a func on that updates the value property of the
target element (e.g., a textarea) with new text content.

 Example ([Link]):

Used to provide contextual help messages in a text area based on mouse events over form fields. The
messages func on updates the text area content:

JavaScript

func on messages (adviceNumber) {

[Link]("adviceBox").value = helpers[adviceNumber];

The helpers array stores the different messages, and the event handler passes an index to retrieve
the correct message262626262626262626262626262626.

3. Explain the concept of Dynamic Documents (DHTML). Describe its components and discuss how
JavaScript and DOM are used to modify HTML elements dynamically.

Concept of Dynamic Documents (DHTML)

DHTML (Dynamic HTML) is not a new markup language; it is a collec on of exis ng web
technologies that together enable dynamic changes to an HTML document a er it has been loaded
and while it is s ll being displayed27. The core idea is to create interac ve, responsive web pages
without needing to reload the page to effect a change28.

Components of DHTML

DHTML is essen ally the synergis c combina on of four core technologies29:

1. HTML (HyperText Markup Language): Provides the basic structure and content of the
document30.

2. CSS (Cascading Style Sheets): Controls the presenta on, style, and posi oning of the
elements31313131.

3. JavaScript: The scrip ng language that acts as the control mechanism. It handles events and
contains the logic to modify the document32.
 4. DOM (Document Object Model): Provides a structured representa on (a programming
interface) of the HTML document, allowing scripts to access and manipulate the content,
structure, and style of the elements3333.

$$\text{DHTML} = \text{HTML} + \text{CSS} + \text{JavaScript} + \text{DOM} \text{ (together for

dynamic interac on)} \text{ [cite: 37]}$$

How JavaScript and DOM are Used for Dynamic Modifica on

The dynamic modifica on of HTML elements is achieved through JavaScript using the DOM as the
bridge:

1. The DOM as the Interface: The browser creates the DOM, which represents every HTML
element as an object that JavaScript can interact with. This object includes proper es for the
element's content, a ributes, and styles34343434.

2. Event Triggers: Changes are typically triggered by:

o User Interac on: Such as clicking a bu on, hovering the mouse over text, or typing
into a form field3535.

o Browser Events: Such as the page finishing its load or a window being resized36.

3. JavaScript Modifica on:

o When an event occurs, it triggers an embedded JavaScript event handler37.

o The JavaScript code then uses DOM methods and proper es to target the specific
HTML element and modify its proper es.

o What can be modified:

 Tag A ributes: E.g., changing the src a ribute of an <img> tag38.

 Tag Contents: E.g., changing the text inside a paragraph or the value of an
input box393939.

 Element Style Proper es: E.g., changing the le , top, color, font-size, or
visibility CSS proper es via the element's style object4040404040.

Example:

To change the color of an element with ID myElement, JavaScript uses the DOM to access the
element and its style proper es:

JavaScript

// Access the element's style object via the DOM

var elementStyle = [Link]("myElement").style;

// Change the style property

[Link] = "red";
This is how JavaScript and the DOM work together to modify the element's style proper es in real-
me41.

4. Explain how drag-and-drop is implemented using the DOM-2 Event Model. Describe event
capturing, bubbling, and event handling with addEventListener() and removeEventListener().

The implementa on of drag-and-drop requires coordina ng three dis nct mouse events:
mousedown, mousemove, and mouseup42. Using the DOM Level 2 (DOM 2) Event Model is preferred
for cleaner, more portable code across modern browsers (IE9 and later)43434343.

Drag-and-Drop Implementa on (DOM 2 Focus)

The drag-and-drop mechanism involves three JavaScript event handler func ons: grabber, mover,
and dropper44. The example uses a mix: DOM 0 for mousedown (inline call) and DOM 2 for
registering and unregistering mousemove and mouseup45.

1. grabber (on mousedown) - Ini ates Drag:

o Purpose: Ac vated when the mouse bu on is pressed on a draggable element.

o Ac on:

 Gets the element to be moved (theElement = [Link];) 464646.

 Calculates the ini al offset (diffX, diffY)—the difference between the

element's top-le posi on and the cursor's click posi on. This offset is
crucial to prevent the element's corner from jumping directly under the
cursor and ensures a smooth drag474747474747474747.

 Registers Event Handlers (DOM 2): Uses [Link]() to

a ach the mover func on to the mousemove event and the dropper
func on to the mouseup event on the en re document48484848.

 Prevents default browser ac on and event propaga on

([Link](), [Link] on())49.

2. mover (on mousemove) - Performs Dragging:

o Purpose: Ac vated repeatedly as the mouse moves while the bu on is held down.

o Ac on:

 Calculates the element's new posi on by subtrac ng the stored offset (diffX,
diffY) from the mouse's current coordinates ([Link],
[Link])50505050.

 Updates the element's [Link] and [Link] proper es, concatena ng "px"
to the new numeric values51515151.

3. dropper (on mouseup) - Ends Drag:

o Purpose: Ac vated when the mouse bu on is released, signaling the end of the
drag.

o Ac on:
  Unregisters Event Handlers (DOM 2): Uses [Link]()
to remove the mover and dropper func ons from the mousemove and
mouseup events, stopping the dragging process525252.

DOM 2 Event Handling (addEventListener and removeEventListener)

The DOM 2 Event Model introduced standard methods for event handling53.

Method Purpose Syntax

A aches an event handler

[Link](type, listener,
addEventListener() func on to an element for a
useCapture) 5555
specific event5454.

Removes an event listener

[Link](type,
removeEventListener() previously registered with
listener, useCapture) 57
addEventListener()5656.

The third parameter, useCapture (a boolean), dictates the flow of the event.

 true (Event Capturing): The event is dispatched to the ancestor elements first and then
trickles down to the target element5858.

 false (Event Bubbling): The event is dispatched to the target element first and then bubbles
up through its ancestor elements (default behavior)59.

5. Explain element visibility in DHTML. How can elements be shown, hidden, or toggled
dynamically? Provide examples.

Element Visibility in DHTML

In Dynamic HTML (DHTML), the visibility of document elements is controlled by the visibility style
property60. This is one of the ways JavaScript, using the DOM, can dynamically modify the
appearance of a web page a er it has loaded61616161.

Possible Values

The visibility property can have two possible values62626262:

1. visible: The element is displayed on the page.

2. hidden: The element is hidden from the user.

Note: When an element is set to visibility: hidden;, it becomes invisible, but it s ll occupies the same
amount of space in the document layout as if it were visible. Other elements will not flow into its
space63.

Dynamic Control (Show, Hide, and Toggle)

Dynamic control of visibility is achieved by having a JavaScript event handler func on modify the
element's [Link] property. The element must be accessible via the DOM (e.g., by having a
unique id)64.

 To Show an Element: Set the property to visible.

JavaScript

[Link]("elementID").[Link] = "visible";

 To Hide an Element: Set the property to hidden.

JavaScript

[Link]("elementID").[Link] = "hidden";

 To Toggle Visibility: A JavaScript func on checks the current value and sets it to the opposite.

Example: Toggling Visibility ([Link])

The [Link] and its associated JavaScript file [Link] illustrate how to dynamically toggle
an element's visibility.

HTML Setup ([Link]):

The image element is ini ally set to visibility: visible; and a bu on calls the flipImag() func on on a
click event (onclick)656565.

HTML

<div id="saturn" style="posi on: rela ve; visibility: visible;">

<img src="../images/[Link]" alt="(Picture of Saturn)" />

</div>

<input type="bu on" value="Toggle Saturn" onclick="flipImag()" />

666666

JavaScript Func on ([Link]):

The flipImag() func on accesses the element's style via its ID (saturn) and flips the visibility
property67676767.

JavaScript

func on flipImag() {

// Get the style object of the element

dom = [Link]("saturn").style;

// Check the current visibility and set it to the opposite

if ([Link] == "visible")

[Link] = "hidden";
 else

[Link] = "visible";

}
68

This means every me the "Toggle Saturn" bu on is clicked, the image is dynamically hidden or
shown69.

6. Write a detailed note on "Movement of Elements in DHTML." Explain slow movement, animated
movement, and collision detec on, with proper examples.

Movement of Elements in DHTML

Movement of elements on a web page is a fundamental aspect of DHTML, achieved by dynamically

changing the element's top or le CSS style property values using JavaScript70707070. Only HTML
elements whose posi on property is set to absolute or rela ve can be moved71.

 Absolute Posi oning Movement: The element moves directly to the new top and le
coordinates, which are rela ve to its containing block72.

 Rela ve Posi oning Movement: The element moves by the given distance from its original,
natural posi on7373.

JavaScript handles the coordinate inputs (which are strings) by first concatena ng a unit
abbrevia on, such as "px", before assigning the value to the element's style property74.

Instant Movement (Changing Coordinates Directly)

Instant movement is achieved by a single, direct change to the top and le proper es7575.

 Example ([Link]):

The moveIt func on takes the element ID and new coordinate values as parameters, then updates
the element's posi on immediately:

JavaScript

func on moveIt (movee, newTop, newLe ) {

dom = [Link](movee).style;

[Link] = newTop + "px"; // Instant move to new top

[Link] = newLe + "px"; // Instant move to new le

}
76767676

Slow Movement and Animated Movement

Slow or animated movement simulates mo on over me by dividing the total movement into small
steps and introducing short delays between each step777777. This is typically accomplished using
JavaScript mer func ons.

 setTimeout(): Executes a piece of code once a er a specified delay78. This is used recursively
to create anima on: the func on moves the element one step, then calls setTimeout() to
schedule itself to run again, crea ng a sequence of small movements79797979.

 setInterval(): Executes a piece of code repeatedly at a set interval80.

 Example ([Link] - Animated Movement):

The moveText func on illustrates the logic for slow movement from its current posi on (x, y) towards
a des na on (finalx, finaly)81818181.

1. Step Calcula on: In each call, the coordinates are adjusted by one pixel towards the
des na on82828282.

JavaScript

if (x != finalx)

if (x > finalx) x--; // Move le

else if (x < finalx) x++; // Move right

// Same logic for y

2. Posi on Update: The new coordinates are assigned to the element's style
proper es838383.

3. Recursive Call (Delay): If the des na on is not reached, setTimeout is called to

schedule the next step a er a 1-millisecond delay84848484.

JavaScript

if ((x != finalx) || (y != finaly)) {

// Update posi on

setTimeout("moveText("+x+","+y+")", 1); // Schedule next step

}
858585858585

Collision Detec on

The provided notes do not contain informa on on the concept or implementa on of collision
detec on in DHTML.

8 Marks Ques ons

1. Explain the use of CSS-P (CSS Posi oning). Discuss le , top, and posi on proper es with
examples.
 Use of CSS-P (Cascading Style Sheets - Posi oning)

CSS-P was released by the W3C in 1997 to address the lack of control over the placement of HTML
elements in early web design, where elements were arranged sequen ally (fill a row, then start a
new one)86868686.

The primary purpose of CSS-P is to provide precise control over element posi oning on a web page
display87.

 Dynamic Reposi oning: It supports dynamic movement and placement of elements using
JavaScript by changing the posi oning-related style proper es in real- me. This enables
anima on or interac on88888888.

Key Style Proper es

The following proper es work together to control the placement and movement of elements898989.

Property Purpose

Determines the posi oning scheme and defines how the le and top values are
posi on
interpreted90.

le Specifies the distance from the le reference point to the element's posi on91.

top Specifies the distance from the top reference point to the element's posi on92.

Values for posi on Property

Value Descrip on and Reference Point Example Use

The default value. Elements are posi oned according to

Standard text and images
sta c the normal flow of the page. They cannot be posi oned
without special placement.
or reposi oned using le or top939393.

Posi ons the element exactly rela ve to its first

Fixed placement, layering
posi oned ancestor (or the document body if none
absolute elements (e.g.,
exists)94949494. The element is removed from the normal
watermarks)9696.
flow9595.

Posi ons the element rela ve to its normal posi on in

Highligh ng text, crea ng
rela ve the document flow9797. le and top proper es displace it
superscripts99999999.
from that natural posi on98.

Example (Absolute Posi oning)

This example places a paragraph 100 pixels from the le and 200 pixels from the top of its containing
element/window:

HTML

<p style="posi on: absolute; le : 100px; top: 200px">

text
</p>

 posi on: absolute; enables absolute posi oning100.

101
 le : 100px; places the element 100 pixels from the le .

 top: 200px; places the element 200 pixels from the top102.

2. Describe event models in JavaScript (DOM 0 and DOM 2). Compare both with examples.

JavaScript u lizes event models to handle interac ons (like mouse clicks or page loading) and trigger
dynamic changes in the document103.

1. DOM 0 Event Model

 Descrip on: The original, non-standardized event model supported by nearly all browsers,
including older ones like Internet Explorer 8 (IE8) and Firefox 3 (FX3) 104. It is widely used in
most common DHTML examples105.

 Mechanism: Event handlers are set by assigning a func on directly to an element's event
property (e.g., onclick, onmouseover) in the HTML tag or in JavaScript code.

Feature DOM 0 Event Model

Compa bility High (Works on old browsers like IE8 and FX3)106.

Handler Only one handler can be assigned to a single event type for an element. Assigning a
Limit second one overwrites the first.

Event Flow Only supports Event Bubbling.

Setup Set directly in HTML or JavaScript property.

 Example (DOM 0 - Inline HTML):

The event handler is set directly in the HTML element's a ribute107.

HTML

<input type="bu on" value="Move it"

onclick="moveIt('saturn', ...)" />

108

 Example (DOM 0 - JavaScript Property):

JavaScript

[Link]('myBu on').onclick = myHandlerFunc on;

 Drag-and-Drop: Can be done en rely with DOM 0, but it o en requires browser detec on
and different code for each browser to ensure full func onality109.
2. DOM 2 Event Model

 Descrip on: A standardized, modern event model introduced with DOM Level 2 that offers
more features and flexibility110. It is supported by modern browsers (IE9 and later, FX3,
Chrome 12)111111111111.

 Mechanism: Uses the methods addEventListener() and removeEventListener() to manage

event handlers112112.

Feature DOM 2 Event Model

Good on modern browsers (IE9+, FX3, Chrome 12+)113113113113. Not supported by IE8
Compa bility
and earlier114.

Handler Mul ple handlers can be assigned to the same event type on an element (they all
Limit execute)115115.

Supports both Event Capturing and Event Bubbling through the useCapture
Event Flow
parameter116116116116.

Setup Uses dedicated methods (addEventListener, removeEventListener).

 Example (DOM 2 - JavaScript Methods):

Used in drag-and-drop to register handlers dynamically117117117117.

JavaScript

[Link]("mousemove", mover, true);

[Link]("mouseup", dropper, true);

118118118118

The third parameter (true or false) dictates the event flow (capturing or bubbling).

3. Explain dynamic color and font changes using JavaScript. Describe the working of
[Link] and [Link] examples.

Dynamic changes to colors and fonts are achieved by JavaScript modifying the element's CSS style
proper es in real- me, typically in response to user events119.

Dynamic Color Changes

 Mechanism: Dynamic color changes involve upda ng the

[Link] (for background color) or [Link]
(for foreground/text color) proper es120120120120120120120120120. Colors can be specified using any
standard CSS format (e.g., color names, RGB, hex)121.

 Working of [Link]:
 o Goal: Allow the user to type a color specifica on into two text boxes—one for the
background and one for the foreground—and see the document colors change
immediately122.

o HTML Setup: The text boxes use the onchange event handler, which fires when the
text box value is commi ed (e.g., a er typing and tabbing out). The handler calls the
setColor JavaScript func on, passing the target property ('background' or
'foreground') and the new color value ([Link])123123123123.

 Key Detail: Using [Link] in the inline call provides a simple way to pass
the newly entered color value to the handler func on124.

o JavaScript ([Link]): The setColor func on checks the where parameter to

determine the target and then sets the appropriate style property of the
document.body125.

JavaScript

func on setColor(where, newColor) {

if (where == "background")

[Link] = newColor; // Updates background

else

[Link] = newColor; // Updates foreground

}
126

Dynamic Font Changes

 Mechanism: Any CSS property of an element (like font size or style) can be dynamically
changed using JavaScript event handlers, par cularly mouse events127.

o Change on Hover: The mouseover event is used to trigger the dynamic change 128.

o Revert on Leave: The mouseout event is used to change the element back to its
original state129.

 Working of [Link]:

o Goal: Change the appearance of a link-like word when the mouse cursor is placed
over it, and change it back when the cursor moves away130130130130.

o HTML Setup: A <span> element (with the text "Washington") is styled in blue by
default (.wordText)131131131131131131131131131. It includes inline onmouseover and
onmouseout handlers132132132132.

 onmouseover: Sets the element's color to red, font style to italic, and font
size to 2em133.

 onmouseout: Resets the color to blue, font style to normal, and font size
back to 1.1em134.
  Key Detail: The keyword this in the inline event handler refers to the DOM
object of the <span> element itself, allowing direct manipula on of its style
proper es135135135135.

4. Explain the technique of tracking mouse cursor posi on using event object proper es clientX,
clientY, screenX, screenY.

When a user interacts with a web page (e.g., clicking the mouse), the browser creates an event
object—a small "report" containing all the details about the event that just occurred136. For a mouse
click or mouse movement, the event object is a MouseEvent and contains proper es that specify the
cursor's loca on137.

The two main ways to track the cursor's posi on are using client coordinates and screen
coordinates138138138138138138.

1. Client Coordinates (clientX and clientY)

 Purpose: These coordinates are the local address inside the browser window139.

 Reference Point: They measure the posi on from the top-le corner of the browser's
content window (the viewport), measured in pixels140.

 Usage: This is the version most commonly used for posi oning elements within the web
page itself141.

Property Descrip on

clientX The horizontal coordinate (x-axis) of the cursor within the browser window142142142.

clientY The ver cal coordinate (y-axis) of the cursor within the browser window143143143.

2. Screen Coordinates (screenX and screenY)

 Purpose: These coordinates provide the big-picture address on the user's physical computer
screen144.

 Reference Point: They measure the posi on from the top-le corner of the en re computer
screen, measured in pixels145.

 Usage: This is less common but can be useful in scenarios involving mul ple monitors or full-
screen applica ons146.

Property Descrip on

The horizontal coordinate (x-axis) of the cursor rela ve to the computer screen
screenX
origin147147147.

The ver cal coordinate (y-axis) of the cursor rela ve to the computer screen
screenY
origin148148148.

Example: Tracking Posi on ([Link])

The [Link] document's <body> element uses the onclick event to call the findIt func on,
passing the event object (event)149149. The findIt func on reads the four coordinate proper es from
the event object (evt) and displays them in text boxes150.

JavaScript

func on findIt (evt) {

// Client coordinates (rela ve to browser window)

[Link]("xcoor1").value = [Link];

[Link]("ycoor1").value = [Link];

// Screen coordinates (rela ve to screen origin)

[Link]("xcoor2").value = [Link];

[Link]("ycoor2").value = [Link];

}
151

5. Discuss React Developer Tools. Explain how tools like react-detector, show-me-the-react, and
React Developer Tools assist developers.

React Developer Tools and related browser extensions are crucial for developers, offering insights
into a React applica on's structure and performance that standard browser tools cannot
provide152152152152.

Assistance from Developer Tools

Purpose / Assistance to
Tool Name Type
Developers

Detec on: Lets a developer

know which websites are
using React. This is a quick
react-detector Chrome Extension153.
way to iden fy React
applica ons for learning or
research154154154.

Detec on: Func ons similarly

to react-detector, detec ng
show-me-the-react Firefox/Chrome Add-on155.
React as the developer
browses the internet156156156.

Browser Plugin/Extension Debugging and Inspec on:

React Developer Tools This is the most powerful tool.
(Chrome/Firefox)157157157157.
It extends the browser's
 Purpose / Assistance to
Tool Name Type
Developers

developer tools by crea ng a

new dedicated React tab158.
Developers can use it to:

* View Component Hierarchy:

Inspect the structure of the
applica on as a tree of React
components159159159159.

* Inspect Props and State: View the

data (Props and State) associated
with any selected component in real-
me, which is essen al for
debugging component logic and data
flow160.

* Trace Updates: Monitor the

updates happening in the React
component tree161.

* Understand React Usage: Open

the tool on any React-powered
website to get a deep understanding
of how the site is structured using
React162.

6. Describe the concept of Dynamic Content. Explain how JavaScript arrays and event handlers are
used to show context-based messages in [Link].

Dynamic Content

Dynamic content refers to the ability to make real- me changes to the content (the actual text or
value) inside HTML elements a er the document has loaded, in addi on to changing their style,
color, or posi on163.

 Mechanism: This is done by manipula ng the value property of the associated JavaScript
object that represents the HTML element (e.g., an <input> or <textarea>)164. Changing
content is conceptually similar to changing style proper es, but instead of accessing
[Link], one accesses element.value165.

 Primary Use Case: A common applica on is to assist users by providing contextual help
messages while they fill out a form166166.

Implementa on in [Link]
The example demonstrates this by using a dedicated text area (the "help box") to provide specific
guidance for different input fields in a form167167167167.

1. JavaScript Array for Messages:

o All the help messages for the different form fields, as well as the default message,
are stored in a JavaScript array called helpers168168168168.

o Each message corresponds to an index in the array (e.g., index 0 for Name, index 4
for the default message)169169169169169169169169169169169169169169.

JavaScript

var helpers = [

"Your name must be...", // index 0

"Your email address...", // index 1

// ... more messages

"This box provides advice..." // index 4 (default)

];
170170170170

2. Event Handlers (mouseover and mouseout):

o Contextual Message (Show): When the mouse cursor is placed over an input field
(the mouseover event), it triggers a call to a handler func on (messages) and passes
the array index corresponding to the field's specific help message171171171171.

 Example: <input type = "text" onmouseover = "messages (0)" ... /> 172

o Default Message (Revert): When the cursor moves away from an input field (the
mouseout event), it triggers a call to the same handler func on, but passes the index
for the standard default message (index 4)173173173173.

 Example: <input type = "text" ... onmouseout = "messages (4)" /> 174

3. Handler Func on (messages):

o The messages func on receives the array index (adviceNumber)175175175175.

o It uses [Link]("adviceBox") to get the DOM object for the help

text area176.

o It then sets the text area's value property to the corresponding message retrieved
from the helpers array177177177177.

JavaScript

func on messages (adviceNumber) {

[Link]("adviceBox").value = helpers[adviceNumber];

}
178

7. Explain the installa on and role of [Link] in React development. Why are node and npm
important?

Installa on of [Link]

Before star ng React development, the first step is to check if [Link] is installed. This is typically
done via the command line (Terminal on Mac, Command Prompt/PowerShell on PC) 179179179179.

1. Check [Link] Version: Run the command node -v180. If a version number is returned,
[Link] is installed181.

2. Check npm Version: Run the command npm -v182. If a version number is returned, [Link] is
installed (as npm is included with it)183.

3. Installa on: If the commands are not found, [Link] must be installed by downloading and
running the installer from the official [Link] website and following the instruc ons184.

Role of [Link] in React Development

[Link] is an open-source, cross-pla orm JavaScript run me environment. Although React is a

frontend library, [Link] is crucial for the modern React development workflow:

 Development Environment: [Link] provides the local environment necessary to run the
tools that build and manage a React applica on185.

 Build Tools: Tools like Webpack and Babel (which transpile modern JavaScript/JSX into
browser-compa ble code) run on [Link].

 Applica on Crea on: It is required to run the npx create-react-app command, which sets up
the ini al project structure and dependencies for a new React applica on186.

Importance of Node ([Link]) and npm (Node Package Manager)

Tool Importance

JavaScript Run me: It allows JavaScript code to be executed

outside of a web browser (e.g., on your computer's
[Link] command line)187. It is the founda on that enables all
modern JavaScript build tools to operate in the development
environment188.

Dependency Management: It is the default package

manager for [Link] and is essen al for handling a React
npm (Node Package Manager)
project's numerous external dependencies and packages189.
It handles:

* Installing Packages: Downloading

and se ng up libraries and tools
Tool Importance

needed for the project (e.g., React

itself, build scripts)190.

* Managing Dependencies: Tracking

version numbers to ensure the code
works with the expected package
versions191.

Without [Link] and npm, it would be extremely difficult, if not impossible, to set up, manage
dependencies for, and build a modern, produc on-ready React applica on.

6 Marks Ques ons

1. What is the purpose of z-index? Explain how element stacking works with an example.

Purpose of z-index

The browser display is two-dimensional (horizontal and ver cal), but a third dimension effect, known
as stacking, can be created using CSS posi oning192.

The z-index is a CSS a ribute that determines which element appears on top when mul ple
elements occupy the same space on the screen (overlap)193.

 Rule: A higher z-index value means the element is displayed above (closer to the viewer)
elements with a lower z-index194194.

 Dynamic Stacking: The stacking order can be changed dynamically using JavaScript by
modifying the element's style property [Link]. This allows elements to be brought
forward or sent back in the stack195.

How Element Stacking Works (Example)

The [Link] and [Link] example demonstrates dynamic stacking with images 196196196.

1. Ini al Setup: Three image elements (airplanel, airplane2, airplane3) are posi oned
absolutely on the screen and overlap because they are given coordinates that place them in
the same general area197197197197197197197197197. Each image is ini ally given a low, equal z-index
of 0198198198198198198198198198198.

2. Dynamic Change (JavaScript toTop func on):

o The toTop func on is called when a user clicks an image (onclick =

"toTop('airplanel')").

o It iden fies the element that was previously on top (domTop) and the new element
that was just clicked (domNew)199199199.

o Send Old Top Back: The previously top element is reset to a low z-index of 0
([Link] = "0";)200.
 o Bring New Top Forward: The newly clicked element is given a much higher z-index of
10 ([Link] = "10";), ensuring it moves to the very top of the stack and
becomes fully visible in the overlapping area201.

The result is that clicking any image brings it to the forefront of the stack 202.

2. Explain sta c posi oning and its characteris cs. How is it different from absolute and rela ve
posi oning?

Sta c Posi oning

 Defini on: Sta c posi oning is the default value for the posi on CSS property203203203. It is
iden cal to how HTML elements are rendered normally without any CSS posi oning
applied204.

 Characteris cs:

o Normal Flow: Sta cally posi oned elements are arranged sequen ally (like text in a
word processor: fill a row, then start a new row)205205205.

o Cannot be Posi oned: These elements cannot be posi oned or reposi oned using
the top or le proper es206.

o No Coordinate System: They do not define a coordinate system for their child
elements (except for the <body> element, which, while it cannot be posi oned,
defines a coordinate system for its children)207.

Differen a on from Absolute and Rela ve Posi oning

Feature Sta c Posi oning Rela ve Posi oning Absolute Posi oning

Yes (Default value

Default No209. No210.
for posi on)208.

Rela ve to the element's Rela ve to the nearest

Ignored. top/le
Posi oning natural posi on in the posi oned ancestor (or the
have no effect211.
flow212. document body)213213213213.

Stays in the normal Removed from the normal

Document Stays in the normal
document flow (its space is document flow (other elements
Flow document flow214.
reserved)215. ignore its space)216216.

Cannot be moved Can be moved dynamically Can be moved dynamically with

Movement
dynamically217. with le /top218218218218. le /top219219219.

3. Write a note on dynamic movement of elements. Explain how top and le proper es are
changed through JavaScript.

Dynamic Movement of Elements

Dynamic movement, whether instant or animated, is the process of changing an HTML element's
posi on on the screen in real- me, typically in response to a user or browser event220220220220.

 Prerequisite: For an element to be movable, its CSS posi on property must be set to either
absolute or rela ve221.

 Mechanism: Movement is achieved by dynamically changing the values of the top (ver cal)
and le (horizontal) CSS proper es using JavaScript222.

Changing top and le with JavaScript

JavaScript interacts with the element's style proper es via the DOM (Document Object Model).

1. Accessing the Element: The element's style proper es are accessed using
[Link]('elementID').style223.
224224
2. Property Access: The top and le proper es are accessed as [Link] and [Link] .

3. Unit Concatena on:

o The top and le proper es in CSS require unit abbrevia ons (like "px" for pixels) to
be valid strings225.

o Input values from the user (e.g., from a text box) are read as plain strings of
numbers226.

o Therefore, JavaScript must concatenate the unit (e.g., "px") to the numeric input
before assigning the final string to the [Link] or [Link] property227227227.

Example: The JavaScript func on moveIt demonstrates this concatena on for instant movement:

JavaScript

func on moveIt (movee, newTop, newLe ) {

dom = [Link](movee).style;

// Concatenate "px" unit to the numeric input string

[Link] = newTop + "px";

[Link] = newLe + "px";

}
228228228228

This simple assignment immediately reposi ons the element to the new coordinates229. For slow
(animated) movement, this assignment happens repeatedly within a mer loop (like setTimeout)
a er small, incremental changes to the numeric coordinates230230230230230230230230.

4. Explain the working of [Link] for toggling element visibility.

The [Link] file contains a JavaScript func on, flipImag(), designed to dynamically toggle the
visibility of a document element with the ID "saturn"231231231231.

Working of flipImag()

The func on works based on the CSS visibility property, which can be set to either "visible" or
"hidden"232232232232.

1. Get DOM Access: The func on first retrieves the style object for the target element
("saturn") using its ID. This allows JavaScript to read and write the element's style
proper es233.

JavaScript

dom = [Link]("saturn").style;
234

2. Check Current State: It then checks the current value of the visibility property 235.

JavaScript

if ([Link] == "visible")
236

3. Toggle Visibility (Flip the State):

o If currently "visible": The property is set to "hidden", making the element disappear
from the display237.

JavaScript

[Link] = "hidden";
238

o If currently "hidden" (or any other value): The property is set to "visible", making
the element appear on the display239.

JavaScript

else

[Link] = "visible";
240

Integra on with HTML

The [Link] file integrates this func on with a bu on using a DOM 0 event handler, so the
func on is called every me the bu on is clicked:

HTML

<input type="bu on" value="Toggle Saturn" onclick="flipImag()" />

241
Thus, the element's visibility is dynamically toggled between shown and hidden with each click 242.

5. What are pure func ons and immutability? Explain their role in React’s func onal programming
approach.

React emphasizes a func onal programming approach over object-oriented programming, and two
key concepts from this paradigm are pure func ons and immutability243.

1. Pure Func ons

A func on is considered pure if it meets two criteria:

1. Determinism: Given the same inputs (arguments), it will always return the same output244.

2. No Side Effects: It does not modify any data or state outside of its scope (e.g., it does not
change global variables, write to a file, or change an input object)245.

 Role in React: React components, especially modern func onal components, are o en
wri en as pure func ons. This makes them highly predictable, easier to test, and poten ally
be er for performance246246246246246246246246246. When a component is a pure func on, React
can confidently re-render it knowing the result will only change if the inputs (props and
state) change.

2. Immutability

Immutability is the principle that once a piece of data or an object is created, it cannot be
changed247.

 In Prac ce: When you need to update data, instead of modifying the exis ng variable, you
create a new copy of the data with the desired changes.

 Role in React: Immutability is cri cal for managing state in React. React needs to know when
the applica on's state has truly changed so it can efficiently re-render the components.

o By enforcing immutability, developers ensure that state updates are always new
objects/arrays. This clear signal allows React to easily detect a change (a new
reference) and proceed with the update and re-rendering process248.

o Example: When adding a number to an array in React, you use the JavaScript spread
operator (...) to create a completely new array, ensuring immutability249249249.

JavaScript

// Creates a new array with all exis ng numbers + 4, leaving the original array unchanged

setNumbers([...numbers, 4]);
250250250

6. Explain the challenges developers face due to fast ECMAScript updates in JavaScript.
React matured during a period of significant and rapid change in JavaScript's evolu on251. The shi in
the ECMAScript (JavaScript standard) release cycle has created challenges for developers working
with React252.

The Change in ECMAScript Releases

 Pre-2015: ECMAScript specifica ons were released very infrequently (some mes a decade
apart). Developers rarely had to learn new core syntax253.

 Post-2015: New features and syntax are added every single year. The naming conven on
shi ed from numbered releases (e.g., ES5) to year-based naming (e.g., ECMAScript 2016)254.

Challenges for Developers (Impact on React)

1. Steep Learning Curve: The primary challenge is the con nuous need to learn new syntax and
features255255255255. New features like arrow func ons (=>), template literals (back cks ), and
logical assignment operators (||=`) are immediately adopted by the React
community256256256256256256256256256256256256.

2. Code Readability and Comprehension: Without knowledge of the latest ECMAScript features,
modern React code can be difficult to read and follow. For example, a simple func on can
look completely different in the new vs. old syntax257257257257257257257257257257.

| Older JS | New ECMAScript |

| :--- | :--- |

| var sum = func on(a, b) { return a+b; }; 258258 | const sum = (a,b) => a+b; 259259 |

3. Outdated Documenta on: React documenta on and examples o en assume the developer
is already familiar with the newest JavaScript syntax260260.

In essence, React developers must constantly keep up with two evolving systems—the React library
itself and the JavaScript language it is built upon261261.

7. Describe how the browser generates an event object. Explain why event handling differs across
browsers (Chrome, Firefox, IE).

Browser Generates an Event Object

When a user interacts with a web page (e.g., a mouse click, key press, or mouse movement), the
browser recognizes this interac on as an event262.

 Event Object as a "Report": The browser's immediate response is to quietly create a data
structure known as an event object263.

 Content: This event object acts as a detailed "report" that contains all the specifics about the
event that just happened, such as:

o The type of event (e.g., a MouseEvent for a click)264.

o The loca on of the cursor (clientX, clientY, screenX, screenY)265265265265265265265265265.

o The element that triggered the event (target or currentTarget)266.

This event object is crucial because it provides the JavaScript event handler func on with the
contextual data needed to react appropriately267.

Event Handling Differences Across Browsers

The way this event object is provided to a JavaScript func on differs between browsers, reflec ng
historical and standards differences (though modern browsers are more aligned with DOM 2) 268.

Method of Passing Event Object to

Browser Implica on for Event Response
Handler Func on

The event object is passed directly as an

It is generally more consistent in
argument to the JavaScript func on if
Firefox (FX) responding to events, o en responding to
the func on is defined to receive a
a click anywhere on the screen270.
parameter269.

The event object exists as a global Event handling (like mouse clicks) may be
Chrome & variable that is simply "there" and ignored if the cursor is below the last
Internet available inside the handler func on, element on the display, unlike Firefox272.
Explorer (IE) even if the func on doesn't explicitly list (Note: This is an older, specific difference
it as a parameter271. men oned in the text.)

To ensure cross-browser compa bility, modern code o en tries to normalize how the event object is
accessed. However, the DOM 2 Event Model aims to provide a standardized approach using
addEventListener and explicitly passing the event object273273273273.

6 Marks Ques ons

1. What is the purpose of z-index? Explain how element stacking works with an example.

Purpose of z-index

The web browser display is two-dimensional (X and Y coordinates, controlled by le and top
proper es)274. When mul ple elements are posi oned to occupy the same space on the screen, they
are said to be stacked275.

The purpose of the z-index a ribute is to control the stacking order along an imaginary third
dimension (the Z-axis)276276276276.

 Rule: The element with the higher z-index value will be displayed on top of (i.e., visible in
the overlapping area over) elements with a lower z-index value 277277277277.

 Dynamic Use: The stacking order can be changed dynamically with JavaScript by modifying
the element's [Link] property278.

How Element Stacking Works (Example)

The example [Link] and [Link] uses this to bring a clicked image to the top of a stack of
overlapping images279.
 1. Ini al State: All three images (airplanel, airplane2, airplane3) are given an ini al, equal z-
index of 0280280280280280280280280280. The stacking order is determined by their sequence in the
HTML281.

2. The toTop Func on: When an image is clicked, the toTop func on executes282.

o It retrieves the style objects for the previously top element (domTop) and the newly
clicked element (domNew)283.

o Old Element: It sets the zIndex of the old top element back to 0 ([Link] =
"0";)284.

o New Element: It sets the zIndex of the new element to a high value, like 10
([Link] = "10";), instantly forcing it to the front of the stack285.

The result is a dynamic effect where the user can choose which element is visible on top simply by
clicking it286.

2. Explain sta c posi oning and its characteris cs. How is it different from absolute and rela ve
posi oning?

Sta c Posi oning

 Defini on: Sta c posi oning is the default value for the CSS posi on property287287287. It
renders HTML elements according to the browser's normal document flow288288.

 Key Characteris cs:

o Non-Posi onable: Elements with posi on: sta c cannot be posi oned or moved
using the top, le , bo om, or right proper es. These proper es are ignored289.

o No New Coordinate System: It does not establish a coordinate system for its child
elements (except for the <body> element)290.

Differen a on from Absolute and Rela ve Posi oning

Feature Sta c Posi oning Rela ve Posi oning Absolute Posi oning

Posi on is dictated by Posi on is set rela ve to Posi on is set rela ve to the

Reference
the normal HTML flow its natural posi on in nearest posi oned ancestor
Point
(sequen al layout)291. the normal flow292. (non-sta c parent)293293293293.

Remains in the Removed from the document

Flow Remains in the
document flow (its space flow (other elements ignore its
Removal document flow294.
is reserved)295. space)296296.

Can be displaced from its

Cannot be moved with Can be posi oned precisely with
Movability normal posi on with
top/le 297. top/le 299299.
top/le 298.
3. Write a note on dynamic movement of elements. Explain how top and le proper es are
changed through JavaScript.

Dynamic Movement

Dynamic movement of elements (DHTML) is achieved by instantly or incrementally altering the

posi on of an HTML element on the display using JavaScript300300300300.

 Prerequisite: The element's CSS posi on property must be set to absolute or rela ve for it
to be movable301.

 Mechanism: Movement is executed by changing the top (ver cal) and le (horizontal) CSS
style proper es302.

Changing top and le with JavaScript

JavaScript manipulates an element's posi on by accessing its style object through the DOM
(Document Object Model)303.

1. Accessing the Element's Style:

The style object is retrieved using the element's ID:

JavaScript

dom = [Link]('elementID').style;
304

2. Unit Requirement and Concatena on:

o In CSS, posi on values are represented as strings with units (e.g., "100px")305305305.

o If the coordinate values come from user input (like a text box) or from JavaScript
calcula ons, they are typically numeric306.

o JavaScript must concatenate the unit abbrevia on (e.g., "px") back onto the numeric
value before assigning it to the style property307307307307307307307307307.

Example ([Link]):

JavaScript

func on moveIt (movee, newTop, newLe ) {

dom = [Link](movee).style;

// Concatenate "px" unit to the numeric input strings

[Link] = newTop + "px";

[Link] = newLe + "px";

}
308308308308
This opera on instantly updates the element's posi on on the screen309. For slow, animated
movement, this assignment is performed in small, repeated steps using mer func ons310310310.

4. Explain the working of [Link] for toggling element visibility.

The [Link] file is a JavaScript script containing the func on flipImag() that is used to control the
display of a document element, specifically one with the ID "saturn"311311311311.

Working Principle

The func on dynamically modifies the element's CSS visibility style property, which can be set to
either "visible" or "hidden"312312312312.

1. DOM Access: The first step is to get the style object for the target element using its ID 313.

JavaScript

dom = [Link]("saturn").style;
314

2. Condi onal Check: The code checks the current state of the element's visibility property315.

JavaScript

if ([Link] == "visible")
316

3. Toggling Logic: The func on then flips the state:

o If the current state is "visible": The element's visibility is set to "hidden", making it
disappear317.

o Otherwise (if it is "hidden"): The element's visibility is set to "visible", making it

appear318.

JavaScript

if ([Link] == "visible")

[Link] = "hidden";

else

[Link] = "visible";
319

Role in [Link]

In the accompanying HTML, a bu on's onclick event handler calls flipImag(). This causes the Saturn
image to toggle between visible and hidden with every mouse click320.
5. What are pure func ons and immutability? Explain their role in React’s func onal programming
approach.

React encourages a func onal programming approach, in which pure func ons and immutability are
founda onal concepts321.

1. Pure Func ons

A func on is pure if:

 Same Input, Same Output: It is determinis c, always returning the same result for the same
set of arguments322.

 No Side Effects: It does not change any state or data outside of itself (e.g., it doesn't modify
its input arguments or external variables)323.

 Role in React: React components are preferably wri en as pure func ons (func onal
components). This ensures predictable behavior, making the code easier to test and debug,
and allowing React to op mize rendering performance324324324324324324324324324.

2. Immutability

Immutability is the principle of not modifying data a er it has been created325.

 In Prac ce: To "update" immutable data, a complete new copy of the data structure is
created with the required changes, while the original remains untouched326326326.

 Role in React: Immutability is vital for state management in React.

o React relies on comparing state references to determine if a component needs to re-

render. If state is mutated (changed directly), React might not detect the change,
leading to display bugs.

o By using immutable pa erns (like the JavaScript spread operator for arrays),
developers guarantee that a state change results in a new object reference. This
explicit change signal allows React to reliably and efficiently re-render the
component327.

6. Explain the challenges developers face due to fast ECMAScript updates in JavaScript.

React development takes place in a constantly evolving JavaScript ecosystem, which poses challenges
for developers328.

1. Constant Need for Learning New Syntax: Since 2015, ECMAScript (JavaScript's standard)
releases new features and syntax every year, replacing the infrequent updates of the past329.
This forces developers to con nuously learn new ways to write code, such as arrow
func ons, template literals, and new operators330330330330330330330330330330330330330330.

2. Difficulty in Code Comprehension: The React community quickly adopts the newest
JavaScript features331331. Without a deep understanding of the latest ECMAScript syntax,
developers may find modern React code (including documenta on and tutorials) hard to
read and follow332. For instance, a func on wri en in an old style is instantly replaced by a
much more concise, but syntac cally different, new style333333333333.
 3. Keeping Up with Tools and Documenta on: Official React documenta on o en assumes
familiarity with the latest JavaScript features, and many React tools and examples also rely
on the most current language standards, compounding the difficulty for developers who are
not up-to-date334334334334.

7. Describe how the browser generates an event object. Explain why event handling differs across
browsers (Chrome, Firefox, IE).

Event Object Genera on

When a user interacts with a web page (e.g., clicks, moves the mouse, presses a key), the browser
ini ates an event335.

 The Report: The browser's primary ac on is to create an event object—a small, dynamic
data structure containing all the informa on about that specific interac on336.

 Key Data: For a mouse event, this object includes vital details such as the cursor's
coordinates rela ve to the browser window (clientX, clientY) and the en re screen (screenX,
screenY)337337337337337337337337337.

 Purpose: This object is the key input for the JavaScript event handler, giving it the necessary
context to decide how to respond dynamically338.

Browser Differences in Event Handling

Historically, browsers implemented events differently, par cularly in how the event object was
exposed to the handling func on339.

Browser Event Object Access/Handling Implica on

Passes explicitly: The event object is handed directly to the JavaScript func on as an
Firefox
explicit parameter340. Firefox is noted for consistently responding to clicks anywhere on
(FX)
the screen341.

Passes implicitly (Global): The event object exists as a global variable that is available to
Chrome the handler func on, even if not explicitly defined as a parameter342. In older versions,
& IE these browsers might ignore mouse clicks that occur below the last rendered element on
the page343.

While modern browsers using the DOM 2 Event Model (IE9+, Firefox, Chrome) have converged
toward standard behavior using methods like addEventListener(), older or non-standard code (like
DOM 0) s ll exposes these differences344344344344.

8. Differen ate between absolute, rela ve, and fixed posi oning with examples.

The provided notes do not contain informa on on fixed posi oning345. The comparison will focus on
the two posi oning types detailed in the text: Absolute and Rela ve posi oning.
Feature Absolute Posi oning Rela ve Posi oning

CSS
Property posi on: absolute; 346346 posi on: rela ve; 347
Value

Nearest posi oned ancestor (any non-sta c

Reference Element's normal posi on in the
parent element), or the document body if no
Point document flow349.
posi oned ancestor exists348348348348.

Removed from the normal flow. Other

Document Stays in the normal flow. Its original
elements ignore the space it would have
Flow space is preserved351.
occupied350350.

Posi ons the element exactly at the specified Displaces/offsets the element from
top/le
coordinates rela ve to its reference its normal posi on by the specified
Effect
point352352352352. amount353.

Layering elements (e.g., a watermark)354. Slight adjustments to posi on (e.g.,

Example
Fixed loca on regardless of surrounding crea ng superscripts or highligh ng a
Use
content355. word)356356356356.

Example <p style="posi on: absolute; le : <span style="posi on: rela ve; top:
Code 100px;">Text</p> 357 15px;">Text</span> 358

9. Explain slow movement of elements using mers (setInterval() or requestAnima onFrame).

The provided notes only contain details on slow movement using setTimeout() and briefly men on
setInterval(). The notes do not contain informa on on requestAnima onFrame.

Slow Movement of Elements

Slow, animated movement is created by simula ng con nuous mo on. This is done by359:

1. Moving the element in small, discrete steps (e.g., one pixel at a me)360.

2. Adding a short delay between each step361.

This process relies on JavaScript mer func ons:

1. Using setTimeout() (Recursive Anima on)

setTimeout() executes a piece of code once a er a specified delay362. For anima on, the moving
func on calls itself recursively inside its own body using setTimeout() un l the element reaches its
des na on363363363363.

 Mechanism:

1. The func on calculates the next posi on (e.g., x++ or x--)364.

2. It sets the new posi on ([Link] = x + "px";)365.

 3. It calls setTimeout to schedule the func on to run again a er a very short delay (e.g.,
1 millisecond), star ng the next step366.

 Example Call:

JavaScript

setTimeout("moveText("+x+","+y+")", 1); // Calls itself a er 1ms delay

367

2. Using setInterval() (Con nuous Repe on)

setInterval() executes a piece of code repeatedly at a set interval368.

 Mechanism: A single call to setInterval() starts a recurring mer. The func on passed to it
will execute every me the interval expires (e.g., every 10 milliseconds). The func on would
then be responsible for calcula ng the next step and moving the element369.

 Stopping: The anima on would need to be stopped manually using clearInterval() when the
des na on is reached.

The setTimeout() approach (used in the [Link] example) is a common pa ern for slow
movement as it gives direct control over when the recursion stops370370370370.

10. Explain how to detect and react to a mouse click in DHTML using event handlers.

Detec ng and reac ng to a mouse click in DHTML (using HTML, JavaScript, and the DOM) is primarily
achieved through event handlers371371371371.

1. Detec ng the Click (Events)

A mouse click can be detected using several related events, such as:

 onclick (DOM 0): Fires when the mouse bu on is pressed and released over an element372.

 onmousedown: Fires when the mouse bu on is pressed down373373.

 onmouseup: Fires when the mouse bu on is released374374.

2. Reac ng to the Click (Event Handlers)

An event handler is a JavaScript func on that is executed when the corresponding event occurs375.

 A achment: The handler is a ached to an HTML element (or the en re <body> element)
using the event property376376376.

 Ac on: The func on contains the logic to create the dynamic reac on.

Example: Reac ng to mousedown and mouseup

The [Link] and [Link] example demonstrates detec ng the press and release of the
mouse bu on to display and hide a message377377377377.

1. Detec on/A achment (HTML): The handlers are a ached to the <body> element so they
fire regardless of where the click occurs on the page378.
HTML

<body onmousedown="displayIt(event);" onmouseup="hideIt();">

379

2. Reac on (JavaScript):

o displayIt (on mousedown): This func on is the reac on to the press. It first
calculates where to posi on the hidden message (message element) near the cursor
using the event object's coordinates ([Link], [Link])380380380380. It then sets
the message's visibility style property to "visible", making the message appear381.

JavaScript

func on displayIt (evt) {

// Posi on near cursor

[Link] = ([Link] - 130) + "px";

[Link] = ([Link] - 25) + "px";

[Link] = "visible"; // Show the message

}
382382382382

o hideIt (on mouseup): This func on is the reac on to the release. It simply sets the
message's visibility property back to "hidden", making the message
disappear383383383383.

This pair of event handlers creates a dynamic, immediate reac on near the cursor every me the
mouse bu on is pressed and held, and then released384.

11. What is the file structure of a React project? Explain the purpose of src, public, and
node_modules.

The provided notes do not contain informa on about the specific file structure of a React project or
the purpose of the src, public, and node_modules folders. The notes only men on the command to
create a React app and the availability of files in a GitHub repository 385385385385.