JavaScript, HTML, the Browser and You

In this set of slides, we'll briefly discuss:

• HTML
• browsers and how they render HTML
• using JavaScript on the client side

HTML

Hey… so remember when we talked about the internet, the web, interconnected documents and hyper-text?

HTML is the language that describes the structure and semantic content of a document on the web; it consists of:

• content (just plain text)
• and elements (tags) that give structure to the text

Content and structure aren't the whole story when viewing a web page, though. What pieces are missing (let's see)? →

• style (presentation)
• interactivity

HTML is for content and structure

HTML is a Mark Up Language

HTML stands for Hyper-Text Markup Language. We get the Hyper-Text part.

What about the markup part? →

• a markup language is a method of annotating text…
  • where the markup itself is syntactically distinguishable from the content
  • markup is applied to text by using tags
• HTML is generally not considered a language in the programming language sense

Elements and Tags

An element a single part of an HTML document; it encompasses both structure and (optionally) content: a paragraph, the head of the document, etc.

• an element is made up of tags and, optionally, text: <p>Some Content</p>
• tags are used to mark the start and end of an HTML element: <p> ... </p>
• an opening tag is an element's name surrounded by angle brackets: <p>
• an closing tag is an element's name prefixed with a forward slash and surrounded by angle brackets: </p>

Tags Continued

There are a few ways that tags and content can be combined to create elements. What are they? →

• an open and close tag surrounding content: <h1>The Busy Birder</h1>
• an open and close tag without content: <script src="main.js"><script>
• only an open tag <img src="logo.png">

Attributes

An opening tag can contain attributes. In the context of HTML, what's an attribute? →

• an attribute is part of a tag that provides additional information about an element
• it's composed of a name/value pair joined by an equal sign
• it's is placed after the name of the element in a tag, but before the last angle bracket: <img src="logo.png">
• the value doesn't have to be quoted, but it's good practice to do so… to avoid issues like this:<input type=text value=what is this>

A Quick Diagram

Name the parts of this markup →

<a href="www.nyu.edu>NYu</a>

Special Characters

What if you want your content to contain a literal less than sign… or some other special character? →

Use an HTML entity. An entity is a sequence of characters that represent a special characters that is not readily available on most keybaords… such as the less-than sign, an ampersand, a space:

• HTML entities start with an ampersand, followed by a name, and end with a semicolon
• for example, < is < and & is an &
• a list of HTML entities

Some Commonly Used HTML Entities:

& ... ampersand (&)
  ... non breaking space ( )
&lt; ... less than (<)
&gt; ... greater than (>)
&quot; ... double quotes (")
&apos; ... single quote (')

We're Using Modern HTML

HTML has evolved greatly since its inception in the early 90's. There are multiple versions that have cropped up over time.

We're using modern HTML.

HTML is specified by two groups: WHATWG and W3C.

Modern HTML, Specifications

WHATWG and W3C work together to specify HTML

• WHATWG (Web Hypertext Application Technology Working Group) has a living HTML standard
  • the standard is continuously evolving, as necessary
  • no version numbers
  • it is driven by the community; everyone can contribute!
• W3C (World Wide Web Consortium) is basing the most recent versions of HTML on WHATWG's living standard
  • it snapshots versions
  • the latest specification is version 5 - HTML5
  • these version releases are a bit slower than WHATWG's

HTML5

In this class, we're using the most modern version of HTML that's currently supported by most browsers. We're using HTML 5.

By the way, why do you think snapshots / versions are necessary? Why not just work off of the living standard? →

• web browsers and developers need something stable to code against!
• ensure operability among different browsers, such as desktop, and mobile browsers

So, What is HTML5, Exactly

HTML5 is the newest version of HTML, which includes new elements, attributes and behaviors. It introduces changes and features in:

• actual markup
• scripting APIs
• error handling / graceful degradation

HTML5 and Markup Improvements

HTML5 introduces elements and attributes that reflect typical components of modern web sites:

• adds new semantic elements, such as video, nav, etc.
• adds additional attributes, such as new input types - number, range, date, etc.
• removes purely presentational elements, such as font and center
• simplifies some markup, such as the introductory doctype line, which is now merely <!doctype html>
• (this doctype tells browsers to render the document based on a standards compliant mode)

HTML5 and New Scripting APIs

HTML5 also specifies new scripting APIs for JavaScript:

• canvas element for 2D drawing
• browser history management
• offline web applications
• drag and drop support
• and others

A Reminder About Doctype

To indicate that your page uses HTML5, use the following doctype declaration:

<!DOCTYPE html>

This doctype:

• this will force most browsers into standards mode
• …even ones that don't support HTML5
• which means that they'll handle the long established parts of HTML5
• but ignore the newer features gracefully

Rendering an HTML Page

What are some steps that your browser must perform to get from a URL to a rendered page? →

• download the page (the actual HTML)
• parse the HTML
• download any additional resources, such as scripts and CSS
• layout the page
• paint the page onto the screen
• …it's more complicated than this, of course
• check out this article on how Webkit (Safari and Chrome's rendering engine) and Gecko (the rendering engine for FireFox) work)

A Few Notes About Parsing HTML

When working through HTML, if the parser encounters JavaScript (whether inline, in the page or external):

• it will stop parsing the HTML (dealing with scripts blocks the HTML parsing process)
• it'll download the script (if applicable)
• …then run the script
• and finally, go back to parsing the document

Why do you think document parsing stops in order to run scripts? →

Some scripts will actually change elements on the page!

Fun with Malformed Markup

For each of the code snippets below, guess what markup the browser actually uses (that is, how does it interpret the malformed markup) →

No tags surrounding me!

html, head, and body tags are inserted

<html>
<body>
		Where's my close body?
</html>

body is automatically closed

<html><body> Some nested forms....
	<form method="POST">
	<form method="GET">
	</form>
</form>
</body> </html>

The second nested form element is removed.

Dealing with Bad Markup

Browsers are extremely forgiving when it comes to markup:

• for example, Chrome allows the errors listed in this article (some of which we saw in the previous slide).
• it may seem like these are arbitrary workarounds
• …but the way that browsers deal with malformed markup is surprisingly consistent.

JavaScript on the Client Side

In order to use JavaScript on the client side, you can use script tags:

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

Note that:

• in HTML5, you can omit the type attribute; text/javascript is assumed
• the script element requires a closing tag

Script Tags, JavaScript in Attributes

You can specify an external script by using the src attribute in the script tag

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

Or you can write the script inline, within the script tags itself

<script> 
var x = 10;
alert(x);
</script>

And finally, you can have JavaScript in an element's attributes:

<button onclick="alert('hello!');>Say hello</button>

Best Practice for JavaScript on the Frontend

Which of the methods in the previous slide:

• external JavaScript file
• JavaScript between script tags
• JavaScript as an element's attribute

do you think is the recommended method for integrating JavaScript code and why? →

Using External JavaScript

The most commonly accepted best practice for integrating JavaScript is using external JavaScript files. This is because external JavaScript files →

• helps separate content and style from functionality
• encourage code reuse
• allows for caching of often used code resources

What may be some reasons to use inline JavaScript (JavaScript code embedded directly into a page using script tags or as HTML attributes).

• simplicity of development / faster prototyping
• reduce the total number of requests made

Where to Include JavaScript?

Ok, so we know we what external JavaScript files, but where do we put the actual script tags? In the head? The body? In either case, at the top, bottom or middle? Why? →

We'll generally include JavaScript at the bottom of the body tag.

• this prevents the inclusion of scripts from blocking the parsing of the page
• (which in turn, allows most of the page to be rendered before the parser encounters the script tags)

Reducing Page Load Time

What are some other things that we can do with our external JavaScript to make our page load more quickly? →

• minimize our external JavaScript
• compress our external JavaScript
• lastly, script tags in HTML5 may have:
  • an async attribute which signals to the browser that the script does not have to be blocking; it can be downloaded asynchronously
  • a defer attribute - tells the browser that the script can be downloaded and run after the page has been parsed

<script defer async src="main.js"> </script>

JavaScript and the Browser

As we've discussed in the past, JavaScript is based on a standard called ECMAScript

• as of 2012, all modern browsers fully support ECMAScript 5
• many browsers already support the majority of features of ECMAScript 6 (ES6, ES2015, etc.) … like:
  • additions to the standard library (for example, adding Array methods like find() and fill())
  • new objects, such as Set and Map
  • syntactic sugar (for example class style definitions for inheritance, fat arrow anonymous functions)
  • default parameters for functions (like Python keyword arguments)
  • and others
• older browsers support at least ECMAScript 3

What Does ECMAScript Define?

• the language's type system (Number, String, etc.)
• language syntax (parsing rules, keywords, control flow)
• error handling mechanisms (throw, try/catch)
• built in objects / standard library (Array methods, JSON object, etc.)
• strict mode

You're Lucky

Consider yourself lucky to be developing for the web at a time when browsers conforming to standards has become the norm.

• while there are still differences between browsers and how they render pages
• it is much more pleasant to develop for the front-end on the web today than it was than just a few years ago
• (well, with the exception of JavaScript fatigue)
• the latest versions of most mainstream browsers behave surprisingly uniformly