JavaScript Fundamentals

CMM721: Web Application Development - Session 4

Birmingham Newman University

Lecturer: James Williams

Masters Level Conversion Course

3-hour session • 18 slides • 2 interactive tasks • Live demos

Session Timeline:

10 min: Registration & waiting
20 min: Opening slides
45 min: Task 1 - DOM Manipulation
15 min: Break/Catch up
20 min: Secondary slides
45 min: Task 2 - Event Handling
Remaining: Self-study

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!