Back to basics

An adventure through javascript

Icaro Caldeira Carreira / @icarcal

@icarcal

Icaro Caldeira Carreira

Software Engineer @ R ankMyApp
9+ anos de experiência em desenvolvimento
Community manager @ Nerdzão
Community manager @ No deBr
~~Speaker~~

@icarcal

Ferramentas

@icarcal

Javascript

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web e também no servidor.

Javascript é o que dá vida à sua aplicação web, podendo tornar conteúdos dinâmicos

Não possui tipagem nativa (sejam bem-vindo Typescript)

Possui características assíncronas

@icarcal

ECMAScript

ECMA (European Computer Manufactures Association)

Dita especificações e padrões que a linguagem deve obedecer

Tem como sigla ES (ES5, ES6, ES7)

@icarcal

Variáveis

Podem ser definidas de 3 formas

var rick = 'Rick';
let morty = 'Morty';
const summer = 'Summer';

var é o tipo mais fraco, e era bastante utilizados pré ES6, é quase um valor global

let deixa você colocar um novo valor na variável

const é uma constante e não pode ter o valor sobrescrito

@icarcal

Tipos de dados

String

Numérico

Booleano

Array

Objeto

Função

const pickle = 'Rick'

const C = 137

const yesCanDo = true

const meeseks = ['yes', 'we', 'can', 'do']

const rick = { tiny: 'rick', regular: 'rick' }

function squanchy() {
    return 'Squanchy, squanchy'
}

@icarcal

Hoisting

Signfica içar em português

Sofrem hoisting:

var
funções não declaradas

Tratamento dado à algumas declarações no javascript

@icarcal

Exemplos de hoisting

const rick = 'Rick';

console.log(rick + ' and ' + morty);
//Rick and undefined

var morty = 'morty';

console.log(rick + ' and ' + morty);
//Rick and undefined

console.log(summer);
//Uncaught ReferenceError: summer is not defined

summer = 'summer';

console.log('Rick and Morty dimension is ' + dimension());
//Dimension C-137

function dimension() {
    return 'C-137';
}

console.log(jerry + ' is trying to work in advertising');
//Uncaught ReferenceError: jerry is not defined

let jerry = 'Jerry';

console.log(beth + ' is Rick\'s daughter');
//Uncaught ReferenceError: jerry is not defined

const beth = 'Beth';

@icarcal

Funções

Blocos de instruções que são executados quando são invocadas

Podem ou não ter um retorno

@icarcal

Exemplos

function pickleRick() {
    console.log('I\'m Pickle Rick');
}

const regularRick = function() {
    return 'I\'m Regular Rick';
}

pickleRick()
// I'm Pickle Rick

regularRick()
// undefined
// retorna I'm Regular Rick

Pré ES6

@icarcal

Exemplos

const pickleRick = () => {
    console.log('I\'m Pickle Rick');
}

const regularRick = () => 'I\'m Regular Rick';

const rick = type => 'I\'m' + type + ' Rick';

pickleRick()
// I'm Pickle Rick

const regularRick = regularRick();
console.log(regularRick)
// I'm Regular Rick


const tinyRick = rick('Tiny');
console.log(tinyRick)
// I'm Tiny Rick

Pós ES6

@icarcal

Callback

É uma função passada como parâmetro para uma outra função, que será executada somente quando um determinado evento acontecer

const interval = setInterval(function() {
    const date = new Date().toLocaleString();
    console.log(date);
}, 1000)

clearInterval(interval);

@icarcal

Estruturas de condição

São utilizados para determinadas tomadas de decisão na sua aplicação

@icarcal

if, else if, else

const rick = {
    dimension: 'C-137',
    grandson: 'Morty',
    alcoholism: true,
    age: 70
}

if (rick.dimension == 'C-137') {
    console.log('Yey, you are the true Rick');
}

if (rick.grandson === 'Morty') {
    console.log('Hey, Summer');
} else if (rick.grandson === 'Jerry') {
    console.log('Hey you are not my grandson');
} else {
    console.log('Hey really are not my grandson');
}

@icarcal

switch ... case

const rick = {
    dimension: 'C-137',
    grandson: 'Morty',
    alcoholism: true,
    age: 70
}

switch(rick.dimension) {
    case 'C-137':
        console.log('True Rick')
        break;
    case 'C-139':
        console.log('Unknown Rick')
        break;
    case default:
        console.log('Fake Rick')
        break;
}

@icarcal

Laços de repetição

São blocos de código que executam uma determinada tarefa repetidamente por uma quantidade determinada de vezes

@icarcal

for

const characters = [
    'Rick',
    'Morty',
    'Summer',
    'Jerry',
    'Beth'
];

for (let counter = 0; counter <= characters.length; counter++) {
    console.log(characters[counter]);
}

Itera sobre uma variável por uma quantidade determinada de vezes

@icarcal

while

const characters = [
    'Rick',
    'Morty',
    'Summer',
    'Jerry',
    'Beth'
];

let counter = 0;
while (counter <= characters.length) {
    console.log(characters[counter]);
    counter += 1;
}

Itera sobre uma variável por uma quantidade determinada de vezes

@icarcal

for ... of

const characters = [
    'Rick',
    'Morty',
    'Summer',
    'Jerry',
    'Beth'
];

for (character of characters) {
	console.log(character)
}

Itera sobre os valores de uma variável iterable (array)

@icarcal

for ... in

const rick = {
    dimension: 'C-137',
    grandson: 'Morty',
    alcoholism: true,
    age: 70
}

for (key in rick) {
    console.log(key + ': ' + rick[key])
}

Itera sobre as propriedades de um objeto

@icarcal

Funcionais

// forEach
const characters = [
    'Rick',
    'Morty',
    'Summer',
    'Jerry',
    'Beth'
];

characters.forEach(function(character) {
    console.log(character)
});

// map

const characters = [
    'Rick',
    'Morty',
    'Summer',
    'Jerry',
    'Beth'
];

const modifiedCharacters = characters.map((character) => {
    return character + ' Smith';
});

console.log(modifiedCharacters);

@icarcal

DOM

Document Object Model

Modelo de objetos que é criado após o browser ler seu HTML

@icarcal

Como manipular o DOM

O browser possui um objeto padrão chamado document (refere-se ao DOM)

Ao realizar o carregamento da página temos acesso ao DOM da mesma e conseguimos manipular através do javascript

@icarcal

Exemplos

document.getElementById('input-name').style.display = 'none';

document.getElementById("input-name").innerHTML = "MOOOOOORTYYYYYYYY!";

document. getElementsByTagName("label").innerHTML = "Hey Rick";

document. getElementsByClassName("button-red").style.backgroundColor = "#000";

function displayDate() {
    return new Date().toLocaleString()
}

document.getElementById("myButton").addEventListener("click", displayDate);

document.getElementById("form").addEventListener('submit', function (event){
    event.preventDefault();
    const name = document.getElementById('donate').value = 'none';
})

@icarcal

Localstorage

Permite armazenar dados no seu navegador

Os dados não expiram

São visíveis ao visitante do site

if (window.localStorage) {
    window.localStorage.setItem('name', 'Rick');
    window.localStorage.setItem('surname', 'Sanchez');
    window.localStorage.setItem('dimension', 'C-137');
    window.localStorage.getItem('name');
    window.localStorage.getItem('surname');
    window.localStorage.getItem('dimension');
}

@icarcal

Template string

Permite uma melhor manipulação de variáveis string no javascript

const name = 'Rick';
const nickname = 'Tiny';

const fullName = nickname + ' ' + name;

const fullNameWithTemplate = `${nickname} ${name}`;

console.log(fullName);
// Tiny Rick 

console.log(fullNameWithTemplate);
// Tiny Rick