Skip to main content

JavaScript

Introduction​

JavaScript is the scripting language of the Web. It can operate on both client-side and server-side environments and brings interactivity, logic, and dynamic content to web applications.

Motivation & History of JavaScript​

Why JavaScript? Evolution from Netscape to ECMAScript standards.​

JavaScript evolved from Netscape’s scripting language into a standardized language managed by ECMA International. Today, it powers the dynamic behavior of modern web applications.

How does JavaScript compare to Python, Java, and C++?​

JavaScript is:

  • Dynamically typed (like Python, unlike Java/C++)
  • Interpreted (not compiled like C++)
  • More permissive and flexible with fewer rules

Static vs. Dynamic Typing​

A. Static Typing (e.g., C++)​

int a = 0;

int sum(int a, int b){
  return a + b;
}

B. Dynamic Typing (e.g., JavaScript)​

var a;
a = 5;

function sum(a, b) {
  return a + b;
}

In JS, variable types are inferred at runtime. Languages like Python, Perl, and PHP behave similarly.

info

Please make sure you have understood this topic before you proceed.

The Three Pillars of the Web​

HTML, CSS, and JavaScript work together to structure, style, and bring interactivity to webpages.

Real World Usage​

Websites like YouTube and Amazon rely on JS for:

  • Hover effects
  • Autocomplete dropdowns
  • Interactive forms and content

JavaScript Basics​

JavaScript Syntax Overview​

alert('Hello World');
let name = 'John';
const PI = 3.14;
  • Blocks: { ... }
  • Statements end with ;
  • Strings use ' or ", variables use camelCase

Arrays​

var days = ['Mon', 'Tue', 'Wed'];
alert(days[0]);

Functions & Scope​

function greet() {
  alert('Hello');
}

DOM Manipulation Basics​

  • document.querySelector()
  • document.getElementById()
  • addEventListener()

HTML DOM (Document Object Model)​

The DOM represents HTML structure as a tree and allows dynamic interaction via JS.

Example​

<p id="demo"></p>
<script>
  document.getElementById('demo').innerHTML = 'Hello!';
</script>

JavaScript Events​

JS is event-driven. Examples:

  • onclick
  • onmouseover
  • onkeyup

Example​

<div onclick="alert('Clicked!')">Click Me</div>

External JavaScript​

Linking External JS​

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

Async vs. Defer​

<script src="script.js" async></script>
<script src="script.js" defer></script>
  • async: runs ASAP after downloading
  • defer: waits until HTML parsing is done

Functions in Depth​

Anonymous Functions​

const greet = function () {
  alert('Hello');
};

Callback Functions​

function process(callback) {
  const name = prompt('Name?');
  callback(name);
}

JavaScript Event Loop​

  • JS is single-threaded.
  • The event loop lets JS handle async tasks without blocking.

Event Loop Explained

Introduction to jQuery​

jQuery Syntax​

$(document).ready(function () {
  $('button').click(function () {
    alert('Clicked!');
  });
});

Including jQuery​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Activity – Greet the User​

Task​

  1. Prompt the user for their name using prompt()
  2. Display Good Morning, <name>! on the page

Level Up​

  • Display in random colors
  • Add reset button
  • Dynamic text resizing
  • Add Bootstrap classes via JS

Reflection Questions​

  • What happens if input is empty?
  • How does JS update the DOM?
  • How can you enhance this with more styling?

Best Practices​

  • Use let and const, avoid var
  • Use external JS files and defer scripts
  • Avoid inline event handlers
  • Separate HTML/CSS/JS
  • Prefer addEventListener

Reflection Questions​

  1. What’s the difference between async and defer?
  2. How do you define an anonymous function?
  3. What is a callback function?
  4. Why should scripts load just before </body>?

Summary​

  • JavaScript enables dynamic content and interactivity
  • DOM allows real-time page updates
  • Functions and callbacks drive responsive experiences
  • Async handling and the event loop ensure fluid UX

Disclaimer: Generative AI was used in part to generate these lecture notes.