# The Web Dev Guide by Wishtack
After 5 years of web applications development, trainings and coachings, we decided to produce this free guide in order to share our experience.
## Our Goals
* **Quickly** produce **performant**, **stable** and **maintainable** applications.
* Emphasize **pragmatism** and **best practices**.
* Share the result of our **technical watch**, **research** and **experience**.
## Copyright
This guide is the property of Wishtack.
It can't be used completely or partially for trainings animation or any other business purpose except by Wishtack employees.
If you have any doubt, get in touch with Wishtack at:
# HTML
HTML is a **standard** **cross-browser** tag-based language describing the **structure** and the **display** of a web page.
HTML was first standardized in **June 1993**.
# HTML Tags
Some HTML tags describe the **semantic structure and features** of a web page.
## Semantic tags
**Semantic structure** is mainly used for SEO *(**Search Engine Optimization**)* and **accessibility**.
```markup
Wishtack Course
Wishtack
Wishtack is cool...
```
{% embed url="" %}
## Component tags
Other tags are used to add **components** to the web page.
```markup
Wishtack
```
# HTML Attributes
As you can notice with `a` and `img` tags, some tags **can *****(or must)***** be customized** using HTML attributes.
**Attributes are for HTML tags what parameters are for functions**.
{% hint style="success" %}
Some tags might need multiple attributes especially when combined with frameworks like Angular.
To avoid duplicates and to improve readability, attributes should be used in **alphabetical order** and on a **new line for each attribute**.
{% endhint %}
# Content Formatting
Some tags and attributes can be used for content formatting :
```markup
Bold text.Italic text.
```
{% hint style="warning" %}
For an improved Software Design and in order to Separate Concerns, this usage should be avoided in favor of **dedicated CSS files**.
{% endhint %}
# Empty Tags vs Content Tags
Some tags like `div`, `span` and `p` need content.
{% hint style="warning" %}
Do not mix text with tags inside a content tag.
Otherwise, formatting and dynamic content modification can get complicated.
```markup
Hello
Mr Foo
HelloMr Foo
```
{% endhint %}
With HTML5, empty tags don't need to be closed.
The following examples are equivalent:
```markup
```
Closing empty tags might seem cleaner but it is better to leave them open.
{% hint style="warning" %}
Auto-closing tags might be ignored by some browsers and can cause trouble.
{% endhint %}
# Some Links
## HTML Tags Reference
{% embed url="" %}
## Emmet
{% embed url="" %}
# ECMAScript
# Some History
* **1995 :** Netscape creates a dynamic programming language named **JavaScript** that runs in the browser.
* **1995 :** Netscape enables backend JavaScript development with Netscape Enterprise Server.
* **1997 :** New **cross-browser** & **cross-platform** standard named **ECMAScript** and based on **JavaScript**.
* **1998 :** ECMAScript 2.
* **1999 :** ECMAScript 3.
* **2009 :** ECMAScript 5 *(a.k.a. ECMAScript 3.1)*.
* **2009 :** NodeJS.
* **June 2011 :** ECMAScript 5.1.
* **June 2015 :** ECMAScript 6 or ES2015.
* **June 2016 :** ECMAScript 7 or ES2016.
* **June 2017 :** ECMAScript 8 or ES2017.
* **June 2018 :** ECMAScript 9 or ES2018.
# Language Properties
## Typing
JavaScript is a **dynamically** and **weakly typed** language.
## JavaScript is a multi-paradigm language
* Functional programming.
* Object-Oriented Programming.
* Reactive Programming.
## JavaScript is cross-browser and cross-platform
# Single-Threaded thus Asynchronous
## Multi-thread vs mono-thread
In a synchronous, multi-threaded and data-driven world, this works:
```javascript
function processRequest(request) {
/*
* Pre-processing.
*/
var query = prepareQuery(...);
var result = execQuery(query); // might take few seconds...
/*
* Post-processing.
*/
var response = createResponse(result);
return response;
}
```
... but in a single-threaded world, this can lead to trouble as the application would freeze until it receives a response.
**Until the function ends *****(and its callees)*****, no other function can be executed simultaneously.**
## Asynchronous processing using callbacks
```typescript
function processRequest(request, callback) {
/*
* Pre-processing.
*/
var query = prepareQuery(...);
execQuery(query, function (result) {
/*
* Post-processing.
*/
var response = createResponse(result);
callback(response);
});
}
```
## Asynchronous processing advantages
* No threads count limitation.
* No memory overhead due to threads.
* No locks or semaphores.
* No greedy locks.
* No deadlocks.
* Data doesn't change during the execution of a function.
## Closures
A **closure** is the combination of a function definition and the lexical environment in which the latter is defined.
Closures determine the scope of the variables.
Variables can be read and modified in the closure where they are declared **but also in the functions defined inside**.
```javascript
function main() {
var userName = 'Foo';
function setUserName(value) {
userName = value;
}
function getUserName() {
return userName;
}
setUserName('John');
console.log(getUserName()); // 'John';
}
main();
```
# The Event Loop
## The Event Loop Behavior
What's the execution order of this code?
{% tabs %}
{% tab title=" 🧐" %}
```javascript
var value;
setTimeout(function () {
value = 'VALUE';
}, 100 /* 100 ms. */);
console.log(value); // ???
setTimeout(function () {
console.log(value); // ???
}, 200);
```
{% endtab %}
{% tab title="👍" %}
```javascript
var value;
setTimeout(function () {
value = 'VALUE';
}, 100 /* 100 ms. */);
console.log(value); // 1 - undefined
setTimeout(function () {
console.log(value); // 2 - VALUE
}, 200);
```
{% endtab %}
{% endtabs %}
And in this case?
{% tabs %}
{% tab title=" 🧐" %}
```javascript
function main() {
var value;
setTimeout(function () {
value = 'VALUE';
}, 0 /* 0 ms. */);
console.log(value); // ???
setTimeout(function () {
console.log(value); // ???
}, 0);
console.log(value); // ???
}
main();
```
{% endtab %}
{% tab title="👍" %}
```javascript
function main() {
var value;
setTimeout(function () {
value = 'VALUE';
}, 0 /* 0 ms. */);
console.log(value); // 1 - undefined
setTimeout(function () {
console.log(value); // 3 - VALUE
}, 0);
console.log(value); // 2 - undefined
}
main();
```
{% endtab %}
{% endtabs %}
## How the event loop works
1. **Register a listener** : Most asynchronous tasks requires the definition of a callback function in order to retrieve the result of the processing or simply in order to know that the processing ended.\
During this step, we explicitly or implicitly subscribe a listener to some event source. Examples: `setTimeout`, `addEventListener` etc...
2. **Add the function to the queue**: The callback function cannot be called immediately when the result is received as the thread might be busy executing another function. In the example below, both callback functions are ready to be called the thread is busy executing our `main` function. The JavaScript engine adds references to the callback functions at the end of the callback queue in order to be called once the thread is free.
3. **Tick** : When the `main` function execution ends, the thread won't have time to stay idle and will immediately grab the callback at the top of the queue and execute it. More precisely, this is the event loop which simply loops forever executing every function in the queue. **The moment where the event loop ends the execution of a function and is ready to grab the next one is called a "tick"**.
{% embed url="" %}
What the heck is the event loop anyway?
{% endembed %}
# Classes
## ES6 Classes
{% tabs %}
{% tab title="ES6 Class" %}
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName;
}
}
```
{% endtab %}
{% tab title="Legacy Prototype" %}
```javascript
var Customer = function(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Customer.prototype = {
getName: function () {
return this.firstName;
}
}
```
{% endtab %}
{% endtabs %}
## Visibility
Meanwhile [class fields](https://github.com/tc39/proposal-class-fields) get supported, visibility rules are just based on a common naming convention where properties and methods get prefixed with the underscore character `_` if they are private.
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.email = null;
this._isBadPayer = this._tellIfBadPayer();
}
getName() {
return this.firstName;
}
_tellIfBadPayer() {
return this.firstName === 'foo';
}
}
```
## Properties
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
}
get firstName() {
return this._firstName;
}
set firstName(value) {
this._firstName = value;
}
}
/* @HACK: Last time we use var, I promise! */
var customer = new Customer();
customer.firstName = 'Foo';
console.log(customer.firstName); // Foo
```
{% hint style="danger" %}
Avoid using properties.
Properties can become handy in some extreme cases like the integration of some legacy library, mock, implementing a runtime type checking decorator or something fancy like that etc...
Otherwise, properties will only introduce ambiguity.
Who would imagine that this code might trigger a runtime exception?
```javascript
var customer = new Customer();
element.textContent = customer.name;
```
Or even worse, things might end up like this:
```javascript
/* @HACK: Do not remove this useless line as it initializes
* the user eagerly instead of running it lazily. */
request.user;
```
{% endhint %}
## Inheritance
This is inheritance:
```javascript
export class WishtackProduct extends Product {
...
getProductId() {
return 'wishtack-' + this._wishtackId;
}
}
```
{% hint style="warning" %}
Now, avoid it...
... and prefer composition!
{% endhint %}
## Best practices
{% hint style="success" %}
Meanwhile we get the class fields in JavaScript, it is recommended to initialize all the attributes in the constructor. Otherwise, it's hard to figure out which attributes are available on a class. In addition to this, the available attributes will depend on the methods that have been called.
{% endhint %}
# Hoisting is Dead: var vs. let vs. const
## Reminder
### Global variables 🤮
```javascript
userName = 'Foo BAR';
console.log(userName); // Foo BAR
```
### Use strict 😅
```javascript
'use strict';
userName = 'Foo BAR'; // ReferenceError: userName is not defined
```
```javascript
'use strict';
console.log(userName); // ReferenceError: userName is not defined
```
## Hoisting
### Variable hoisting
{% tabs %}
{% tab title="🧐" %}
```javascript
'use strict';
console.log(userName); // ???
var userName = 'Foo BAR';
```
{% endtab %}
{% tab title="😱" %}
```javascript
'use strict';
console.log(userName); // undefined
var userName = 'Foo BAR';
```
{% endtab %}
{% endtabs %}
### Function hoisting
{% tabs %}
{% tab title="🧐" %}
```javascript
'use strict';
greetings(); // ???
function greetings() {
console.log('HI!');
}
function greetings() {
console.log('HELLO!');
}
```
{% endtab %}
{% tab title="😱" %}
```javascript
'use strict';
greetings(); // HELLO!
function greetings() {
console.log('HI!');
}
function greetings() {
console.log('HELLO!');
}
```
{% endtab %}
{% endtabs %}
### A little bit better
```javascript
'use strict';
greetings(); // TypeError: greetings is not a function.
var greetings = function () {
console.log('HI!');
};
greetings(); // HI!
var greetings = function () {
console.log('HELLO!');
};
greetings(); // HELLO!
```
## let
Variables are only accessible after their declaration.
```javascript
console.log(userName); // ReferenceError: userName is not defined
let userName = 'Foo BAR';
```
Variables are only accessible in the bloc where they are declared.
```javascript
if (true) {
let userName = 'Foo BAR';
}
console.log(userName); // ReferenceError: userName is not defined
```
## const
`const` variables cannot be reinitialized.
```javascript
const user = {
firstName: 'Foo',
lastName: 'BAR'
}
user = null; // TypeError: Assignment to constant variable.
```
{% hint style="warning" %}
`const` does not mean immutable.
```javascript
user.firstName = 'John'; // OK!
```
{% endhint %}
{% hint style="success" %}
It is recommended to declare all variables as `const` except if reusing the variable is inevitable.
This is less error-prone and avoids some common inattention mistakes.
`const` usage avoids clumsy variable reuse:
```javascript
const user = {
firstName: 'Foo',
lastName: 'BAR'
}
/* 🤢*/
user = user.firstName; // TypeError: Assignment to constant variable.
```
{% endhint %}
# this & "binding"
## Who am I?
{% tabs %}
{% tab title=" 🧐" %}
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHi() {
console.log('Hi ' + this.firstName);
}
sayHiLater() {
setTimeout(function () {
this.sayHi();
}, 1000);
}
}
const customer = new Customer('Foo', 'BAR');
customer.sayHiLater(); // ???
```
{% endtab %}
{% tab title=" 😱" %}
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHi() {
console.log('Hi ' + this.firstName);
}
sayHiLater() {
setTimeout(function () {
this.sayHi();
}, 1000);
}
}
const customer = new Customer('Foo', 'BAR');
customer.sayHiLater(); // TypeError: this.sayHi is not a function
```
{% endtab %}
{% endtabs %}
## Binding
The callback function given to `setTimeout` is not bound to our `Customer` instance. In addition to this, `setTimeout` tries to help us by binding the timeout objet *(which is as well returned by setTimeout)* to our callback function.
```javascript
const const timeout = setTimeout(function () {
console.log(this === timeout); // true
});
```
In order to fix this issue, we should bind our instance of `Customer` to callback function.
### The hacky way
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHi() {
console.log('Hi ' + this.firstName);
}
sayHiLater() {
setTimeout(function () {
this.sayHi();
}.bind(this), 1000);
}
}
```
### The other hacky way
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHi() {
console.log('Hi ' + this.firstName);
}
sayHiLater() {
const _this = this;
setTimeout(function () {
_this.sayHi();
}, 1000);
}
}
```
### The clean way
See you at the [next chapter](/ecmascript/arrow-functions).
# Arrow Functions
```javascript
/* 90s */
function sayHi(userName) {
console.log('Hi ' + userName);
}
/* 2000s */
var sayHi = function (userName) {
console.log('Hi ' + userName);
};
/* 2015 */
const sayHi = (userName) => {
console.log('Hi ' + userName);
});
```
## No binding
Arrow functions cannot be bound to objects. The `this` variable's value will always be the one of the parent closure.
```javascript
class Customer {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHi() {
console.log('Hi ' + this.firstName);
}
sayHiLater() {
setTimeout(() => {
this.sayHi();
}, 1000);
}
}
```
## Example with `Array.filter` and `Array.map`
```javascript
const productList = [
{
title: 'Browserstack',
price: 50
},
{
title: 'Keyboard',
price: 20
},
{
title: 'Prerender',
price: 10
}
];
const cheapProductList = productList.filter((product) => {
return product.price < 25;
});
const cheapProductTitleList = cheapProductList.map((product) => {
return product.title;
});
console.log(cheapProductTitleList); // ['Keyboard', 'Prerender']
```
## One-liner
In most cases, callbacks are just simple one-liners.
In this case, curly braces `{}` and the `return` statement can be removed.
If the arrow function only takes one parameter, the parentheses `()` can be removed.
```javascript
const cheapProductTitleList = productList
.filter(product => product.price < 25)
.map(product => product.title);
```
{% hint style="warning" %}
In case of variable name shadowing, try to avoid single letter variable names or generic names.
`filter(u => u.id === user.id)`
`filter(it => it.id === user.id)`
{% endhint %}
{% hint style="success" %}
Prefer the `_` prefix to mark the difference between the local variable and the one from the parent closure.
`filter(_user => _user.id === user.id)`
{% endhint %}
# Template Strings
```javascript
const appName = 'Wishtack';
const userName = 'Foo';
const greetings = `Hi ${userName},
Welcome to ${appName}!`
console.log(greetings);
// Result:
// Hi Foo,
// Welcome to Wishtack!
```
{% hint style="danger" %}
**Security** **Warning**
Template strings is not an HTML templating tool.\
Using template strings to produce HTML might expose you to XSS *(Cross-Site Scripting)* vulnerabilities.
Vulnerable example:
```javascript
/* userName is dynamically retrieved from malicious source:
* query string, api, storage etc... */
const userName = '';
document.body.innerHTML = `Hi ${userName}`
```
{% endhint %}
# Syntactic Sugar
# Spread
## Array Spread
```javascript
const itemList = [1, 2, 3];
const additionalItemList = [5, 6];
const newItemList = [...itemList, 4, ...additionalItemList];
console.log(newItemList); // [1, 2, 3, 4, 5, 6]
```
## Object Spread
Handy for merging objects or for respecting immutability.
```javascript
const user = {
firstName: 'Foo',
lastName: 'BAR',
email: 'invalid@wishtack.com'
};
const newUser = {
...user,
email: 'foo.bar@wishtack.com',
phoneNumber: '+6 12 34 56 78'
};
console.log(newUser);
// {
// firstName: 'Foo',
// lastName: 'BAR',
// email: 'foo.bar@wishtack.com',
// phoneNumber: '+6 12 34 56 78'
//}
```
# Destructuring
## Array Destructuring
Useful for unit-tests.
```javascript
const userList = [
{firstName: 'Foo'},
{firstName: 'John'}
];
const [user1, user2, user3, user4 = null] = userList;
console.log(user1); // { firstName: 'Foo' }
console.log(user2); // { firstName: 'John' }
console.log(user3); // undefined
console.log(user4); // null
```
## Object Destructuring
```javascript
const user = {
firstName: 'Foo',
lastName: 'BAR',
email: 'foo.bar@wishtack.com'
};
const {firstName, lastName, phoneNumber} = user;
console.log(firstName); // Foo
console.log(lastName); // BAR
console.log(phoneNumber); // undefined
```
# Rest
## Array Rest
Rest parameters are the equivalent for variadic parameters in some other languages.
The `add` function below can take any number of parameters which will end up in the `valueList` `Array`.
```javascript
const add = (...valueList) => {
return valueList.reduce((total, value) => total + value, 0);
};
add(0, 1, 2, 3); // 6
```
{% hint style="warning" %}
It is better to avoid the usage of "rest" parameters.\
It reduces the extensibility of the function. It is better to use one parameter of type `Array` that contains all the values.
```typescript
const add = (valueList) => {
return valueList.reduce((total, value) => total + value, 0);
};
add([1, 2, 3]); // 6
```
{% endhint %}
## Object Rest
The same syntax can be used with the [destructuring](/ecmascript/syntactic-sugar/destructuring#object-destructuring) of an object.
```javascript
const user = {
firstName: 'Foo',
lastName: 'BAR',
email: 'foo.bar@wishtack.com',
phoneNumber: '123'
};
const { firstName, lastName, ...remainingProperties } = user;
console.log(remainingProperties); // { email: 'foo.bar@wishtack.com', phoneNumber: '123' }
```
# Object Literal Property Value Shorthand
It is common to create JavaScript objects using some local variables with the same names as the object properties ending up with something redundant like this:
```javascript
const firstName = 'Foo';
const lastName = 'BAR';
const user = {
firstName: firstName,
lastName: lastName,
email: 'foo.bar@wishtack.com'
};
```
... but thanks to the Object Literal Property Value Shorthand, it can be written in a shorter manner:
```javascript
const firstName = 'Foo';
const lastName = 'BAR';
const user = {
firstName,
lastName,
email: 'foo.bar@wishtack.com'
};
```
{% hint style="info" %}
You should define your style guide concerning this syntax.
If the JavaScript ecosystem is quite new for the team, it is better to avoid this syntax which can be misleading.
{% endhint %}
{% hint style="warning" %}
Beware of IDEs that can't refactor Object Literal Property Value Shortands.
At Wishtack, we didn't use them until the refactoring was possible with IntelliJ / WebStorm.
{% endhint %}
# Named Parameters
Ordered parameters can make the code harder to read and refactor.
```javascript
class Customer {
constructor(firstName, lastName, email, phoneNumber) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNumber = phoneNumber;
}
}
new Customer('Foo', null, null, '123');
```
Unluckily, named parameters do not exist in JavaScript but there is a native workaround thanks to destructuring.
## Named Parameters with one parameter
```javascript
class Customer {
constructor(args) {
this.firstName = args.firstName;
this.lastName = args.lastName;
this.email = args.email;
this.phoneNumber = args.phoneNumber;
}
}
new Customer({
firstName: 'Foo',
phoneNumber: '123'
});
```
But this is not very IDE-friendly and without reading the content of the constructor, there's no way to know what are the expected parameters.
## Destructuring
The destructuring can be used in the constructor's *(or any other function)* parameters description.
```javascript
class Customer {
constructor({firstName, lastName, email, phoneNumber = null} = {}) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNumber = phoneNumber;
}
}
```
Which is a shorthand for:
```javascript
class Customer {
constructor(args = {}) {
const {firstName, lastName, email, phoneNumber = null} = args;
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNumber = phoneNumber;
}
}
```
## Recycling
For simple objects, this constructor can be used as is without having to implement factories for handling copy or deserialization.
```javascript
const customer = new Customer({firstName: 'Foo'});
const customerFromJson = new Customer(JSON.parse(data));
const customerCopy = new Customer(customer);
```
##
# Compatibility
How can we use the latest ECMAScript features and still be compatible with most browsers?
{% embed url="" %}
## Transpilation
ECMAScript 5.1 is for modern ECMAScript what assembly is for C++.
We need a transpiler:
* Babel:
* TypeScript:
But this will not be enough as transpilers will only convert syntactic features but not new browser APIs and methods.
## Polyfills
We need to compensate the lack of some objects, functions or methods `customElements`, `fetch`, `Array.filter` on some browsers.
In order to fill the gap, we will use polyfill libraries. These libraries detect missing features and compensate them with **JavaScript implementations**.
Example:
```javascript
if (Array.prototype.first == null) {
Array.prototype.first = function () {
return this[0];
};
}
const valueList = [1, 2, 3];
console.log(valueList.first()); // 1
```
One of the most famous polyfill libraries is core-js .
Or you can use a polyfill service like .
# Tools
# Node.js
{% embed url="" %}
# NPM
**NPM *****(Node Package Manager)*** is the official Node.js package manager.
It is automatically installed with Node.js and is used to handle JavaScript *(browser & Node.js)* dependencies.
> For those who knew [bower](https://bower.io/), well, it's dead.
NPM allows:
* Dependencies management *(just like apt, gem, maven, nugget, pip, yum...).*
* JavaScript modules creation and publishing.
* Download and install of dependencies depending on a module's dependencies description.
* Sharing entry point scripts with developers and machines *(e.g.: Continuous Integration)* like `build`, `debug`, `deploy`, `test` etc...
We will use NPM once, to install [Yarn](/tools/yarn)...
... because it's better *(Cf.* [*Yarn*](/tools/yarn)*)*.
# Yarn
{% embed url="" %}
# Webpack
{% embed url="" %}
{% embed url="" %}
# WebStorm
{% embed url="" %}
{% hint style="warning" %}
Once the toolbox is up and running, click on the cog icon next to WebStorm to install the latest version *(EAP or RC).*
{% endhint %}
# StackBlitz
{% embed url="" %}
# DOM
# What Is It?
When an HTML page is loaded, the browser **parses** it and **generates the Document Object Model (DOM)**.
The DOM is a **tree-structure of nodes** where **each node is an element** *(like a form, an image or a simple `div` container)*.
DOM can be manipulated with JavaScript using the **standard DOM API**.
When the HTML page is loaded, the browser executes the JavaScript indicated using the `script` tag.
```markup
```
# Element Selection
## Old School
### Selecting an element by id
```javascript
document.getElementById('login');
```
This code will return the first element having the given id.
```markup
```
### Select using CSS class
```javascript
document.getElementsByClassName('blog-post');
```
This code will return the first element having the `blog-post-content` CSS class.
```markup
```
### Select by HTML tag
```javascript
document.getElementsByTagName('header')
```
This code will return the first element having the `header` HTML tag.
```markup
This is the header.
```
## Modern Way
### Select using query selector
```javascript
document.querySelector('header');
document.querySelectorAll('div.blog-post-content');
```
The first call will return the first element with the header HTML tag.
The second call will return an iterable object with all the items with a `div` HTML tag and the `blog-post-content` CSS class.
{% hint style="success" %}
This is the easier and most modern way of selecting elements.
{% endhint %}
{% hint style="info" %}
`querySelector` and `querySelectorAll` methods are also available on every element in order to search for child elements.
```javascript
const firstNameInput = form.querySelector('input[name="firstName"]');
```
{% endhint %}
# Element Modification
Once you retrieve the reference to an element in the DOM, you can modify any of the element's properties.
### Modify content
```javascript
element.textContent = 'Hello 🌏';
```
{% hint style="warning" %}
HTML content can be controlled using `element.innerHTML` attribute but this approach is dangerous as it can lead to **XSS *****(Cross-Site Scripting)***** vulnerabilities**.
In addition to the security issues, updating the `innerHTML` forces the browser to parse the HTML then update the DOM content. This can have bad performance results.
{% endhint %}
### Modify properties
```javascript
/* Toggle `disabled` state. */
button.disabled = !button.disabled;
link.src = `https://wishtack.io`;
```
### Modify the structure
#### Create a DOM element
```javascript
const child = document.createElement('div');
```
#### Append an element
```javascript
parent.appendChild(child);
```
#### Remove an element
```javascript
parent.removeChild(child);
```
### CSSOM *(CSS Object Model)*
```javascript
/* Update some CSS style. */
element.style.backgroundColor = 'red';
/* Added a CSS class to an element. */
element.classList.add('blog-post-content');
/* Toggle a CSS class. */
element.classList.toggle('important');
```
# Events
Modern browsers can trigger **hundreds of types of events** *(\~500)*.
{% embed url="" %}
These event types can be of any kind:
* User interaction : click, input change, keypress, drag & drop etc...
* Geolocation,
* Device motion,
* Network status,
* ...
## Registering Event Listeners
These events can be intercepted by adding an **event listener** to the corresponding event type.
An event listener is a JavaScript function that **will be called whenever the event is triggered**.
In most cases, the listener function will take as first argument, **the event object** with different properties and data depending on the event type and the event itself.
### Listening to a click
```javascript
const button = document.querySelector('button');
let clickCount = 0;
/* Increment the counter on every click. */
button.addEventListener('click', () => clickCount++);
```
### Listening to keyboard
```javascript
document.addEventListener('keydown', event => {
if (event.ctrlKey === true
&& event.key === 'x'
/* This will show a confirmation dialog and return true if user confirms. */
&& confirm('Do you really want to remove the selected blog post?')) {
removeSelectedItem();
}
});
```
### Watching geolocation
```javascript
navigator.geolocation.watchPosition(position => {
console.log(`
Accuracy: ${position.coords.accuracy},
Latitude: ${position.coords.latitude},
Longitude: ${position.coords.longitude}
`);
});
```
{% hint style="info" %}
Some functions like `watchPosition` will prompt the user for his consent before allowing access to geolocation.
{% endhint %}
## Removing Event Listeners
In order to avoid **side effects**, **dead code** and **memory leaks** it is important to think about clearing your event registrations by removing the listeners.
This can be done differently depending on the event type.
#### `removeEventListener`
```javascript
const listener = () => clickCount++;
button.addEventListener('click', listener);
button.removeEventListener('click', listener);
```
#### `clear...`
```javascript
const watchId = navigator.geolocation.watchPosition(...);
navigator.geolocation.clearWatch(watchId);
const interval = setInterval(() => console.log(clickCount), 1000);
clearInterval(interval);
```
## Events bubbling & capturing
{% embed url="" %}
# Forms
## HTML5 Forms Specification
Luckily, HTML5 has a quite interesting forms specification.
{% embed url="" %}
# The \
```
The form tag has three main attributes:
* **action**: that describes the URL where the data should be sent when the form is submitted.
* **enctype**: that specifies the encoding to use for sending data *(`application/x-www-form-urlencoded`, `multipart/form-data` and `text/plain`)*.
* **method**: that controls the HTTP method that will be used to send data to server.
## Example
```markup
```
## Intercepting `submit` event
In most cases in a JavaScript application, the content shouldn't be sent directly over the network to the backend but it **should be intercepted by the JavaScript** on submission.
When the user submits the form *(e.g.: presses enter or clicks on a `
```
# HTML Attributes
As you can notice with `a` and `img` tags, some tags **can *****(or must)***** be customized** using HTML attributes.
**Attributes are for HTML tags what parameters are for functions**.
{% hint style="success" %}
Some tags might need multiple attributes especially when combined with frameworks like Angular.
To avoid duplicates and to improve readability, attributes should be used in **alphabetical order** and on a **new line for each attribute**.
{% endhint %}
# Content Formatting
Some tags and attributes can be used for content formatting :
```markup