Browser Technologies

Topics

  • HTML.

  • CSS selectors.

  • DOM.

  • Fetch API.

Browser Technologies

Numerous browser technologies.

  • HTML is the most essential browser technology.

  • JavaScript: used for scripting other browser technologies.

  • Cascading Style Sheets CSS: used to style documents.

  • Document Object Model DOM: API for accessing documents.

  • Fetch: aynchronous fetching of resources.

  • Cookies: permits browser and server to cooperatively store key-value pairs within browser.

  • Storage: allows storing of key-value pairs within browser.

  • Canvas and SVG: allows graphics within browers.

  • WebGL: provides access to local graphics hardware.

HTML Overview

  • HTML stands for HyperText Markup Language.

  • The idea of hypertext goes back to Paul Otlet, a Belgian bibliographer in the 1930's.

  • Structured text with explicit markup denoted within < and > delimiters.

  • Not what-you-see-is-what-you-get (WYSIWYG) like MS word.

  • Similar to other text markup languages like latex.

HTML Evolution

  • HTML was designed as an application of IBM's Standard Generalized Markup Language SGML.

  • HTML 1.0: used href for hyperlinks.

  • Evolution added support for tables, client-side image maps.

  • Evolution even added support for presentation elements like font, color.

  • Modern HTML removes support for presentation elements; moved presentation into CSS.

  • HTML documents are often sloppily marked up; standards define explicit behavior for some bad mark up.

HTML Example

Simple example document html-example.html: 

<!DOCTTYPE html>
<html lang=en>
  <head>
    <title>HTML Example</title>
  </head>
  <body>
    <h1>HTML Example</h1>
    <p>Hello, world</p>
  </body>
</html>

HTML Structure

Ignoring formatting whitespace:

DOM allows access to this tree structure consisting of element nodes, text nodes and attributes.

HTML Markup

  • A HTML document consists of a tree of HTML elements.

  • A HTML element delimited between a start tag like <a> and an end-tag like </a>.

  • There may be text or other tags between the start tag and end tag. This is referred to as element content.

  • The start tag may contain attributes, like <a href="submit.cgi">.

  • The set of allowed attributes for any element are predefined with one exception: any element can have attributes with names starting with data-. Allows extensible attributes.

  • Tags which cannot have any content are referred to as void elements. They should be denoted as simply <br> or <input type="text">. They can also be denoted as simply <br/> or <input type="text"/>. They are not allowed to use a closing tag as in <input type="text"></input>.

    Do not confuse void elements with those which just happen to have empty content; do not denote an empty div as <div id="app"/>, use <div id="app"></div>. A good discussion.

HTML vs eXtensible Markup Language XML

  • The set of HTML tags and attributes are predefined with the notable exception of data- attributes. In XML, the set of tags and attributes are not predefined.

  • XML documents must start with an xml declaration <?xml version="1.0"?>. HTML documents must start with a DTD declaration, currently <!DOCTYPE html>.

  • XML documents must be well-formed: i.e., elements must be properly nested. That need not be the case with HTML.

  • Empty XML elements must be denoted as either <tag></tag> or <tag/>. This need not be the case with HTML which permits void elements to be denoted simply as <br>.

  • The tags and attributes of an XML document can be constrained using an external specification language like XML-Schema or RELAX NG. If an XML document meets this external specification, then it is said to be valid.

Absolute and Relative URLs

  • Absolute URLs are complete URLs containing scheme, hostname and path. Example: href="https://developer.mozilla.org/en-US/docs/Web/JavaScript".

  • Relative URLs can omit parts of the URL which are filled in from the referring document:

    Use current scheme

    Use same scheme as current document. Example: href="//developer.mozilla.org/en-US/docs/Web/JavaScript".

    Use current scheme and host

    Same scheme and host as current document. Example: href="/en-US/docs/Web/JavaScript"

    Use current scheme, host and path

    Example: href="Reference/Global_Objects/Array" or href="../HTML".

    Use current URL

    Example: different fragment in current document href="#frag".

Page-Level HTML Elements

<html>

A single <html> element must be present enclosing entire content.

<head>

Contains meta-content like <title> (displays title in browser window bar), <link> for loading CSS stylesheets, <script> for loading JavaScript files.

<body>

Encloses actual document content.

Block-Level Markup

<h1>, \(\;\ldots\), <h6>

Headings at different levels.

<section>

Delimits a section of the document. Usually followed by a <h\(i\) > element.

<nav>

Used for delimiting content used for site navigation.

<div>

Used for delimiting general block content. Usually used to attach style or behavior to a block using id or class attributes.

<p>

Used for delimiting paragraphs.

List Markup

Unordered Lists

Denoted using 

    <ul>
      <li>...</li>
      ...
    </ul>
Ordered Lists

Denoted using 

    <ol>
      <li>...</li>
      ...
    </ol>
Definition Lists

Denoted using 

    <dl>
      <dt>...</dt> <dd>...</dd>
      ...
    </dl>

Table Markup

  • Tables delimited using <table> tags.

  • Rows within a table are delimited using <tr> tags.

  • Table entries within a row are delimited using <th> tags (for heading entries) or <td> tags (for data entries).

  • A table entry can span multiple columns (using attribute colspan) or multiple rows (using attribute rowspan).

Inline Markup

<span>

Simply used to delimit some content, similar to <div>. Example <span class="keyword">while</span>.

<em>

Emphasized text. Example: <em>Important</em>.

<strong>

Strongly emphasized text. Example: <strong class="alert">Warning</strong>

<img>

Used to embed an image Example: <img src="smile-emoji.gif">. Can also be used at the block level.

<a>

Hyperlinks. Example See <a href="other-doc.html>other document</a>.

Common HTML Attributes

href

Specifies absolute or relative URL to another resource.

rel

Specifies the relationship of the linked to resource from the linking resource.

id

Specifies an ID for element. The ID must be unique across the entire document.

class

Value consists of multiple space-separated identifiers. Element class can be used for attaching styling and/or behavior to the element.

class and rel attributes have been used to provide semantics to markup using microformats ( wikipedia, MDN). Example microformats: hCalendar for events, hCard for contact information, geo for geographical information.

Forms

<form action="https://www.google.com/search" method="get">
  Search: <input name="q">
</form>

  • Forms need to be set up using <form> tags.

  • action gives URI where form should be submitted.

  • method can be get (default) or post. Other HTTP methods are not supported.

  • Submitting above form with <input> filled in as binghamton university will perform a GET request <https://www.google.com/search?q=binghamton+university>.

  • enctype used when method is post. Default is application/x-www-form-urlencoded. Use multipart/form-data if uploading files. HTML5 allows text/plain.

Form Controls

  • All form controls have a name attribute which gives the name by which that control is submitted.

  • Usually form controls have to be embedded within a <form> element, but HTML5 allows using a form attribute specifying the id of any <form> element on that page.

  • Form controls can be disabled which makes them inactive.

  • Add captions for form controls by putting control inside a <label> element or by specifying control id in the for attribute for <label>.

  • Can group controls together using <fieldset>.

Form Input Control

<input type=" TYPE "> Live example from MDN. Less typing using Local example

  • Main form input field.

  • TYPE traditionally had values button, checkbox, file, hidden, image, password, radio, reset, submit, text (default).

  • HTML5 added many more variants: color for color-picker, date, datetime-local, time, month, week for date-time, email, tel for contact information, number, range for numeric information, url for URLs.

  • autocomplete attribute allows browser to fill in information previously saved by user.

  • pattern attribute is a regex the entire value is matched against.

Miscellaneous Form Controls

<select>

Provides a menu of options using embedded <option> elements. Specify multiple attribute to allow multiple options to be selected. Can make an option selected by setting its selected attribute.

<textarea>

Multiline text input.

Escaping Special HTML Characters

HTML metacharacters can be represented by using character references with syntax inherited from SGML.

  • Named character references &lt;, &gt;, &quot; and &amp; can be used to represent the HTML metacharacters <, >, " and & respectively.

  • Numerous other named character references in HTML like &lambda; and &Delta; to represent \(\;\lambda\) and \(\;\Delta\) respectively.

  • Numeric character references can be used to represent any unicode character using &# nnnn ; &#x hhhh ; where nnnn is its code point in decimal and hhhh is its code point in hex.

  • Typically, one would depend on a library or framework to perform the escaping and unescaping.

An Example HTML Form

<p>Please update your cruise departure date</p>

<form method="POST" class="grid-form" action="/cgi/echo.mjs">
  
  <label for="departure-date">Departure Date</label>
  <input type="date" name="departure-date" id="departure-date">

  <label for="cruise-line">Cruise Line</label>
  <select id="cruise-line" name="cruise-line">
    <option value="">Select</option>
    <option value="royalCarribean">Royal Carribean</option>
    <option value="pAndO">P&amp;O</option>
  </select>

  <label></label>
  <button type="submit">Submit</button>

</form>

renders as

Please update your cruise departure date

Stylesheets

  • Current best practice is to relegate presentation to stylesheets.

  • Can be specified using external stylesheets, using <link> elements.

  • Can also be specified using internal stylesheets using <style> elements.

  • Can also be specified inline for an individual element using style attribute.

  • Precedence (in descending order) inline, internal, external.

Linking to External Stylesheets

 <link rel="stylesheet" href="style.css"/>

  • <link> is a void element; the end tag must not be present.

  • Stylesheets are accessed synchronously. Content cannot be rendered until stylesheets available.

  • <link> elements should be within the <head> section, though most browsers also allow within <body>.

  • Various workarounds use JavaScript to load stylesheets asynchronously.

  • Also used with rel="icon" to load favicons.

Cascading Style Sheets

  • Cascading Style Sheets (CSS) specifies priority rules (cascade) between different style declarations which may apply to a element.

  • A CSS stylesheet consists of a set of rules.

  • A rule consists of a selector followed by a brace delimited set of CSS declarations separated by ;. 

        p .highlight {
     background-color: yellow;
     color: blue
    }

  • Will not cover CSS declarations.

  • Will cover CSS selectors in depth as document.querySelector() and document.querySelectorAll() allow the use CSS selectors to select HTML elements to manipulate using scripts.

Simple CSS Selectors

Universal Selector

An asterisk* selects all elements; usually used in conjunction with other selectors.

HTML Element Names

Simply specify name of HTML element. Examples p, a, table.

Class Selectors

Name of class preceeded by a . (period). Examples .highlight, .important.

ID Selectors

ID of element preceeded by #. Examples include #form1, #table1. Note that ID must be unique in document.

Attribute Selectors

Attribute Selectors select elements by attribute value.

[attr]

Selects all elements having attribute attr. For example, [href] selects an element having an href attribute),

[href=VALUE]

Selects all elements having href attribute having specific value VALUE.

[href*=test]

Selects element having href attribute whose value contains test.

[href^=test]

Selects element having href attribute whose value starts with test.

[href$=test]

Selects element having href attribute whose value ends with test.

[class~=KLASS]

Selects an element having a class attribute which is a list of whitesace separated words, one of which matches KLASS exactly.

Combining Selectors

Constrain

Can follow selector by class or id selectors (without spaces). p.chemical matches p elements having class chemical.

Descendent

Simply write selectors adjacent to each other separated by a space. Example: .chemical p selects all p elements which are descendents of an element which has class chemical.

Child

Write selectors separated by a >. Example: .chemical > p selects all p elements which are direct children of an element which has class chemical.

Combining Selectors Continued

Sibling

Write selectors separated by a ~. Example: .chemical ~ p selects all p elements which follow (not necessarily immediately) an element which has class chemical.

Adjacent Sibling

Write selectors separated by a +. Example: .chemical + p selects all p elements which immediately follow an element which has class chemical.

Multiple

Separate selectors by commas , to have multiple selectors apply to the same set of declarations.

DOM Overview

  • The Document Object Model (DOM) is a programming interface for HTML or XML documents.

  • Models document as a tree of nodes.

  • Nodes can contain text and other nodes.

  • Nodes can have attributes which include style and behavior attributes.

  • Possible to get all nodes of a particular type, specific class or id.

Document Object Model

  • API to access parsed HTML/XML documents.

  • Designed to be used from any language, but within browsers the only language supported currently is JavaScript.

  • Datatypes include document, element, attribute.

  • Global element is window.

  • All properties of window object are also available as global variables.

Document

  • Current document available as document property of global window (aka self) object. Hence available simply as document.

  • Numerous properties including location (URL, giving href, protocol, hostname, port, pathname, search, hash), contentType, body, cookie (cookie defs separated by ;).

  • Numerous methods including createElement() and createAttribute().

  • A document.documentElement is root Element.

Element

  • Represents an individual HTML element.

  • Properties include id, classList, innerHTML (markup within element), innerText (human-readable text within element), textContent (all text within element), attributes (map NamedNodeMap of attributes).

  • Methods include getAttribute(), getAttributeNames(), removeAttribute(), setAttribute(),

  • Can search for sub-elements matching CSS selectors using querySelector() and querySelectorAll(). The latter returns a NodeList which is array-like (supports .length and indexing) and also supports forEach.

  • Legacy methods: getElementsByTagName(), getElementsByName(), getElementById(), getElementsByClassName().

Attributes versus Properties

  • Distinguish between attributes and properties. The former corresponds to the markup, the latter corresponds to properties of the constructed DOM object. Fairly complex rules govern attribute-property mapping.

  • Consider text input <input name="n" value="John"> accessed as DOM element w. Initially, w.value, w.defaultValue and w.getAttribute('value') are both equal to John. However, if input element content is changed to Jane, then w.value is Jane but w.getAttribute('value') remains John; w.defaultValue remains John. Running example.

DOM Play

dom-play.html

Events

  • When browser events (like key presses, mouse clicks, page loads) occur, browser calls a event handler.

  • Historically, different browsers had different ideas of how a event was propagated between an element and its containing elements.

  • DOM level 0 allowed only a single handler for each event for an element using syntax like element.onclick = function(event) { ... }. Problematic in that different scripts may each try to add handlers for the same event.

  • In DOM level 0 event bubbles up from leaf element on which event occurs to its parent all the way up the DOM tree.

  • DOM level 2 event model has a capture phase (before bubble phase) where event propagated down from the top level of the DOM tree to the leaf element causing the event.

  • DOM level 2 allows adding multiple handers for an event using addEventListener(eventType, handler, useCapture).

Some DOM Events

MDN

  • DOMContentLoaded: Initial HTML document loaded and parsed; stylesheets, images, asynchronous scripts may still be loading.

  • load: complete document, including all dependent resources have been loaded.

  • Focus events focus, blur.

  • submit: a form is being submitted.

  • Keyboard events: keydown, keyup, keypressed; the last fires continuously.

  • Mouse events click, dblclick, contextmenu, mouseenter, mouseleave, mousemove (fires continuously), mouseover, mouseout, mousedown, mouseup. Use corresponding pointer* events which would work across multiple devices like mouse and phone touch.

  • change: value of some <input>, <select> or <textarea> element has been changed by the user.

Handler Function

  • Within handler function this is set to the DOM element on which the handler was registered.

  • First argument is an Event object with properties like:

    • target: the DOM element on which the event was dispatched.

    • currentTarget: the DOM element on which the handler was registered.

    • type: Name of event.

    • For keyboard events key: value of active key.

    • For mouse events, properties client[XY], offset[XY], page[XY]: coordinates of mouse pointer in local coordinates, relative to target node, relative to entire document.

    • preventDefault(): calling this function cancels event.

    • stopPropagation(): prevents propagation of event.

events play

Linking to JavaScript: Traditional "scripts"

<script src="script.js"></script>
<script>
  //inline script ...
</script>

  • End tag must be present.

  • Without extra attributes, the script is accessed synchronously. Blocks the HTML parser while the script is downloaded and executed.

  • For best efficiency, include after bulk of document body just before </body> tag.

  • Can include boolean attribute defer: HTML parsing continues, script loads asynchronously and run after HTML parsing complete.

  • Can include boolean attribute async: HTML parsing continues, script runs asynchronously after loading.

Linking to JavaScript: Modules

<script type="module" src="module.mjs"></script>

  • End tag must be present.

  • Module is downloaded in parallel with HTML parsing (as though attribute defer is present within <script> tag).

  • Module code is executed only after HTML parsing is completed.

  • Module can import other modules.

  • Module can export JavaScript objects.

  • Module code is executed in strict mode turning off problematic JavaScript features.

  • Can be included within <head>...</head> section.

For more details, see this gist.

Modern HTML

Separation of concerns:

  • Presentation relegated entirely to CSS using external stylesheets.

  • Behavior relegated entirely to unobstrusive javascript.

  • HTML should specify content in as semantically meaningful a way as possible.

    • Do not use tables for layout, only for information which is naturally tabular in nature.

    • Use semantically appropriate HTML tag if possible, minimize use of semantically meaningless div and span.

    • Link to external semantics using itemscope and friends (a modern way of doing microdata) or HTML + RDFa.

Unobstrusive JavaScript

Different technologies used for different concerns:

Content

HTML used for content.

Presentation

CSS used for styling.

Behavior

JavaScript used to specify behavior.

  • Do not mix technologiess within a single file.

  • Best practice is to split out into separate *.html, *.css and *.js files.

  • Modern technology blurs lines between concerns; CSS 3 contains support for visual behavior traditionally achieved using JavaScript. Nevertheless it remains a good organizational principle.

Bad Code

In doc.html: 

  <a href="submit.cgi"
     onClick="checkForm(this)"
     style="font-weight: bold">
    Submit
  </a>

  • Uses CSS and JavaScript code within attributes of HTML elements.

  • Maintaining file will require content, presentational and programming skills.

Better Code

  1. In doc.html maintained by content specialist or a Content Management System (CMS): <a href="submit.cgi" id="submit">Submit</a>.

  2. In doc.css maintained by web designer #submit { font-weight: bold; }.

  3. In doc.js maintained by front-end programmer: document.getElementById('submit') .onclick(checkForm(this)).

  • Separate concerns, separate files, separate specialists.

  • doc.html will need to reference doc.css stylesheet and doc.js.

  • In practice, single .css stylesheet, .js file shared by multiple html documents.

  • Element class and id attributes become the interface between specialists. Need to be maintained with the same care as a public API.

Clocked Counter

dom-clocked-counter

Fetch

fetch(urlOrRequest, options=undefined)

  • Returns a Promise<Response>. Fails only on network errors. A Response has an ok property which is true iff the HTTP status is 2xx.

  • A Response has a text() method which returns Promise<String>.

  • A Response has a json() methods which returns a Promise<Object>.

  • options can be an object. Properties include:

    • method: The HTTP method.

    • headers: a Headers object.

    • body: the body of the request. Can be a String or FormData.

Fetch Examples

//a GET request for text
const response = await fetch(url1); //default get
const html = await response.text(); //assume response.ok

//a GET request for JSON
const obj = await (await fetch(url2)).json();

//a POST request with JSON request and response
const data = { ... };
const result = await
  (await fetch(url3, {
     method: 'POST',
     headers: {'Content-Type': 'application/json', },
     body: JSON.stringify(data),
  })).json();