JavaScript Topics
Day 18:
- Module
- Export
- Import
- Page Creation
export.mjs
// ==================Node.js============
let greeting = "Hello";
let name = "Hema";
let sayHello = () => {
return `${greeting} ${name}, How are you?`;
};
module.exports = { sayHello };
//===================== ES6 ===============
export function sayGreeting() {
return "Hello Hema, what's going on";
}
import.mjs
// ==================Node.js============
let myCall = require('./export.js');
console.log(myCall.sayHello())
//===================== ES6 ===============
import { sayGreeting } from "./export.mjs";
console.log(sayGreeting());
StudentInfo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./Home.css" />
<link rel="stylesheet" type="text/css" href="./StudentInfo.css" />
</head>
<body>
<header>
<h1>Hema Coding School</h1>
</header>
<nav>
<a href="./Home.html">Home</a>
<a href="./Courses.html">Courses</a>
<a href="./About.html">About Us</a>
<a href="./Contact.html">Contact</a>
<a href="./StudentInfo.html">Student Information</a>
</nav>
<main>
<section>
<marquee >Welcome to Hema Coding School</marquee>
</section>
<section>
<h2>Student Information</h2>
<table id="studentInfoTable">
<thead>
<tr>
<th>S. No</th>
<th>Name</th>
<th>Attendance</th>
<th>Feedback</th>
</tr>
</thead>
<tbody id="studentInfoBody">
</tbody>
</table>
</section>
</main>
<footer>
<p>© 2024 Hema Coding School. All rights reserved.</p>
</footer>
<script src="./StundentInfo.js"></script>
</body>
</html>
StudentInfo.css:
table {
width: 100%;
margin-top: 1em;
}
table,th,td{
border: 1px solid #ddd;
}
th{
background-color: #efdcdc;
}
th,td{
padding: 0.8em;
text-align: center;
}
StundentInfo.js:
const students = [
{ id: 1, name: "Hema", attendance: 80, feedback: "Excellent" },
{ id: 2, name: "Mahesh", attendance: 75, feedback: "Good" },
{ id: 3, name: "Maruthi", attendance: 90, feedback: "Very Nice" },
];
let displayStudents = () => {
let studentInfoBody = document.getElementById("studentInfoBody");
students.map((student) => {
console.log(student.name);
let row = document.createElement('tr');
row.innerHTML = `<td>${student.id}</td><td>${student.name}</td><td>${student.attendance}%</td><td>${student.feedback}</td>`
studentInfoBody.appendChild(row)
});
};
let addStudent = (id, name, attendance, feedback)=>{
let studentData = students.push({id, name, attendance, feedback})
}
addStudent(4, "Riya", 95, "Out Standing");
addStudent(5, "Rathan", 85, "Very Good");
addStudent(6, "Girija", 95, "Outstanding");
displayStudents()
Interview Questions:
1. What is the purpose of the export statement in JavaScript?
2. How do you use the export statement to export a variable or function?
3. Explain the difference between named exports and default exports?
No comments:
Post a Comment