wp-content/uploads/2016/01/PBS_Logo.png

Since this is the first instalment back after our summer hiatus, it seems like a good time to pause and take stock. I want to look back to revise what we’ve learned to far, and, to look forward to where I want to take this series next.

From a big-picture point of view, what we have learned to-date is that HTML for a markup language for what is in a document – this is a heading, that’s a paragraph, this is a button, and so on, CSS is for specifying how it should be displayed, and JavaScript for bringing the document to life, adding interactions of various kinds. We started by learning about JavaScript in the abstract, and then we learned how to use JavaScript to interact with HTML documents using the DOM with the help of the 3rd party jQuery library.

Along the way we’ve also learned a little about software engineering and project management, learning about useful third-party tools like QUnit for JavaScript unit-testing, and JSDoc for generating documentation for JavaScript APIs.

It’s my hope that at this stage you’ve all picked up enough of an understanding of the fundamental concepts that you can now glean useful information from developer documentation. If not, then that’s a skill I strongly recommend focusing on going forward. In the real world developers don’t remember exact HTML tag attributes, CSS style property values, or JavaScript function names, instead they’re practiced at quickly and efficiently finding the information they need, usually online these days.

To that end, this revision post is going to stick at a high level, and then provide links to good online developer documentation that contains all the nitty-gritty details you could ever need.

HTML

HTML is a markup language for specifying what different elements that make up a document are. This is a paragraph, this is a list, this is an image, and so on and so forth. There have been a number of versions of the HTML language released, we’ve been learning the latest of those, HTML 5.

An HTML document consists of nested elements which are described using tags. Elements come in two flavours – those that contain content, and those that don’t. Those that contain content are marked up be wrapping the content between matching opening and closing tags tags like so:

While those that don’t contain content are represented by a single tag, like the one below representing a horizontal rule:

All HTML elements can have attributes which take the form of name-value pairs, e.g.:

The majority of HTML elements fall into two main categories – block-level elements, and inline elements. Block-level elements start a new line and take up the full width of the available space by default, while inline elements only effect the rendering of sections of text within blocks. Headers, paragraphs, lists, and block quotes are examples of block-level elements, while strong, emphasised and underlined pieces of text are examples of inline elements.

Links

Quick Quiz

  1. Why is the following snippet invalid HTML?

  2. Consider the following HTML snippet:

    1. Which element is the block-level element? And which the inline element?
    2. What’s the content of the a element?
    3. What’s the value of the a element’s title attribute?

CSS

By default HTML is rendered very plainly with only very basic formatting. To give an HTML document some character and a look, we need to use CSS. Like with HTML, there have been a number of versions of the CSS language released, we’ve been using the latest, CSS 3.

Every element in an HTML document has many style properties associated with it, e.g. font-size, color, font-family, border, and many many many more. CSS allows us to specify values for these properties using declarations. We group these declarations into declaration blocks, and apply them selectively to the elements that make up a document using selectors.

Consider the example below:

The entire thing is a single CSS statement, or, more specifically, a single CSS rule set.

The rule set has two main parts – the declaration block and the selector. In this case, the following is the declaration block:

And the selector is simply ul li.

The declaration block contains two declarations, specifically color: red; and font-weight: bold;. Each of these declarations is made up of a CSS property name and a value, so color and font-weight are CSS property names, and red and bold are values.

The entire statement has the effect of specifying that text within list items within unordered lists should be red and bold.

It’s normal to have overlapping selectors, and hence, multiple possible values for a given property for a given element. CSS resolves these conflicts using specificity. The value specified in the declaration block accompanying the selector with the greatest specificity wins. Broadly speaking the global selector (*) has the lowest specificity, tag names are more specific, classes even more specific, and IDs the most specific. Two classes is more specific than one class, but still less specific than even one ID.

Links

Quick Quiz

Given the following CSS snippet:

  1. How many CSS statements does the snippet contain?
  2. How many CSS declarations does the snippet contain?
  3. What is color?
  4. What is bold?
  5. If the CSS snippet above were the sum total of all the CSS applied to an HTML document, what colour would text in a paragraph be?
  6. If the CSS snippet above were the sum total of all the CSS applied to an HTML document, what colour would strong text in a paragraph be, and why?
  7. If the CSS snippet above were the sum total of all the CSS applied to an HTML document, what colour would strong text in a paragraph be if the strong element had the class vip, and why?

JavaScript

The Core Language

Again, like with HTML and CSS, there have been many different versions of JavaScript over the year. For now, we have been using the version of JavaScript officially named ECMA Script 5, which is more commonly known as just ES5.

In JavaScript, variables can hold one of two things – a primitive value, or, a reference to an object. Primitive values can be booleans, numbers, or strings. That means that in JavaScript, everything that’s not a boolean, a number, or a string is an object, including arrays, functions, and regular expressions. Plain objects are simply collections of name-value pairs. Objects can have an associated prototype, which means they gain extra name-value pairs provided by that prototype. In the version of JavaScript we’ve been using (ES5) you declare a variable using the var keyword, and you create instances of prototypes using the new keyword.

JavaScript supports the normal array of operators including the assignment operator =, arithmetic operators like +, -, * & /, comparison operators like ==, !=, < & >, and boolean operators like !, && & ||.

Because JavaScript is a loosely typed language, the concept of equality is not as straight-forward as you might expect. The == operator checks if two values are the same, regardless of their type, while === will only consider them the same if both their value and their type match. In other words, the string '4' and the number 4 are considered equal by ==, but not by ===.

It’s also vital to remember that both == and === compare object references, not object contents, so an object is only considered equal to itself, not to anything else.

When it comes to controlling the flow of control JavaScript provides the expected keywords – if...else, while, do...while, and for.

JavaScript provides two syntaxes for declaring functions:

And:

The latter syntax allows functions to be created without ever being given a name, we refer to there as anonymous functions.

Variables declared within a function do not exist outside the function, but variables declared outside a function can be accessed from inside it.

Because functions are objects, reference to functions can be stored in variables, and, passed as arguments to other functions. A reference to one function passed as an argument to another is often referred to as a callback.

Remember that the names you choose to give function parameters are effectively variable declarations made within the function’s scope.

JavaScript supports exception handling with the try...catch and throw keywords.

We’ll be looking at jQuery in detail in a moment, but we have also encountered a number of other third-party JavaScript libraries, including URI.js for URL manipulation, moment.js for timezone-aware date/time manipulation, QUnit for testing, and JSDoc for documentation generation.

Links

Quick Quiz

  1. Given the following code snippet:

    1. What will be the output from: console.log(x['a'])?
    2. What will be the output from: console.log(x.a)?
    3. What will be the output from: console.log(x.c.length)?
    4. What will be the output from: console.log(x['c'][3].length)?
    5. What will be the output from: x.j()?
  2. What will the following code snippet print to the console, and why?

  3. What will the following code snippet print to the console, and why?

  4. What will the following code snippet print to the console, and why?

jQuery

Throughout this series we have been using the third-party free and open-source jQuery library to interact with the so-called Document Object Model, or DOM. The DOM is a collection of JavaScript objects assembled by the browser that represent the elements that make up and HTML document. It is possible to directly manipulate the DOM using just the core JavaScript APIs, but there’s a reason a whole range of third-party DOM-manipulation APIs like jQuery have been developed over the years – direct DOM manipulation is tedious!

When you import the jQuery library into your HTML document it presents its entire API through a function named jQuery, and, by default, an alias for that function named $. jQuery uses CSS-style selectors to search the DOM, and HTML-style strings to create new HTML elements. It’s this leveraging of existing skills that explains jQuery’s popularity among web developers.

Links

Future Plans

Over the next few episodes I want to finish our look at HTML forms, and to finish our Cellular Automata prototypes. That will bring us to a fairly major milestone, having covered all the HTML and CSS I plan to cover in the series.

It should be an even bigger milestone, because I was hoping to be able to say that we would also have covered all of the core JavaScript language that we needed to, but alas, I can’t say that. Why? Because during the many months that have elapsed since we started our look at JavaScript, two new versions of the have been released! We have been learning ECMA Script version 5, AKA ES5, but ES6 was finalised a little over a year ago, and ES7 was finalised a few months ago. Today, ES7 doesn’t have comprehensive browser support yet, but ES6 does, so we need to learn about the cool new features ES6 brought to the JavaScript language. The single biggest change is probably the introduction of the class keyword, giving JavaScript developers a more human-friendly syntax for defining their prototypes.

Something else I want to do in the very near future is introduce the Bootstrap 4 framework – this is free and open source CSS+JavaScript framework that makes it very easy to create responsive web pages that look great on all screen sizes.

Once we’ve learned about ES6 and Bootstrap it will be time to embark on a nice big project to give us plenty of opportunities for putting all we’ve learned into practice. I have a few different ideas in mind for fun projects, but I haven’t made any decisions yet.

All that will easily tide us over into 2018, by which time we’ll be ready to make the paradigm shift from writing client-side code, to writing server-side code. We’ll be doing that with NodeJS. Node already has great ES7 support, so, we’ll start our exploration of Node by learning about the new features ES7 brings to JavaScript, particularly the concept of promises.

Learning server-side development with Node is likely to take many many months, so my plans beyond that are not really plans, more ideas. Two things I would like to cover at that stage are databases, and source control systems like GIT. Next, I think it might be good to learn another language other than JavaScript, and my current thinking is to look at the most common server-side language, PHP.

We’ve learned a lot together over the last 37 instalments, but there is so much more for us to explore, so have no fear, this series is nowhere near winding down yet!