JavaScript Essentials
Introduction to JavaScript
The Language of the Web
If HTML is the skeleton of a webpage and CSS is its clothing, then JavaScript is the nervous system. It's the programming language that brings websites to life, making them interactive and dynamic. Without it, the web would be a static collection of documents. With it, we get applications that respond to our clicks, update content without reloading, and create engaging user experiences.
Originally created in just 10 days in 1995 at Netscape, it was first called Mocha, then LiveScript, and finally JavaScript. The name was a marketing move to piggyback on the popularity of another language, Java, though the two are fundamentally different. To ensure that JavaScript worked the same way across different browsers, it was standardized under the name ECMAScript. Today, when we talk about JavaScript, we're usually referring to the language defined by the ECMAScript standard.
Working with HTML and CSS
JavaScript doesn't work in isolation. It's one of the three core technologies of the World Wide Web, each with a distinct role:
- HTML (HyperText Markup Language): Provides the basic structure and content of pages.
- CSS (Cascading Style Sheets): Styles the content, handling colors, fonts, and layout.
- JavaScript: Controls the behavior of the page, handling user interactions and dynamic changes.
You can add JavaScript directly into an HTML file using the <script> tag. It can be placed in the <head> or, more commonly, at the end of the <body> section to ensure all HTML content is loaded before the script runs.
<!DOCTYPE html>
<html>
<head>
<title>My First JS Page</title>
</head>
<body>
<h1>A Simple Page</h1>
<p>This is a paragraph.</p>
<script>
// JavaScript code goes here
console.log("Hello, World!");
</script>
</body>
</html>
For more complex code, it's best practice to keep your JavaScript in a separate .js file and link to it from your HTML. This keeps your code organized and reusable.
<!-- In your HTML file -->
<script src="scripts/main.js"></script>
Basic Syntax and Structure
JavaScript code is made up of statements, which are like sentences in a human language. Each statement is an instruction for the computer to perform an action. While not always required, it's a common convention to end each statement with a semicolon (;).
A semicolon indicates the end of a statement, making code clearer and preventing potential bugs.
To be useful, programs need to store and work with information. We do this using variables, which are containers for data values. In modern JavaScript, we declare variables using the let and const keywords.
// Use 'let' for variables that might change.
let userScore = 0;
userScore = 10; // This is valid.
// Use 'const' for variables that will not change.
const yearOfBirth = 1990;
// yearOfBirth = 1991; // This would cause an error.
You can also leave notes in your code called comments. The computer ignores them, but they're incredibly helpful for explaining what your code does to other developers, or to your future self.
// This is a single-line comment.
/*
This is a
multi-line comment.
It can span several lines.
*/
With these building blocks, you can start writing simple scripts. This foundation is the first step toward creating rich, interactive web applications.
If HTML provides the structure of a webpage and CSS provides the styling, what is the primary role of JavaScript?
What is the official standardized name for the language specification that modern JavaScript versions are based on?