JavaScript Introduction

What is JavaScript?

JavaScript logo

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. While HTML structures your web content and CSS styles it, JavaScript brings it to life with interactivity and dynamic behavior.

Originally created to make web pages interactive, JavaScript has evolved into a versatile language that can be used for:

Web development (front-end and back-end)
Mobile app development
Game development
Desktop applications
Internet of Things (IoT)

JavaScript Example: Clock Component

Live Editor

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

Result

JavaScript Example: Greeting Component

Live Editor

const project = 'Compile N Run';

const Greeting = () => <p>Hello {project}!</p>;

render(<Greeting />);

Result

A Brief History of JavaScript

JavaScript was created by Brendan Eich in just 10 days in May 1995 while working at Netscape. Initially called "Mocha," then "LiveScript," it was finally named "JavaScript" as a marketing decision to capitalize on the popularity of Java at the time (despite having little connection to the Java programming language).

The language has come a long way since then. Today's JavaScript adheres to the ECMAScript standard (often abbreviated as ES), with new features added regularly through updates like ES6 (2015), which introduced significant improvements to the language.

Why Learn JavaScript?

There are several compelling reasons to learn JavaScript:

Ubiquity: It runs in every modern web browser, making it the most accessible programming language.
Versatility: It can be used for front-end, back-end, mobile apps, and more.
Job Market: JavaScript developers are in high demand.
Rich Ecosystem: It has a vast library of frameworks and tools like React, Angular, Vue, and Node.js.
Community Support: It has one of the largest developer communities with extensive resources for learning.

Setting Up Your JavaScript Environment

The beauty of JavaScript is that you don't need to install anything special to start coding. All you need is:

A text editor (like Visual Studio Code, Sublime Text, or even Notepad)
A web browser (like Chrome, Firefox, or Edge)

Your First JavaScript Program

Let's write the classic "Hello, World!" program in JavaScript.

Create a file called index.html with the following content:

html
<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Hello, World!</h1>
    
    <script>
        // This is a JavaScript comment
        console.log("Hello, World from JavaScript!");
        alert("Welcome to JavaScript!");
    </script>
</body>
</html>

When you open this file in a web browser, you will see:

"Hello, World!" displayed on the page
A message in the browser console saying "Hello, World from JavaScript!"
An alert box popping up with the message "Welcome to JavaScript!"

Understanding the Basics

Let's break down what happened in our example:

The <script> tag is where we write our JavaScript code in an HTML document.
console.log() is a function that outputs a message to the browser's console (useful for debugging).
alert() is a function that displays a popup message box.
The // syntax creates a single-line comment that is not executed.

Different Ways to Include JavaScript

There are three main ways to include JavaScript in your HTML:

1. Inline JavaScript

html
<button onclick="alert('Button was clicked!')">Click Me</button>

2. Internal JavaScript (Script tags in HTML)

html
<script>
    console.log("This is internal JavaScript");
</script>

3. External JavaScript (Separate file)

First, create a file named script.js with this content:

javascript
console.log("This is from an external file");

Then, reference it in your HTML:

html
<script src="script.js"></script>

External JavaScript is generally the preferred method for larger projects because it:

Separates concerns (HTML, CSS, and JavaScript)
Improves maintainability
Allows browser caching for better performance

Variables and Data Types

JavaScript uses variables to store data. Here's how to declare variables:

javascript
// Using let (recommended for variables that will change)
let age = 25;

// Using const (for values that won't change)
const name = "John";

// Using var (older way, generally avoided in modern JavaScript)
var isStudent = true;

JavaScript has several data types:

javascript
// Number
let count = 42;
let price = 19.99;

// String
let greeting = "Hello";
let message = 'World';

// Boolean
let isActive = true;
let isComplete = false;

// Undefined
let result;  // Value is undefined

// Null
let data = null;

// Object
let person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 28
};

// Array (a type of object)
let colors = ["red", "green", "blue"];

Basic Operators

JavaScript supports various operators for calculations and comparisons:

javascript
// Arithmetic operators
let sum = 5 + 3;        // Addition: 8
let difference = 10 - 4; // Subtraction: 6
let product = 3 * 7;     // Multiplication: 21
let quotient = 20 / 5;   // Division: 4
let remainder = 10 % 3;  // Modulus (remainder): 1

// String concatenation
let fullName = "John" + " " + "Doe";  // "John Doe"

// Comparison operators
let isEqual = 5 === 5;    // true (strict equality)
let isNotEqual = 5 !== 6; // true
let isGreater = 10 > 5;   // true
let isLess = 3 < 7;       // true

// Logical operators
let andResult = true && false;  // false
let orResult = true || false;   // true
let notResult = !true;          // false

A Practical Example: Interactive Web Page

Let's create a simple interactive web page that changes content when a button is clicked:

html
<!DOCTYPE html>
<html>
<head>
    <title>Interactive Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1 id="heading">Welcome to JavaScript!</h1>
    <p id="paragraph">This is a simple interactive webpage.</p>
    <button id="changeButton">Change Content</button>

    <script>
        // Wait for the button to be clicked
        document.getElementById("changeButton").addEventListener("click", function() {
            // Change the heading
            document.getElementById("heading").textContent = "JavaScript is Amazing!";
            
            // Change the paragraph
            document.getElementById("paragraph").textContent = "You just used JavaScript to modify this page dynamically!";
            
            // Change button color
            this.style.backgroundColor = "#2196F3";
        });
    </script>
</body>
</html>

In this example:

We created a basic web page with HTML and some CSS styling.
We added JavaScript that listens for a button click.
When clicked, the JavaScript changes the text content of the heading and paragraph elements.
It also changes the button's background color.

This demonstrates how JavaScript can make web pages interactive by responding to user actions and modifying the DOM (Document Object Model).

Summary

In this introduction to JavaScript, we've covered:

What JavaScript is and its importance in web development
A brief history of the language
How to set up your JavaScript environment
Writing your first JavaScript program
Different ways to include JavaScript in HTML
Basic syntax, variables, data types, and operators
A practical example of making an interactive web page

JavaScript is a powerful language that forms the backbone of modern web applications. As you continue your journey, you'll discover how to create more complex interactions, work with APIs, and build full-featured web applications.

Additional Resources

To continue learning JavaScript, check out these resources:

MDN Web Docs - JavaScript - Comprehensive documentation
JavaScript.info - Modern JavaScript tutorial
freeCodeCamp - Free interactive coding lessons

Exercises

To practice what you've learned:

Create a web page with a button that changes an image when clicked.
Write a script that calculates and displays the result of adding two numbers provided by the user.
Create a webpage that changes its background color when the user clicks on different buttons.
Modify the practical example above to toggle between the original and changed content when the button is clicked multiple times.

Happy coding, and welcome to the exciting world of JavaScript!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

What is JavaScript?​

JavaScript Example: Clock Component​

JavaScript Example: Greeting Component​

A Brief History of JavaScript​

Why Learn JavaScript?​

Setting Up Your JavaScript Environment​

Your First JavaScript Program​

Understanding the Basics​

Different Ways to Include JavaScript​

1. Inline JavaScript​

2. Internal JavaScript (Script tags in HTML)​

3. External JavaScript (Separate file)​

Variables and Data Types​

Basic Operators​

A Practical Example: Interactive Web Page​

Summary​

Additional Resources​

Exercises​