Scribd
Upload
16 views13 pages

Ip Viva

Uploaded by

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

Ip Viva

Uploaded by

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

IP VIVA

Experiment 1: HTML Basics

1. Q: Who created HTML, and why is it significant?


○ A: HTML (Hyper Text Markup Language) was created by Tim
Berners-Lee in 1991 to structure and format content on the web,
forming the foundation for all web development.
2. Q: What are HTML tags?
○ A: Tags define HTML elements and are typically enclosed in
angle brackets, like <p> for a paragraph or <a> for a link.
3. Q: Explain the <head> tag and its importance.
○ A: The <head> tag contains meta-information, such as the
document's title, linked stylesheets, scripts, and other metadata.
4. Q: Describe the purpose of the <title> tag.
○ A: The <title> tag defines the text displayed in the browser
tab for a webpage and is critical for SEO and accessibility.
5. Q: What is the purpose of <h1> to <h6> tags?
○ A: These are heading tags used for structuring content by
importance, where <h1> is the main title and <h6> the least
significant.
6. Q: What’s the difference between <div> and <span>?
○ A: <div> is a block-level container for HTML elements, while
<span> is an inline container used to style small portions of text.
7. Q: How do you insert an image in HTML?
○ A: Use the <img> tag with attributes like src for the image URL
and alt for accessibility.

Experiment 2: CSS Styling

1. Q: What does CSS stand for, and what is its primary function?
○ A: CSS stands for Cascading Style Sheets, and it is used to
style HTML documents by controlling layout, colors, and fonts.
2. Q: Explain Inline, Internal, and External CSS.
○ A: Inline CSS applies styles directly to HTML elements, Internal
CSS uses a <style> block within the HTML, and External CSS
links to a .css file.
3. Q: What is a CSS selector?
○ A: CSS selectors are patterns used to select elements on the
page to apply styles, such as element, class, or ID selectors.
4. Q: How does the CSS Box Model work?
○ A: The Box Model considers each element as a rectangular box,
including content, padding, border, and margin to manage
space and layout.
5. Q: What is a pseudo-class in CSS?
○ A: A pseudo-class, like :hover or :active, applies styles
based on an element's state, such as when a user hovers over
it.
6. Q: What are the pros and cons of External CSS?
○ A: External CSS keeps HTML files cleaner and allows reusable
styles across multiple pages but requires an additional HTTP
request.
7. Q: How does CSS cascade and inheritance affect styling?
○ A: CSS applies styles based on specificity, importance, and
source order, with inherited properties coming from parent
elements.

Experiment 3: Bootstrap

1. Q: What is Bootstrap primarily used for?


○ A: Bootstrap is used to quickly build responsive, mobile-first
websites with pre-designed components and a flexible grid
system.
2. Q: Explain the purpose of the Bootstrap grid system.
○ A: The grid system allows you to create responsive layouts with
a 12-column structure that adjusts to different screen sizes.
3. Q: What are Bootstrap components?
○ A: Bootstrap offers pre-built UI components like buttons,
navbars, forms, and cards for consistent and easy-to-use
design elements.
4. Q: How do you use Bootstrap classes for spacing?
○ A: Bootstrap classes like m-3 for margin or p-3 for padding add
spacing to elements without custom CSS.
5. Q: What is a navbar, and how does Bootstrap handle it?
○ A: A navbar is a navigation menu that Bootstrap makes
responsive and customizable with navbar classes and
attributes.
6. Q: Explain the difference between col-md- and col-lg- in
Bootstrap.
○ A: col-md- defines columns for medium screens, while
col-lg- targets large screens, adapting content layout to
screen sizes.
7. Q: How does Bootstrap handle responsive images?
○ A: Using the img-fluid class, Bootstrap automatically scales
images to fit their container.

Experiment 4: JavaScript Basics

1. Q: What are some data types in JavaScript?


○ A: JavaScript has primitive types like string, number,
boolean, undefined, and null, as well as object for complex
data.
2. Q: Explain the use of let, const, and var.
○ A: let is block-scoped, const is block-scoped and constant,
and var is function-scoped, an older method with fewer
restrictions.
3. Q: What is the difference between == and ===?
○ A: == checks for value equality with type conversion, while ===
checks for both value and type equality.
4. Q: What are JavaScript operators?
○ A: Operators include arithmetic (+, -, *), comparison (>, <),
logical (&&, ||), and assignment (=).
5. Q: Describe the function of console.log().
○ A: console.log() outputs messages to the browser's console
for debugging and inspecting code execution.
6. Q: What is NaN in JavaScript?
○ A: NaN stands for "Not a Number" and is the result of invalid
mathematical operations.
7. Q: How are arrays created in JavaScript?
○ A: Arrays are created with square brackets, like let arr =
[1, 2, 3];, allowing indexed storage of multiple values.

Experiment 5: Conditional Statements

1. Q: What is a conditional statement?


○ A: A conditional statement evaluates expressions to decide
which block of code to execute based on conditions, such as
if, else, and switch.
2. Q: When should you use switch over if-else?
○ A: Use switch when comparing one variable against multiple
possible values, making code more readable for specific cases.
3. Q: How does the if-else structure work in JavaScript?
○ A: if-else checks a condition; if true, the if block executes,
otherwise, the else block runs if present.
4. Q: How can you find the maximum of three numbers?
○ A: Use if statements to compare each number or JavaScript’s
Math.max() function.
5. Q: What is else if used for?
○ A: else if adds additional conditions in an if-else chain,
enabling multiple decision branches.
6. Q: How do you create a ternary operator?
○ A: A ternary operator is shorthand for if-else, written as
condition ? expr1 : expr2.
7. Q: Why is it important to handle NaN in conditionals?
○ A: NaN is treated as false, so verifying numeric input prevents
unexpected behavior in condition-based operations.

Experiment 6: Loops in JavaScript

1. Q: Describe a for loop.


○ A: A for loop has initialization, condition, and increment
sections, ideal for iterating a fixed number of times.
2. Q: When should you use a while loop?
○ A: Use a while loop when the number of iterations depends on
a condition that’s evaluated at each loop's start.
3. Q: What is a do-while loop?
○ A: A do-while loop runs at least once since the condition is
checked after the loop's body has executed.
4. Q: How does the break statement work in loops?
○ A: break exits the loop prematurely when a specific condition is
met.
5. Q: What is the continue statement?
○ A: continue skips the current loop iteration and moves to the
next iteration.
6. Q: Explain the use of for...of.
○ A: for...of iterates over values in an iterable like an array,
string, or map.
7. Q: How would you loop through numbers from 0 to 10 and check if
they’re odd or even?
○ A: Use a for loop with modulus % to check if number % 2 == 0
for even or odd values.

Experiment 7: Array Sorting with Arrow Functions

1. Q: What are arrays in JavaScript?


○ A: Arrays store multiple values in a single variable, allowing
indexed access to each element starting from index 0.
2. Q: What is an arrow function?
○ A: An arrow function is a shorter way to write a function in
JavaScript, introduced in ES6, and has lexical this binding.
3. Q: How do you sort an array in ascending and descending order?
○ A: Use array.sort((a, b) => a - b) for ascending and
array.sort((a, b) => b - a) for descending order.
4. Q: What is the difference between array.push() and array.pop()?
○ A: array.push() adds an element to the end of an array, while
array.pop() removes the last element.
5. Q: What is the map() function?
○ A: map() creates a new array by applying a function to each
element of the original array.
6. Q: Explain filter() and reduce() in JavaScript.
○ A: filter() creates a new array with elements that meet a
condition, while reduce() reduces all elements to a single
output.
7. Q: How do you check if a value is in an array?
○ A: Use array.includes(value) or array.indexOf(value)
!== -1 to check if a value exists in the array.

Experiment 8: Installing React and JSX

1. Q: What is JSX in React?


○ A: JSX is a syntax extension for JavaScript, allowing developers
to write HTML within JavaScript, which is compiled to
React.createElement calls.
2. Q: How do you install React?
○ A: Install Node.js, then use npx create-react-app
<app-name> to initialize a React project with the default
structure and dependencies.
3. Q: What is create-react-app?
○ A: create-react-app is a CLI tool for setting up a new React
project with a pre-configured development environment.
4. Q: How do you define a functional component in React?
○ A: A functional component is a JavaScript function that takes
props as an argument and returns JSX.
5. Q: How do you run a React application?
○ A: Use npm start in the project directory to start the
development server, usually accessible at
http://localhost:3000.
6. Q: What is a component in React?
○ A: A component is a reusable piece of UI that can be combined
to create complex applications in React.
7. Q: How is JSX different from HTML?
○ A: JSX is similar to HTML but has some syntax differences,
such as using className instead of class and camelCase
properties.

Experiment 9: Displaying "Hello World" in React

1. Q: How do you create a React component that displays "Hello World"?


○ A: Create a functional component that returns <h1>Hello,
World!</h1> and render it in ReactDOM.render.
2. Q: What is ReactDOM.render() used for?
○ A: ReactDOM.render() is used to render React components
into a DOM element, typically root, in an HTML file.
3. Q: How do you import React in a file?
○ A: Use import React from 'react'; at the top of the file to
import the React library.
4. Q: What is the role of App.js in React projects?
○ A: App.js is typically the main component, containing the core
structure and logic of the application.
5. Q: How does npm start work in React?
○ A: It runs a local development server using the
create-react-app configuration to enable real-time code
updates.
6. Q: Why do we need Babel in React?
○ A: Babel transpiles JSX and ES6+ syntax to vanilla JavaScript
for compatibility with older browsers.
7. Q: How do you update text dynamically in React?
○ A: Use state and setState to update the text dynamically in a
React component.

Experiment 10: Using Props and State in React

1. Q: What are props in React?


○ A: Props are inputs to a component, passed from a parent
component to a child, and are immutable within the receiving
component.
2. Q: How is state used in React?
○ A: State is a component-specific data object that can change
over time, using the useState hook in functional components.
3. Q: What is the purpose of the useState hook?
○ A: useState allows functional components to create and
manage state, enabling UI updates when state changes.
4. Q: How do props and state differ?
○ A: Props are passed from parent to child and are immutable,
while state is mutable and local to the component.
5. Q: How do you pass props to a child component?
○ A: Props are passed as attributes, like <ChildComponent
propName="value" />.
6. Q: Can props be changed within the component?
○ A: No, props are read-only and cannot be modified within the
component that receives them.
7. Q: How does state update trigger re-rendering?
○ A: When state is updated, React triggers a re-render of the
component to reflect the new state in the UI.

Experiment 11: Single Page Application (SPA) in React

1. Q: What is a Single Page Application?


○ A: An SPA is a web application that loads a single HTML page
and dynamically updates content as the user interacts, without
full-page reloads.
2. Q: How does React enable SPA functionality?
○ A: React manages the virtual DOM and uses client-side routing
to enable page updates without reloading.
3. Q: What is React Router?
○ A: React Router is a library that enables navigation in React
apps without reloading the page, ideal for SPAs.
4. Q: What is the benefit of using SPA over multi-page applications?
○ A: SPAs improve speed and user experience by reducing page
reloads and making transitions smoother.
5. Q: How does React handle dynamic data in SPAs?
○ A: React fetches data from APIs and updates the component
state, re-rendering only the necessary parts of the page.
6. Q: What is the role of the virtual DOM in React SPAs?
○ A: The virtual DOM tracks changes and optimizes updates to
the actual DOM, making SPAs more efficient.
7. Q: How do you set up basic routing in React?
○ A: Use BrowserRouter and Route components from
react-router-dom to define routes for different pages.

Experiment 12: Display "Hello World" in Node.js

1. Q: What is Node.js?
○ A: Node.js is a JavaScript runtime built on Chrome’s V8 engine,
allowing JavaScript to be run on the server side.
2. Q: How do you start a Node.js REPL?
○ A: Open the terminal and type node to start the REPL, where
you can run JavaScript interactively.
3. Q: How do you display "Hello World" in Node.js REPL?
○ A: Type console.log("Hello World"); in the REPL to output
"Hello World".
4. Q: What are the advantages of Node.js?
○ A: Node.js is asynchronous, non-blocking, and efficient for
real-time, scalable applications.
5. Q: How can you exit Node.js REPL?
○ A: Type .exit or press Ctrl + C twice to exit the REPL.
6. Q: What does console.log do in Node.js?
○ A: console.log prints output to the terminal, helpful for
debugging and logging.
7. Q: What is npm?
○ A: npm (Node Package Manager) is used to manage packages
and dependencies in Node.js projects.

Experiment 13: Execute REPL Commands in Node.js

1. Q: What is REPL in Node?


○ A: REPL stands for Read-Eval-Print Loop. It is an interactive
programming environment that allows users to enter code,
execute it, and see the results immediately.
2. Q: What is .save in Node REPL?
○ A: The .save command saves the current REPL session to a
file.
3. Q: What does the .load command do?
○ A: .load reads JavaScript code from a file and executes it in
the REPL.
4. Q: How do you clear the REPL session?
○ A: Use .clear to reset the REPL environment.
5. Q: What is global in Node.js?
○ A: global is a Node.js object that holds global variables,
accessible anywhere in the program.
6. Q: What’s the purpose of .exit?
○ A: .exit or Ctrl + C twice is used to exit the REPL session.
7. Q: What is the require function?
○ A: require loads modules or libraries into a Node.js script.
8. Q: What is the process object?
○ A: The process object provides information about the running
Node.js process, including environment variables.

Experiment 14: Using React Hooks (useState and useEffect)

1. Q: What is useState?
○ A: useState is a React hook that adds state to functional
components, allowing dynamic data changes.
2. Q: How does useEffect work?
○ A: useEffect runs side effects in a component, like fetching
data or setting up subscriptions.
3. Q: When does useEffect run?
○ A: useEffect runs after the initial render and whenever
dependencies change.
4. Q: How do you manage multiple useState hooks?
○ A: Multiple useState hooks can be added to a component to
manage different pieces of state.
5. Q: How can you control useEffect execution?
○ A: Pass an array of dependencies to useEffect to control
when it re-runs based on changes in those dependencies.
6. Q: What is a dependency array in useEffect?
○ A: It’s an array that tells React when to re-run useEffect based
on specific variable changes.
7. Q: How do useState and useEffect differ?
○ A: useState manages component state, while useEffect
handles side effects and runs after rendering.
8. Q: What is useContext?
○ A: useContext is a React hook that allows you to access
context values in functional components, making it easier to
share data between components without passing props down
manually.
9. Q: How do you create a context?
○ A: You create a context using React.createContext(), which
returns a Context object that can be used to provide and
consume values.
10.Q: How do you provide context values?
○ A: You provide context values by wrapping components in a
Context Provider, using the value prop to specify the data you
want to share.
11. Q: How do you consume context values?
○ A: You consume context values by calling
useContext(MyContext) in a functional component, where
MyContext is the context object you created.
12.Q: When should you use useContext?
○ A: Use useContext when you need to share state or data
across multiple components without prop drilling, especially for
global states like themes or user authentication.

Experiment 15: Register and Display User Data in form.

1. Q: How do you create a form in HTML?


○ A: Use the <form> element with input elements like <input>,
<select>, and <textarea> for user data collection.
2. Q: How can you validate a password?
○ A: Use JavaScript to check password strength, length, and
character requirements for validation.
3. Q: What is form validation?
○ A: Form validation checks input fields for correctness before
allowing submission, preventing invalid data entry.
4. Q: How do you display user data after submission?
○ A: Use JavaScript to capture form data and display it in a
structured format on the page.
5. Q: How can you prevent form submission if validation fails?
○ A: Use event.preventDefault() in JavaScript to stop form
submission if inputs are invalid.
6. Q: How do you retrieve form values in JavaScript?
○ A: Use document.getElementById("inputId").value to
access input values by their IDs.
7. Q: Why is input sanitization important?
○ A: Sanitizing inputs prevents harmful data like SQL injection and
cross-site scripting (XSS).

Experiment 16: Install Express.js and Display "Hello World"

1. Q: What is Express.js?
○ A: Express.js is a minimal and flexible Node.js framework for
building web applications and APIs.
2. Q: How do you install Express.js?
○ A: Use npm install express to add Express to your project.
3. Q: How do you create a basic Express server?
○ A: Import Express, create an app, set up a route with
app.get(), and use app.listen() to start the server.
4. Q: What is middleware in Express?
○ A: Middleware functions execute during request processing,
commonly used for authentication and logging.
5. Q: How do you define routes in Express?
○ A: Use app.get() for GET requests, app.post() for POST
requests, and so on, defining routes and their handlers.
6. Q: What does app.listen() do?
○ A: It starts the server on a specified port, making it accessible
via that port.
7. Q: How do you handle JSON data in Express?
○ A: Use express.json() middleware to parse JSON data in
request bodies.

You might also like