Javascript & DOM

Javascript – main properties

Javascript is a lightweight scripting language (language used to control the browser) that is run on the client-side (browser). It was initially developed by Netscape and Sun Microsystems and introduced first in the Netscape Navigator 2.0. The language is intended to add interactivity and dynamic functionality to HTML pages. Javascript is interpreted, not compiled and inserted directly in HTML pages. It is an object-oriented language that inherits many features from Java, nevertheless it is not Java. Javascript is understood by most browsers, is an event-based language, weakly typed. The current standard version is ECMAScript 2020 (ES11), but browser conformance is ECMAScript 2015 (ES6) -2016 (ES7). Although for a lot of time Javascript was used onli within the browser, at the client side, for a couple of years now, it is also used at the server-side, as node.js.

What can Javascript do ? Well, it can detect the type of browser, it can react to various events of the browser, it can alter the structure of the html document (modify, delete, add tags on the run-time), and it can validate data before being sent to the server. However, it can not modify local (client) files.

We now outline the base elements of Javascript. Js inherits from Java simple data types, operators, instruction syntax. Js has predefined objects: DOM-related and general objects: Array, Boolean, Date, Error, EvalError, Function, Math, Number, Object, Range Error, ReferenceError, RegExp, String, SyntaxError, TypeError, URIError . Js has some global functions (not related to objects): decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, eval, isFinite, isNaN, parseFloat, parseInt. Comments in Javascript are written as in Java using // or /*…*/. Js is weakly-typed: a variable can be bound to a specific type, then to a different type, during the course of a program execution. In the following sections, we discuss various parts of the language.

Types and literals (constant values)

• Number: integer (in base 2, 8, 10, 16) and real
• Boolean: true and false
• null
• undefined: a variable that does not have an assigned value;
• NaN: not a number
• String (unicode chars): 'text', "something", `text1` etc.; methods of the string class can be applied on any string literal (e.g. "sir".length); `` can span over multiple lines
• vectors: ['a', , , 'bbb', 'ccc'] will have 5 elements
• objects: lists of zero or more pairs "property : value"
  ex.: dog = {name: dog, type: animal, characteristics: getProps("dog"), age: 4}
• null – a value representing the absence of a value (like null in Java and C++
• undefined – a value of a variable that hasn't got a value yet
  Example :

  
  var x = null; // null
  var y;        // undefined
  

Variables and constants

var name;
root="some text"; 
i = root+1; // i="some text1"
let x = 2;

var f = function(a, b) {
return a+b;
}
f(2, 3); // calling the function

const z = 10;
const s = "web";
s = "programming";	 // throws error !

Operators

• assign operators: =, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=
• comparison operators: ==, !=, >, >=, <, <=
• arithmetic operators: %, /, ++, --, +, -, ** (power)
• bitwise operators: &, |, ^, ~, >>, <<, >>>
• logic operators: &&, ||, !
• string operator: + (concatenation)
• special operators

• identity operators: === (eguality and of the same type), !== (not equal and/or of different types)
• ternary operator: condition ? true-expr : false-expr
• comma: expr1, expr2, …, exprN (the returned result is the evaluation of exprN)
• new: creates a new object
• this: refers to the calling object in a method
• typeof: typeof("test") => string
• delete: deletes an object or a property from an object or an element from a vector
• in: propNameorNumber in objectName (for parsing the list of properties of an object)
• instanceof: objectName instanceof objectType (checking the type of an object)
• void: evaluates an expression without returning a value

Automatic type conversion system (implicit type coercion)

a = "string"+2;		→ "string2"
b = 2+"3"		→ "23"
c =2+true		→ 3
d = "string"+false	→ "stringfalse"
[]==0			→ true
10-"1"			→ 9

Instructions

• conditional: if, switch
  "falsy values" usable in a conditional context are: false, undefined, null, 0, NaN, ""
• loop: for, do while, while, label, break [label], continue [label]
• for (variable in object) { ... statements ...} : cycles through the properties of an object
• for (variable of object) { ... statements ...} : "for...in" cycles over property names, "for...of" iterates over property values:
• with (object) { ... statements ... } : sets the default object for a set of statements
• exception handling instructions: try { ... statements ... } catch (exception) { ... } throw expression;

var a = [ 'x', 'y', 23 ];
a.Test = "foo";
for (i=0; i<a.length; i++) {
console.log(a[i]);
}  	// will print: x, y, 23
for (var i in a) { 
console.log(i); 
}	// will print: 0, 1, 2, test
for (var i of a) { 
console.log(i); 
} 	// will print: x, y, 23 
a.forEach(function(elem) { console.log(elem); });  // will print  x, y, 23

Strings

• charAt(index): return character from index
• concat(str): concatenate "str" to this string
• includes(str): searches "str" in this string
• startsWith(str), endsWith(str): check if this string starts/ends with
• indexOf(char): index of char in this string
• match(regex): check if regular expression matches this string
• replace(what, replaceWith): replace in this string
• search(str): search string
• slice(beginIndex, endIndex): extract subsection of this string
• split(separator): return an array of strings by splitting this string

Collections

var array1 = new Array(2, 3, 5); 
var array2 = Array("abc", "de", "fghij"); 
var array3 = [0, "abc", 2];
var array4 = new Array(arrayLength); 
var array5 = Array(arrayLength);

var a = [ 1, 2, 10];
a[20] = 11;
console.log(a.length); // will print 21

• concat(): joins two arrays and returns a new array
• join(delimiter = ','): joins all elements of an array into a string
• push(): adds one or more elements to the end of an array and returns the resulting length of the array.
• pop(): removes the last element from an array and returns that element
• shift(): removes the first element from an array and returns that element
• slice(startIndex, uptoIndex): extracts a section of an array and returns a new array.
• splice(index, countToRemove, addElement1, addElement2, ...):removes elements from an array and (optionally) replaces them. It returns the items which were removed from the array
• reverse(): transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. It returns a reference to the array
• sort(): sorts the elements of an array in place, and returns a reference to the array
• indexOf(searchElement[, fromIndex]): searches the array for searchElement and returns the index of the first match
• forEach(callback[, thisObject]): executes callback on every array item and returns undefined
• map(callback[, thisObject]): returns a new array of the return value from executing callback on every array item

eval()

eval("2+3")   	 → 5
a=2; eval("a+4") → 6
eval("var x=2; console.log(x);")  → create global variable x=2 and print 2 on the console

Functions. Javascript as a functional programming language

• they can be saved in variables
• they can be passed as parameters
• they have properties, like other objects
• they can be defined without an identifier

function name_fct(parameters, arguments) {
... statements ...
}

function f(x, y, ...restArgs) {
	for (let value of restArgs) { 
    	...
	}
}

f(1, 2, 3, 4, 5, 6); // x=1, y=2, restArgs=[3,4,5,6]

function cubic(x) { return x*x*x; }
var squareFuncVar = function square (x) { return x*x; }

function map(f, a) { 
	for(i=0; i<a.length; i++) { 
		console.log(f(a[i])); 
	} 
}
var v = [ 1, 2, 3 ];
map(cubic, v);	// will print 1, 8, 27
map(squareFuncVar, v);	// will print 1, 4, 9

var sum = new Function('x', 'y', 'return x+y');
sum(2,3);

Ex.1:  var square = function(a) { return a*a; }
square(2);  // calling the function

Ex.2:  (function(a) { 
   	return a*a;
}) (3);     // this function is auto-called after the declaration; returns 9

function outer(a, b) {
var c = 3;
function inner (x, y) {
// a, b, and c are all accessible here
x = x+y+c*(a+b);
return x;
}
inner(a, b);
}

function sum(a, b = 0) {
return a+b;
}

sum(2); // returns 2

var materials = [  'Hydrogen',  'Helium',  'Lithium', 'Beryllium']; 

console.log(materials.map( m => m.length));
// will output: Array [8, 6, 7, 9]

Classes & Objects

• Classical, functional: declare the properties and methods in a constructor-like function
• ES6 syntax: introduced by ECMAScript2015 (ES6), uses class, extends, static, constructor similar to Java, C++

• using an object initializer:

  
  objectName = {property1:value1, property2:value2,..., propertyN:valueN} 
  	

• using a constructor function (object prototype):

  
  function sayHi () {
  	console.log("This is student "+this.firstName+" "	
               +this.lastName);
  }
  function Student (firstName, lastName, year) {
  	this.firstName = firstName;
  	this.lastName = lastName;
  	this.year = year;
  	this.sayHi = sayHi;
  }
  
  var stud = new Student("Adrian", "Sterca", 3);
  stud.sayHi();
  	

• creating an empty object first and then adding properties to it:

  
  var person = new Object(); person.name="Forest"; person.age=25;	
  	

class Student {
	constructor(firstName, lastName, year) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.year = year;
	}
}
var stud = new Student("Adrian", "Sterca",3);

let stud = class {		// unnamed class
	constructor(firstName, lastName, year) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.year = year;
	}
};
let stud = class Student {	// named class
	constructor(name) { this.name = name;}
};

class Student {
	constructor(firstName, lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.grades = [ ];
	} 

	// Getters & Setters are used to create pseudo-properties.  
	// You can't use them on a real property (specified in constructor). 
	get studyYear() { return this.year; }              // getter
	get specialization()  { return this.spec; }        // getter
	set studyYear(year) { this.year = year; }           // setter
	set specialization(spec)  { this.spec = spec; }     // setter

	// method
	addGrade(course, grade) { this.grades[course] = grade; }

	// static method
	static sayHi(text) {  
		console.log("This is a student.", text);  
	}
}

var stud = new Student("Adrian", "Sterca");
stud.firstName = "Forest";   
stud.lastName = "";  
stud.studyYear = 2; // calling setter
stud.specialization = "Info EN"; // calling setter
stud.addGrade("Web", 8);
console.log(stud.firstName+ " " +stud.lastName + ": ", stud.grades);
//stud.sayHi("Hi");  // Error. Can not call static method on instance
Student.sayHi("Hi");  // properly calling static method

class Student {
	...
	transfer(faculty, specialization, y) {
		this.faculty = faculty;
		this.specialization = specialization;
		this.year = y;	  // if we write year=y, the Js interpreter will set a variable called 'year' that has a scope outside the Student class
		this.sayHi();
	}
}

class Student {
	id = 0;
	grade;
	#firstName;
	#lastName;
	constructor (id, grade, firstName, lastName) {
		this.id = id;
		this.grade = grade;
		this.#firstName = firstName;
		this.#lastName = lastName;	
	}
}

class Person {
	constructor(firstName, lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
	}
	sayHi(text) {  console.log("This is " + this.firstName + " " + this.lastName + ". " + text);  }		
}

class Student extends Person {		// inheritance
	constructor(firstName, lastName) {
		super(firstName, lastName);	// calling constructor from base class
		this.grades = [ ];
	}
	sayHi(text) {
		super.sayHi();		// calling method from base class
		console.log("I'm also a student");
	}
}

Predefined objects

• Array, Map, Set – working with arrays, maps and sets
• Boolean – true or false
• Function – specifies a string of code to be precompiled as a function
• Date – date functions
• Math – math functions
• Number – numerical constants and representations
• RegExp – regular expressions
• String – string operations
• Symbol (new from ES6) : used for identifying objects (mostly internal in the javascript engine)
• JSON

Template literals

var name = "forest";
var str = `this is ${name}`;	// variable replacement
var str1 = ` this is a
    multiline
    string`;
var str2 = `do the sum ${1+2+3}`;  // computing arithmetic expression

The spread operator (...)

var a = [1, 2, 3];
var b = [...a, 4, 5, 6];  // b = [1,2,3,4,5,6]
var c = [...a] ;  // array copy
var obj = { prop1: 1; prop2: "2"; }
var objcopy = { ...obj };  // object cloning
var str = "hello";
var helloarray = [ ...str];  // helloarray = ['h','e','l','l','o']

// calling a function with an array parameter:
const f = (arg1, arg2) => {} 
const a = [1, 2] 
f(...a)

Deconstructing

a = [1, 2, 3, 4, 5, 6];
[first, ,third]=a; // first=1 and third=3

const student = { 
	firstName: "Forest"; 
	lastName: " Forest";
	age: 41
}
const { firstName: name, age: ageval } = student
// name will be "Forest" and ageval will be 41
const { lastName, age } = student
// lastName will be "Forest" and age will be 41

The strict mode

'use strict';
mistypeVariable = 7; // if no global variable 'mistypeVariable' exists
        			 // (defined with "var"), this line throws ReferenceError
// Assignment to a non-writable global 
var undefined = 5; // throws a TypeError 
var Infinity = 5;  // throws a TypeError

var o = { p: 1, p: 2 }; // syntax error (redefinition of p)

// reserved words: implements, interface, let, package, private, 
// protected, public, static, and yield

Javascript modules

export const symbol1 = "str";
export var symbol2 = 3;
export function doSomething(params) { ... }

OR

export { symbol1, symbol2, doSomething }; //  at the end of file

import {symbol1, symbol2, doSomething } from './module.js';

OR

import * from './module.js';	// import every global symbol from module.js

import * as Module1 from './modules/mod1.js';
import * as Module2 from './modules/mod1.js';
...
// calling functions from mod1.js
Module1.function1();
Module1.function2();

// calling functions from mod2.js
Module2.function1();
Module2.function2();

import('./modules/myModule.js') .then(
(module) => { 
// Do something with the module. 
// call functions
});

Events

1. <TAG eventHandler="Javascript code">
2. <script type="text/javascript">
   function evHandle(x) { ... }
   </script>
   <TAG eventHandler="evHandle(this)">
3. <script type="text/javascript">
   obj.eventHandler="Javascript code";
   </script>

A complete list of events is on w3schools.

Javascript and HTML

1. as instructions or functions written inside a <SCRIPT> tag:
   <script type="text/javascript">
   ... JavaScript statements...
   </script>
2. Js code written in a separate javascript file:
   <script src="common.js"></script>
3. using a Js expression as the value of an html attribute:
   <hr width="&{barWidth};%" align="left">
   <h4>&{myTitle};</h4>
   JavaScript entities start with "&" and end with ";" and are enclosed in "{}"
4. as an event handler:
   <input type="button" value="Press Me" onClick="func()">

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

const button = document.querySelector("#button");
button.addEventListener('click', someFunction);

Pop-up boxes

• alert("...text...") : displays text and the Ok button
• confirm("...text...") : displays text and returns true if the Ok button is clicked and false if the Cancel button is clicked
• prompt("text", "default value"): the user can enter an input value and then click Ok (return the value) or Cancel (return null)

The Document Object Model (DOM)

Copyright: Birger Eriksson; Wikipedia

DOM Browser Objects

• Window object
• Navigator object
• Screen object
• History object
• Location object

DOM document objects

• Document object
• Anchor object
• Area object
• Base object
• Body object
• Button object
• Event object
• Form object
• Frame object
• Frameset object
• IFrame object
• Image object
• Input Button object
• Input Checkbox object
• Input File object

The Element Object

• .attributes - returns a map of all attributes of this elem.
• .children – returns a collection of children of this elem.
• .classList – returns all classes of this element
• .className – set/get the class attribute of this elem.
• .clientHeight, .clientWidth - returns height/width including padding
• .firstChild - returns first child node
• .firstElementChild – returns first child element (ignores text and comments)
• .innerHTML, .innerText – set/get the content of this elem.
• .id – set/get the ID attribute of this element
• .lastChild - returns the last child node of this elem.
• .lastElementChild - returns the last child element of this elem. (ignores text and comments)
• .nextSibling,.previousSibling - returns the next/prev node at the same level
• .nextElementSibling,.previousElementSibling – returns the next/prev element at the same level (ignores text and comments)
• .parentNode - returns the parent node of this element
• .parentElement – returns the parent element of this element (ingnores text and comments)
• .style – set/get the style attribute of this element

• addEventListener(), removeEventListener() – adds/removes an event listener for this elem.
• appendChild(), removeChild() – append/remove a child to this element
• click() – simulates a mouse click on this elem.
• getAttribute(),setAttribute() – get/set attribute
• getElementsByTagName() – returns children by tag name
• getElementsByClassName() – returns children by class name
• insertBefore() – insert a new child node before existing child node of this element
• remove() – remove this element
• querySelector() - returns the first child that matches a selector
• querySelectorAll() – return all children that match a selector

document.querySelector("#first");

document.querySelectorAll(".first, p.second");

Creating & removing elements (tags) dynamically

var p = document.createElement("p"); 	// create "p" tag
var text = document.createTextNode("text content");
p.appendChild(text); 	      // append text to tag "p"
p.innerHTML = "other text"; // set a new content text
var p1 = p.cloneNode();      // create copy of p
p.insertBefore(p1);	      // add another element before

p.removeChild(p.firstChild);	// remove first child of p
p.remove();			// remove p (the element itself)

Modifying elements (tags)

var section = document.querySelector("section");
section.setAttribute("class", "red-section");
section.style.background = "red";
section.innerHTML = "<p>test</p>";
section.innerText = "test";

Asynchronous programming

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...])

window.clearTimeout(timeoutID);

Asynchronous programming (promises)

const myFirstPromise = new Promise(function (resolve, reject) {   	
// do something asynch which eventually calls either: 
        // resolve(someValue); // fulfilled 
        // or 
        // reject("failure reason"); // rejected 
});

const p = new Promise(function(resolve,reject) {
	// the asynchronous word - just a console.log()
	console.log("Doing some work...");
	resolve("Done");
});

// without .then() you can not get the returned result from the Promise!
// we assume the Promise p is always resolved
p.then(function(result) { 
	console.log(result); // just print the returned result of the Promise
})
	

Javascript and browser compatibility

Javascript quirks

0.5+0.1==0.6    → true
0.2+0.1==0.3    → false
typeof(NaN)     → number
3+"1"	        → "31"
10-"1"	        → 9
true===1        → false
true==1         → true
[ ]+[ ]         → ""

Browser API, Web API, Js libraries, Js frameworks

• Browser API – a set of javascript functions, objects & properties exposed by the browser; e.g. DOM; a list of browser APIs developed by w3c.org is here: https://www.w3.org/standards/techs/js#w3c_all
• Web API – a server-side API usually exposed through HTTP request-response; the response is usually a JSON expression
• Js library – one or more js files providing custom functions & objects that enhance the functionality of the javascript language; e.g. jQuery
• Js framework – a js library plus html & css code used to write an entire web application from scratch; inversion of control – key difference between libraries and frameworks: when calling a method from a library, the developer is in control; with frameworks control is inverted – the framework calls developer's code; e.g. Angular

Js debugging tools

• Firefox's Web Console and Chrome's Inspector
• JsFiddle (https://jsfiddle.net/)
• CodePen (https://codepen.io)

Additional Documentation

• http://www.cs.ubbcluj.ro/~forest/wp
• http://www.w3schools.com/js/default.asp
• http://www.w3schools.com/jsref/dom_obj_document.asp
• https://developer.mozilla.org/en/JavaScript
• https://babeljs.io/docs/en/learn