A Quick Recap
In Part 1, we explored what programming is and why JavaScript is an excellent choice for beginners. We discussed how JavaScript allows us to interact with the web, visualize our learning instantly, and build confidence through experimentation. Now, it's time to take our first steps into writing and running JavaScript code.
How to Run JavaScript
Before diving into the syntax, let's see where we can run JavaScript.
1. Using the Browser Console
The easiest way to execute JavaScript is through the browser console. Follow these steps:
Open your web browser (Chrome, Firefox, Edge, etc.).
Right-click anywhere on the page and select Inspect or press
F12.Navigate to the Console tab.
Type the following code and press Enter:
console.log("Hello, Syntax and Soul!");
You should see "Hello, Syntax and Soul!" printed in the console.
The browser console is a powerful tool for debugging and quick testing.
2. Using Node.js (Optional)
JavaScript is not limited to the browser. You can run it on your computer using Node.js:
Step-by-Step Guide to Install Node.js on Windows 10
Download the Node.js Installer
Go to the official Node.js website and click on the "Windows Installer" option.
Select the recommended version (LTS or Current) and click on the download link.
Run the Installer
Once the download is complete, run the installer by double-clicking on the downloaded file.
You may see a warning message from Windows, click on "Run" to proceed.
Choose the Installation Location
Choose the location where you want to install Node.js. You can choose the default location or select a different location.
Click "Next" to proceed.
Choose the Features to Install
Choose the features you want to install. You can choose to install Node.js, npm (Node Package Manager), and additional tools.
Click "Next" to proceed.
Install Node.js
Click "Install" to start the installation process.
Wait for the installation to complete. This may take a few minutes.
Verify the Installation
Once the installation is complete, open a new command prompt or PowerShell window.
Type
node -vand press Enter to verify that Node.js is installed correctly.
That's it! You have successfully installed Node.js on Windows 10.
Additional Tips
Make sure to restart your computer after installation.
You can also install Node.js using a package manager like Chocolatey.
If you encounter any issues during installation, refer to the official Node.js documentation for troubleshooting guides.
Running JavaScript with Node.js
Open a terminal or command prompt.
Type
nodeand pressEnter.Now, type:
console.log("Hello, Node.js!");
You should see the output in your terminal.
Your First JavaScript Program
Now, let’s write our first script beyond just printing text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Effect</title>
<style>
body {
background-color: #121212;
color: #00FFAA;
font-family: monospace;
text-align: center;
padding: 50px;
font-size: 24px;
}
.cursor {
display: inline-block;
width: 10px;
height: 20px;
background-color: #00FFAA;
animation: blink 0.8s infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
</style>
</head>
<body>
<div id="typing-text"></div><span class="cursor"></span>
<script>
const text = "Welcome to JavaScript Magic!";
let index = 0;
function typeText() {
if (index < text.length) {
document.getElementById("typing-text").innerHTML += text.charAt(index);
index++;
setTimeout(typeText, 100); // Typing speed
}
}
setTimeout(typeText, 500); // Delay before typing starts
</script>
</body>
</html>
Example: Creating Magic with JavaScript
Explanation
Typing Effect: JavaScript dynamically types text letter by letter.
Looping Words: After finishing one phrase, it erases and starts the next.
Interactivity: You can modify the text array to display your own phrases.
Try running this on CodePen or your own browser to see it in action!
Next Steps
Now that we've run JavaScript in the console and experimented with a basic interactive script, here’s what’s coming next:
Understanding variables, data types, and operators.
Writing functions and using control structures like loops and conditions.
More fun JavaScript magic with animations and interactivity.
Bonus
If you are facing any trouble running JavaScript in the browser console or installing Node.js, feel free to contact me through email, X, or LinkedIn.
🚀 Your Challenge
Try modifying the JavaScript script above. Change the words, adjust the speed, or even add a background color change effect. Play around and get comfortable writing JavaScript! You can do all of this within your CodePen account and then share it with me and others.
Stay tuned for the next part of the series, where we dive deeper into the core building blocks of JavaScript! 🎉