Full Stack Development-BIS601

Lab Manual

Dr. Aravinda Thejas Chandra

Professor

Department of Information Science and

Engineering
SJCIT, Chickballapur
Table of Contents
1. Basic JavaScript Operations
o 1.a. Hello World and Sum Calculation
o 1.b. City Array Operations
2. String Manipulation and Palindrome Check
o 2.a. String Length and Word Extraction
o 2.b. Palindrome Function
3. Object Creation and Dynamic Properties
o 3.a. Student Object Creation
o 3.b. Dynamic Property Addition
4. Event Handling in JavaScript
o 4.a. Button Click Event
o 4.b. Image Mouseover Event
o 4.c. Key Press Event
5. React Application for Issue Tracking
o 5.a. Issues List Display
6. Counter Component in React
o 6.a. Counter Functionality
o 6.b. Double and Reset Count
7. Express Server and REST API
o 7.a. Basic Express Server
o 7.b. Product Resource REST API
8. MongoDB Integration with Node.js
o 8.a. MongoDB Connection
o 8.b. CRUD Operations with Mongoose
o 8.c. React Integration with Express API

1. Basic JavaScript Operations

1.a. Hello World and Sum Calculation

Objective: Write a script that logs "Hello, World!" and calculates the sum of two numbers.

Code:

// Hello World logging

console.log("Hello, World!");

// Sum calculation
function sum(a, b) {
return a + b;
}
alert("The sum is: " + sum(5, 10));
Execution Steps:

1. Open a text editor (e.g., VSCode, Notepad++).

2. Create a new file named helloSum.js.
3. Copy and paste the code into the file.
4. Save the file.
5. Open the browser and open the Developer Tools (F12).
6. Go to the Console tab.
7. Drag and drop the helloSum.js file into the console to execute or use the command line
to run it with Node.js: node helloSum.js.

1.b. City Array Operations

Objective: Create an array of cities and perform various operations.

Code:

// City array
let cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];

// Log total number of cities

console.log("Total cities: " + cities.length);

// Add a new city

cities.push("San Francisco");
console.log("Cities after adding: " + cities);

// Remove the first city

cities.shift();
console.log("Cities after removing the first: " + cities);

// Find index of a specific city

let index = cities.indexOf("Chicago");
console.log("Index of Chicago: " + index);
Execution Steps:

1. Create a new file named cityArray.js.

2. Copy and paste the code into the file.
3. Save the file.
4. Open the Developer Tools in your browser.
5. Drag and drop the cityArray.js file into the console or run it using Node.js: node
cityArray.js.

2. String Manipulation and Palindrome Check

2.a. String Length and Word Extraction

Objective: Read a string, find its length, and extract a word.

Code:
let userInput = prompt("Enter a string:");
console.log("Length of the string: " + userInput.length);

// Extract "JavaScript"
let extractedWord = userInput.substring(0, 10); // Adjust indices as needed
console.log("Extracted word: " + extractedWord);

// Replace word
let newString = userInput.replace("oldWord", "newWord");
console.log("New string: " + newString);
Execution Steps:

1. Create a new file named stringManipulation.js.

2. Copy and paste the code into the file.
3. Save the file.
4. Open the file in a web browser (e.g., drag and drop the file into the browser).
5. Input a string when prompted and observe the results in the console.

2.b. Palindrome Function

Objective: Write a function to check if a string is a palindrome.

Code:

function isPalindrome(str) {
let reversedStr = str.split('').reverse().join('');
return str === reversedStr;
}

console.log(isPalindrome("madam")); // true
console.log(isPalindrome("hello")); // false
Execution Steps:

1. Create a new file named palindrome.js.

2. Copy and paste the code into the file.
3. Save the file.
4. Open the Developer Tools in your browser.
5. Drag and drop the palindrome.js file into the console or run it using Node.js: node
palindrome.js.

3. Object Creation and Dynamic Properties

3.a. Student Object Creation

Objective: Create a student object with various properties.

Code:
let student = {
name: "John Doe",
grade: 90,
subjects: ["Math", "Science", "English"],
displayInfo: function() {
console.log(`Name: ${this.name}, Grade: ${this.grade}, Subjects:
${this.subjects.join(", ")}`);
}
};

student.displayInfo();
Execution Steps:

1. Create a new file named studentObject.js.

2. Copy and paste the code into the file.
3. Save the file.
4. Open the Developer Tools in your browser.
5. Drag and drop the studentObject.js file into the console or run it using Node.js: node
studentObject.js.

3.b. Dynamic Property Addition

Objective: Add a property based on the student's grade.

Code:

student.passed = student.grade >= 60;

for (let key in student) {

console.log(`${key}: ${student[key]}`);
}
Execution Steps:

1. Add the above code to the studentObject.js file after the previous code.
2. Save the file.
3. Run the file again in the console or using Node.js.

4. Event Handling in JavaScript

4.a. Button Click Event

Objective: Create a button that logs a message when clicked.

HTML:

<button id="myButton">Click Me</button>

JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
console.log("Button clicked!");
});
Execution Steps:

1. Create a new file named buttonEvent.html.

2. Copy and paste the HTML into the file.
3. Add a <script> tag at the end of the body to include the JavaScript code.
4. Save the file.
5. Open the file in a web browser and click the button to see the message in the console.

4.b. Image Mouseover Event

Objective: Change the border color of an image on mouseover.

HTML:

<img id="myImage" src="image.jpg" style="border: 2px solid black;">

JavaScript:

document.getElementById("myImage").addEventListener("mouseover", function() {
this.style.borderColor = "red";
});
Execution Steps:

1. Add the above HTML and JavaScript code to the buttonEvent.html file.
2. Ensure you have an image file named image.jpg in the same directory.
3. Save the file.
4. Open the file in a web browser and hover over the image to see the border change.

4.c. Key Press Event

Objective: Log the key pressed by the user.

JavaScript:

document.addEventListener("keypress", function(event) {
console.log("Key pressed: " + event.key);
});
Execution Steps:

1. Add the above JavaScript code to the buttonEvent.html file within the <script> tag.
2. Save the file.
3. Open the file in a web browser and press any key to see the logged message in the
console.
5. React Application for Issue Tracking

5.a. Issues List Display

Objective: Create a React application to display a list of issues.

Code:

import React from 'react';

const issues = [
{ title: "Issue 1", description: "Description 1", status: "Open" },
{ title: "Issue 2", description: "Description 2", status: "Closed" },
];

function IssueList() {
return (
<div>
<h1>Issue Tracker</h1>
<ul>
{issues.map((issue, index) => (
<li key={index}>
<h2>{issue.title}</h2>
<p>{issue.description}</p>
<p>Status: {issue.status}</p>
</li>
))}
</ul>
</div>
);
}

export default IssueList;

查看全部

Execution Steps:

1. Set up a new React project using Create React App: npx create-react-app issue-tracker.
2. Navigate to the project directory: cd issue-tracker.
3. Replace the contents of src/App.js with the above code.
4. Save the file.
5. Start the development server: npm start.
6. Open the browser to http://localhost:3000 to see the issue list.

6. Counter Component in React

6.a. Counter Functionality

Objective: Create a counter component with increment and decrement functionality.

Code:
import React, { useState } from 'react';

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

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
}

export default Counter;

Execution Steps:

1. Create a new file named Counter.js in the src directory.

2. Copy and paste the code into the file.
3. Import and use the Counter component in App.js.
4. Save the files.
5. The development server should still be running; check the browser to see the counter
component.

6.b. Double and Reset Count

Objective: Extend the counter to double the count and reset it.

Code:

<button onClick={() => setCount(count * 2)}>Double</button>

<button onClick={() => setCount(0)}>Reset</button>
Execution Steps:

1. Add the above buttons to the Counter component in Counter.js.

2. Save the file.
3. Refresh the browser to see the updated functionality.

7. Express Server and REST API

7.a. Basic Express Server

Objective: Set up a basic Express server.
Code:

const express = require('express');

const app = express();
const PORT = 3000;

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

res.send('Hello, Express!');
});

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Execution Steps:

1. Create a new directory for your Express server.

2. Navigate to that directory in the terminal.
3. Initialize a new Node.js project: npm init -y.
4. Install Express: npm install express.
5. Create a new file named server.js and copy the code into it.
6. Save the file.
7. Run the server: node server.js.
8. Open the browser to http://localhost:3000 to see the message.

7.b. Product Resource REST API

Objective: Create a REST API for products.

Code:

const products = [];

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

res.json(products);
});

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

const product = req.body;
products.push(product);
res.status(201).json(product);
});
Execution Steps:

1. Add the above code to your server.js file after the existing code.
2. Ensure you have middleware to parse JSON: app.use(express.json());.
3. Save the file.
4. Test the API using Postman or a similar tool to send GET and POST requests.
8. MongoDB Integration with Node.js

8.a. MongoDB Connection

Objective: Connect to a MongoDB database.

Code:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/shop', { useNewUrlParser: true, useUnifiedTopology:

true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('MongoDB connection error:', err));
Execution Steps:

1. Ensure you have MongoDB installed and running.

2. Add the above code to your server.js file.
3. Install Mongoose: npm install mongoose.
4. Save the file.
5. Restart the server and check the console for the connection message.

8.b. CRUD Operations with Mongoose

Objective: Implement CRUD operations using Mongoose.

Code:

const productSchema = new mongoose.Schema({

name: String,
price: Number
});

const Product = mongoose.model('Product', productSchema);

// Create, Read, Update, Delete functions here

Execution Steps:

1. Add the above code to your server.js file.

2. Implement functions for each CRUD operation (Create, Read, Update, Delete).
3. Save the file.
4. Test the operations using Postman.

8.c. React Integration with Express API

Objective: Fetch and display products in React.
Code:

// Use fetch to call the /products endpoint in a React component

useEffect(() => {
fetch('/products')
.then(response => response.json())
.then(data => setProducts(data));
}, []);
Execution Steps:

1. In your React application, create a state variable to hold the products.

2. Use the above code snippet in the appropriate component (e.g., IssueList).
3. Ensure your Express server is running.
4. Refresh the React application in the browser to see the fetched products.