JavaScript
This is the third in a three-part series covering the basic building blocks of web pages: HTML, CSS, and JavaScript. Learn about HTML first. Then learn about JavaScript.
This lesson on JavaScript is designed to give you a fast, high-level overview of the basics. It’s not comprehensive, but it will give you enough to start working with JavaScript and understand its role in web development. JavaScript is one of the three core technologies of the web, alongside HTML and CSS. While HTML provides the structure and CSS handles the styling, JavaScript adds interactivity and dynamic behavior to web pages. If you want to create modern, interactive web applications, you need to know JavaScript.
What is JavaScript?
JavaScript is a programming language that allows you to add interactivity to web pages. It was created in 1995 by Brendan Eich and has since become one of the most popular programming languages in the world. JavaScript runs in the browser, enabling you to manipulate HTML and CSS, respond to user actions, and dynamically update content without reloading the page.JavaScript is also used outside the browser (e.g., in server-side development with Node.js), but for this lesson, we’ll focus on its role in web pages.
How JavaScript Works with HTML and CSS
Think of a web page as a house:- HTML is the structure (walls, floors, rooms).
- CSS is the styling (paint, decorations, furniture).
- JavaScript is the interactivity (light switches, doorbells, appliances).
- Change HTML content.
- Modify CSS styles dynamically.
- Respond to user actions (clicks, typing, etc.).
- Fetch data from servers (e.g., loading new content without refreshing the page).
Writing Your First JavaScript Code
JavaScript is typically added to an HTML file inside a <script> tag. Here’s a simple example:<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript Page</title>
</head>
<body>
<h1 id="greeting">Hello, World!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("greeting").innerHTML = "You clicked the button!";
}
</script>
</body>Hello, World!
In this example:
- The
<h1>tag displays a heading. - The
<button>tag has an onclick attribute that triggers a JavaScript function when clicked. - The
<script>tag contains JavaScript code that changes the text inside the<h1>element when the button is clicked.
Key JavaScript Concepts
Here are the basics you need to know to get started:- Variables
let, const, or var (prefer let and const in modern JavaScript).let message = "Hello, World!";
const pi = 3.14; // const is used for values that won't change- Functions
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!- Events
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});- DOM Manipulation
// Change text
document.getElementById("myElement").innerHTML = "New text!";
// Change style
document.getElementById("myElement").style.color = "red";
// Create new elements
let newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
document.body.appendChild(newElement);- Conditionals
if, else if, and else to make decisions in your code.let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}- Loops
for and while.for (let i = 0; i < 5; i++) {
console.log("Iteration: " + i);
}- Arrays and Objects
// Array
let colors = ["red", "green", "blue"];
console.log(colors[0]); // Output: red
// Object
let person = {
name: "Alice",
age: 25,
isStudent: true
};
console.log(person.name); // Output: AliceJavaScript in Action
Here’s a simple example that combines HTML, CSS, and JavaScript to create an interactive page:<!DOCTYPE html>
<html>
<head>
<title>Interactive Page</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="header">Welcome to My Page</h1>
<button onclick="highlightText()">Highlight Text</button>
<script>
function highlightText() {
let header = document.getElementById("header");
header.classList.toggle("highlight");
}
</script>
</body>
</html>Welcome to My Page
In this example:
- Clicking the button toggles a yellow background on the heading using JavaScript and CSS. Click the button again to remove the yellow background.
Where to Go from Here
This lesson covers the basics, but JavaScript is a powerful language with many advanced features. To continue learning:- Practice: Experiment with small projects like a to-do list or a calculator.
- Learn DOM Manipulation: Understand how to dynamically update web pages.
- Explore APIs: Learn how to fetch data from servers and display it on your page.
- Frameworks: Once you’re comfortable with the basics, explore frameworks like React, Angular, or Vue.js.
Congratulations!
You’ve taken your first steps into the world of JavaScript. With these basics, you can start adding interactivity to your web pages and exploring the endless possibilities of web development. Happy coding!This is the third in a three-part series covering the basic building blocks of web pages: HTML, CSS, and JavaScript. Learn about HTML first. Then learn about JavaScript.