Introduction to JavaScript

JavaScript is a versatile, high-level programming language that is an essential part of web development. It allows developers to create dynamic and interactive web content, making websites more engaging and functional. This introduction will cover what JavaScript is, its importance in web development, basic syntax, and how to add JavaScript to HTML.

JavaScript syntax consists of various elements like variables, data types, operators, functions, and control structures. Here’s an overview of the basics.

3.1 Variables

Variables are used to store data values. In modern JavaScript, you can declare variables using let, const, or var.

let: Declares a block-scoped variable.

let name = "John";
let age = 25;

const: Declares a constant, which means its value cannot be changed.

const pi = 3.14;

var: An older way to declare variables, with function scope.

var city = "New York";

3.2 Data Types

JavaScript has several data types:

String: Text enclosed in quotes.

let greeting = "Hello, World!";

Number: Numeric values.

let count = 10;

Boolean: Represents logical values (true or false).

let isStudent = true;

Array: A collection of values.

let colors = ["red", "green", "blue"];

Object: A collection of key-value pairs.

let person = {
  name: "Alice",
  age: 30
};

3.3 Operators

JavaScript supports arithmetic, comparison, and logical operators.

Arithmetic Operators: +, -, *, /, %

let sum = 10 + 5; // 15

Comparison Operators: ==, ===, !=, !==, <, >, <=, >=

let isEqual = (5 === 5); // true

Logical Operators: && (AND), || (OR), ! (NOT)

let isAdult = (age >= 18 && age <= 65);

3.4 Functions

Functions are blocks of reusable code that perform a specific task.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Output: Hello, Alice!

JavaScript can be added to an HTML document in three main ways: inline, internal, and external.

4.1 Inline JavaScript

You can include JavaScript directly within an HTML element using the onclick attribute (or other event attributes).

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

4.2 Internal JavaScript

Place JavaScript code within the <script> tag inside the HTML document. This is useful for small scripts or testing purposes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal JavaScript</title>
</head>
<body>
  <h1>Welcome to JavaScript</h1>
  <script>
    document.write("Hello from JavaScript!");
  </script>
</body>
</html>

4.3 External JavaScript

The best practice is to write JavaScript in a separate file and link it to your HTML document. This keeps your code organized and reusable.

Step 1: Create an external JavaScript file, e.g., script.js.

// script.js
console.log("External JavaScript file linked!");

Step 2: Link the JavaScript file to your HTML document using the <script> tag with the src attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External JavaScript</title>
</head>
<body>
  <h1>External JavaScript Example</h1>
  <script src="script.js"></script>
</body>
</html>

Placement: It’s generally recommended to place the <script> tag before the closing </body> tag to ensure the HTML content is fully loaded before the JavaScript executes.

Overview

What is JavaScript?

Key Features of JavaScript:

Importance of JavaScript in Web Development

2.1 Enhances User Experience

2.2 Enables Rich User Interfaces

2.3 Full-Stack Development

Basic JavaScript Syntax