Academic Year 2016/2017
First lecture: 28 February 2017 , Last lecture: 8 June 2017 , Total lectures: 24 lectures (48 hours)
    • Meaning of parameters and return values in event handling functions
    • The Event object
    • Meaning of the target and currentTarget attributes
    • Mouse events
    • Structure of mouse event objects
    • Meaning of the relatedTarget attribute in mouse events
    • Keyboard events
    • Structure of keyboard event objects: code, key, charCode, etc.
    • Other DOM events
    • Example The scroll event used to support incremental page loading
    • Form events: change, reset, submit
    • Example The submit event used to support form validation
    • Example The focus and blur events used to support field placeholders (pre-HTML5)
    • Gracefully degrading javascript: first ideas
    • Download Example Gracefully degrading tooltips with javascript
    • The (window.) load event used to activate scripts
    • Example How to adapt the script to the browser environment
    • The setTimer and setInterval methods
    • Example How to use setTimer to create a better user interface
    • Example How to prevent the event flooding deriving from an incorrect use of timers
    • The AJAX base object: XMLHttpRequest
    • Synchronous and asynchronous AJAX calls
    • Synchronous AJAX call process
    • Asynchronous AJAX call process
    • The JSON encoding to exchange data in AJAX calls
    • Node base attributes
    • Node attributes for DOM navigation
    • Example How to reach a generic document node
    • How to read and write the node textual content through the textContent attribute
    • DOM base classes: Document
    • Document methods for node creation
    • Node methods for DOM modification
    • Example How to create an HTML fragment and put it in an existing document
    • Two methods to quicky reach specific elements: getElementById e getElementsByTagName
    • Example How to modify the elements of an existing HTML document
    • Example How to move a fragment of HTML document in a new location
    • DOM base classes: Element
    • Element methods to read and write attributes
    • Download The XHTML DOM
    • The HTMLDocument class
    • Document collections: images, forms, links,...
    • The HTMLElement class
    • Getting and setting the element attributes through the HTMLElement object properties
    • The HTMLFormElement class
    • Direct access to the form fields
    • The HTMLSelectElement class
    • How to read index and value of the selected option in a select element
    • How to modify the select element contents (options)
    • The HTMLInputElement class
    • How to get or set the value of an input element
    • The HTMLAnchorElement class
    • Download The CSS2 DOM
    • How to read the complete, computed style of an element: getComputedStyle
    • How to read and write an element inline style: the style attribute
    • Style declarations: the CSSStyleDeclaration class
    • How to read and write style properties through the CSSStyleDeclaration class
    • Quick access to the style properties: the CSS2Properties interface
    • Example Examples
    • Download The DOM event model
    • Event Bubbling
    • How to delagate an event to an ancestor of the event target
    • Event Capturing
    • Example The complete event dispatch route
    • Adding event handlers to DOM elements: addEventListener
    • Event attributes and addEventListener: two ways to declare an event handler
    • Removing handlers: removeEventListener
    • The EventListener function structure
    • Example Privileged methods in javascript objects: exploiting the closure to grant public object methods the access to private methods
    • Javascript predefined objects: strings
    • Example String object methods
    • Javascript predefined objects: regular expressions
    • Javascript predefined objects: arrays
    • Example The IN operator applied to an array
    • Example Array object methods
    • Example How to check if an object is an array using its constructor property
    • Javascript predefined objects: dates
    • Example Date object methods
    • Example Examples
    • Javascript browser objects: window
    • Window as the Javascript host object
    • The alert, confirm and prompt methods
    • Javascript browser objects: document
    • Download XML Document Object Model
    • The tree structure underlying an XML document
    • DOM base classes: Node
    • Introduction to Javascript objects
    • Object hierarchy: the base Object
    • The shorthand notation for object creation
    • Javascript objects are dynamic
    • How to create an empty object using the Object constructor
    • How to access object properties
    • How to create and initialize an object property
    • Example Dynamic generation of property names
    • Example How to inspect the contents of an object
    • Example The IN operator used in an IF construct to select the best method to call (an example of multi-browser adaptation)
    • Example How to use objects as generic data structres
    • Example Javascript objects as associative arrays
    • How to create methods
    • How to access and call object methods
    • The this keyword used in javascript methods
    • Constructor functions
    • Constructor functions and the NEW operator
    • The objects' constructor property
    • Example Use of the constructor property to recognize objects created by different constructor functions
    • The prototype property of constructor functions (and the __proto__ property of objects)
    • Example Extending objects through their constructor prototype
    • Coding standards: how to declare public properties and methods in a readable way
    • Private methods in Javascript objects: a workaround to create them, with some limitations
    • Example The closure effect used to grant private object methods the access to public members
    • Adding scripts to HTML pages
    • Some hints to correctly embed scripts in XHTML pages
    • Content and logic separation: how NOT to use javascript in HTML pages
    • Javascript data types and conversion
    • Variables and variable declarations
    • Example Implicit declaration and global variables
    • Arithmetic and logic operators
    • The IN operator (applied to arrays and objects)
    • The TYPEOF operator
    • Example How to use TYPEOF to verify if a variable (or a function) is defined
    • VOID and EVAL operators
    • Example The VOID(0) expression used to disable the default action of a link
    • Conditional constructs
    • Loop constructs
    • The FOR...IN loop (applied to objects and arrays)
    • Function declaration: direct, anonymous, with the Function constructor
    • Javascript functions are values (Function objects)
    • Function references and functions as values
    • Example How to check is a function exists before using it
    • Example Passing functions as parameters
    • Function calls
    • Example The call operator applied to expressions having function type
    • Parameters passed by value and reference. Omission of parameters.
    • Example How to assign default values to omitted parameters
    • Function return values
    • Example Mixed return types, return of undefined values
    • Closures
    • Example How to create a function generator
    • Scope rules for Function values with external references
    • Example Closures and parametrics event handlers
    • CSS media queries
    • CSS media queries for responsive design: the responsive breakpoints
    • Using the CSS cascading to override default rules with a media query
    • Download Example The responsive fluid grid layout
    • How to adapt a layout to different devices using CSS: move, resize, hide, change
    • How to fix a fluid layout on very small display sizes
    • Example How to create and alternative, accessible menu using a SELECT control (...and a button)
    • Introduction to templates
    • Download The FreeMarker template engine
    • FreeMarker: template components
    • FreeMarker: use (and abuse) of some advanced features
    • FreeMarker: the abstract data model
    • Download Introduction to CSS Stylesheets
    • CSS preprocessors: LESS and Sass
    • Adding style to HTML: style and link elements
    • Download Multiple stylesheets in the same document
    • Stylesheets: persistent, preferred and alternative (used selected)
    • Media-related alternate stylesheets
    • Example Creating print-oprimized stylesheets (media='print')
    • Download CSS analysis and debugging tools: firebug
    • Syntax of CSS rules
    • Style properties declaration
    • Download Simple selectors
    • Base selectors
    • Attribute selectors
    • Example Highlight the text in a foreign language
    • Class selectors
    • Example Classes as special attributes
    • ID selectors
    • Short form for class and ID selectors
    • Example Identify and format the base layout structures
    • Pseudo classes
    • Example Hover effects on links
    • The :hover pseudo class in Firefox and IE
    • Example How to add internal borders to a list of elements
    • Pseudo elements
    • Example How to create a drop cap
    • Example How to automatically quote a block of text
    • Composite selectors
    • Composite selectors: cross browser porability
    • Example How to format adjacent titles
    • The CSS algorithm to determine property values
    • Correct management of style sheets in production environments: minification and union
    • Abstract data modelling in a Java application
    • POJO - JavaBeans used to represent data model entities
    • Build well-formed Java Beans: default constructor, getters and setters
    • Example Examples
    • Creating an interface for the data access functionalities
    • Example The Newspaper case study: data model
    • Example The Newspaper case study: abstract data structures
    • Example The Newspaper case study: abstract data model API
    • Download Example The Newspaper case study: an example of concrete implementation on MySQL
    • Manipulation of complex data objects and lazy loading
    • Nots on optimistic and pessimistic locking techniques to manage concurrency
    • Discussion of the final project specifications
    • URL rewriting: the encodeURL method
    • Session protection techniques
    • Example The SecurityLayer class
    • Download Java and DBMS: the JDBC
    • JDBC: the main classes (DriverManager, Connection, Statement, ResultSet)
    • Notes on JDBC direct connections
    • JDBC: execution of select queries
    • JDBC: execution of insert, update, delete queries
    • JDBC: closing statements and connections
    • Example The try-with-resources statement of Java 7 used to free JDBC resources
    • Performances of data intensive web applications: the connection problem
    • Reusing JDBC connections: connection pooling
    • Effective error and exception handling in servlets
    • Communication among application layers through request attributes
    • Returning HTTP error codes from a servlet
    • Getting user input through HttpServletRequest
    • Reading form GET parameters
    • Download Example The 'Hello World' servlet with a name parameter
    • Output sanification to prevent XSS attacks
    • Output logic (view) encapsulation and application layers
    • Download Example The restructured 'Hello World' servlet
    • Binary data download through servlets
    • Security issues: why we should use a download servlet and how we should write it
    • Some interesting HTTP headers: Content-Type and Content-Disposition
    • Example How to add static resources to a web application using Netbeans
    • Example How to create a new servlet in a web application using Netbeans
    • Example Executing a web application in Netbeans
    • How to define the application welcome files
    • The servlet lifecycle
    • Servlet initialization and finalization
    • The servlet base interfaces
    • The HttpServlet class and its doGet and doPost methods
    • Writing data to the client
    • Headers and payload of an HTTP response
    • Textual and binary output from a servlet
    • Example The 'Hello World' servlet
    • Accessible control labels (label)
    • Download Servlet containers
    • Java Enterprise Edition: versions and profiles
    • The Apache Tomcat server
    • Download Netbeans IDE installation and presentation
    • Example Some useful tips about Netbeans and Tomcat installation
    • Introduction to servlet programming
    • The web application context and the url mapping
    • The web application base structure
    • The web application filesystem
    • Deployment descriptors
    • Example How to create a new web application in Netbeans
    • Server side image maps
    • Client side image maps
    • The new HTML5 elements video, audio and canvas
    • The HTTP protocol
    • The GET and POST methods
    • Form data encoding
    • Example Choosing the right mathod/encoding combination for a form
    • Forms in HTML
    • The input control element
    • Example Values submitted by non-textual inputs: file, checkbox, radio,...
    • The new HTML5 input controls
    • Download Example Rendering comparison for input controls (HTML4 and HTML5): Internet Explorer vs. Mozilla Firefox
    • Text editors (textarea)
    • Multiple choice selectors (select)
    • Different renderings of select controls
    • Options and option groups
    • Example Select label problems in Firefox and IE
    • HTML: lists
    • Example Creating a menu with graceful degradation using lists
    • Lists as semantic element in complex layouts
    • HTML: tables
    • The border attribute (and its defaults)
    • The cellspacing and cellpadding attributes
    • Base table structure: rows (tr) and cells (td)
    • Header cells (th)
    • Creating complex tables with colspan and rowspan
    • The complete table structure: header (thead), body (tbody), footer (tfoot)
    • Example Watch out for the implicit tbody element...
    • Download Example Rendering comparison: Internet Explorer vs. Mozilla Firefox
    • Column declaration (col)
    • Column groups (colgroup)
    • Hyperlinks (a)
    • Anchors and fragment identifiers
    • Example Jump directly to the page content
    • Logical links between resources (link)
    • Alternate documents
    • External stylesheets
    • Example Adding a RSS feed to a web page
    • Example Adding a 'shortcut icon' to a web page
    • Images in web pages
    • Accessible images: the alt attribute
    • Client size image resizing
    • XML base syntax: attributes and their syntcatic rules
    • XML base syntax: text and character entities
    • Example XSS attacks and the correct use of entities for reserved characters
    • XML base syntax: CDATA sections
    • Example The problem with embedded scripts in HTML pages
    • Syntax checking in XML documents
    • Download HTML4, XHTML1, HTML5
    • Standards and Quirks modes
    • The HTML5 mode
    • The Polyglot HTML5
    • HTML: inline and block elements
    • The new element classification in HTML5
    • HTML: common attributes
    • New HTML5 common attributes: data, aria,...
    • Example Use of the ARIA attributes in complex, customized layouts
    • HTML: paragraphs and breaks
    • Example Empty paragraphs, line breaks, etc.: the wrong ways to add vertical space
    • Marking the document base structure: the h elements
    • The semantic value of a correct markup
    • The new HTML5 sectioning elements
    • Download Example Rendering comparison: Internet Explorer vs. Mozilla Firefox
    • HTML: the div and span containers
    • HTML: semantic formatting
    • HTML: base formatting
    • New behaviour of some formatting elements in HTML5
    • Course presentation
    • The origins of WWW
    • The client-server architecture
    • Web 2.0: Rich Internet Applications, Social Web
    • Today's web problems: accessibility, usability, cross-browser programming, security, mobile first,...
    • Web technologies: client side (HTML5, CSS3 e responsive design, Javascript, AJAX)
    • Web technologies: server side (Java servlets, JDBC, Freemarker templates)
    • Creating a website with the MVC pattern: separation between data, business logic and presentation
    • Download What is and what is not XML
    • Example Opening an XML document: the XML declaration and the character encoding
    • XML base syntax: the document prolog
    • XML base syntax: elements and their syntactic rules