CTEC3905

Front-End Web Development

Lecture 03

===

STAFF CONTACTS

Module leader:

General queries and admin issues:

Graeme Stuart: gstuart@dmu.ac.uk

===

RATIONALE

No JQuery or CSS frameworks (e.g. Bootstrap)—it’s impossible to mark the resulting sites as independent code
Some tools are widespread in industry, but it’s important to understand the core languages
this avoids over-dependence on poorly understood 3rd-party code (JQuery source code is… JavaScript).
you can gain a solid foundation in the languages from lab and lecture code

===

JAVASCRIPT TEACHING: 1

There's a lot to learn

This is not a dedicated JavaScript module so instead we:

get you started with the fundamentals
highlight good practice with examples
supply exercise code you can experiment with
provide curated links to online learning materials
provide an overview of the current state of JS
we won't cover: Node, Web Sockets, JQuery, Bootstrap…

JAVASCRIPT TEACHING: 2

VARIOUS SKILLS/INTERESTS, THE PLAN

build on the lab and lecture examples
make working examples to re-use in your project
build up a set of re-usable js code on GitHub

We can't do detailed code-fixing in labs or by email
The real learning process is debugging/researching

JAVASCRIPT TEACHING: 3

After the JavaScript basics, follow your interests
Keep things simple, make one thing work well first
Work out how to use JavaScript in your project:
it can be practical/functional or a bit clever
check the browser console (f12) for errors
always validate your HTML as you develop!

Check dates to avoid old/bad code on the web:

~~var~~ -> let/const
~~onclick~~ -> addEventListener()

===

`JavaScript !== Java;`

this deserves its own %$@**& slide…

===

JAVASCRIPT HISTORY: 01

created in 10 days in May 1995 by Brendan Eich, then at Netscape (now Mozilla). Original name Mocha, chosen by Marc Andreessen, founder of Netscape.
In 1995 the name became LiveScript then, after a trademark license from Sun it became JavaScript—a marketing move as Java was then a popular way of running applets in browsers.

Beginners still confuse the two languages.

A Short History of JavaScript (W3C)

JAVASCRIPT HISTORY: 02

1995: JavaScript created in 10 days as “Mocha”
1997: ECMAScript standard established (see ECMA)
1999: ES3 - Microsoft discover www. IE5 everywhere.
2000–2005: XMLHttpRequest (AJAX): Outlook Web Access (2000), Gmail (2004), Google Maps (2005)
2009: ES5 - established JavaScript, and standard JSON
2015: ES6/ECMAScript2015 - some is syntactic sugar, no firm agreement on anything more radical yet
NOW: ES7/ECMAScript2016 - go no further!

Reference: benmccormick.org (2015)

JAVASCRIPT HISTORY: 03

JavaScript is an implementation of ECMAScript

ActionScript is/was another ("whatever happened to ES4?")

The ECMA standards (PDFs):

The ECMA-262 6th Edition / June 2015
The ECMA-262 7th Edition / June 2016
The ECMA JSON standard

JAVASCRIPT HISTORY: 04

ES6: JavaScript in transition

e.g. promise, const, let, modules, …

ES5 concatenation:

var name = 'My name is ' + first + ' ' + last + '.'

ES6 template Literals (interpolation). Note backticks:

let name = `My name is ${first} ${last}.`

See ES6 browser support (TL;DR warning: BIG table!)

===

JS HOW IT WORKS: 1

translated into machine instructions by the syntax parser
creates a global execution context in the browser window…
…with window as the global object and this as a special variable
runs in an event loop to check if user events need action

global: not in a function, available everywhere in a window…

…even with an empty browser tab (or blank .js file) e.g. type this.innerWidth; into an empty browser console

JS HOW IT WORKS: 2

builds an execution stack to handle your code
executes your code synchronously (one thing at a time)
the browser adds user events (e.g. click) to an event queue
if the execution stack is empty…
…JavaScript checks the event queue for actionable events

The browser does things asynchronously (rendering the page, making HTTP calls, storing user events in the queue…) while JavaScript handles things synchronously…

…except for async (see js Goes Async and MDN/async)

JS HOW IT WORKS: 3

you use it to access the Document Object Model (DOM)
you make changes and get information from the DOM

Example:

a.highlight {
  background: yellow;
}

const myLinks = document.getElementsByTagName('a');

for(let i=0; i < myLinks.length; i++){
  myLinks[i].classList.add("highlight");
}

See Introduction to the DOM

JS HOW IT WORKS: 4

The first element in the Document Object Model (DOM) tree is html, containing the head and body children tags:

<html>
  <head> … </head>
  <body> … </body>
</html>

Relationships between elements are called parent, child and sibling nodes

From: Document Object Model Structure

JS HOW IT WORKS: 5

JS HOW IT WORKS: 6

THE BROWSER EVENT LOOP

In a browser, everything runs in an event loop so you use event listeners to errr… listen for events triggered by the user or other processes:

myElement.addEventListener("click", MyFunction);

While CSS can be triggered by focus/hover/etc.
JavaScript can listen for hundreds of events.

See: Web Event reference (MDN)

JS HOW IT WORKS: 7

How is JavaScript used?

form validation of user input
handling data (e.g. JSON)
interactive user interfaces and feedback
web-based apps (mobile and desktop)
web and mobile frameworks
applications built on web technologies
games with HTML5 canvas (HTML5 Games website)
3D animations with canvas and WebGL e.g. cars, Aquarium

===

JAVASCRIPT SYNTAX: 1

Blank console in Chrome:

type about:blank in the address bar
type in JavaScript and try things out
shift-return: new line without executing

A demo, if there's time…

JAVASCRIPT SYNTAX: 2

C-FAMILY STYLE SYNTAX

familiar if you've used C-family languages:

const myArray = ["Julia", "C++", "Ruby", "R", "Go", "Python", "Rust"];

// These are not all C-family languages!

Array methods (W3Schools)

JAVASCRIPT SYNTAX: 3

DYNAMIC TYPING

6 primitive types (not objects):
undefined, null, boolean, number (always a float), string, symbol (ES6)
JavaScript works out the type for a variable value
you can change a let value from one type to another

JAVASCRIPT SYNTAX: 4

VARIABLES (`var`), `let`, `const`

let greet, helloUser; // initialise two variables
greet = "hello";  // assign a value
let userInput = // get user input from the DOM  
helloUser = `Oh, ${greet} ${userInput}`;

let myVar = // can be: string, number, boolean
const myVar = // can be: array, object, function…

myVar === myVar01; // true if the same
myVar !== myVar01; // true if different

const can store an immutable type (e.g. array, function), the elements or properties of which can change.

We will see that let has tighter scope than var…

JAVASCRIPT SYNTAX: 5

VARIABLE scope: var and let

function demoLet() {
  //tuce is *not* visible out here
  for( let tuce = 0; tuce < 5; tuce+=1 ) {
    //tuce is only visible in here (in the for())
  }
  //tuce is *not* visible out here
}
function demoVar() {
  //nish *is* visible out here
  for( var nish = 0; nish < 5; nish++ ) {
    //nish is visible to the whole function
  }
  //nish *is* visible out here
}

…difference between using “let” and “var” to declare a variable?

JAVASCRIPT SYNTAX: 6

FUNCTIONS

function declaration || expression (as a const variable):

function multiplyNums(x, y) {
  return x * y;
} // function declaration

// function expression (as an arrow function)
const multiplyNums = (x, y) => x * y;

Nearly everything in JavaScript is an object, including functions which can be used as variables including function call parameters. (MDN functions)

JAVASCRIPT SYNTAX: 7

ARROW FUNCTIONS: COMPACT

const multiplyNums = (x, y) => x * y;

const square = x => multiplyNums (x, x);
square(8); // 64

const squares = [1,2,3,4,5];
squares.map(num => square(num));
// [1, 4, 9, 16, 25] much better than a for loop!

…you can use function composition with pure functions: (same input always gives same output, self-contained with no side-effects)

See Arrow Functions (MDN)

JAVASCRIPT SYNTAX: 8

PURE FUNCTIONS: COMPACT AND SAFE

const hexagrams = square(8); // hexagrams is 64

console.log(`I Ching: always ${hexagrams} hexagrams!`);
// I Ching: always 64 hexagrams

A pure function with parameters in a template literal:

console.log(`This is not a ${square(4)}-bit laptop!`);
// This is not a 16-bit laptop!

JAVASCRIPT SYNTAX: 9

GENERATOR FUNCTIONS*

Example: a simple counter limiter:

function* count () {
  let index = 1;
  while (index < 4) {
    yield index++;
  }
}
const upTo3 = count();

upTo3.next(); // value: 1, done: false
upTo3.next(); // value: 2, done: false
upTo3.next(); // value: 3, done: false
upTo3.next(); // value: undefined, done: true

JAVASCRIPT SYNTAX: 10

JavaScript Math Object e.g.

Math.round(4.5); // 5
Math.pow(8,2); Math.sqrt(64); // 64, 8
Math.abs(-4.7); // 4.7
Math.ceil(4.4); Math.floor(4.7); // 5, 4
Math.max(0, 150, 30, 20, -8, -200); // 150 (and min)
Math.random(); // a float from 0 to (almost) 1
Math.floor(Math.random() * 10); // number between 0 and 9

if you get NaN and you (know/want/think it is) a number:

parseFloat(aFloatYouThink); parseInt(AnIntegerYouThink);

Read W3Schools: JavaScript Math Reference,
JavaScript Number Methods, JavaScript Type Conversion Table

JAVASCRIPT SYNTAX: 11

Array […]

'array literal' - create and populate:

const myArray = [1, 2, "free",  multiplyNums(8, 8)];
myArray[3]; // 64

No comma after the last element!

myArray[3] = multiplyNums; // no parameters
myArray[3](2, 2); // 4

omit trailing brackets() in functions with no parameters when inside an array - you can pass them later

JAVASCRIPT SYNTAX: 12

OBJECT {…} (ASSOCIATIVE ARRAY)

Contains key value pairs. This is declared as an 'object literal':

const myObject = {key1: 64, key2: "text"};

Access/change: square brackets or dot (property) syntax:

alert(myObject['key2']); // [] syntax… but dot is best:
alert(myObject.key2); // key2 is a property of myObject
myObject.key2 = 'More text'; // change the value of key2

add a new key/value pair:

myObject.key3 = Math.PI;

JAVASCRIPT SYNTAX: 13

Object keys look like names (as in variables), but keys are strings, which allow expressions such as:

let myKey = 2;

console.log(myObject["key"+myKey]);
console.log(myObject["key"+2]);
console.log(myObject["key2"]); // same as both above

Key strings (as in JSON) mean JavaScript loose typing turns "key"+2 to "key"+"2", evaluating to the string "key2"

const myObject = {
  "key1": 64,
  "key2": "text"
};

JAVASCRIPT SYNTAX: 14

conditionals

if (condition is true) {
  // do stuff once here
}

if (condition is true) {
  // do stuff
} else {
  // condition is false, do other stuff
}

JAVASCRIPT SYNTAX: 15

LOOPS 1 (FOR)

for (counter; condition; increment/decrement) {
  // do stuff using the counter
}

let arrayLen = myArray.length; // store first
for (let i = 0; i < arrayLen; i += 1) {
  console.log(myArray[i]);
}

…but map with an anonymous function is cleaner:

myArray.map(i => console.log(i));

JAVASCRIPT SYNTAX: 16

LOOPS 2 (WHILE)

while (condition is true) {
  // do stuff until it's false
}

or

do {
  // some stuff at least once, then…
}
while (condition); // …do it again IF condition is true

JAVASCRIPT SYNTAX: 17

SWITCH/CASE

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
  break; 
  case 0:
    text = "Today is Sunday";
  break; 
  default: 
    text = "Looking forward to the Weekend";
}

W3Schools switch statement

JAVASCRIPT SYNTAX: 18

LOOKUP TABLE

const days = {
  "0": "Sunday",
  "1": "Monday",
  "2": "Tuesday",
  "3": "Wednesday",
  "4": "Thursday",
  "5": "Friday",
  "6": "Saturday"
}

const today = new Date().getDay();

console.log(`Today is ${days[today]}`);

JAVASCRIPT SYNTAX: 19

OBJECT===ES6 CLASS

(+SYNTACTIC SUGAR)

JavaScript uses a prototypal inheritance model with object prototypes as "classes". New objects inherit methods and attributes of their parent object through the prototype chain. It’s possible to modify an object’s prototype at any time, making JavaScript very flexible and dynamic.

ES6 classes and JavaScript prototypes (Sebastian Porto)
But Think twice about ES6 classes (Christian Alfoni)

===

TO BE CONTINUED…

The next lecture will continue JavaScript syntax, with some examples

Files

lecture-03.md

Latest commit

History