CMM721

JavaScript Fundamentals

Session 4

James Williams

jwilliams@staff.newman.ac.uk

Learning Objectives

Master JavaScript fundamentals and ES6+ syntax
Understand DOM manipulation techniques
Implement event handling and event delegation
Work with JavaScript data types and functions
Use debugging tools effectively

JavaScript: The Language of the Web

JavaScript - Dynamic, interpreted programming language

Purpose: Add interactivity to web pages
Runs: In the browser (client-side) and server (Node.js)
Standard: ECMAScript (ES6/ES2015+)
Paradigm: Multi-paradigm (procedural, OOP, functional)

// JavaScript runs in the browser
console.log('Hello from JavaScript!');
// Modern ES6+ syntax
const greeting = (name) => `Hello, ${name}!`;
console.log(greeting('CMM721'));

Variables and Data Types

ES6 Variable Declarations:

// const - cannot be reassigned
const PI = 3.14159;
// let - block-scoped, can be reassigned
let counter = 0;
counter++;
// var - function-scoped (avoid in modern code)
var oldStyle = 'deprecated';

Data Types:

Primitives: string, number, boolean, null, undefined, symbol, bigint
Objects: {}, [], functions, Date, RegExp

🎯 LIVE DEMO: JavaScript in Action

Interactive Counter Demo

Click the buttons to see JavaScript in action:

Count: 0

Code behind this demo:

                            let count = 0;

                            function incrementCounter() {

                              count++;

                              document.getElementById('counterOutput')

                                .textContent = `Count: ${count}`;

                            }

JavaScript Functions

Function Declaration:

function greet(name) {
return `Hello, ${name}!`;
}

Arrow Functions (ES6):

const greet = (name) => `Hello, ${name}!`;
const multiply = (a, b) => a * b;
const processData = (data) => {
// Multiple statements
const result = data.map(x => x * 2);
return result;
};

DOM (Document Object Model)

DOM - Tree-like representation of HTML document

Selecting Elements:

// Modern methods (recommended)
const element = document.querySelector('.class');
const elements = document.querySelectorAll('div');
// By ID
const header = document.getElementById('header');
// By class
const items = document.getElementsByClassName('item');

🎯 LIVE DEMO: DOM Manipulation

Dynamic Content Generator

Enter a name and click the button!

Event Handling

Common Events:

click: Mouse click on element
submit: Form submission
keydown/keyup: Keyboard events
mouseover/mouseout: Mouse hover
change: Input value changes

// Event listener (modern approach)
const button = document.querySelector('#myButton');
button.addEventListener('click', (event) => {
console.log('Button clicked!');
event.preventDefault(); // Prevent default behavior
});

Task 1: Build an Interactive Todo List

Objective:

Create a dynamic todo list application using DOM manipulation

Requirements:

Create HTML structure: input field, add button, todo list container
Implement addTodo() function to add new items
Add delete functionality for each todo item
Implement mark as complete (toggle styling)
Add clear all completed button
Store count of total/completed items

Bonus:

Add edit functionality
Implement drag and drop reordering
Save to localStorage

Working with Arrays and Objects

Array Methods (ES6+):

const numbers = [1, 2, 3, 4, 5];
// map - transform each element
const doubled = numbers.map(n => n * 2);
// filter - select elements
const evens = numbers.filter(n => n % 2 === 0);
// reduce - accumulate values
const sum = numbers.reduce((acc, n) => acc + n, 0);
// find - get first match
const found = numbers.find(n => n > 3);

🎯 LIVE DEMO: Array Operations

Interactive Array Methods

Original array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Result: Click a button to see array operations!

Modern JavaScript (ES6+)

Template Literals:

const name = 'CMM721';
const message = `Welcome to ${name}!`;
const multiLine = `Line 1
Line 2
Line 3`;

Destructuring:

// Array destructuring
const [first, second] = [1, 2, 3];
// Object destructuring
const {name, age} = {name: 'John', age: 30};
// Function parameters
function greet({name, course}) {
return `${name} in ${course}`;
}

Debugging Tools

Browser Developer Tools:

Console: console.log(), console.error(), console.table()
Debugger: Set breakpoints, step through code
Sources: View and edit code in real-time
Network: Monitor AJAX requests

// Console methods
console.log('Standard message');
console.error('Error message');
console.warn('Warning message');
console.table([{name: 'Item 1'}, {name: 'Item 2'}]);
// Debugger statement
debugger; // Pause execution here

Task 2: Build an Interactive Form Validator

Objective:

Create a real-time form validation system with event handling

Requirements:

Create a registration form (name, email, password, confirm password)
Validate email format in real-time (on 'input' event)
Check password strength (weak/medium/strong)
Confirm password match validation
Display validation messages with appropriate styling
Disable submit button until all fields valid
Show success message on valid submission

Events to Handle:

input, blur, focus, submit
Use event.preventDefault() for form submission

JavaScript Best Practices

Write Clean, Maintainable Code

Use const/let: Avoid var, prefer const by default
Arrow functions: Concise syntax, lexical this binding
Naming: camelCase for variables, PascalCase for classes
Comments: Explain why, not what
DRY: Don't Repeat Yourself
Single Responsibility: Functions do one thing well
Error Handling: Use try/catch blocks

Next Session: Asynchronous JavaScript & APIs

Understanding asynchronous programming
Callbacks, Promises, and async/await
Fetch API for HTTP requests
Working with REST APIs
Error handling in async code
Real-world API integration examples

Preparation: Review JavaScript fundamentals and practice DOM manipulation.

Questions & Discussion

Contact: JWilliams@Staff.newman.ac.uk

Office Hours: By appointment

Resources: MDN Web Docs, JavaScript.info

Thank you for your attention!