Introduction to JavaScript

Emmanuel BRUNO
emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2026-10-05

Overview

  • Topics:
    • What is JavaScript?
    • Basic Syntax and Data Types
    • Control Structures
    • Functions
    • Event Handling and DOM Manipulation
    • Inheritance
    • TypeScript: Interest and Features
    • Practical Examples in E-commerce

Learning Objectives

  • Understand the basics of JavaScript and its role in web development.
  • Learn how to use JavaScript to manipulate the DOM and handle events.
  • Explore the concept of inheritance in JavaScript.
  • Discover the benefits and features of TypeScript.
  • Apply JavaScript and TypeScript in practical e-commerce examples.

What is JavaScript?

  • Definition:
    • JavaScript is a programming language used to create dynamic and interactive web content.
    • It is one of the core technologies of the web, alongside HTML and CSS.
  • Why JavaScript?
    • Adds interactivity to websites (e.g., form validation, dynamic content updates).
    • Widely supported by all modern web browsers.
    • Extensive ecosystem with numerous libraries and frameworks.

Basic Syntax and Data Types

Variables

  • Declaring Variables:

    • Example:

      let productName = "Laptop";
const price = 999.99;
var stock = 50;

Data Types

  • Common Data Types:

    • String, Number, Boolean, Array, Object

    • Example:

      let productName = "Laptop"; // String
let price = 999.99; // Number
let inStock = true; // Boolean
let categories = ["Electronics", "Computers"]; // Array
let product = { name: "Laptop", price: 999.99 }; // Object
  • Interactive Example:

Control Structures

Conditional Statements

  • if-else Statement:

    • Example:

      let stock = 50;

if (stock > 0) {
  console.log("In stock");
} else {
  console.log("Out of stock");
}

Loops

  • for Loop:

    • Example:

      let products = ["Laptop", "Smartphone", "Tablet"];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

Functions

Defining Functions

  • Function Declaration:

    • Example:

      function calculateTotal(price, quantity) {
  return price * quantity;
}

let total = calculateTotal(999.99, 2);
console.log(total); // 1999.98
  • Arrow Function:

    • Example:

      const calculateTotal = (price, quantity) => price * quantity;

let total = calculateTotal(999.99, 2);
console.log(total); // 1999.98

Event Handling and DOM Manipulation

Event Handling

  • Adding Event Listeners:

    • Example:

      <button id="buyButton">Buy Now</button>
<script>
  document.getElementById("buyButton").addEventListener("click", () => {
    alert("Product added to cart!");
  });
</script>

DOM Manipulation

  • Changing Content:

    • Example:

      <h1 id="productTitle">Product Name</h1>
<script>
  document.getElementById("productTitle").textContent = "Laptop";
</script>
  • Interactive Example:

What is Inheritance?

  • Definition:
    • Inheritance is a feature of object-oriented programming that allows a class to inherit properties and methods from another class.
    • Promotes code reuse and establishes a natural hierarchy between classes.

Prototypal Inheritance in JavaScript

  • Prototype Chain:

    • JavaScript uses prototypal inheritance, where objects inherit properties and methods from a prototype object.

    • Example:

      function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.display = function() {
  console.log(`${this.name} costs $${this.price}`);
};

let laptop = new Product("Laptop", 999.99);
laptop.display(); // Laptop costs $999.99

Class Syntax

  • Using Classes:

    • ES6 introduced class syntax to simplify prototypal inheritance.

    • Example:

      class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  display() {
    console.log(`${this.name} costs $${this.price}`);
  }
}

class Electronic extends Product {
  constructor(name, price, brand) {
    super(name, price);
    this.brand = brand;
  }

  display() {
    console.log(`${this.brand} ${this.name} costs $${this.price}`);
  }
}

let laptop = new Electronic("Laptop", 999.99, "BrandX");
laptop.display(); // BrandX Laptop costs $999.99

TypeScript: Interest and Features

What is TypeScript?

  • Definition:
    • TypeScript is a superset of JavaScript that adds static types.
    • Developed and maintained by Microsoft.

Why TypeScript?

  • Advantages:
    • Type Safety: Helps catch errors at compile time rather than runtime.
    • Improved IDE Support: Enhanced code completion, navigation, and refactoring.
    • Scalability: Better suited for large-scale applications.

TypeScript Features

  • Static Typing:

    • Example:

      let productName: string = "Laptop";
let price: number = 999.99;
let inStock: boolean = true;
  • Interfaces:

    • Example:

      interface Product {
  name: string;
  price: number;
}

let laptop: Product = {
  name: "Laptop",
  price: 999.99
};

Classes and Inheritance

  • Example:

    class Product {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }

  display(): void {
    console.log(`${this.name} costs $${this.price}`);
  }
}

class Electronic extends Product {
  brand: string;

  constructor(name: string, price: number, brand: string) {
    super(name, price);
    this.brand = brand;
  }

  display(): void {
    console.log(`${this.brand} ${this.name} costs $${this.price}`);
  }
}

let laptop = new Electronic("Laptop", 999.99, "BrandX");
laptop.display(); // BrandX Laptop costs $999.99

Practical Examples in E-commerce

Product List

  • Displaying a List of Products:

    • Example:

      <ul id="productList"></ul>
<script>
  let products = ["Laptop", "Smartphone", "Tablet"];
  let productList = document.getElementById("productList");

  products.forEach(product => {
    let listItem = document.createElement("li");
    listItem.textContent = product;
    productList.appendChild(listItem);
  });
</script>

Summary

  • Key Points:
    • JavaScript is essential for creating dynamic web content.
    • Understanding basic syntax, data types, control structures, and functions is crucial.
    • Event handling and DOM manipulation enable interactivity.
    • Inheritance promotes code reuse and establishes a natural hierarchy between classes.
    • TypeScript adds static types to JavaScript, improving type safety and scalability.

Final Thoughts

  • Importance of JavaScript:
    • Understanding JavaScript is crucial for creating modern, interactive websites.
    • Keep practicing and exploring to become proficient in JavaScript and TypeScript development.

Note

  • Quick Bootstrap:
    • This lecture is a quick bootstrap to get you started with JavaScript and TypeScript.
    • It is not a full course, so further study and practice are recommended to gain a deeper understanding.