Web Engineering :: Course Log

Lectures Log - A.Y. 2025/2026

Total lectures: 24, total lecture hours: 48 (100%) - First lecture: 2026-02-24, Last lecture: 2026-05-21

Lecture 1: Modern web: technologies, challenges and problems

2026-02-24, 14:30 (2 hours)

(1-1)

Course presentation
(1-2)

The origins of WWW
(1-3)

The client-server architecture
(1-4)

Web 2.0: Rich Internet Applications, Social Web
(1-5)

Today's web problems: accessibility, usability, cross-browser programming, security,...
(1-6)

Web technologies: client side (HTML5, CSS3 e responsive design, Javascript, AJAX)
(1-7)

Web technologies: server side (Java servlets, JDBC, Freemarker templates)
(1-8)

Creating a website with the MVC pattern: separation between data, business logic and presentation

Lecture 2: XML

2026-02-26, 14:30 (2 hours)
Slides XML

(2-1)

The HTTP protocol
(2-2)

Base concepts: URIs, URLs, media types...
(2-3)

What is and what is not XML
(2-4)

XML base syntax: the XML declaration
(2-5)

Example Character encoding problems
(2-6)

Character encoding: what is really UTF-8? (and UTF-16? and ISO-8859-1??)
(2-7)

Example Character encoding: can also be a security problem: the UTF-7 attack
(2-8)

XML base syntax: the DOCTYPE declaration
(2-9)

Example Correct declaration of the HTML version in use
(2-10)

Standards and Quirks modes
(2-11)

XML base syntax: elements and their syntactic rules
(2-12)

Example Common problems related to element syntax
(2-13)

XML base syntax: attributes and their syntcatic rules
(2-14)

Example Common problems related to attribute syntax
(2-15)

XML base syntax: namespaces
(2-16)

XML base syntax: text and character entities
(2-17)

Example XSS attacks and the correct use of entities for reserved characters
(2-18)

XML base syntax: CDATA sections
(2-19)

Example The problem with embedded scripts in HTML pages

Lecture 3: HTML /1

2026-03-03, 14:30 (2 hours)
Slides HTML

(3-1)

The HTML evolution
(3-2)

Keeping up to date with the living standard: reference sites
link https://developer.mozilla.org/en-US/docs/Web/HTML
link https://html.spec.whatwg.org
(3-3)

Check and fix your HTML: validators
link https://validator.w3.org
(3-4)

Standards and Quirks modes
(3-5)

Basic document structure for HTML4 and HTML5 documents
(3-6)

HTML: inline and block elements
(3-7)

The new element classification in HTML5
(3-8)

HTML: common attributes
(3-9)

New HTML5 common attributes: data, aria,...
material HTML_Examples - HTML5
(3-10)

Example Use of the ARIA attributes in complex, customized layouts
link https://www.w3.org/WAI/standards-guidelines/aria
link https://www.w3.org/WAI/ARIA/apg/patterns/
(3-11)

HTML: paragraphs and breaks (p, br)
(3-12)

Example Empty paragraphs, line breaks, etc.: the wrong ways to add vertical space
(3-13)

Marking the document base structure: the h elements
(3-14)

The semantic value of a correct markup
(3-15)

The new HTML5 sectioning elements
material HTML_Examples - HTML5
(3-16)

Example Actual rendering of the HTML elements
material HTML_Examples
(3-17)

HTML: the div and span containers (div, span)
(3-18)

HTML: semantic formatting (em, code, pre, ins, q,...)

Lecture 4: HTML /2

2026-03-05, 14:30 (2 hours)
Slides HTML

(4-1)

HTML: base formatting (i, b, tt,...)
(4-2)

Example New behaviour of some formatting elements in HTML5
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
(4-3)

Lists as semantic element in complex layouts
(4-4)

Example Creating a menu with graceful degradation using lists
material css_menu_multilev_static
(4-5)

HTML: lists (ol, ul, dl)
(4-6)

HTML: tables
material HTML_Examples - Tables
(4-7)

The table element attributes in HTML5
(4-8)

Base table structure: rows (tr), cells (td) and header cells (th)
(4-9)

The complete table structure: header (thead), body (tbody), footer (tfoot)
(4-10)

Example Watch out for the implicit tbody element...
(4-11)

Creating complex tables with colspan and rowspan
(4-12)

Images in web pages
material HTML_Examples - Images
(4-13)

Accessible images: the alt attribute
(4-14)

Client size image resizing
(4-15)

Server and client side image maps
(4-16)

Logical links between resources (link)
(4-17)

The rel(ation) attribute in links
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
(4-18)

Example Alternate documents
(4-19)

Example External stylesheets
(4-20)

Example Adding a RSS feed to a web page
(4-21)

Example Adding a shortcut icon to a web page

Lecture 5: HTML /3

2026-03-10, 14:30 (2 hours)
Slides HTML

(5-1)

Example Page loading optimization (speculative loading): preload and prefetch links
link https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Speculative_loading
link https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
(5-2)

Hyperlinks (a)
(5-3)

Anchors and fragment identifiers
(5-4)

Example Jump directly to the page content
(5-5)

Forms in HTML (form)
(5-6)

Important form attributes: action, method, enctype e accept-charset
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
(5-7)

Example Using accept-charset to solve further encoding issues (this time between client and server)
(5-8)

The GET and POST methods
(5-9)

Form data encoding
(5-10)

Example Choosing the right method/encoding combination for a form
(5-11)

Example The POST-Redirect-GET pattern for form submission
link https://en.wikipedia.org/wiki/Post/Redirect/Get
material Java_Example_Post_Redirect_Get
(5-12)

The input control element (input)
(5-13)

Example Rendering comparison for input controls on different browsers
material HTML_Examples - Forms
(5-14)

Example Values submitted by non-textual inputs: file, checkbox, radio,...

Lecture 6: Java Web Applications

2026-03-12, 14:30 (2 hours)
Slides HTML

(6-1)

Value validation attributes in HTML4 and HTML5 (maxlength, min, max, pattern,...)
(6-2)

Example How (and where) form data should be validated
(6-3)

Text editors (textarea)
(6-4)

Multiple choice selectors (select)
(6-5)

Example Option labels and values: which data should I send to the server?
(6-6)

Options and option groups
(6-7)

Different renderings of select controls
material HTML_Examples - Forms
(6-8)

Example Select controls used as menus on mobile devices
(6-9)

Accessible control labels (label)
(6-10)

Java/Jakarta Enterprise Edition (JEE/JakartaEE): versions and profiles
link https://www.oracle.com/java/technologies/java-ee-glance.html
link https://jakarta.ee/about/jakarta-ee/
(6-11)

(Private) Installation of a complete development environment (JDK, IDE, server) for Java web applications
(6-12)

Java web application deployment: from IDE to server
(6-13)

A new way to deploy Java web applications: JAR with embedded server

Lecture 7: Java Servlets /1

2026-03-17, 14:30 (2 hours)
Slides Servlets
Material JakartaEE Web Application tutorial

(7-1)

Example Different use cases for hidden inputs
(7-2)

Example The Cross-site request forgery
link https://owasp.org/www-community/attacks/csrf
(7-3)

Example Hidden inputs and CSRF tokens
link https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
(7-4)

Apache Tomcat server installation and introduction
(7-5)

Netbeans IDE introduction
(7-6)

Example Some useful tips to link Netbeans and Tomcat
(7-7)

Servlets and containers
(7-8)

Introduction to servlet programming
(7-9)

The web application context and the url mapping
(7-10)

The web application base structure
(7-11)

The web application folder structure
(7-12)

Example How to create a new web application
material Java_WebApp_Base_T10
(7-13)

Example Compiling, deploying and executing a web application
(7-14)

The context configuration file (context.xml)
link https://tomcat.apache.org/tomcat-11.0-doc/appdev/deployment.html
(7-15)

Example How to add static resources (html, css, etc.) to a web application

Lecture 8: Java Servlets /2

2026-03-19, 14:30 (2 hours)
Slides Servlets
Material JakartaEE Servlet tutorial

(8-1)

Example How to add a new servlet in a web application
(8-2)

The deployment descriptor (web.xml)
material Java Servlet Specification, version 2.3, Chapter 13 - Deployment Descriptor
(8-3)

The servlet base interfaces: Servlet, ServletRequest, ServletResponse
(8-4)

The servlet lifecycle: initialization, service and finalization
(8-5)

Servlet initialization and finalization: init and destroy methods
(8-6)

The HttpServlet class and its doGet and doPost methods
(8-7)

Multithreading in the HttpServlet class: per-thread and shared variables
(8-8)

Writing data to the client: the HttpServletResponse class
(8-9)

Textual and binary output from a servlet
(8-10)

Example The "Hello World" servlet
(8-11)

Writing headers and payload of an HTTP response

Lecture 9: Java Servlets /3

2026-03-24, 14:30 (2 hours)
Slides Servlets

(9-1)

Example The project object model (POM) of a simple web application
(9-2)

Communication among application layers through request attributes
(9-3)

Effective error and exception handling in servlets
(9-4)

Returning HTTP error codes from a servlet
(9-5)

Getting user input through HttpServletRequest
(9-6)

Reading form GET parameters: getParameter and getParameterValues
(9-7)

Input validation to prevent attacks (like SQL Injection)
(9-8)

Output sanification to prevent XSS attacks
(9-9)

Example The "Hello World" servlet with a name parameter
material Java_Example_Servlet
(9-10)

Output logic (view) encapsulation and application layers
(9-11)

Example The restructured "Hello World" servlet
material Java_Example_Servlet_Fwk
(9-12)

Binary data download through servlets
(9-13)

Security issues: why we should use a download servlet and how we should write it

Lecture 10: Java Servlets /4

2026-03-26, 14:30 (2 hours)
Slides Servlets

(10-1)

Some interesting HTTP headers: Content-Type, Content-Disposition and Content-Length
(10-2)

Example An example of download servlet
material Java_Example_Downloader
(10-3)

Server-side generated images with Java
(10-4)

Example An image generation servlet
material Java_Example_Imager
(10-5)

Reading form POST parameters with url encoding
(10-6)

Handling multipart encoded forms
(10-7)

The multipart-config element
(10-8)

Handling uploaded files with getPart()
(10-9)

Example The 'Hello world' servlet with file upload
material Java_Example_Servlet_Multipart_7
(10-10)

Example Secure web applications accepting uploads
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
(10-11)

Filenames sanitization

Lecture 11: Java Servlets /5

2026-03-31, 14:30 (2 hours)
Slides Servlets

(11-1)

Example Secure web applications accepting uploads
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
(11-2)

Application configuration through ServletContext parameters
(11-3)

The web application status: sessions
link https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html
(11-4)

Example Sessions for user profiling
(11-5)

Session identifier exchange: cookie and URL rewriting
(11-6)

Generate and handle session information: the HttpSession class
(11-7)

Read and write session variables: getAttribute, setAttribute
(11-8)

Close a session: invalidate
(11-9)

Example The 'Hello world' servlet with sessions
material Java_Example_Servlet_Sessions

Lecture 12: Sessions and Security

2026-04-09, 14:30 (2 hours)
Slides Servlets

(12-1)

Sessions for user authentication
(12-2)

Example Login, logout and authenticated sessions
material Java_Example_Login
(12-3)

User authentication and secure password storage
(12-4)

Example Password hashing with PBKDF2 in Java
link https://en.wikipedia.org/wiki/PBKDF2
link https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html
(12-5)

Session protection techniques
(12-6)

Session refreshing
(12-7)

Session timeout(s)
(12-8)

Example The SecurityHelpers class
(12-9)

The login-with-redirection technique
(12-10)

Cross-site request forgery attacks and prevention techniques in practice
material Java_Example_Servlet_CSRF
(12-11)

Filters in java web applications and how to use them to ease session management
material Java_Example_Emailfilter
material Java_Example_Login_Middleware

Lecture 13: Web Applications and Databases

2026-04-14, 14:30 (2 hours)
Slides Servlets

(13-1)

Java and DBMS: references to JDBC basics
(13-2)

Example JDBC: adding the driver dependency to the project POM
(13-3)

Example JDBC: the main classes (Connection, (Prepared)Statement, ResultSet)
(13-4)

Example JDBC: opening a connection through the DriverManager (not recommended in web applications!)
(13-5)

Example JDBC: execution of insert, update, delete queries
(13-6)

Example JDBC: execution of select queries
(13-7)

JDBC: closing resources (resultsets, statements and connections)
(13-8)

JDBC: precompilation of (parametric) queries
(13-9)

Example Reasons to use PreparedStatement in a web application: safety (against SQL injection)
(13-10)

Example When to open a connection in a web application/servlet and when to close it
(13-11)

Data access performances in web applications: the connection problem
(13-12)

Reusing JDBC connections: connection pooling
(13-13)

Configuration of a JDBC data source in Tomcat (context.xml)
link https://tomcat.apache.org/tomcat-11.0-doc/jdbc-pool.html
(13-14)

Resource references in the deployment descriptor
(13-15)

Using Java naming services to obtain a DataSource
(13-16)

Using the JavaEE resource injection to obtain a DataSource
link https://jcp.org/en/jsr/detail?id=250
(13-17)

JDBC: opening a connection through the DataSource (recommended in web applications!)
(13-18)

Example JDBC with connection pooling
material Java_Example_Servlet_Database
(13-19)

Example Final example on forms and databases: a file repository
material Java_Example_Uploader
(13-20)

Example How to create the digest of a file
(13-21)

Example JDBC: Create a not-FORWARD_ONLY ResultSet and count the number of results
(13-22)

Example JDBC: Get the auto-generated keys after an insert statement
(13-23)

Presentation of the final project specifications

Lecture 14: Data Modeling /1

2026-04-16, 14:30 (2 hours)

(14-1)

Creating a website with the MVC pattern: separation between data, business logic and presentation
(14-2)

The data object model as a contract between the MVC layers
(14-3)

POJO - JavaBeans used to represent data model entities
(14-4)

Build well-formed POJOs: default constructor, getters and setters
(14-5)

Example Creating entity objects: interface and implementation
(14-6)

Example The newspaper data model: an example of data model design and implementation on MySQL
material Java_Example_SimpleDataModel
(14-7)

The low-level interface of entity objects: proxies
(14-8)

Example Marking entity objects as modified with setters
(14-9)

Example Lazy loading of relations: why it is important and how to implement it
(14-10)

Creating data access methods: DAO
(14-11)

Example Entity object factories
(14-12)

Example Entity object caching: why it is important and how to implement it

Lecture 15: CSS /1

2026-04-21, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(15-1)

Notes on optimistic and pessimistic locking techniques to manage concurrency
(15-2)

Example Summary example: a simple application that shows how to create and make models and controllers interact effectively
material Java_Example_BaseApplicationMC
(15-3)

Introduction to CSS Stylesheets
(15-4)

Adding style to HTML: style and link elements
(15-5)

Multiple stylesheets in the same document
(15-6)

Stylesheets: persistent, preferred and alternative (used selected)
(15-7)

Media-related alternate stylesheets
(15-8)

Example Creating print-oprimized stylesheets (media="print")
material css_inclusion_print
(15-9)

Syntax of CSS rules
(15-10)

Simple selectors
material css_selectors
(15-11)

Base selectors
(15-12)

Attribute selectors
(15-13)

Class selectors
material css_selectors
(15-14)

Example Classes as special attributes
(15-15)

ID selectors
(15-16)

Short form for class and ID selectors
(15-17)

Example Identify and format the base layout structures
(15-18)

Pseudo classes
(15-19)

Example Hover effects on links
(15-20)

Example Focus effects on inputs
(15-21)

The :hover pseudo class in legacy browsers
(15-22)

Example How to add internal borders to a list of elements
(15-23)

Pseudo elements
(15-24)

Example How to create a drop cap
(15-25)

Example How to add text in document using CSS
(15-26)

Composite selectors

Lecture 16: CSS /2

2026-04-23, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(16-1)

Composite selectors
(16-2)

The CSS algorithm to determine property values
(16-3)

Origin priority, specificity and rule ordering
(16-4)

The !important modifier
(16-5)

Example Cascading rules in the browsers
material css_cascade
(16-6)

Style inheritance
(16-7)

Using the browser's CSS inspector to analyze styles and their composition
link https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css
link https://developer.chrome.com/docs/devtools/css
(16-8)

CSS measurement units
(16-9)

Relative units as a way to increase the site accessibility
(16-10)

Percentage measures in liquid and responsive layouts
(16-11)

CSS color specification
(16-12)

Adding borders to elements
material css_properties_common
(16-13)

New CSS3 border properties: border-radius and box-shadow
(16-14)

Vendor prefixes on css properties and legacy browser compatibility
(16-15)

Example Rounded corners in CSS3
material css_3_round_borders
(16-16)

Example Advanced CSS3: image borders
material css_3_imageborders

Lecture 17: CSS /3

2026-04-28, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(17-1)

Example Creating shadows with CSS3
material css_3_shadows
(17-2)

Setting elements background
(17-3)

Background images: alignment and repetition
(17-4)

The CSS sprite technique
material css_sprites
(17-5)

Font and character formatting properties
(17-6)

Specify multiple font families to achieve cross-platform compatibility
(17-7)

Web fonts and the @font-face at-rule
(17-8)

Example How to import a Google web font using @font-face
material css_3_webfonts
(17-9)

Paragraph formatting properties
(17-10)

List formatting properties
(17-11)

Example How to create simple menus using lists and CSS
material css_menu_multilev_static
(17-12)

Other CSS properties: content, quotes, cursor,...
(17-13)

Example Examples for the cursor, content, quotes and counter properties
material css_properties_misc
(17-14)

Example Advanced CSS3: property transitions
material css_3_transitions
(17-15)

Example Advanced CSS3: element opacity
material css_3_transitions
(17-16)

Example Advanced CSS3: keyframe animations
material css_3_animation
(17-17)

Introduction to CSS variables (custom properties)
material css_3_variables
(17-18)

Introduction to the var() and calc() CSS functions

Lecture 18: CSS /4

2026-04-30, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(18-1)

How to change an element display mode using CSS
(18-2)

Example How to create popup elements using the display property and the :hover pseudo class
material css_properties_display
(18-3)

CSS box model
(18-4)

Changing element visibility with CSS
(18-5)

Element content disposition: the overflow property
(18-6)

Example Scrolling text in arbitrary elements
material css_properties_overflow
(18-7)

Example Element content clipping
(18-8)

Example Scrolling with CSS and Javascript
(18-9)

How to set margins and paddings
(18-10)

Setting the (minimum, maximum, actual or relative) height and width of an element
(18-11)

Width, height and the box-sizing property
(18-12)

The CSS positioning techniques
(18-13)

The element layout algorithm in HTML pages
(18-14)

Block and inline element disposition
(18-15)

Position on the third dimension: the z-index property
(18-16)

Relative positioning
(18-17)

Example Relative positioning examples
material css_properties_positioning_relative
(18-18)

Abosolute positioning
(18-19)

Example Absolute positioning examples
material css_properties_positioning_absolute
(18-20)

Origin of the coordinates with absolute positioning
(18-21)

Example How to create simple layouts using (absolute) positioning
(18-22)

Example Combining positioning and margin properties to create better (and fluid) layouts
(18-23)

Fixed positioning
(18-24)

Example Fixed positioning examples
material css_properties_positioning_fixed
(18-25)

Example How to create "always visible" banners and menus using fixed positioning
(18-26)

The floats
(18-27)

Example How to use floats to create multi-columns layouts and other interesting effects
material css_properties_positioning_float
(18-28)

Introduction to CSS Flexbox
material css_3_flexbox

Lecture 19: (Responsive) Web design

2026-05-05, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples, CSS_Examples: layouts

(19-1)

Website design: style and usability guidelines
(19-2)

Website layout design: fixed and liquid layouts
(19-3)

Example Base layouts: single column
(19-4)

Example Base layouts: two columns
(19-5)

Example Multicolumn layouts with positioned divs
(19-6)

Example Multicolumn layouts with floats
(19-7)

Example Multicolumn layouts with flexbox
(19-8)

Introduction to responsive web design
(19-9)

CSS media queries
(19-10)

Using CSS cascading to override default rules with a media query
(19-11)

CSS media queries for responsive design: responsive breakpoints
(19-12)

How to adapt a layout to different devices using CSS: move, resize, hide, change
(19-13)

Example How to create and alternative, accessible menu using a SELECT control (...and a button)
(19-14)

Grid layouts
(19-15)

Example The responsive fluid grid layout made with floats
material Layout_3col_grid_float_liquid
(19-16)

Example A fluid grid layout made with flexbox
material Layout_3col_grid_flexbox_liquid
(19-17)

Introduction to CSS Grids
material css_3_grid
(19-18)

Example A fluid grid layout made with CSS grids
material Layout_3col_grid_grid_liquid
(19-19)

Introduction to templates

Lecture 20: Templates

2026-05-07, 14:30 (2 hours)
Material Java_Example_Templates

(20-1)

The FreeMarker template engine
link https://freemarker.apache.org/
(20-2)

FreeMarker: template components
(20-3)

FreeMarker: the abstract data model (hashes, sequences and scalars)
link https://freemarker.apache.org/docs/dgui_datamodel_types.html
(20-4)

Example FreeMarker: basic configuration
(20-5)

FreeMarker: output format specification and automatic escaping
(20-6)

FreeMarker: default object wrapper specification
(20-7)

Example Template compilation and visualization
(20-8)

FreeMarker: the Java data model
(20-9)

FreeMarker: interpolations
link https://freemarker.apache.org/docs/dgui_template_valueinsertion.html
(20-10)

FreeMarker: interpolations default
(20-11)

FreeMarker: built-ins (?cap_first, ?size, ...)
link https://freemarker.apache.org/docs/dgui_template_exp.html#dgui_template_exp_builtin
(20-12)

Example Simple templates (with interpolations)
(20-13)

FreeMarker: hashes in the data model: creation and access
(20-14)

FreeMarker: java classes in the data model
(20-15)

FreeMarker: lists in the data model: creation and access
(20-16)

FreeMarker: the list directive
link https://freemarker.apache.org/docs/ref_directive_list.html
(20-17)

FreeMarker: the if directive
link https://freemarker.apache.org/docs/ref_directive_if.html
(20-18)

Example Conditional templates
(20-19)

FreeMarker: getting the size of a list
(20-20)

FreeMarker: list separators with the sep directive
(20-21)

FreeMarker: the else clause in a list directive
(20-22)

Example Templates with iteration
(20-23)

FreeMarker: the include directive
link https://freemarker.apache.org/docs/ref_directive_include.html
(20-24)

Example Including a (secondary) template into another (primary) one
(20-25)

FreeMarker: macros
link https://freemarker.apache.org/docs/ref_directive_macro.html
(20-26)

FreeMarker: parametric macros
(20-27)

Example Template modularization
(20-28)

Example Template inheritance and how to achieve it in Freemarker

Lecture 21: Javascript /1

2026-05-12, 14:30 (2 hours)
Slides Javascript

(21-1)

Example An utility class to use Freemarker as the presentation layer of web applications
material Java_Example_Templates_Fwk
(21-2)

Example Summary example: a simple application that shows how to create and make models, views and controllers interact effectively
material Java_Example_BaseApplicationMVC
(21-3)

Example The Newspaper case study: an example of complete Java web application
material Java_Example_Newspaper_DAO
(21-4)

Introduction to Javascript
(21-5)

Javascript: origins and current uses
(21-6)

Javascript, ECMAScript, TypeScript... what are they, really?
link https://developer.mozilla.org/en-US/docs/Web/javascript
link https://262.ecma-international.org
link https://www.typescriptlang.org
(21-7)

ECMAScript 5 e 6: the main new features
(21-8)

Adding scripts to HTML pages
(21-9)

Some hints to correctly and efficiently embed scripts in HTML pages
(21-10)

Content and logic separation: how NOT to use javascript in HTML pages
(21-11)

The Javascript (single-threaded) execution model
link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop
(21-12)

Javascript data types and conversion
(21-13)

Variables and variable declarations
(21-14)

Example Implicit declaration and global variables
(21-15)

Example Global-scoped and function-scoped variables
link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
(21-16)

ES6: block-scoped variables (finally!)
link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
(21-17)

ES5: strict mode
(21-18)

Constants
(21-19)

Arithmetic and logic operators
(21-20)

VOID and EVAL operators
(21-21)

The TYPEOF operator
(21-22)

Conditional constructs
(21-23)

Loop constructs
(21-24)

Example The FOR...IN loop (applied to objects and arrays)
(21-25)

Example The FOR...OF loop (applied to arrays and iterable objects)
(21-26)

Example Javascript functions are values (Function objects)
(21-27)

Function declaration: direct, anonymous, arrow, and the Function constructor
(21-28)

Example Function references and functions as values
(21-29)

Function call
(21-30)

Example Passing functions as parameters
(21-31)

Example The call operator applied to expressions having function type
(21-32)

Parameters passed by value and reference. Omission of parameters and default values
(21-33)

ES6: variadic functions and rest parameter
(21-34)

Function return values
(21-35)

Example Mixed return types, return of undefined values
(21-36)

Closures
(21-37)

Example How to create a function generator
(21-38)

Scope rules for Function values with external references

Lecture 22: Javascript /2

2026-05-14, 14:30 (2 hours)
Slides Javascript

(22-1)

Introduction to Javascript objects
(22-2)

Object hierarchy: the base Object
(22-3)

Example The shorthand notation for object creation
(22-4)

Access to object properties
(22-5)

Example Javascript objects are dynamic
(22-6)

Example How to create and initialize an object property
(22-7)

Example How to use objects as generic data structures
(22-8)

Example Javascript objects as associative arrays
(22-9)

How to create methods
(22-10)

How to access and call object methods
(22-11)

The 'this' keyword used in javascript methods
(22-12)

Dynamic generation of property names
(22-13)

Constructor functions and the 'new' operator
(22-14)

The objects' constructor property
(22-15)

The prototype property of constructor functions (and the __proto__ property of objects)
(22-16)

Example Extending objects through their constructor prototype
(22-17)

Getter and setter functions
(22-18)

ES5: the Object.defineProperty method
(22-19)

Coding standards: how to declare public properties and methods in a readable way
(22-20)

Private methods in Javascript objects: a workaround to create them, with some limitations
(22-21)

Example The closure effect used to grant private object methods the access to public members
(22-22)

Example Privileged methods in javascript objects: exploiting the closure to grant public object methods the access to private methods
(22-23)

ES6: The 'class' syntax
(22-24)

Example Definition of objects through classes or prototypes
(22-25)

The spread operator (...)
(22-26)

Destructuring assignment
(22-27)

Example Destructuring assignment with arrays and objects
(22-28)

Overview of iterators definition
(22-29)

Overview of generator functions
(22-30)

Javascript exception handling
(22-31)

Javascript predefined objects: strings
(22-32)

ES6: String interpolation
(22-33)

Javascript predefined objects: regular expressions
(22-34)

Javascript predefined objects: arrays
(22-35)

Example Array ordering using the sort method and an arrow function
(22-36)

Javascript predefined objects: Set and Map in ES6
(22-37)

Promises
link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
(22-38)

Example How to embed an (asynchronous) algorithm in a Promise
(22-39)

Promise handlers: then and catch
(22-40)

Example Returning and using the final Promise result
(22-41)

Promise handlers chaining

Lecture 23: DOM (XML, HTML, CSS, Events)

2026-05-19, 14:30 (2 hours)
Slides Javascript, DOMHTML

(23-1)

Javascript in browsers: the window default object
(23-2)

The setTimer and setInterval methods
(23-3)

Example How to prevent the event flooding deriving from an incorrect use of timers
(23-4)

Example How to use setTimer to create a better user interface
(23-5)

XML Document Object Model
(23-6)

The tree structure underlying an XML document
(23-7)

DOM base classes: Node
(23-8)

Node base attributes
(23-9)

Node attributes for DOM navigation
(23-10)

Example How to reach a generic document node
(23-11)

Node methods for DOM modification
(23-12)

How to read and write the node textual content through the textContent attribute
(23-13)

Example How to move a fragment of HTML document in a new location
(23-14)

DOM base classes: Document
(23-15)

Two methods to quicky reach specific elements: getElementById e getElementsByTagName
(23-16)

Document methods for node creation
(23-17)

Example How to create an HTML fragment and put it in an existing document
(23-18)

DOM base classes: Element
(23-19)

Element methods to read and write attributes
(23-20)

The querySelector and querySelectorAll methods for selecting nodes with CSS3 selectors
(23-21)

The HTML DOM
(23-22)

The HTMLDocument class
(23-23)

The HTMLElement class
(23-24)

Getting and setting the element attributes through the HTMLElement object properties
(23-25)

The innerHTML property for quickly modifying element content
(23-26)

The HTMLFormElement class
(23-27)

The CSS DOM
(23-28)

How to read and write an element inline style: the style attribute
(23-29)

Style declarations: the CSSStyleDeclaration class
(23-30)

How to read and write style properties through the CSSStyleDeclaration class
(23-31)

Quick access to the style properties: the CSS2Properties interface
(23-32)

How to read the complete, computed style of an element: getComputedStyle
(23-33)

The DOM event model
(23-34)

Event Bubbling
(23-35)

How to delagate an event to an ancestor of the event target
(23-36)

Event Capturing
(23-37)

Example The complete event dispatch route
(23-38)

Adding event handlers to DOM elements: addEventListener
(23-39)

Removing handlers: removeEventListener
(23-40)

Example The EventListener functions
(23-41)

The Event object
(23-42)

Meaning of the target and currentTarget attributes in Event objects
(23-43)

The stopPropagation e preventDefault methods
(23-44)

Mouse events
(23-45)

Structure of mouse event objects
(23-46)

Meaning of the relatedTarget attribute in mouse events
(23-47)

Keyboard events
(23-48)

Structure of keyboard event objects: code, key, charCode, etc.
(23-49)

Other DOM events
(23-50)

Form events: change, reset, submit
(23-51)

Example The submit event used to support form validation
(23-52)

Pointer events (generalization of mouse events for multiple pointers)

Lecture 24: Javascript: Advanced Examples

2026-05-21, 14:30 (2 hours)
Slides Javascript

(24-1)

Gracefully degrading javascript: first ideas
(24-2)

Example Gracefully degrading tooltips with javascript
material JS_Example_simpletooltip
(24-3)

Example A client-side table pagination script with graceful degradation (to server-side pagination)
material JS_Example_simplepager
(24-4)

Connecting Javascript to web servers: from AJAX to Fetch API
(24-5)

The AJAX base object: XMLHttpRequest
(24-6)

Synchronous and asynchronous AJAX calls
(24-7)

Synchronous AJAX call process
(24-8)

Asynchronous AJAX call process
(24-9)

The JSON encoding to exchange data in AJAX calls
(24-10)

Fetch API overview
link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
(24-11)

Gestire le Promise restituite dalla fetch
(24-12)

ASYNC functions as Promise generators
link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
(24-13)

The AWAIT keyword in ASYNC functions
(24-14)

Example The client-side pagination script supported by AJAX and Fetch API (and the corresponding server support with graceful degradation)
material Java_Example_Ajax_Pager_Async