JavaScript Basics

Protected: Web Development Bootcamp: Master HTML, CSS, and JavaScript in 3 Weeks

About Lesson

JavaScript is a versatile, powerful scripting language that allows you to add interactivity and dynamic features to your website. It is the backbone of modern web development, enabling functionality such as form validation, interactive maps, dynamic content updates, and much more.

1. Adding JavaScript to Your HTML

JavaScript can be added to your HTML in several ways: inline, internal, and external. The most common method is by using the <script> tag.

Using the `<script>` Tag

The <script> tag is used to embed or reference JavaScript code in an HTML document. You can place it in the <head> or at the bottom of the <body> section, depending on when you want the script to be executed.

Internal JavaScript (Script within the HTML file):

You can write JavaScript directly inside the <script> tag in the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Welcome to JavaScript Basics!</h1>
    <button id="clickBtn">Click Me</button>

    <script>
        document.getElementById('clickBtn').onclick = function() {
            alert('Button was clicked!');
        }
    </script>
</body>
</html>

In this example:

The <script> tag is placed before the closing </body> tag, which is a good practice as it ensures the page content loads first before the script is executed.
The JavaScript listens for a click event on the button with the ID clickBtn and displays an alert when the button is clicked.
External JavaScript (Script in a separate file):

If your JavaScript code is in an external file (e.g., script.js), you reference it in the HTML using the src attribute of the <script> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Welcome to JavaScript Basics!</h1>
    <button id="clickBtn">Click Me</button>

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

And in the script.js file:

document.getElementById('clickBtn').onclick = function() {
    alert('Button was clicked!');
}

2. Variables, Data Types, and Operators

In JavaScript, variables are used to store values. These values can be of various data types, such as numbers, strings, booleans, and more. JavaScript also provides operators for performing operations on variables and values.

Variables

Variables in JavaScript are used to store data that can change throughout the program. You can declare variables using var, let, or const.

var (older way to declare variables, less commonly used today).
let (preferred for variables whose value can change).
const (used for variables whose value should not change after being assigned).

let name = "John"; // A variable that can change
const age = 30;    // A constant value that cannot be reassigned

Data Types

JavaScript has several data types, including:

String: A sequence of characters, enclosed in single or double quotes.
```
let greeting = "Hello, world!";
```
Number: Represents numerical values (integers or floating-point numbers).
```
let age = 25;
let price = 19.99;
```
Boolean: Represents a logical value of true or false.
```
let isStudent = true;
let isLoggedIn = false;
```
Array: A list of values, which can be of any data type.
```
let fruits = ["apple", "banana", "orange"];
```

Object: A collection of key-value pairs.

let person = {
  name: "John",
  age: 30,
  isStudent: false
};

Undefined: A variable that has been declared but not assigned a value.
```
let notAssigned;
```
Null: Represents the intentional absence of a value.
```
let noValue = null;
```

Operators

JavaScript has a variety of operators that allow you to manipulate values.

Arithmetic Operators: Used for mathematical calculations.

let x = 10;
let y = 5;
let sum = x + y;      // Addition: 15
let difference = x - y;  // Subtraction: 5
let product = x * y;     // Multiplication: 50
let quotient = x / y;    // Division: 2
let remainder = x % y;   // Modulus: 0

Assignment Operators: Used to assign values to variables.

let a = 10;
a += 5;  // a = a + 5, so a becomes 15
a -= 3;  // a = a - 3, so a becomes 12

Comparison Operators: Used to compare two values.

let x = 10;
let y = 5;
console.log(x == y);   // Equality: false
console.log(x != y);   // Not equal: true
console.log(x > y);    // Greater than: true
console.log(x < y);    // Less than: false
console.log(x >= y);   // Greater than or equal: true
console.log(x <= y);   // Less than or equal: false

Logical Operators: Used for logical operations.

let a = true;
let b = false;
console.log(a && b);   // AND: false
console.log(a || b);   // OR: true
console.log(!a);       // NOT: false

Conclusion

In this section, you learned how to add JavaScript to your HTML pages using the <script> tag and how to declare variables, use different data types, and apply various operators for manipulating data. These basics are the foundation of JavaScript, and you’ll be building on them as you progress through more advanced topics in the course.