Java script

Who am I?
❏ Frontend architect at ilegra
❏ Graduated in Analysis and System
Development at FATEC Senai
❏ Started in 2012 on IT world
❏ Experience with Arch Front (Angular,
React, React Native, Vue, NodeJS, Micro-
fronts, SSR, BFF, GraphQL, PWA and
others)
@adrianlemess

Summary
❏ JavaScript introduction
❏ Objects
❏ Functions
❏ DOM and QuerySelector
❏ Events

Setup
❏ Setup de ambiente
❏ VSCode
❏ Extensões (git blame, git history, eslint, HTML snippets, JavaScript (ES6)
code snippets)
❏ Chrome - DevTools

History
1995
JavaScript
creation at
Netscape
by Brendan
Eich
1996
Microsoft
releases
JScript for
IE 3
1997
JavaScript
was
standardized
in EcmaScript
spec
2005
Ajax released
and the web
2.0 age
started
2006
JQuery 1.0
was released
2009
Chrome and
V8 engine
launched
2010
NodeJS was
released
2015
EcmaScript 6
was released
Current
3 JavaScript
framework is
launched by
minute

What is
JavaScript/EcmaScript?
❏ Browser Interpreted Language
❏ Born to make websites dynamic
❏ Browser-integrated language
❏ Object Based (Window, Date (), Matrix (), Mathematics ())
❏ Event Oriented Language

EcmaScript Specs
❏ ECMAScript 1 (1997)
❏ First version, released in 10 days
❏ W3C - DOM lvl 1 and 2
❏ Alignment with ISO/IEC 16262 and became a international standard
❏ Implementation with do-while, regular expressions, exceptions, among
other things
❏ ECMAScript 4 (abandoned in July 2008)

EcmaScript Specs
❏ Several improvements over version 3: support to JSON, getters and setters,
'use strict', among others
❏ Template string, let e const, arrow function and a lot of improvements
❏ ES7, ES8, ES Next - the lasts upgrades with others
improvements like async-await

What we can achieve?
❏ Animations
❏ Handle HTML Elements
❏ Add or remove HTML elements
❏ Change styles
❏ Access Values
❏ Handle XML and JSON Files
❏ Server side: with NodeJS (I.E. SSR, Backend for Frontend,
GraphQL)
❏ Mobile with hybrid frameworks - React Native, Ionic, phonegap,
nativescript, among others

Data type
Basic types
❏ number
❏ boolean
❏ string
❏ object
❏ function
Object Types
❏ Object
❏ Date
❏ Array
Types with no
value
❏ null
❏ undefined

Falsy Values
❏ false === false
❏ 0 === false
❏ “” (empty string) === false
❏ null === false
❏ undefined === false
❏ NaN (Not A Number) === false

How to use
❏ We can insert JavaScript code in the following ways:
❏ Inside the body of the <body> ... </body> page
❏ Inside the page header <head> ... </head>
❏ Inside an html tag
❏ In a separate html file saved with the extension .js
❏ In the browser console (for testing purpose) (f12 or inspect)

<body> or <head>
<html>
<head>
<script>
alert('script tag in head');
</script>
</head>
<body>

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

</head>
<body>
<script>
alert('script tag in body');
</script>
</body>
</html>

Code in tag inline
<html>
<head>

</head>
<body>
<button onclick="alert('on click button'); ">
Alert
</button>
</body>
</html>

File
// file.js
function foo() {
console.log('bar');
}

Basic Concepts
❏ JavaScript is case sensitive (var animalName is different from var AnimalName
❏ Dynamic typing - Types Are Associated With Values, Not As Variables -> Poorly
Typed Variables
❏ var name = "adrian";
❏ var numInt = 10;
❏ var numFloat = 5.5;
❏ Comments
❏ / * block * /
❏ // Line
❏ Semicolon (;) at the end of each line is optional, but is a good practice.

Arithmetic Operators
❏ var x = 10

Assignment Operators
❏ var x = 10
❏ var y = 2

Comparison Operators
❏ var x = 10

Objects
// Objects is map in pairs (key, value)
var obj = {
foo: 1,
bar: 2
};
// The keys will always be coverted to string
var obj = {
// this key will be "1" and not 1.
// Keys non-string will be converted to string
1: 15,
2: -50
};
// Quotes are optional
var obj = {
"1": 15,
"2": -50
};
// Values can be of any type.
var obj = {
foo: 1000,
bar: 'Adrian',
baz: function() {},
zot: [1, 2, 3],
foobar: /^a/
};

Object properties
var obj = {
x: 1,
y: 2
};
// dot notation
obj.x; //1
// ... or Array notation
obj["x"]; //1
// array notations are useful with
// expressions or compound names
var key = 'x';
obj[key]; //1
// or
obj["pet-name"] = "snow"

Acessing multiple
properties in an Object
var obj = {
x: 1,
y: 2
};
// Using for in
for (var key in obj) {
obj[key];
}
// Using interator - functional programming approach
object.keys(obj).forEach(function(key) {
obj[key];
});

Objects are dynamic
var obj = {
x: 1,
y: 2
};
"x" in obj; //true
"z" in obj; //false
// Keys can be dynamically add
obj.z = 23;
"z" in obj; //true
//... or removed
delete obj.z;
"z" in obj; //false
// Common mistake: This not delete an key
obj.x = undefined;
"x" in obj; //true
// Just assign a undefined value for the key
obj.x === undefined; //true
// To delete a key
delete obj.x;
"x" in obj;

Keys with Expression
// You cannot assign a variable directly in a key:
var key = "x" + "y"
// this wont work as expected
var obj = {
key : 3 // the key will be "key" and not "xy"
};
// ... this way is not valid neither:
var obj = {
"x" + "y": 3 // expressions are not allowed here
};
// but this way you can
var obj = {};
obj["x" + "y"] = 3;
// Pay attention
var obj = {};
var arr = [1, 2];
obj[arr] = 4;
"1,2" in obj; //true
var obj2 = { name: 'adrian' };
obj[obj2] = 3;
"[object Object]" in obj; //true
// keys are converted by string
// avoiding [ object Object ]
obj[JSON.stringify(obj2)]
'{"name":"adrian"}' in obj; //true

Arrays
// Arrays are a different kind of object
typeof [] === 'object'; //true
// Arrays may have "holes"
var arr = [1,,,2];
// indexes are keys
"0" in arr; //true
// holes are not valid keys
"1" in arr; //false
// The holes values is undefined
arr[1] === undefined; //true
// But beware, it's not the same thing to
// be undefined and has the undefined value
arr[1] = undefined; // This is not a hole anymore
arr[1] === undefined; // true
"1" in arr; // true <- Here is the difference
// Arrays are dynamically
var arr = [1, 2, 3];
arr[500] = 4; // from index 3 to 499 will be holes
// The array size is not what suppost to be
arr.length; //501

Arrays
// Don't use for in to iterate arrays
// because the interaction order cannot be guaranteed
// There are multiple method to iterate arrays
// forEach, map, reduce, filter, some, every, ...
// Useful tip: Don't use "delete" to remove values in array,
// it creates holes
var arr = [1, 2, 3];
delete arr[3];
arr.length; //3
// to correctly remove use the splice method
// arr.splice(startIndex, quantity);
arr.splice(2, 1);
arr.length; //2

Sintaxe
function foo() {
return 'bar';
}

High Order Functions
❏ In Javascript, functions are values:
❏ Assigned as an identifier (variable) value
❏ Assigned to object property values
❏ Passed as arguments
❏ Returned from functions
❏ Higher-order functions are functions that take other functions
as arguments or return functions as their results.

Functions inside a variable
// Functions can be executed inside the scope where it was
// declared. (Window, object, function)
function helloWorld() {
return 'Hello World'
}
// We might pass a declarative function inside a variable
var showHelloWorld = function helloWorld(name) {
return 'Hello ' + name;
}
showHelloWorld();
// But we also might pass an anonymus function inside a variable
var showHelloWorld = function(name) {
return 'Hello ' + name;
}
showHelloWorld();

Returning functions
// In JavaScript a function might return another function!
function isBiggerThan(n) {
return function number(m) {
return m > n;
}
}
// And we may pass to a variable
var isBiggerThan10 = isBiggerThan(10);
isBiggerThan10(5) // return false
isBiggerThan10(11) // return true
isBiggerThan10(10) // return false

Functions as param
// In JavaScript we can receive a function as param
function calculate(fn, numA, numB) {
return fn(numA, numB);
}
const sum = function (x, y) {
return x + y;
};
const mult = function (x, y) {
return x * y;
};
calculate(sum, 2, 5); // 7
calculate(mult, 2, 5); // 10

...Arguments
// Every function in JavaScript has a default param called Arguments
function findMax() {
var i;
var max = -Infinity;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
var x = findMax(1, 123, 500, 115, 44, 88);

DOM - What is?
❏ Document Object Model
❏ It's a spec to manipulate HTML and XML documents
❏ Add new elements
❏ Remove elements
❏ Update elements
❏ Accessing elements
❏ Interoperability - any language can implement the API DOM
❏ After the browser reads your HTML document, it creates a
representational tree called the Document Object Model and
defines how that tree can be accessed

Representation by the
browser
❏ Node - Each part of the tree is know as Node.
❏ Each node has a representation name (<p>, <h1>, <body>)
❏ The elements is not always unique, that's why it's possible to identify by an ID
attribute
❏ Document: Its the first Node, It treats all the HTML documents.
❏ The nodes might be:
❏ Elements: All the tags that are inside your HTML or XML turn into a DOM
element.
❏ Text: All the tags’ content.
❏ Attributes: All the attributes from a specific HTML element. In the image, the
attribute class=”hero” is an attribute from the <p> element.

Acessing the DOM: HTML Example
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM (Document Object Model)</title>
</head>
<body>
<div class="container">
<h1><time>00:00:00</time></h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</body>
</html>

Document Methods
❏ It's the connection between our code and the Nodes and Events from DOM
❏ The mosts important methods are:
❏ document.getElementById('start') - returns the node element with a specific
ID or null if the ID don't exist
❏ document.getElementsByClassName('container') - return a HTMLCollection
with all the elements with the specified class or null if the class don't exist
❏ document.getElementsByTagName('body') - return a HTMLCollection with
all the tag elements specified or null if the tag is not in use

Document Methods:
QuerySelector
❏ It returns the first element that has the specific CSS selector passed
❏ Just remember that the selector should follow the CSS syntax
❏ ID: #start
❏ Tag: body
❏ class: .container
❏ Returns null in case you do not have any selector matched
ex: var resetButton = document.querySelector('#reset');

Document Methods:
QuerySelectorAll
❏ Very similar with QuerySelector() but the output is a all the elements matched
with the selector and only the first
❏ Returns null in case you do not have any selector matched
ex: var myButtons = document.querySelector('#buttons');

More about selectors:
https://flukeout.github.io/

DOM properties
❏ There a methods to return elements, text, comments and so on
❏ .childNodes - return a node list with child elements
❏ .firstChild - return a first child of an element
var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;
var getFirstChild = container.firstChild;

DOM properties
❏ .nodeName - return the node name
❏ .nodeValue - return a node value
var getName = container.nodeName;
var container = document.querySelector('.container')
var getValue = container.nodeValue;

DOM properties Elements
❏ Those properties return HTML Elements
❏ .parentNode - This property returns the parent of the node
given.
❏ .firstElementChild - Returns the first child element of the given
element.
var getParent = container.parentNode;
var getValue = container.firstElementChild;

DOM properties Elements
❏ .lastElementChild - Returns the last child element of the given
element.
var getValue = container.lastElementChild;

Categories
❏ W3 DOM Specification: W3C manages all the DOM event specifications, except
those that deal with form elements.
❏ HTML5 Specification: These include all the events specifically used with HTML.
These include submit, input, etc. New additions to this category include
hashchange, beforeunload, etc.
❏ Browser Object Models: W3 specifications don’t yet cover these events. They deal
with touchscreen devices and the events in this section include touchstart,
touchend, etc.

Events types
❏ User interface events - events from browser. The event listener is on window
object
❏ load, unload, error, resize and scroll
❏ HTML events - this events fire on HTML elements gain or lose focus.
❏ focus, blur
❏ Mouse events - events when the mouse move or click
❏ click (and touch screen), dblclick, mousedown, mouseup, mouseover,
mouseout, mousemove
❏ Keyboard events - events fired with a user interaction on a keyboard. Each key
has a unique code
❏ keydown, keypress, keyup

Events types
❏ Form Events
❏ submit, change, input
❏ Mutation events and observers - mutation events listening the DOM and
mutation observers has the same event but it’s fired in batches - more
performance
❏ DOMNodeInserted, DOMNodeRemoved, DOMSubtreeModified
❏ HTML 5 Events - Modern page level events like gesture and movements and
better support like phones and tablets
❏ DOMContentLoaded, hashchange, beforeunload
❏ CSS Events - These events trigger when the script encounters a CSS element
❏ transitionend, animationstart, animationiteration, animationend

Events References
❏ https://developer.mozilla.org/pt-BR/docs/Web/Events

How to use
❏ Click Button:
var startButton = document.querySelector('#start');
startButton.addEventListener('click', function(event) {
// Do something here.
}, false);

How to use
❏ Mouse up on Button:
var startButton = document.querySelector('#start');
startButton.addEventListener('mouseup', function(event) {
alert('Mouse UP')
}, false);

Credits
❏ https://www.freecodecamp.org/news/whats-the-document-
object-model-and-why-you-should-know-how-to-use-it-
1a2d0bc5429d/
❏ https://dev.to/damcosset/higher-order-functions-in-javascript-
4j8b
❏ https://developer.mozilla.org

Java script

Recommended

More Related Content

What's hot (20)

Similar to Java script (20)

More from Adrian Caetano (9)

Recently uploaded (20)

Java script

Editor's Notes