This tutorial will guide you through using JavaScript and Node.js to create a simple project and demonstrate embedding JavaScript code into an HTML file.
Before starting, ensure you have the following installed:
- Node.js: Download and install Node.js here
- A code editor (e.g., Visual Studio Code).
- Initialize the Project:
Open a terminal and run:
mkdir my-js-node-project cd my-js-node-project npm init -y - Create Files:
- Create an
index.htmlfile for the front-end. - Create a
script.jsfile for JavaScript logic. - Create a
server.jsfile for the back-end Node.js server.
- Create an
This is the HTML file that embeds the JavaScript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript and Node.js</title>
</head>
<body>
<h1>Hello, JavaScript and Node.js!</h1>
<button onclick="showMessage()">Click Me</button>
<script src="script.js"></script>
</body>
</html>This file contains JavaScript logic for the front-end:
function showMessage() {
alert("Hello from JavaScript!");
}Set up a basic Node.js server:
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Node.js server is running!');
});
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});-
Start the Node.js server:
node server.js
- The server will be available at
http://localhost:3000.
- The server will be available at
-
Open
index.htmlin a browser to interact with the JavaScript embedded in HTML.
- Learn more about Node.js modules and packages with
npm. - Explore front-end frameworks like React or back-end frameworks like Express.js.
Feel free to adapt this README structure to fit your specific project! Let me know if you'd like me to expand on any section. 🚀