Web System Technologies: Client-side JavaScript, DOM, CSS/Bootstrap, and AJAX

  • Core access and manipulation methods:

    • document.getElementById(id) to access a single element by its id

    • document.getElementsByTagName(name) to access elements by tag name

    • document.getElementsByClassName(name) to access elements by class name

    • document.querySelectorAll(selectors) to access elements using CSS selectors

  • Distinction between DOM properties and methods:

    • Properties hold values that can be read or set

    • Methods perform actions such as adding or removing elements

  • Common event handling approach:

    • Attach event handlers via HTML event attributes or by assigning a handler in JavaScript (e.g., onclick)

The HTML DOM

  • The HTML DOM is a standard object model that allows dynamic access and updates to a document's content, structure, and style

  • The DOM is a tree of objects that represent the document

  • Example structural parts of the DOM tree:

    • Document (root)

    • html element

    • head element

    • body element

    • title element

    • a element, h1 element, text nodes such as My title and My link

  • The DOM provides power to create dynamic HTML by:

    • Changing all HTML elements in the page

    • Changing all HTML attributes in the page

    • Changing all CSS styles in the page

    • Removing existing elements and attributes

    • Adding new elements and attributes

    • Reacting to existing HTML events

    • Creating new HTML events in the page

What is the DOM?

  • The DOM is a W3C standard

  • It defines a standard for accessing documents

  • The DOM is language and platform neutral and allows programs to dynamically access and update content, structure, and style of a document

Parts of the DOM

  • Core DOM: standard model for all document types

  • XML DOM: standard model for XML documents

  • HTML DOM: standard model for HTML documents

  • JavaScript HTML DOM Methods: a set of methods to access and manipulate the HTML DOM

What is the HTML DOM?

  • The HTML DOM is a standard object model for HTML

  • It defines:

    • The HTML elements as objects

    • The properties of HTML elements

    • The methods to access HTML elements

    • The events for HTML elements

JavaScript - HTML DOM Methods vs Properties

  • HTML DOM methods are actions you can perform on HTML elements

  • HTML DOM properties are values of HTML elements that you can get or set

The DOM Programming Interface

  • The HTML DOM can be accessed with JavaScript (and other languages)

  • In the DOM, all HTML elements are defined as objects; the interface is the properties and methods of those objects

  • A property is a value you can read or set (eg, changing content)

  • A method is an action you can perform (eg, adding or deleting an element)

Example: Accessing Elements

  • Accessing an element by id is common; the method finds an element by its id and returns it for manipulation

  • A typical pattern is to store a reference to the element and then modify its properties or call its methods

JavaScript HTML DOM Document

  • The document object is the owner of all other objects in your web page

The HTML DOM Document Object

  • The document object represents your web page

  • To access any element in an HTML page, you start with the document object

Finding HTML Elements

  • Methods to find elements:

    • document.getElementById(id) finds a single element by its id

    • document.getElementsByTagName(name) finds elements by tag name

    • document.getElementsByClassName(name) finds elements by class name

Changing HTML Elements

  • Property: element.innerHTML = new html content to change the inner HTML of an element

  • Property: element.attribute = new value to change an element attribute value

  • Property: element.style.property = new style to change CSS for an element

  • Method: element.setAttribute(attribute, value) to change an attribute value

Adding and Deleting Elements

  • Methods:

    • document.createElement(element) to create a new HTML element

    • document.removeChild(element) to remove an element

    • document.appendChild(element) to add a new element to a parent

    • document.replaceChild(newElement, oldElement) to replace an element

    • document.write(text) to write directly to the HTML output stream

Adding Events Handlers

  • Attach events by assigning to event properties, eg, element.onclick = function(){ code }

Example: DOM Manipulation Scenario

  • An HTML page may contain elements with IDs such as myHeading, myParagraph, myButton, and a list with myList

  • JavaScript can access these elements and modify content or respond to button clicks to update the page dynamically

Finding HTML Elements by Id / Tag Name / Class Name / CSS Selectors

  • By id: easy to access a unique element using its id

  • By tag name: returns a collection of elements with the specified tag

  • By class name: returns a collection of elements with the specified class

  • By CSS selectors: querySelectorAll returns a list of elements matching a CSS selector

Examples of Finding HTML Elements

  • Access by id example: use the id to retrieve a single element

  • Access by tag name example: retrieve all elements with a given tag such as p

  • Access by class name example: retrieve all elements with a given class

  • Access by CSS selectors example: retrieve using selectors such as p.intro

JavaScript HTML DOM - Changing HTML

  • The HTML DOM allows JavaScript to change the content of HTML elements

Changing HTML Content

  • InnerHTML is the simplest way to modify the content of an element

  • Example pattern is to select an element by id and assign a new string to its innerHTML

Changing the Value of an Attribute

  • You can change attributes such as the src of an image by accessing the element and updating its attribute directly or via setAttribute

Dynamic HTML Content

  • JavaScript can generate dynamic content, such as inserting the current date into the page using Date

document.write()

  • document.write can write directly to the HTML output stream as the page loads

JavaScript Forms

  • JavaScript Form Validation: HTML forms can be validated with JavaScript to ensure required fields are filled before submission

Example: Form Validation (conceptual)

  • A function validateForm reads a named field value from a form

  • If the field is empty, an alert is shown and the function returns false to prevent submission

JavaScript HTML DOM Events

  • Events allow code to execute in response to user actions or page lifecycle events

  • Events can be handled via HTML event attributes or by assigning event handler functions

Examples of HTML Events

  • Common events include clicking, page load, image load, mouse movement over an element, input change, form submission, and keyboard input

Event Examples: Changing Content on Click

  • Example: an element such as a heading changes its content when clicked

Event Example: Call a Function from an Event Handler

  • Example: an event handler calls a function that updates the element content

HTML Event Attributes

  • You can assign events directly in HTML using attributes such as onclick to trigger JavaScript functions

Onload and Onunload Events

  • onload fires when the page finishes loading; onunload fires when leaving the page

  • You can perform checks such as cookie availability on load

The onchange Event

  • onchange is often used with input validation

  • When the input value changes and focus leaves the field, a handler can modify the value, such as transforming to upper case

The onmouseover and onmouseout Events

  • onmouseover triggers when the mouse enters an element; onmouseout triggers when it leaves

  • Common use is to provide visual feedback or dynamic content changes

Working with CSS and Bootstrap

  • CSS stands for Cascading Style Sheets and controls presentation and layout

  • Bootstrap is a popular front end framework providing pre designed CSS classes and JavaScript components to speed up development

CSS Basics

  • Selectors target HTML elements by tag name, class, ID, or other attributes

    • Example patterns include targeting all paragraphs or targeting elements with a specific class

  • Properties define how elements are styled (color, font-size, margin, padding, border, etc.)

  • Classes and IDs:

    • IDs are unique and used for single elements

    • Classes can be applied to multiple elements

Box Model

  • The box model describes how an element is sized and laid out

  • It consists of content, padding, border, and margin and determines the element's total size on the page

Bootstrap

  • Bootstrap is a widely used front end framework

  • It provides a set of ready to use CSS classes and JavaScript components to create responsive layouts and UI components

Bootstrap Official Website

  • getbootstrap com docs 5 3 getting started introduction

Bootstrap Studio

  • A desktop app for designing and prototyping websites

  • Includes many built in components that can be dragged and dropped

  • Built on top of Bootstrap framework and exports clean HTML

Official Links and Tooling

  • Official Bootstrap documentation and Bootstrap Studio official site provide guides and purchase options

AJAX for asynchronous communication

  • AJAX allows updating a web page without reloading the page

  • It enables requesting data from a server after the page has loaded

  • It enables receiving data from a server after the page has loaded

  • It enables sending data to a server in the background

AJAX Introduction

  • AJAX is not a programming language

  • AJAX uses a browser built in XMLHttpRequest object to request data from a server

  • It uses JavaScript and the HTML DOM to display or use the data

What is AJAX?

  • AJAX stands for Asynchronous JavaScript And XML

  • It is a technique, not a language, that combines browser XMLHttpRequest with JavaScript and DOM to fetch and display data asynchronously

How AJAX Works

  • An event occurs in the browser that should trigger data exchange

  • Create an XMLHttpRequest object

  • Send an HTTP request to the server

  • The server processes the request and returns a response

  • The browser processes the response with JavaScript and updates the page content

AJAX Example (conceptual)

  • A page contains a demo area and a button to trigger content change via AJAX

  • A function creates an XMLHttpRequest object, defines a handler for ready state changes, opens a GET request to a server resource, and sends the request

The XMLHttpRequest Object

  • All modern browsers support the XMLHttpRequest object

  • It is used to exchange data with a server behind the scenes, allowing partial page updates without full reloads

Create an XMLHttpRequest Object

  • The syntax is to create a new XMLHttpRequest instance and assign it to a variable

XMLHttpRequest Object Methods

  • new XMLHttpRequest(): Creates a new request object

  • abort(): Cancels the current request

  • getAllResponseHeaders(): Returns header information

  • getResponseHeader(): Returns a specific header value

  • open(method, url, async, user, psw): Specifies the request type and server location

  • send(): Sends the request to the server (for GET)

  • send(string): Sends the request (for POST)

  • setRequestHeader(): Adds a header to be sent with the request

XMLHttpRequest Object Properties

  • onreadystatechange: A function to call when ready state changes

  • readyState: The current state of the request (0 to 4)

  • responseText: The response data as a string

  • responseXML: The response data as XML

  • status: The HTTP status code of the response

  • statusText: The status text such as OK or Not Found

Send a Request To a Server

  • Use open with method and URL, then call send to dispatch the request

  • Example pattern for a GET request: open GET to a URL async true, then send

Asynchronous - True or False?

  • Server requests should be sent asynchronously by default by setting async to true in open

The onreadystatechange Property

  • You can define a function that runs each time readyState changes

  • When readyState equals 4 and status equals 200, the response is ready to be processed

Synchronous Request

  • It is possible to perform a synchronous request by setting async to false in open

  • This blocks further script execution until the response is received

Server Response The onreadystatechange Property

  • The readyState value indicates progress in the request lifecycle

  • The status value indicates the HTTP response status (eg, 200 OK, 403 Forbidden, 404 Not Found)

  • The onreadystatechange handler is called whenever readyState changes

HTTP Status Codes (Examples)

  • 200: OK

  • 403: Forbidden

  • 404: Not Found

XML Example

  • An example demonstrates using the XMLHttpRequest object to fetch and display content such as an XML formatted response or a simple HTML snippet

  • The example often includes a table to show fetched data and a script to populate the table with the response

Summary of AJAX flow and XMLHttpRequest usage

  • AJAX enables asynchronous data exchange with a server

  • Use a ready state change handler to process the response when it arrives

  • Use responseText for plain text or responseXML for XML data

  • Always consider asynchronous operation to keep the UI responsive

Connections to broader topics

  • AJAX integrates with HTML DOM to update content without reloads

  • It complements client side scripting by enabling dynamic, data-driven pages

Real world relevance and considerations

  • Improves user experience by reducing full page reloads

  • Enables partial updates for smoother interfaces

  • Requires handling of cross origin requests and security considerations

Quick reference to key terms

  • DOM: Document Object Model

  • XMLHttpRequest: browser object used to send and receive HTTP requests

  • readyState values: 0 to 4 indicating lifecycle stages

  • status codes: HTTP response status values such as 200, 403, 404

  • innerHTML: property to set or read HTML content inside an element

  • querySelectorAll: method to select elements using CSS selectors

  • createElement, appendChild, removeChild, replaceChild: DOM manipulation methods

  • setAttribute: method to set an element attribute value

  • onload, onunload, onchange, onclick, onmouseover, onmouseout: common events and handlers

*** End of notes ***