Introduction
JavaScript is a powerful programming language that adds interactivity and dynamic behavior to web pages. With JavaScript, you can create engaging user experiences, manipulate content, and respond to user actions. In this guide, we’ll introduce essential JavaScript concepts and terms, provide a lexicon for quick reference, and present hands-on examples to help you get started. We’ll assume you’re using Firefox, but other browsers offer similar developer tools for testing your scripts.
JavaScript Lexicon
1. JavaScript
JavaScript is a high-level, interpreted programming language that enables dynamic content and interactivity on websites.
2. Variables
Variables are used to store data values. You can declare a variable using let, const, or var. Example:
let name = "John";
3. Functions
Functions are reusable blocks of code that perform a specific task. You can define a function using the function keyword. Example:
function greet() {
console.log("Hello!");
}4. Events
Events are actions that occur in the browser, such as clicks, key presses, or mouse movements. You can listen for events using event listeners. Example:
document.getElementById("myButton").addEventListener("click", greet);5. Conditionals
Conditionals allow you to execute different code based on certain conditions using if, else if, and else. Example:
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}6. Loops
Loops allow you to repeat a block of code multiple times, such as for, while, and do...while loops. Example:
for (let i = 0; i < 5; i++) {
console.log(i);
}7. Arrays
Arrays are used to store multiple values in a single variable. You can access elements using their index. Example:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Apple
Getting Started with JavaScript
Example 1: Testing Your Setup
Create an HTML file (index.html) and a JavaScript file (script.js), and include the following code:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Test</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<button id="testButton">Test JavaScript</button>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js):
document.getElementById("testButton").onclick = function() {
alert("JavaScript is working!");
};Example 2: Fun JavaScript Project
Create a simple color-changing button. Update your HTML and JavaScript as follows:
HTML:
<button id="colorButton">Change Color</button>JavaScript:
document.getElementById("colorButton").onclick = function() {
document.body.style.backgroundColor = getRandomColor();
};
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}Example 3: Dynamic Copyright Year
This example shows how to automatically update the copyright year in your footer.
HTML:
<footer>
<p>© <span id="year"></span> Your Name. All rights reserved.</p>
</footer>
JavaScript:
document.getElementById("year").textContent = new Date().getFullYear();Final Thoughts
JavaScript opens up a world of possibilities for enhancing your web pages. By grasping these fundamental concepts and experimenting with the examples provided, you’ll be well on your way to creating interactive experiences. As you continue your learning journey, be sure to check out our Essential HTML Terms, which breaks down key terms and concepts, and our Getting Started with CSS, designed to help you master styling techniques. These resources will complement your understanding of JavaScript and empower you to build dynamic, visually appealing websites. Happy coding!
