Scribd
Upload
11 views4 pages

FSD_Assignment_2_Answers

The document provides detailed explanations of various DOM methods, approaches to manipulate the DOM, event types, and ways to bind events in JavaScript. It also covers the components of the MERN stack, features of React classes, and notes on issue trackers and React components. Additionally, it discusses server-less applications using React and the differences between mutation events and observers.

Uploaded by

pinkyponkey2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views4 pages

FSD_Assignment_2_Answers

The document provides detailed explanations of various DOM methods, approaches to manipulate the DOM, event types, and ways to bind events in JavaScript. It also covers the components of the MERN stack, features of React classes, and notes on issue trackers and React components. Additionally, it discusses server-less applications using React and the differences between mutation events and observers.

Uploaded by

pinkyponkey2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Full Stack Development - Assignment 2 Answers

1. Explain all the methods in DOM in detail with example.


The DOM (Document Object Model) provides several methods to interact with the HTML
elements:
- getElementById("id"): Selects an element by its ID.
Example: document.getElementById("header");
- getElementsByClassName("class"): Returns a collection of elements with the given class
name.
Example: document.getElementsByClassName("menu-item");
- getElementsByTagName("tag"): Returns all elements with the specified tag name.
Example: document.getElementsByTagName("li");
- querySelector("selector"): Returns the first element that matches a CSS selector.
Example: document.querySelector(".highlight");
- querySelectorAll("selector"): Returns a static NodeList of all elements that match a CSS
selector.
Example: document.querySelectorAll("div.note");
- createElement("tag"): Creates a new HTML element.
Example: var p = document.createElement("p");
- appendChild(child): Appends a child node to a parent node.
Example: document.body.appendChild(p);
- removeChild(child): Removes a child node.
Example: document.body.removeChild(p);
- setAttribute("attr", "value"): Sets the value of an attribute.
Example: p.setAttribute("class", "text-bold");
- getAttribute("attr"): Gets the value of an attribute.
Example: p.getAttribute("class");
- addEventListener("event", function): Attaches an event handler to an element.
Example: p.addEventListener("click", function() { alert("Clicked!"); });

2. Explain different approaches to adding and removing content from DOM


tree.
There are two main approaches:
- Using innerHTML:
Example to add: document.getElementById("demo").innerHTML = "<p>New
Paragraph</p>";
Example to remove: document.getElementById("demo").innerHTML = "";

- Using DOM manipulation methods:


Example to add:
var p = document.createElement("p");
var text = document.createTextNode("New Text");
p.appendChild(text);
document.body.appendChild(p);
Example to remove:
var p = document.getElementById("demo");
p.parentNode.removeChild(p);

3. Explain the two steps for accessing and updating attribute nodes with
example.
Two steps are:
1. Select the element node.
Example: var img = document.getElementById("logo");
2. Use methods/properties:
- getAttribute("src"): img.getAttribute("src");
- setAttribute("alt", "New Logo"): img.setAttribute("alt", "New Logo");
- removeAttribute("title"): img.removeAttribute("title");
- hasAttribute("src"): img.hasAttribute("src");

4. Explain different types of events in detail.


Events in browsers are actions like:
- Mouse Events: click, dblclick, mouseover.
- Keyboard Events: keydown, keyup.
- Form Events: submit, focus, blur.
- Window Events: load, resize, scroll.
- Clipboard Events: copy, cut, paste.
- Drag and Drop Events: dragstart, dragover, drop.

Example for Mouse Event:


element.addEventListener("click", function() { alert("Clicked!"); });

5. Explain three ways of binding an element with example.


Three ways are:
- HTML Event Attributes:
Example: <button onclick="alert('Clicked!')">Click Me</button>
- Traditional DOM Event Handlers:
Example:
document.getElementById("btn").onclick = function() { alert("Clicked!"); };
- Event Listeners:
Example:
document.getElementById("btn").addEventListener("click", function()
{ alert("Clicked!"); });
6. Explain four components of MERN stack in detail.
- MongoDB: NoSQL database storing flexible documents.
- Express.js: Web framework for handling routes and HTTP requests.
- React: Library for building user interfaces with components.
- Node.js: JavaScript runtime for server-side code.

Example:
Frontend sends form data to Express, Express saves it in MongoDB, React shows it in the UI.

7. What are the key features of React classes?


Key features:
- Extends React.Component.
- Must have a render() method returning JSX.
- Can manage internal state using this.state.
- Use lifecycle methods like componentDidMount().

Example:
class Welcome extends React.Component {
render() { return <h1>Hello, {this.props.name}</h1>; }
}

8. Write a note on issue tracker.


Issue Tracker is a CRUD application that:
- Adds, updates, deletes, filters issues.
- Each issue has title, owner, status, dates, effort estimate.
- Used in tools like GitHub Issues and Jira.

Example:
New issue - Title: 'Login Bug', Status: 'Open', Owner: 'Dev1'

9. Write a note on React components.


React components are reusable parts of UI.
- Function Components: simple.
- Class Components: have state and lifecycle.
- Props are inputs, State is internal data.

Example:
function Greet(props) { return <h1>Hello, {props.name}</h1>; }

10. Explain server-less hello world using react components.


Server-less Hello World involves:
- Including React and ReactDOM via CDN.
- Using React.createElement() and ReactDOM.render().
Example:
ReactDOM.render(React.createElement('h1', null, 'Hello World!'),
document.getElementById('root'));

11. Write a note on mutation events and observers.


- Mutation Events (deprecated): Detected DOM changes but slow.
- Mutation Observers (modern): Efficiently observe DOM changes.

Example:
const observer = new MutationObserver((mutations) => { console.log(mutations); });
observer.observe(document.body, { childList: true, subtree: true });

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy