Web Engineering :: Course Log

Lectures Log - A.Y. 2024/2025

Total lectures: 24, total lecture hours: 48 (100%) - First lecture: 2025-02-25, Last lecture: 2025-05-29

Lecture 1: Modern web: technologies, challenges and problems

2025-02-25, 16: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, mobile first,...
(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

2025-02-27, 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

Lecture 3: HTML /1

2025-03-04, 16:30 (2 hours)
Slides HTML

(3-1)

XML base syntax: CDATA sections
(3-2)

Example The problem with embedded scripts in HTML pages
(3-3)

The HTML evolution
(3-4)

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-5)

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

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

Standards and Quirks modes
(3-8)

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

HTML: inline and block elements
(3-10)

The new element classification in HTML5
(3-11)

HTML: common attributes
(3-12)

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

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

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

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

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

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

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

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

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

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

HTML: base formatting (i, b, tt,...)
(3-23)

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

Lecture 4: HTML /2

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

(4-1)

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

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

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

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

The table element attributes in HTML5
(4-6)

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

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

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

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

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

Accessible images: the alt attribute
(4-12)

Client size image resizing
(4-13)

Server and client side image maps
(4-14)

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

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

Example Alternate documents
(4-17)

Example External stylesheets
(4-18)

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

Example Adding a shortcut icon to a web page
(4-20)

Example Page loading optimization: preload and prefetch links
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

Lecture 5: HTML /3

2025-03-11, 16:30 (2 hours)
Slides HTML

(5-1)

Hyperlinks (a)
(5-2)

Anchors and fragment identifiers
(5-3)

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

The GET and POST methods
(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)

Form data encoding
(5-8)

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

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-10)

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

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

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

Example Values submitted by non-textual inputs: file, checkbox, radio,...
(5-14)

Example Avoiding trasmission of a form field value using the disabled attribite

Lecture 6: Java Web Applications

2025-03-13, 14:30 (2 hours)
Slides HTML, Servlets

(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)

Example Different use cases for hidden inputs
(6-4)

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

Text editors (textarea)
(6-6)

Multiple choice selectors (select)
(6-7)

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

Options and option groups
(6-9)

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

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

Accessible control labels (label)
(6-12)

Example How to check (and integrate) your Java development platform
(6-13)

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-14)

Migration from JEE to JakartaEE: issues and solutions
link https://blogs.oracle.com/javamagazine/post/transition-from-java-ee-to-jakarta-ee
(6-15)

(Private) Installation of an updated JDK

Lecture 7: Java Servlets /1

2025-03-18, 16:30 (2 hours)
Slides Servlets
Material JakartaEE Web Application tutorial, JavaEE (legacy) specification

(7-1)

Netbeans IDE introduction
(7-2)

Apache Tomcat server installation and introduction
(7-3)

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

Servlets and containers
(7-5)

Introduction to servlet programming
(7-6)

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

The web application base structure
(7-8)

The web application folder structure
(7-9)

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

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

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

Example The project object model (POM) of a simple web application
(7-13)

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

Lecture 8: Java Servlets /2

2025-03-20, 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
(8-12)

Communication among application layers through request attributes
(8-13)

Effective error and exception handling in servlets
(8-14)

Returning HTTP error codes from a servlet

Lecture 9: Java Servlets /3

2025-03-25, 16:30 (2 hours)
Slides Servlets

(9-1)

Getting user input through HttpServletRequest
(9-2)

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

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

Output sanification to prevent XSS attacks
(9-5)

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

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

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

Binary data download through servlets
(9-9)

Security issues: why we should use a download servlet and how we should write it
(9-10)

Some interesting HTTP headers: Content-Type, Content-Disposition and Content-Length
(9-11)

Example An example of download servlet
material Java_Example_Downloader
(9-12)

Server-side generated images with Java
(9-13)

Example An image generation servlet
material Java_Example_Imager

Lecture 10: Java Servlets /4

2025-03-27, 14:30 (2 hours)
Slides Servlets

(10-1)

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

Handling multipart encoded forms with JEE version 6+
(10-3)

The multipart-config element
(10-4)

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

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

Filenames sanitization
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html#filename-sanitization
(10-7)

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

Application configuration through ServletContext parameters
(10-9)

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

Example Sessions for user profiling
(10-11)

Session identifier exchange: cookie and URL rewriting
(10-12)

Generate and handle session information: the HttpSession class
(10-13)

Read and write session variables: getAttribute, setAttribute
(10-14)

Close a session: invalidate
(10-15)

Example The 'Hello world' servlet with sessions
material Java_Example_Servlet_Sessions

Lecture 11: Sessions and Security

2025-04-01, 16:30 (2 hours)
Slides Servlets

(11-1)

Sessions for user authentication
(11-2)

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

User authentication and secure password storage
(11-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
(11-5)

The login-with-redirection technique
(11-6)

Session protection techniques
(11-7)

Session refreshing
(11-8)

Session timeout(s)
(11-9)

Example The SecurityHelpers class
(11-10)

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

Lecture 12: Web Applications and Databases

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

(12-1)

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

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

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

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

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

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

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

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

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

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

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

Reusing JDBC connections: connection pooling
(12-13)

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

Resource references in the deployment descriptor
(12-15)

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

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

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

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

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

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

Example JDBC: Get the auto-generated keys after an insert statement
(12-22)

Presentation of the final project specifications

Lecture 13: Data Modeling /1

2025-04-08, 16:30 (2 hours)

(13-1)

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

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

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

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

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

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

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

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

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

Creating data access methods: DAO
(13-11)

Example Entity object factories
(13-12)

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

Lecture 14: Data Modeling /2

2025-04-10, 14:30 (2 hours)
Slides Servlets, CSS3
Material CSS_Examples

(14-1)

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

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

Notes on ServletContextListeners in java web applications
(14-4)

Introduction to CSS Stylesheets
(14-5)

Adding style to HTML: style and link elements
(14-6)

Multiple stylesheets in the same document
(14-7)

Stylesheets: persistent, preferred and alternative (used selected)
(14-8)

Media-related alternate stylesheets
(14-9)

Example Creating print-oprimized stylesheets (media="print")
material css_inclusion_print
(14-10)

Syntax of CSS rules
(14-11)

Simple selectors
material css_selectors
(14-12)

Base selectors

Lecture 15: CSS /1

2025-04-15, 16:30 (2 hours)
Slides CSS3
Material CSS_Examples

(15-1)

Attribute selectors
(15-2)

Class selectors
material css_selectors
(15-3)

Example Classes as special attributes
(15-4)

ID selectors
(15-5)

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

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

Pseudo classes
(15-8)

Example Hover effects on links
(15-9)

Example Focus effects on inputs
(15-10)

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

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

Pseudo elements
(15-13)

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

Composite selectors
(15-15)

Example How to format adjacent titles
(15-16)

The CSS algorithm to determine property values
(15-17)

Origin priority, specificity and rule ordering
(15-18)

The !important modifier
(15-19)

Example Cascading rules in the browsers
material css_cascade
(15-20)

Style inheritance
(15-21)

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

Lecture 16: CSS /2

2025-04-29, 16:30 (2 hours)
Slides CSS3
Material CSS_Examples

(16-1)

CSS measurement units
(16-2)

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

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

CSS color specification
(16-5)

Adding borders to elements
material css_properties_common
(16-6)

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

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

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

Example Advanced CSS3: image borders
material css_3_imageborders
(16-10)

Example Creating shadows with CSS3
material css_3_shadows
(16-11)

Setting elements background
(16-12)

Background images: alignment and repetition
(16-13)

The CSS sprite technique
material css_sprites
(16-14)

Font and character formatting properties
(16-15)

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

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

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

Paragraph formatting properties
(16-19)

List formatting properties
(16-20)

Example How to create simple menus using lists and CSS
material css_menu_multilev_static
(16-21)

Other CSS properties: content, quotes, cursor,...
(16-22)

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

Example Advanced CSS3: property transitions
material css_3_transitions
(16-24)

Example Advanced CSS3: element opacity
material css_3_transitions

Lecture 17: CSS /3

2024-05-06, 16:30 (2 hours)
Slides CSS3
Material CSS_Examples

(17-1)

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

Introduction to the var() and calc() CSS functions
(17-3)

How to change an element display mode using CSS
(17-4)

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

CSS box model
(17-6)

Changing element visibility with CSS
(17-7)

Element content disposition: the overflow property
(17-8)

Example Scrolling text in arbitrary elements
material css_properties_overflow
(17-9)

Example Element content clipping
(17-10)

Example Scrolling with CSS and Javascript
(17-11)

How to set margins and paddings
(17-12)

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

Width, height and the box-sizing property
(17-14)

The CSS positioning techniques
(17-15)

The element layout algorithm in HTML pages
(17-16)

Block and inline element disposition
(17-17)

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

Relative positioning
(17-19)

Example Relative positioning examples
material css_properties_positioning_relative
(17-20)

Abosolute positioning
(17-21)

Example Absolute positioning examples
material css_properties_positioning_absolute
(17-22)

Origin of the coordinates with absolute positioning
(17-23)

Example How to create simple layouts using (absolute) positioning
(17-24)

Example Combining positioning and margin properties to create better (and fluid) layouts
(17-25)

Fixed positioning
(17-26)

Example Fixed positioning examples
material css_properties_positioning_fixed
(17-27)

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

The floats

Lecture 18: (Responsive) Web design

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

(18-1)

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

Website design: style and usability guidelines
(18-3)

Website layout design: fixed and liquid layouts
(18-4)

Example Base layouts: single column
(18-5)

Example Base layouts: two columns
(18-6)

Example Multicolumn layouts with positioned divs
(18-7)

Example Multicolumn layouts with floats
(18-8)

Introduction to responsive web design
(18-9)

CSS media queries
(18-10)

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

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

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

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

Grid layouts
(18-15)

Example The responsive fluid grid layout made with floats
material Layout_3col_grid_float_liquid

Lecture 19: Templates /1

2025-05-13, 16:30 (2 hours)
Slides CSS3
Material Java_Example_Templates

(19-1)

Introduction to CSS Flexbox
material css_3_flexbox
(19-2)

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

Introduction to CSS Grids
material css_3_grid
(19-4)

Introduction to templates
(19-5)

The FreeMarker template engine
link https://freemarker.apache.org/
(19-6)

FreeMarker: template components
(19-7)

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

Example FreeMarker: basic configuration
(19-9)

FreeMarker: output format specification and automatic escaping
(19-10)

FreeMarker: default object wrapper specification

Lecture 20: Templates /2

2025-05-15, 14:30 (2 hours)
Material Java_Example_Templates

(20-1)

Example Template compilation and visualization
(20-2)

FreeMarker: the Java data model
(20-3)

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

FreeMarker: interpolations default
(20-5)

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

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

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

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

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

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

FreeMarker: variable definition test
(20-12)

Example Conditional templates
(20-13)

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

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

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

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

Example Templates with iteration
(20-18)

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

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

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

FreeMarker: parametric macros
(20-22)

FreeMarker: macros with nested content
(20-23)

Example Template modularization
(20-24)

Example Template inheritance and how to achieve it in Freemarker
(20-25)

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

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

Example The Newspaper case study: an example of complete Java web application
material Java_Example_Newspaper_DAO

Lecture 21: Javascript /1

2025-05-20, 16:30 (2 hours)
Slides Javascript

(21-1)

Introduction to Javascript
(21-2)

Javascript: origins and current uses
(21-3)

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-4)

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

Adding scripts to HTML pages
(21-6)

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

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

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

Javascript data types and conversion
(21-10)

Variables and variable declarations
(21-11)

Example Implicit declaration and global variables
(21-12)

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

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

ES5: strict mode
(21-15)

Constants
(21-16)

Arithmetic and logic operators
(21-17)

VOID and EVAL operators
(21-18)

The TYPEOF operator
(21-19)

Conditional constructs
(21-20)

Loop constructs
(21-21)

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

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

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

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

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

Function call
(21-27)

Example Passing functions as parameters
(21-28)

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

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

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

Function return values
(21-32)

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

Closures
(21-34)

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

Scope rules for Function values with external references
(21-36)

Introduction to Javascript objects
(21-37)

Object hierarchy: the base Object
(21-38)

Example The shorthand notation for object creation
(21-39)

Access to object properties
(21-40)

Example Javascript objects are dynamic
(21-41)

Example How to create and initialize an object property
(21-42)

Example How to use objects as generic data structures
(21-43)

Example Javascript objects as associative arrays
(21-44)

How to create methods
(21-45)

How to access and call object methods
(21-46)

The THIS keyword used in javascript methods

Lecture 22: Javascript /2

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

(22-1)

Dynamic generation of property names
(22-2)

Constructor functions
(22-3)

Constructor functions and the NEW operator
(22-4)

The objects' constructor property
(22-5)

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

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

Getter and setter functions
(22-8)

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

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

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

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

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

ES6: The CLASS syntax
(22-14)

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

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

Destructuring assignment
(22-17)

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

Overview of iterators definition
(22-19)

Overview of generator functions
(22-20)

Javascript exception handling
(22-21)

Javascript predefined objects: strings
(22-22)

ES6: String interpolation
(22-23)

Javascript predefined objects: regular expressions
(22-24)

Javascript predefined objects: arrays
(22-25)

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

Javascript predefined objects: dates
(22-27)

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

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

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

Promise handlers: then and catch
(22-31)

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

Promise handlers chaining
(22-33)

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

The AWAIT keyword in ASYNC functions

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

2025-05-27, 16: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

Lecture 24: Javascript: Advanced Examples

2025-05-29, 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)

The AJAX base object: XMLHttpRequest
(24-5)

Synchronous and asynchronous AJAX calls
(24-6)

Synchronous AJAX call process
(24-7)

Asynchronous AJAX call process
(24-8)

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

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

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