Slide 1
Slide 1 text
AN INTRODUCTION TO FRONTEND
1
AN INTRODUCTION TO FRONTEND
Marco Montalbano
Slide 2
Slide 2 text
GOAL
AN INTRODUCTION TO FRONTEND
2
https://git.io/fjmCg
Slide 3
Slide 3 text
AN INTRODUCTION TO FRONTEND
3
HTML
Slide 4
Slide 4 text
HTML
AN INTRODUCTION TO FRONTEND
4
• The acronym “HTML” stands for Hypertext Markup Language
• It is not a programming language
• It is a markup language which describes the structure of a web page semantically
• It describes how to lay out the content of a web page using HTML elements called tags
• It tells the browser what to display.
Slide 5
Slide 5 text
TAG
AN INTRODUCTION TO FRONTEND
5
• Each tag has a defined meaning
• It can contain other tags
• They are enclosed in angle brackets:
• Usually tags are made up of two elements: a "start tag"
and an "end tag"
• The start tag may include attributes within the tag testo void elements ( https://bit.ly/void-elements )Slide 6
Slide 6 text
TAGS
AN INTRODUCTION TO FRONTEND
6
- -
base structure of an HTML document
…
...
embedded in tag
metadata are not displayed on the page but are used
by browsers or search engines
embedded in <head> tag
page title
<title>title is visible inside the browser tab
is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written
in
…
Slide 7
Slide 7 text
TAGS
AN INTRODUCTION TO FRONTEND
7
-
defines a division or a section in an HTML document
is a generic inline container for phrasing content
this text is on the same line
this text is on the same line
this is a section
paragraph
this is a paragraph
this is a paragraph
this is a paragraph this is a paragraph link link to google link to googleSlide 8
Slide 8 text
AN INTRODUCTION TO FRONTEND
8
Slide 9
Slide 9 text
AN INTRODUCTION TO FRONTEND
9
HEADER
HERO
CONTENT
FOOTER
ARTICLE ARTICLE ARTICLE
Slide 10
Slide 10 text
TAGS
AN INTRODUCTION TO FRONTEND
10
- -
-
- -
heading
Title h1
Title h2
Title h3
Title h4
Title h5
Title h6
Title h1
Title h2
Title h3
Title h4
Title h5
Title h6
- -
ordered list
- first item
- second item
1. first item
2. second item
- -
unordered list
- first item
- second item
● first item
● second item
- -
table – row – cell
cell A1
cell A2
cell A1 cell A2
- first item
- second item
- -
-
unordered list
- first item
- second item
Slide 11
Slide 11 text
TAGS – VOID ELEMENTS
AN INTRODUCTION TO FRONTEND
11
text input
line break this text contains
a line break this text contains a line break
defines a thematic break this is a topic
this is a different topic this is a topic this is a different topic![]()
image
line break this text contains
a line break this text contains a line break
defines a thematic break this is a topic
this is a different topic this is a topic this is a different topic
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
ATTRIBUTES
AN INTRODUCTION TO FRONTEND
13
href contains a URL or a URL fragment that the
hyperlink points to
link to google
![]()
the attribute src is mandatory and defines the image
URL
- name and value are submitted with the form data
- type specifies the type element to display
all tags can have an id and a class
- name and value are submitted with the form data
- type specifies the type element to display
all tags can have an id and a class
text
Slide 14
Slide 14 text
• MDN web docs – https://developer.mozilla.org/en/docs/Web/HTML
• Codecademy – https://www.codecademy.com/learn/learn-html
• W3C – https://www.w3.org/html
AN INTRODUCTION TO FRONTEND
14
REFERENCES
Slide 15
Slide 15 text
AN INTRODUCTION TO FRONTEND
15
HTML
in action
https://bit.ly/fe4b-html
Slide 16
Slide 16 text
AN INTRODUCTION TO FRONTEND
16
CSS
Slide 17
Slide 17 text
CSS
AN INTRODUCTION TO FRONTEND
17
• The acronym “CSS” stands for Cascade Style Sheet
• It is not a programming language
• Used for describing the presentation of an HTML document
• Defines fonts, layout, colors, etc. of the whole page and single elements
• It tells the browser how to display informations.
Slide 18
Slide 18 text
CSS
AN INTRODUCTION TO FRONTEND
18
a web page is styled according to
a set of style rules
div {
color: blue;
font-size: 15px;
}
selector
property
value
Slide 19
Slide 19 text
SELECTORS https://mzl.la/33MQNR4
AN INTRODUCTION TO FRONTEND
19
in order to identify which elements are affected by style rules
we need a selector
1. type selectors div { … }
#policy-section { … }
2. ID selectors
.small { … }
3. class selectors
[title] { … }
[title="open"] { … }
4. attribute selectors
Text here
Small text here
Click me
Slide 20
Slide 20 text
#elm-id
div#elm-id
element with id "elm-id"
with id "elm-id"
.elm-class
div.elm-class
elements with class "elm-class"
all
with class "elm-class"
div
div, span
div span
div > span
all
and
nested in
children of
grouping and combine selectors
SELECTORS
AN INTRODUCTION TO FRONTEND
20
div:hover
.error:focus
all
on mouse-over
elements with class “error” on focus
#elm-id.elm-class element with id "elm-id" and class "elm-class"
Slide 21
Slide 21 text
Position/Number-based
:first-child
:last-child
:nth-child()
:nth-of-type()
Relational
:not()
:empty
Link-related
:link
:visited
:hover
:active
Input & link related
:focus
:enabled
:disabled
:checked
:indeterminate
:required
:optional
:target
SELECTORS pseudo-classes https://mzl.la/3cVYN6v - https://css-tricks.com/pseudo-class-selectors/
AN INTRODUCTION TO FRONTEND
21
is a keyword added to a selector that specifies a special state of the
selected element(s)
Live Demo
https://codesandbox.io/embed/pseudo-class-selectors-0xntp
Slide 22
Slide 22 text
SELECTORS
AN INTRODUCTION TO FRONTEND
22
just a more complex
selector
div.menu-bar li:hover > ul {
color: blue;
}
Slide 23
Slide 23 text
PROPERTIES
AN INTRODUCTION TO FRONTEND
23
color:
background-color:
background-image:
#FF0000
blue
url("html5.png")
font-family:
font-size:
font-weight:
font-style:
Arial, sans-serif
14px
bold
italic
text-align:
text-shadow:
text-decoration:
text-decoration:
center
1px 1px 1px blue
line-through
underline
position:
position:
position:
top:
right:
bottom:
left:
static
relative
absolute
10px
-5px
3px
10px
Slide 24
Slide 24 text
AN INTRODUCTION TO FRONTEND
24
Slide 25
Slide 25 text
BOX MODEL
AN INTRODUCTION TO FRONTEND
25
the CSS box model is essentially a box that wraps
around every HTML element
Slide 26
Slide 26 text
BOX MODEL
AN INTRODUCTION TO FRONTEND
26
margin: 10px;
margin: 10px 15px;
margin: 10px 15px 10px 10px;
increases the element margin
padding: 10px;
padding: 10px 15px;
padding: 10px 15px 10px 10px;
padding-top: 10px; padding-right: 15px; …
increases space around the border and content of the element
border: 1px solid #F1F1F1;
border-top: 2px solid #F1F1F1;
adds a border around the element
height: 150px;
width: 50%;
sets a width and a height to the element
Slide 27
Slide 27 text
DISPLAY
AN INTRODUCTION TO FRONTEND
27
every HTML element has a default display value
depending on what type of element it is
display: block;
and
are block elements. A block-level element always starts on a new line and takes up the full width available.
This is a paragraph
This is another paragraph
display: inline; does not start on a new line and only takes up as much width as necessary This link does not start on a new line and only takes up as much width as necessary.Slide 28
Slide 28 text
POSITION https://mzl.la/2MZAn0D
AN INTRODUCTION TO FRONTEND
28
static relative absolute
The position CSS property sets how an element is positioned in a document.
The top, right, bottom, and left properties determine the final location of positioned elements.
Slide 29
Slide 29 text
AWD vs RWD
AN INTRODUCTION TO FRONTEND
29
ADAPTIVE WEB DESIGN
multiple templates
specific for each device
RESPONSIVE WEB DESIGN
a single design that
adjusts to each device
Slide 30
Slide 30 text
RESPONSIVE WEB DESIGN
AN INTRODUCTION TO FRONTEND
30
• Rule 1 –
• Rule 2 – use % values instead of px
• Rule 3 – define breakpoints using media query
Media Query uses @media rule to include a set of CSS properties
only if the specific condition is true
.col {
width: 100%;
}
@media (max-width: 768px) {
.col {
width: 50%;
}
}
Slide 31
Slide 31 text
LAYOUT EVOLUTION https://bit.ly/css-layout-evolution
AN INTRODUCTION TO FRONTEND
31
At the beginning the most
sophisticated layout tool designers
had was
…
.. and inline-block
display: inline-block;
Then we began to hack out layouts
with complicated mixtures of
absolute positioning, floats ..
position: absolute;
float: left;
Flexbox
&
Grid Layout
Slide 32
Slide 32 text
FLEXBOX https://mzl.la/2Ckg35E - https://css-tricks.com/snippets/css/a-guide-to-flexbox
AN INTRODUCTION TO FRONTEND
32
it gives the container the ability to alter its items' width/height (and order)
to best fill the available space
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
.container {
display: flex;
}
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
support for IE
starts from 10*
Slide 33
Slide 33 text
FLEXBOX https://mzl.la/2Ckg35E - https://css-tricks.com/snippets/css/a-guide-to-flexbox
AN INTRODUCTION TO FRONTEND
33
justify-content align-items align-content
support for IE
starts from 10
Slide 34
Slide 34 text
FLEXBOX https://mzl.la/2Ckg35E - https://css-tricks.com/snippets/css/a-guide-to-flexbox
AN INTRODUCTION TO FRONTEND
34
align-self
order
flex-grow
support for IE
starts from 10
Slide 35
Slide 35 text
FLEXBOX READ PLAY MORE
AN INTRODUCTION TO FRONTEND
35
Slide 36
Slide 36 text
GRID LAYOUT https://mzl.la/2q4aXYi - https://css-tricks.com/snippets/css/complete-guide-grid
AN INTRODUCTION TO FRONTEND
36
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
.item-header { grid-area: header; ... }
.item-main { grid-area: main; ... }
.item-sidebar { grid-area: sidebar; ... }
.item-footer { grid-area: footer; ... }
support for IE
starts from 10*
Slide 37
Slide 37 text
GRID LAYOUT READ PLAY MORE
AN INTRODUCTION TO FRONTEND
37
Slide 38
Slide 38 text
TRANSITION
AN INTRODUCTION TO FRONTEND
38
Transitions enable you to define the transition between two states of an element
.cookie-policy {
opacity: 1;
transition: opacity 2s;
}
.cookie-policy.hidden {
opacity: 0;
}
Slide 39
Slide 39 text
WHY “CASCADING” ?
AN INTRODUCTION TO FRONTEND
39
the rule used is chosen by cascading down from the more
general rules to the specific rule required
selector # of ID # of CLASS # of TAG specificity
#my-id 1 0 0 100
.my-class 0 1 0 10
li 0 0 1 1
ul li 0 0 2 2
li.my-class 0 1 1 11
Slide 40
Slide 40 text
WHERE DO I WRITE THIS?
AN INTRODUCTION TO FRONTEND
40
not so bad, but avoid it anyway
<style>
span { color: blue; }
load it from file
new tag is embedded in tag
Style inline
don’t try this at office nowhere
this text is blue
style.css
span {
color: blue;
}
this text is blue
Slide 41
Slide 41 text
AN INTRODUCTION TO FRONTEND
41
REFERENCES
• MDN web docs – https://developer.mozilla.org/en/docs/Web/CSS
• Codecademy – https://www.codecademy.com/learn/learn-css
• W3C – https://www.w3.org/Style/CSS/Overview.en.html
Slide 42
Slide 42 text
AN INTRODUCTION TO FRONTEND
42
CSS
in action
https://bit.ly/fe4b-css
Slide 43
Slide 43 text
AN INTRODUCTION TO FRONTEND
43
JAVASCRIPT
Slide 44
Slide 44 text
JAVASCRIPT
AN INTRODUCTION TO FRONTEND
44
• It’s not an acronym
• It is a scripting Object-Oriented language
• Everything is an object (except null and undefined)
• It is untyped
• It is implemented client-side in web browsers
• It is also implemented server-side with node.js
• It makes web pages interactive
• It’s an implementation of the EcmaScript standard
https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Slide 45
Slide 45 text
A re-introduction to JavaScript https://mzl.la/3fMBmxE
AN INTRODUCTION TO FRONTEND
45
JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. JavaScript was first
released with Netscape 2 early in 1996. It was originally going to be called LiveScript, but it was renamed in
an ill-fated marketing decision that attempted to capitalize on the popularity of Sun Microsystem's Java
language — despite the two having very little in common. This has been a source of confusion ever since.
Several months later, Microsoft released JScript with Internet Explorer 3. It was a mostly-compatible
JavaScript work-alike. Several months after that, Netscape submitted JavaScript to Ecma International, a
European standards organization, which resulted in the first edition of the ECMAScript standard that year.
The standard received a significant update as ECMAScript edition 3 in 1999, and it has stayed pretty much
stable ever since. The fourth edition was abandoned, due to political differences concerning language
complexity. Many parts of the fourth edition formed the basis for ECMAScript edition 5, published in
December of 2009, and for the 6th major edition of the standard, published in June of 2015.
Slide 46
Slide 46 text
ECMAScript
AN INTRODUCTION TO FRONTEND
46
timeline
ES 6
June
2015
This update adds significant new syntax for
writing complex applications, including class
declarations and ES6 modules. Other new
features include iterators and for/of loops,
Python-style generators, arrow function
expression, binary data, typed arrays, new
collections, promises, number and math
enhancements, reflection, proxies and
template literals for strings.
ES 6
ES 9
June
2018
ES 1
June
1997
First edition.
ES 1
ES 2
June
1998
Editorial changes to keep the specification fully
aligned with ISO/IEC 16262 international
standard.
ES 2
ES 3
December
1999
Added regular expressions, better string
handling, new control statements, try/catch
exception handling, tighter definition of errors,
formatting for numeric output ...
ES 3
ES 5
December
2009
Adds "strict mode," a subset intended to
provide more thorough error checking and
avoid error-prone constructs. Adds some new
features, such as getters and setters, library
support for JSON, and more complete
reflection on object properties.
ES 5
ES 5.1
December
2011
This edition 5.1 of the ECMAScript standard is
fully aligned with third edition of the
international standard ISO/IEC 16262:2011.
ES 5.1
ES 7
June
2016
The major standard language features include
block-scoping of variables and functions,
destructuring patterns (of variables), ...
ES 7
ES 8
June
2017
Includes async/await constructions, which
works using generators and promises.
ES 8
Slide 47
Slide 47 text
let and const names:
• Can contain letters, numbers, $ and _
• Can start with a letter, $ and _
• Are case-sensitive ( y and Y are two different variables )
VARIABLES and CONSTANTS https://bit.ly/mdn-js-let – https://bit.ly/mdn-js-const
AN INTRODUCTION TO FRONTEND
47
support for IE
starts from 11
let and const cannot be redeclared
let age = 30;
let age = 30; // syntax error
const name = 'John';
const name = 'John'; // syntax error
const cannot be reassigned
let age = 30;
age = 31;
const name = 'John';
name = 'Marco'; // syntax error
const must be initialized
let age;
age = 31;
const name; // syntax error
name = 'Marco';
Slide 48
Slide 48 text
VARIABLES and CONSTANTS https://bit.ly/mdn-js-let – https://bit.ly/mdn-js-const
AN INTRODUCTION TO FRONTEND
48
let myNumber = 3 + 5;
let myString = 'Hello' + ' ' + 'World!!';
let myArray = ['apple', 'lime', 3];
console.log( myArray[0] );
//Prints ‘apple’
let myObject = {
name: 'John',
age: 28
};
console.log(myObject.name);
//Prints ‘John’
let myFloat = 3.5;
let myFunction = function(num1, num2) {
return num1 + num2;
}
support for IE
starts from 11
Slide 49
Slide 49 text
CONST rules of thumb
AN INTRODUCTION TO FRONTEND
49
const myObject = {
name: 'John',
age: 28
};
// syntax error
myObject = 'Just a string';
const myObject = {
name: 'John',
age: 28
};
// this is ok
myObject.age = 31;
const has immutable binding not immutability
support for IE
starts from 11
Slide 50
Slide 50 text
you can also declare variable with var keyword
VAR
AN INTRODUCTION TO FRONTEND
50
if you need browser compatibility for non-modern browsers
babeljs.io for the rescue
But forget about it!
Slide 51
Slide 51 text
FUNCTIONS https://mzl.la/2IEQd0C
AN INTRODUCTION TO FRONTEND
51
• Usually is defined through keyword function followed by a name and ( )
• The name can contain letters, numbers, _ and $ (just like variables)
• The ( ) can contain arguments separated by commas
• Arguments can have a default value
function add(num1, num2 = 10) {
return num1 + num2;
}
const result = add(5, 5); //= 10
const add = function(num1, num2 = 10) {
return num1 + num2;
}
no support for IE
const result = add(6); //= 16
Slide 52
Slide 52 text
ARROW FUNCTIONS https://mzl.la/3a9wMs6
AN INTRODUCTION TO FRONTEND
52
• Is a syntactically compact alternative to a regular function expression
• Doesn’t have its own bindings to the this, arguments, super, or new.target keywords
• Arrow functions can have either a "concise body" or the usual "block body".
const result = add(5, 5); //= 10
const add =(num1, num2 = 10) => {
return num1 + num2;
}
const result = add(6); //= 16
no support for
IE
const add = (num1, num2 = 10) => num1 + num2;
Slide 53
Slide 53 text
BLOCK-LEVEL SCOPE
AN INTRODUCTION TO FRONTEND
53
let age = 31;
console.log(age);
// 31
if (true) {
let age = 25;
console.log(age);
// 25
}
console.log(age);
// 31
function getValue(condition) {
// myVariable doesn't exist here
if (condition) {
let myVariable = 5;
} else {
// myVariable doesn't exist here
}
// myVariable doesn't exist here
}
Variables declared using let or const keywords are block-level scoped
A block is indicated by the { and } characters
support for IE
starts from 11
Slide 54
Slide 54 text
ReferenceError: 'myVariable' is not defined
console.log(myVariable);
TEMPORAL DEAD ZONE
AN INTRODUCTION TO FRONTEND
54
console.log(myVariable);
let myVariable = 5;
ReferenceError: Cannot access 'myVariable'
before initialization
A variable declared with either let or const
cannot be accessed until after the declaration
support for IE
starts from 11
Slide 55
Slide 55 text
COMPARISON OPERATORS https://mzl.la/2wCuFwX
AN INTRODUCTION TO FRONTEND
55
3 == 3
== vs ===
A comparison operator compares its operands and returns a logical
value based on whether the comparison is true
true "3" == 3 true
3 === 3 true "3" === 3 false 3 >= 3 true
3 < 4 true
Slide 56
Slide 56 text
for ( let step = 0; step < 5; step++ ) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
for
LOOPS AND ITERATION https://mzl.la/2KX0uUo
AN INTRODUCTION TO FRONTEND
56
Loops offer a quick and easy way to do something repeatedly
let i = 0;
while (i < 5) {
i += 1;
console.log(i);
};
while
let i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
do
Slide 57
Slide 57 text
const array1 = ['a', 'b', 'c'];
array1.forEach(function (element) {
console.log(element);
});
.forEach()
ARRAY METHODS https://mzl.la/2N39dGy
AN INTRODUCTION TO FRONTEND
57
Array object offer helper methods
const array1 = [1, 2, 3];
const results = array1.map((value) => value * 2);
.map()
const array1 = [2, 3, 4];
const results = array1.filter(function (value) {
return value % 2 === 0;
});
.filter()
support for IE
starts from 9
Slide 58
Slide 58 text
DESTRUCTURING ASSIGNMENT https://mzl.la/2CeK22j
AN INTRODUCTION TO FRONTEND
58
Expression that makes it possible to unpack values from arrays, or
properties from objects, into distinct variables.
no support for
IE
console.log(name); // John
console.log(age); // 28
const person = ['John', 28];
const [ name, age ] = person;
ARRAY
const person = {
name: 'John',
age: 28
};
const { name, age } = person;
OBJECT
const person = {
name: 'John',
age: 28
};
const printInfo =({ name, age }) => {
console.log(name); // John
console.log(age); // 28
}
printInfo(person);
USAGE WITH
FUNCTIONS
Slide 59
Slide 59 text
TEMPLATE STRINGS https://mzl.la/2DUepv9
AN INTRODUCTION TO FRONTEND
59
Multi-line strings and string interpolation features
no support for
IE
const text = `This is a
multi-line
text`;
const person = {
name: 'John',
age: 28
};
const text = `My name is ${ person.name }`;
Slide 60
Slide 60 text
EXPORT / IMPORT https://mzl.la/3itzuMi - https://mzl.la/3kEU666
AN INTRODUCTION TO FRONTEND
60
no support for
IE
export default {
name: 'John',
age: 28
};
EXPORT
DEFAULT
import person from './person.js';
IMPORT DEFAULT
export const red = { name: 'red', hex: '#FF0000' }
const green = { name: 'green', hex: '#00FF00' }
const blue = { name: 'blue', hex: '#0000FF' }
export { green, blue };
NAMED EXPORT
import { red, green, blue } from './colors.js';
NAMED IMPORT
import React, { useState } from 'react';
MIXED IMPORT
Slide 61
Slide 61 text
AN INTRODUCTION TO FRONTEND
61
REFERENCES
• MDN web docs – https://developer.mozilla.org/it/docs/Web/JavaScript
• Codecademy – https://www.codecademy.com/learn/introduction-to-javascript
• Nicholas C. Zakas - Understanding ES6 – https://leanpub.com/understandinges6/read
Slide 62
Slide 62 text
AN INTRODUCTION TO FRONTEND
62
JAVASCRIPT & DOM
Slide 63
Slide 63 text
DOM
AN INTRODUCTION TO FRONTEND
63
DOM ( Document Object Model )
describes the HTML document as a tree structure
wherein each node is an object
• The document object represents your web page
• Document is made up of nodes
• Element nodes are html tags
• The HTML DOM can be accessed with JavaScript
Slide 64
Slide 64 text
DOM • JS FUNCTIONS
AN INTRODUCTION TO FRONTEND
64
document.getElementsByTagName( 'span' )
returns a collection of all elements in the document with the
specified tag name, as a NodeList object
document.getElementsByClassName( 'my-class' )
returns a collection of all elements in the document with the
specified class name, as a NodeList object
document.getElementsByName( 'email' )
returns a collection of all elements in the document with the
specified name (the value of the name attribute), as a NodeList
object
document.querySelectorAll( '.my-class' )
returns a static NodeList representing a list of the
document's elements that match the selector.
test
test
const element = document.querySelectorAll('.my-class');
// elements contains both spans.
document.getElementById( 'my-id' )
returns the element that has the ID attribute with the
specified value
test
const element = document.getElementById('my-id');
document.querySelector( '.my-class' )
returns the first Element within the document that
matches the specified selector, or group of selectors.
test
test
const element = document.querySelector('.my-class');
// element contains the first span.
Slide 65
Slide 65 text
DOM • NODE PROPERTIES
AN INTRODUCTION TO FRONTEND
65
firstChild - lastChild → Node object
returns the first and last child node of the specified
node
Hello World!
const element = document.getElementById('my-id');
console.log( element.firstChild ); //= <span>
console.log( element.lastChild ); //= <b>
innerHTML
returns the HTML content of an element
Hello World!
const element = document.getElementById('my-id');
console.log( element.innerHTML ); //= Hello <b>World</b>!
textContent
returns the textual content of the specified node, and
all its descendants
Hello World!
const element = document.getElementById('my-id');
console.log( element.textContent ); //= Hello World!
childNodes → NodeList object
returns a collection of a node's child nodes
Hello World!
const element = document.getElementById('my-id');
console.log( element.childNodes ); //= [ <span>, <b> ]
Slide 66
Slide 66 text
DOM • EVENTS
AN INTRODUCTION TO FRONTEND
66
dispatchEvent
dispatches an Event at the specified element
(EventTarget - DOM interface).
Greet!
const element = document.getElementById('my-button');
const clickEvent = new Event('click');
element.dispatchEvent(clickEvent);
addEventListener
sets up a function (callback) that will be called whenever
the specified event is delivered to the target.
Greet!
const element = document.getElementById('my-button');
element.addEventListener('click', function(event) {
console.log('Hi all!');
console.log(event.target); //= <button id="my-button"> ...
});
Slide 67
Slide 67 text
function f1() {
return this;
}
f1() === window;
//= true
THIS https://mzl.la/2Idy8rl
AN INTRODUCTION TO FRONTEND
67
In most cases, the value of this is determined by how a function is called
var o = {
prop: 37,
f2: function () {
return this.prop;
}
};
console.log( o.f2() );
//= 37
var elm = document.getElementById('my-id');
elm.addEventListener('click', f3);
function f3(e) {
console.log( this === e.currentTarget );
//= true
}
this is set to the element the event fired from
Remember! Arrow functions
doesn’t have the THIS keyword.
Slide 68
Slide 68 text
const myPromise = new Promise(function (resolve, reject) {
const result = doSomethingTimeConsuming();
resolve(result);
});
PROMISE https://mzl.la/2phpuPU
AN INTRODUCTION TO FRONTEND
68
The Promise object represents the eventual completion (or failure) of an
asynchronous operation, and its resulting value.
myPromise.then(function (result) {
console.log(result);
});
myPromise.catch(function (error) {
console.warn(error);
});
no support for
IE
Slide 69
Slide 69 text
FETCH https://mzl.la/2OLg6yA
AN INTRODUCTION TO FRONTEND
69
The Fetch API provides an interface for fetching resources
const responsePromise = fetch('https://next.json-generator.com/api/json/get/VylGdfytP');
const jsonPromise = responsePromise.then(function (response) {
return response.json();
});
jsonPromise.then(function (json) {
console.log(json);
});
no support for
IE
Slide 70
Slide 70 text
POLYFILL
AN INTRODUCTION TO FRONTEND
70
DOMTokenList.prototype.toggle = function (name, force) {
var exists = this.contains(name);
if (exists === force) {
return force;
}
if (exists) {
this.remove(name);
} else {
this.add(name);
}
return !exists;
};
A polyfill is a piece of code (usually
JavaScript on the Web) used to provide
modern functionality on older browsers
that do not natively support it.
https://mzl.la/2P2Q7Tm
no support for
IE
support for IE
starts from 10
const element = document.querySelector('.element');
let isVisible = true;
element.classList.toggle('visible', isVisible);
Slide 71
Slide 71 text
WHERE DO I WRITE THIS?
AN INTRODUCTION TO FRONTEND
71
…
not so bad, but avoid it in most cases
alert('Hello World!');
load it from file
new tag is embedded at the end of tag
Script inline
don’t try this at office nowhere
greet
Slide 72
Slide 72 text
AN INTRODUCTION TO FRONTEND
72
REFERENCES
• MDN web docs – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
• Codecademy – https://www.codecademy.com/courses/javascript-beginner-en-gwcYv/0/1
• What is the DOM? – https://css-tricks.com/dom/
Slide 73
Slide 73 text
AN INTRODUCTION TO FRONTEND
73
JAVASCRIPT & DOM
in action
https://bit.ly/fe4b-js
Slide 74
Slide 74 text
AN INTRODUCTION TO FRONTEND
74
SASS - SCSS
Slide 75
Slide 75 text
SASS - SCSS https://sass-lang.com
AN INTRODUCTION TO FRONTEND
75
• It is a CSS pre-processor
• It extends CSS adding variables, mixins, functions and more
• It make CSS more maintainable over time
• It can be converted to CSS using different tools
Slide 76
Slide 76 text
CSS = SCSS
AN INTRODUCTION TO FRONTEND
76
• Same syntax
• Same semantics
SCSS = CSS + extensions
• Nesting
• Variables
• Partials and Import
• Mixins
• Extend/Inheritance
• Operators
Slide 77
Slide 77 text
SCSS • NESTED RULES
AN INTRODUCTION TO FRONTEND
77
#header {
color: black;
}
#header > .navigation {
font-size: 12px;
}
#header a {
color: blue;
}
#header a:hover {
color: green;
}
CSS
#header {
color: black;
> .navigation {
font-size: 12px;
}
a {
color: blue;
&:hover {
color: green;
}
}
}
SCSS
Slide 78
Slide 78 text
SCSS • NESTED RULES • @media
AN INTRODUCTION TO FRONTEND
78
.component {
width: 100%;
}
.component .blue {
color: blue;
}
@media (max-width: 768px) {
.component {
width: 50%;
}
}
CSS
.component {
width: 100%;
.blue {
color: blue;
}
@media (max-width: 768px) {
width: 50%;
}
}
SCSS
Slide 79
Slide 79 text
SCSS • VARIABLES
AN INTRODUCTION TO FRONTEND
79
• Begin with “$” dollar signs
• Common property values can be written only once
• You can change multiple values changing just one code line
• Variable names can use hyphens “-” and underscores “_” interchangeably
$border-color: #FFFFFF;
$my-border: 1px solid #FFFFFF;
$my-border: 1px solid $border-color;
$size: 100px;
Slide 80
Slide 80 text
SCSS • VARIABLES
AN INTRODUCTION TO FRONTEND
80
.component-header {
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.component-footer {
color: #FFFFFF;
background-color: #FF0000;
}
.another-component {
color: #FF0000;
}
CSS
$color-1: #FFFFFF;
$color-2: #FF0000;
.component-header {
color: $color-1;
border-bottom: 1px solid $color-1;
}
.component-footer {
color: $color-1;
background-color: $color-2;
}
.another-component {
color: $color-2;
}
SCSS
Slide 81
Slide 81 text
• Suppose we have two TAGs with a total width of 1000px
• One must be ¾ of the other
SCSS • MATH OPERATIONS
AN INTRODUCTION TO FRONTEND
81
#content {
width: 750px;
}
#sidebar {
width: 250px;
}
CSS
$width: 1000px;
$contentWidth: $width * (3 / 4);
$sidebarWidth: $width - $contentWidth;
#content {
width: $contentWidth;
}
#sidebar {
width: $sidebarWidth;
}
SCSS
Slide 82
Slide 82 text
SCSS • MATH FUNCTIONS
AN INTRODUCTION TO FRONTEND
82
• ceil( 2.4 ) → 3
• floor( 2.6 ) → 2
• round( 1.67 ) → 2
• percentage( 0.5 ) → 50%
• sqrt( 25px ) → 5px
• abs( -15px ) → 15px
• min( 5, 10 ) → 5
• max( 5, 10 ) → 10
SCSS • COLOR FUNCTIONS
• rgb( 90, 129, 32 ) → #5a8120
• red( #5a8120 ) → 90
• green( #5a8120 ) → 129
• blue( #5a8120 ) → 32
• lighten( #80e619, 20% ) → #b3f075
• darken( #80e619, 20% ) → #4d8a0f
Slide 83
Slide 83 text
SCSS • INTERPOLATION SYNTAX
AN INTRODUCTION TO FRONTEND
83
You can use variables in selectors and property names using
#{} interpolation syntax
$name: "foo";
$attr: "border";
p.#{$name} {
#{$attr}-color: blue;
}
SCSS
p.foo {
border-color: blue;
}
CSS
Slide 84
Slide 84 text
Using @extend lets you share a set of CSS properties
from one selector to another
SCSS • @extend
AN INTRODUCTION TO FRONTEND
84
.success {
color: green;
}
.element-1 {
@extend .success;
font-weight: bold;
}
.element-2 {
@extend .success;
}
SCSS
.success, .element-1, .element-2 {
color: green;
}
.element-1 {
font-weight: bold;
}
CSS
Slide 85
Slide 85 text
A placeholder class is a special type of class
that only prints when it is extended
SCSS • @extend
AN INTRODUCTION TO FRONTEND
85
%message-shared {
color: green;
}
%another-message {
color: blue;
}
.element {
@extend %message-shared;
}
SCSS
.element {
color: green;
}
CSS
Slide 86
Slide 86 text
• Used to define a group of properties and use them later on
• Parametric mixins are by all means functions
SCSS • @mixin
AN INTRODUCTION TO FRONTEND
86
@mixin border-radius($radius: 10px) {
-moz-border-radius: $radius;
border-radius: $radius;
}
#header {
@include border-radius(4px);
}
SCSS
#header {
-moz-border-radius: 4px;
border-radius: 4px;
}
CSS
Slide 87
Slide 87 text
SCSS • @mixin PRO
AN INTRODUCTION TO FRONTEND
87
@mixin border-radius($radius: 10px) {
@if ($radius == 20px) {
$radius: $radius * 2px;
}
-moz-border-radius: $radius;
border-radius: $radius;
}
#header {
@include border-radius(20px);
}
SCSS
#header {
-moz-border-radius: 40px;
border-radius: 40px;
}
CSS
Slide 88
Slide 88 text
@import "variable";
@import "header";
@import "footer";
...
application.scss
SCSS • IMPORT
AN INTRODUCTION TO FRONTEND
88
You can import .scss files inside other .scss files
@import "this-is-valid";
.header {
color: $color-1;
}
_header.scss
.footer {
color: $color-2;
}
_footer.scss
$color-1: #FFFFFF;
$color-2: #FF0000;
...
_variables.scss
Slide 89
Slide 89 text
$var: red;
#header {
.white {
$var: white;
color: $var; // white
}
color: $var; // red
}
SCSS • SCOPE
AN INTRODUCTION TO FRONTEND
89
Variables and mixins are first looked for locally, and if they aren't found,
the compiler will look in the parent scope, and so on
$var: red;
#header {
.white {
$var: white;
color: $var; // white
}
color: $var; // red
}
$var: blue;
#footer {
color: $var; // blue
}
#header {
color: red;
}
#header .white {
color: white;
}
#footer {
color: blue;
}
CSS
SCSS
Slide 90
Slide 90 text
AN INTRODUCTION TO FRONTEND
90
https://www.sassmeister.com
Slide 91
Slide 91 text
1 npm install -g sass
HOW DO I COMPILE IT?
AN INTRODUCTION TO FRONTEND
91
-g installs the specified package as a
global package. It is useful if you want to
use it as a command line tool
sass input.scss output.css
2
Slide 92
Slide 92 text
AN INTRODUCTION TO FRONTEND
92
NODE.JS
Slide 93
Slide 93 text
NODE.JS
AN INTRODUCTION TO FRONTEND
93
• Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
• V8 is the JavaScript execution engine built for Google Chrome and open-sourced by Google in
2008.
• Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient
• It executes JavaScript code server-side
• There are a lot of applications today that use Node.js
Slide 94
Slide 94 text
AN INTRODUCTION TO FRONTEND
94
Slide 95
Slide 95 text
AN INTRODUCTION TO FRONTEND
95
Slide 96
Slide 96 text
NPM https://www.npmjs.com
AN INTRODUCTION TO FRONTEND
96
“Node.js' package ecosystem, npm, is the largest ecosystem
of open source libraries in the world” https://nodejs.org
NPM ≈ Maven ≈ Composer ≈ Bundler ≈ …
Java PHP Ruby
Slide 97
Slide 97 text
package.json is used to give information to npm that
allows it to identify the project as well as handle the
project's dependencies.
devDependencies are dependencies not required for
normal operation, but required/recommended if you
want to patch or modify the project ( unit test, lint,
builder, ecc. ).
dependencies field is used to list all the dependencies
of your project that are available on npm. When
someone installs your project through npm, all the
dependencies listed will be installed as well.
NPM https://docs.npmjs.com/files/package.json
AN INTRODUCTION TO FRONTEND
97
{
"name": "project-name",
"description": "project-desc",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
Slide 98
Slide 98 text
NPM https://docs.npmjs.com/cli-documentation
AN INTRODUCTION TO FRONTEND
98
npm install - npm update
installs a package, and any packages that it
depends on
npm prune
removes packages that are not listed on the
parent package's dependencies list
npm install
installs the specified package and adds it to the
package.json
{
"name": "project-name",
"description": "project-desc",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
Slide 99
Slide 99 text
NPM https://docs.npmjs.com/misc/scripts
AN INTRODUCTION TO FRONTEND
99
{
"name": "project-name",
"description": "project-desc",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
npm test
this runs a package’s “test” script, if one was
provided.
scripts section
The “scripts” property is a dictionary containing script
commands that are run at various times in the
lifecycle of your package. You can also trigger them
manually.
npm run build
this runs a package’s “build” script, if one was
provided.
Slide 100
Slide 100 text
NPM • node_modules
AN INTRODUCTION TO FRONTEND
100
npm install
{
"name": "project-name",
"description": "project-desc",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
A folder with name
node_modules is created.
This folder contains all
downloaded dependencies.
You don’t need to commit
and push this folder, so
remember to add it to
.gitignore file.
Slide 101
Slide 101 text
HOW DO I INSTALL NODE.JS?
AN INTRODUCTION TO FRONTEND
101
Slide 102
Slide 102 text
WHERE ARE PACKAGES?
AN INTRODUCTION TO FRONTEND
102
Slide 103
Slide 103 text
AN INTRODUCTION TO FRONTEND
103
PARCEL
Slide 104
Slide 104 text
PARCEL
AN INTRODUCTION TO FRONTEND
104
Parcel is a Web Application Bundler.
Its main features set includes:
• zero configuration
• assets bundling (HTML, CSS, JS)
• automatic transforms using Babel
• caching and parallel processing for faster builds
• hot module replacement
Slide 105
Slide 105 text
HOW DO I INSTALL PARCEL?
AN INTRODUCTION TO FRONTEND
105
npm install -D parcel-bundler
1
-D installs the specified
package as a dev dependency
Slide 106
Slide 106 text
PARCEL SCRIPTS https://en.parceljs.org/getting_started.html
AN INTRODUCTION TO FRONTEND
106
1
{
"name": "an-introduction-to-frontend",
"description": "An introduction to Frontend",
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"parcel-bundler": "~1.12.4"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
}
package.json
Slide 107
Slide 107 text
AN INTRODUCTION TO FRONTEND
107
from https://bit.ly/fe4b-js to https://github.com/marcomontalbano/an-introduction-to-frontend
Let’s Try
107
Slide 108
Slide 108 text
AN INTRODUCTION TO FRONTEND
108
GitHub
https://github.com/marcomontalbano/an-introduction-to-frontend
Thank You!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Project Name