Introduction to JavaScript Programming¶

Table of Contents¶

Introduction
Getting Started with JavaScript
Variables and Data Types
Operators
Control Structures
Functions
Objects and Arrays
DOM Manipulation
Events
Basic Error Handling
Running Javascript Code In Browser Console
Conclusion

1. Introduction¶

JavaScript is a programming language primarily used to add interactivity and dynamic behavior to websites. Alongside HTML and CSS, JavaScript is one of the essential technologies in web development. It can be used for various tasks, including handling events, manipulating HTML and CSS, performing calculations, and even building entire applications.

2. Getting Started with JavaScript¶

JavaScript can be written inside HTML files or in separate .js files.

Inline JavaScript in HTML¶

You can write JavaScript directly in an HTML document within <script> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <h1>Welcome to JavaScript</h1>
    <script>
      alert("Hello, World!");
    </script>
  </body>
</html>

External JavaScript File¶

To keep your code organized, you can create a separate JavaScript file and link it to an HTML document:

Create a file named script.js and add JavaScript code inside.
Link it in the HTML file using <script src="script.js"></script>.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <h1>Welcome to JavaScript</h1>
    <script src="script.js"></script>
  </body>
</html>

3. Variables and Data Types¶

In JavaScript, variables are used to store information. You can create variables using let, const, or var.

Declaring Variables¶

let and const are commonly used.
let is used for variables that can change.
const is used for variables that will not change.

let name = "Alice"; // String
const age = 25; // Number

Data Types¶

JavaScript has several basic data types:

String: Text values, written inside quotes (single or double).
```
let greeting = "Hello, World!";
```
Number: Represents numeric values.
```
let score = 99.5;
```
Boolean: Represents true or false values.
```
let isStudent = true;
```
Object: Used to store multiple values as key-value pairs.
```
let person = { name: "Alice", age: 25 };
```
Array: Stores multiple values in an ordered list.
```
let colors = ["red", "green", "blue"];
```

Variable Naming Rules¶

Names can contain letters, numbers, underscores, and dollar signs ($).
Must begin with a letter, $, or _.
JavaScript is case-sensitive, so myVariable and MyVariable are different.

4. Operators¶

Operators perform operations on variables and values.

Arithmetic Operators¶

Used to perform mathematical calculations:

let x = 10;
let y = 5;
console.log(x + y); // Output: 15
console.log(x - y); // Output: 5
console.log(x * y); // Output: 50
console.log(x / y); // Output: 2

Assignment Operators¶

Assign values to variables:

let z = 10;
z += 5; // z = z + 5; Now z is 15

Comparison Operators¶

Compare values and return a boolean (true or false):

console.log(10 > 5); // true
console.log(10 === "10"); // false (strict equality)

Logical Operators¶

Combine conditions:

&& (AND): Both conditions must be true.
|| (OR): At least one condition must be true.
! (NOT): Reverses the condition.

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

5. Control Structures¶

Control structures determine the flow of code.

If-Else Statements¶

let age = 18;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Loops¶

For Loop¶

for (let i = 0; i < 5; i++) {
  console.log(i);
}

While Loop¶

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

6. Functions¶

Functions let you reuse code blocks.

Defining Functions¶

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice"));

Arrow Functions (ES6)¶

A shorter way to define functions:

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Alice"));

7. Objects and Arrays¶

JavaScript has versatile data structures like Objects and Arrays.

Objects¶

let car = {
  make: "Toyota",
  model: "Camry",
  year: 2020,
};
console.log(car.make); // Output: Toyota

Arrays¶

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // Output: banana

8. DOM Manipulation¶

JavaScript can interact with HTML elements.

Accessing Elements¶

<p id="text">Hello</p>
<button onclick="changeText()">Click Me</button>

<script>
  function changeText() {
    document.getElementById("text").innerHTML = "Hello, World!";
  }
</script>

9. Events¶

JavaScript can respond to user actions like clicks.

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

10. Basic Error Handling¶

Errors are common, and JavaScript provides ways to handle them.

Try-Catch¶

try {
  console.log(x); // x is not defined
} catch (error) {
  console.error("An error occurred:", error);
}

11. Running JavaScript in the Browser Console¶

One of the easiest ways to test JavaScript code is by using the browser's console. All modern browsers have a console built-in that lets you execute JavaScript in real-time.

Steps to Open the Console¶

In Google Chrome:
Right-click on the page and select Inspect or press Ctrl+Shift+J (Windows) or Cmd+Option+J (Mac) to open the Developer Tools.
Go to the Console tab.
In Firefox:
Right-click on the page and select Inspect Element or press Ctrl+Shift+K (Windows) or Cmd+Option+K (Mac) to open the Developer Tools.
Navigate to the Console tab.
In Microsoft Edge:
Right-click on the page and select Inspect or press F12 to open the Developer Tools.
Click on the Console tab.
In Safari:
Go to Safari > Preferences. In the Advanced tab, check Show Develop menu in menu bar.
Right-click on the page and select Inspect Element or press Cmd+Option+C to open Developer Tools and go to the Console tab.

Running Code in the Console¶

Once the console is open, you can type JavaScript code directly and press Enter to execute it. For example:

console.log("Hello from the Console!");

The output will appear immediately in the console. This is a great way to quickly test code snippets and see the results without needing to refresh a page.

Example: Simple Calculation¶

You can use the console for quick calculations or to test functions:

let x = 10;
let y = 20;
console.log(x + y); // Output: 30

The console is an invaluable tool for debugging and testing JavaScript code in a live environment.

12. Conclusion¶

JavaScript is powerful for web development. This guide covers the essentials, so keep practicing, explore advanced topics, and refer to documentation as you grow your skills!