Viva Preparation Syllabus

1. Web Programming Fundamentals

Working of Web Browser:

Browsers like Chrome, Firefox, and Safari interpret HTML, CSS, and JavaScript code to display web

pages.

HTTP Protocol: A stateless protocol that allows fetching resources like HTML documents. Methods

include GET, POST, PUT, DELETE.

HTTPS: Secure version of HTTP using SSL/TLS encryption for secure communication.

DNS: Domain Name System, translates human-readable domain names (like www.example.com)

into IP addresses.

TLS/SSL: Transport Layer Security and its predecessor, Secure Sockets Layer, are protocols for

encrypting data over the internet.

XML: Extensible Markup Language, a flexible way to structure data for exchange between systems.

JSON: JavaScript Object Notation, a lightweight data-interchange format, easy to read and write by

humans and machines.

DOM (Document Object Model): A programming interface for web documents that allows

manipulation of HTML and XML documents as trees of objects.

URI/URL: Uniform Resource Identifier and Uniform Resource Locator, used to identify and locate

resources on the web.

REST API: Representational State Transfer; a set of rules for building APIs that allow interaction

between client and server.

Example:

Creating a simple API request using the fetch() method in JavaScript to get data from a server:

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => console.log(data));

2. JavaScript

Introduction to JavaScript:

A high-level, interpreted programming language used to create dynamic web content.

Objects in JavaScript: JavaScript uses objects to store collections of data and more complex

entities.

Browser Objects and DOM: Interaction with the browser using objects like window, document (DOM

manipulation).

Event Handling: Functions triggered in response to user interactions like clicks or key presses.

Form Validation: Ensures correct data entry in form fields (e.g., using onsubmit event).
ES5 vs ES6:

ES5 introduced basic object manipulation, while ES6 brought in new features like arrow functions,

classes, promises, template literals.

Key Concepts:

Variables, Conditions, Loops: Using let/const, if-else, for/while loops.

Functions & Arrow Functions: Arrow functions provide a compact syntax for writing functions in ES6.

CSS in JS: Setting styles dynamically using JavaScript.

Promises and Fetch: Used to handle asynchronous operations like API calls.

Client-server Communication: Involves sending requests (via fetch, XMLHttpRequest) and receiving

responses.

Example:

Arrow Function in ES6:

const add = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5

3. React Fundamentals

Installation & Setup:

Installing React using npm: npm install react.

Basic folder structure includes directories for components, assets, styles, etc.
Components:

Core building blocks of React, which are reusable chunks of the user interface.

Component Lifecycle: Methods such as componentDidMount, componentDidUpdate, and

componentWillUnmount that define the lifecycle of React components.

State and Props:

State stores dynamic data within a component.

Props are inputs passed down from parent components to child components.

React Router: A library for routing in React applications to manage navigation between pages.

UI Design, Forms, Events, Animations: Handling user input, validating forms, and creating

interactive elements.

Example:

Simple React component:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

4. Node.js

Environment Setup: Installing Node.js from the official website or using nvm.

First App: A simple Node.js app that listens on a port using Express.js.

Asynchronous Programming: Use of callbacks, promises, and async/await for non-blocking I/O.
Event Loop: Handles asynchronous tasks by placing them in the queue until they are executed.

REPL (Read-Eval-Print Loop): An interactive shell for running Node.js commands.

Networking Module: Enables building network applications.

Buffers & Streams: Buffers represent binary data in memory; streams allow reading/writing of data

asynchronously.

File System Module: Enables interaction with the file system (read, write, update files).

Example:

A basic HTTP server in Node.js:

const http = require('http');

http.createServer((req, res) => {

res.write('Hello, World!');

res.end();

}).listen(8080);

5. Express.js

Introduction: Express is a minimal web framework for Node.js to build web applications and APIs.

Express Router: Allows routing between different URL paths.

REST API: A set of rules for creating web services.

Authentication: Managing user sessions and permissions.

Sessions: Keeping track of user data between HTTP requests.

Integration with React: Backend API serves data to React front-end.

Example:

A basic Express route:

const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Hello, World!');

});

app.listen(3000, () => console.log('Server running on port 3000'));

6. Advanced React

Functional Components: Reusable components written as functions.

Refs: Provide a way to access DOM elements directly in React.

Hooks (e.g., useState, useEffect): A feature of functional components that lets you manage state

and side effects.

Flow Architecture & Flux: Unidirectional data flow in React applications to manage state (Flux is a

design pattern for managing application state).

MVC (Model-View-Controller): An architectural pattern used in web development to separate

concerns.

Bundling with Webpack: Webpack is a module bundler used to compile JavaScript modules and

their dependencies into static assets.

Example:

Using useState and useEffect Hooks:

import React, { useState, useEffect } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

useEffect(() => {

document.title = `You clicked ${count} times`;

});

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);