Lesson 1: Introduction to JavaScript

1.1 What is JavaScript?

JavaScript is a scripting language that works with HTML to enhance web pages and make them more interactive by accessing and modifying the content in a webpage.

JavaScript can turn a web page into a lively interactive platform for the world wide web users! JavaScript is a scripting language for HTML. Besides that, you can add sound, date, time, change the color of the web page according to a certain day, prevalidate data entered into a form by the user before it is sent to the server, search through a database, set options based on users preferences and much more.

1.2 Why Use JavaScript?

Why use JavaScript? You may have this question in mind. Well, let me get to the point. HTML or HyperText Markup Language was the only language that was used to present text and graphics as well as links to the world wide web users in the '90s of the last century. Although it was a vast improvement from the earlier text-only browsers like Gopher, it was relatively passive and static, it cannot interact much with the user. That is why we need JavaScript to make browsing the web a more interesting and useful experience for Internet users.

// JavaScript adds interactivity to static HTML
function updatePage() {
  // Get current date
  const now = new Date();
  document.getElementById('current-date').textContent = now.toLocaleDateString();
  
  // Update username
  const user = localStorage.getItem('username') || 'Guest';
  document.getElementById('username').textContent = user;
}

// Simulate login
function login() {
  const name = prompt('Enter your name:');
  if (name) {
    localStorage.setItem('username', name);
    updatePage();
  }
}

// Update page on load
window.addEventListener('load', updatePage);

1.3 The Building Blocks of JavaScript

As JavaScript is an object-oriented programming language; therefore building block of the JavaScript program code is made up of objects as well as methods, properties, and events associated with the objects.

// Create a simple JavaScript object
const car = {
  // Properties
  make: 'Toyota',
  model: 'Camry',
  year: 2022,
  color: 'blue',
  
  // Method
  startEngine: function() {
    return 'Engine started! Vroom vroom!';
  },
  
  // Method using property values
  getInfo: function() {
    return `${this.year} ${this.make} ${this.model} (${this.color})`;
  }
};

// Accessing properties
console.log(car.make); // Output: Toyota

// Calling methods
console.log(car.startEngine()); // Output: Engine started! Vroom vroom!
console.log(car.getInfo()); // Output: 2022 Toyota Camry (blue)

1.3.4 Events and Event Handlers

Examples of events are Click, Load, KeyDown, KeyPress, DblClick (Double Click), Select and more. To respond to the aforementioned events, JavaScript uses event handlers. Some of the common event handlers are:

OnClick, OnChange, OnLoad, onSubmit, OnSelect, OnMouseOver, KeyPress

We will learn how to write codes for event handlers in later lessons.