JS Basics - Speaker Deck

Slide 1

Slide 1 text

BASICS

Slide 2

Slide 2 text

glauberramos.github.io/jsbasics

Slide 3

Slide 3 text

High level Dynamic JavaScript Untyped Interpreted

Slide 4

Slide 4 text

Primitives and Objects var thrutly = true; var falsy = false; var name = ‘blablabla’; var number = 1; var person = { name: ‘blablabla’ } Booleans Strings Numbers Objects

Slide 5

Slide 5 text

Functions everywhere! function bla() { return 1; } bla(); // 1 function sum(a, b) { return a + b; } sum(1 , 2); // 3

Slide 6

Slide 6 text

Functions everywhere! var bla = function() { return 1; } bla(); // 1 var sum = function(a, b) { return a + b; } sum(1 , 2); // 3

Slide 7

Slide 7 text

Exercício 1 Modificar a função “say” para receber um parámetro e retornar uma string “Person says {parametro}”.

Slide 8

Slide 8 text

Closures function test() { var name = ‘Ray Charles’; function displayName() { alert(name); } return displayName; } var myFunc = new test(); myFunc(); //Ray Charles Uma closure contêm a função e o escopo em que ela foi criada

Slide 9

Slide 9 text

Object - json & properties var person = { firstName: 'Bob', lastName: 'Smith', fullName: function() { return this.firstName + ' ' + this.lastName; }, address: 'blablabla' }; console.log(person.firstName); console.log(person.lastName); console.log(person.fullName());

Slide 10

Slide 10 text

Crie uma função chamada “drive” que adiciona 100 kilometros para a distancia já percorrida pelo carro. Depois faça o carro andar 300 kilometros e imprima a distancia percorrida. Exercício 2

Slide 11

Slide 11 text

If var isActive = true; if (isActive) { console.log('Está ativo!'); } else { console.log('Está inativo'); }

Slide 12

Slide 12 text

For for (i=0; i < 10; i++) { console.log(i + 1); }

Slide 13

Slide 13 text

Foreach var array = [{ name: 'bla' }, { name: 'bla2' }, { name: 'bla3' }]; for(index in array) { console.log(array[index].name); }

Slide 14

Slide 14 text

Toda função é um objeto Todo objeto contém um link para outro objeto chamado prototype

Slide 15

Slide 15 text

OOP - Prototype function Person(first, last) { this.firstName = first; this.lastName = last; } var glauber = new Person('Glauber', 'Ramos'); Person.prototype.fullName = function() { return this.firstName + ' ' + this.lastName; }; var joao = new Person('João', 'Bohrer'); console.log(glauber.fullName()); console.log(joao.fullName());

Slide 16

Slide 16 text

Todas propriedades são acessiveis É possível modificar a “classe” dinamicamente

Slide 17

Slide 17 text

OOP - Público e Privado function Person(first, last) { var firstName = first; var lastName = last; var publicApi = {}; publicApi.fullName = function() { return firstName + ' ' + lastName; } return publicApi; } var glauber = new Person('Glauber', 'Ramos'); console.log(glauber.fullName());

Slide 18

Slide 18 text

Temos métodos privados e métodos públicos

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Exercício 3 Criar 2 pessoas diferentes e imprimir seus nomes na tela

Slide 21

Slide 21 text

Backend vs Frontend var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ url: root + '/users/1', method: 'GET' }).then(function(data) { console.log(data); });

Slide 22

Slide 22 text

Callback var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ url: root + '/users/1', method: 'GET' }).then(function(data) { console.log(data); });

Slide 23

Slide 23 text

jQuery - CSS seletores A base do jquery são os seletores CSS $(‘li’) //retorna todos li $(‘.person’) //retorna todos elements com classe “person” $(‘section#first-container’) //retorna o section que tenha id “first container” $(‘div.car:first-child’); //retorna o primeiro div com classe car

Slide 24

Slide 24 text

jQuery - Funções http://oscarotero.com/jquery/

Slide 25

Slide 25 text

jQuery - DOM Ready $(function() { //código vai aqui }); Todo HTML vira o DOM quando abrimos uma página no browser

Slide 26

Slide 26 text

Exercício 4 http://codepen.io/glauberramos/pen/NGbeLP

Slide 27

Slide 27 text

Vanilla vs jQuery (javascript puro) http://youmightnotneedjquery.com/ http://vanilla-js.com/ document.getElementsByTagName("span"); → $('span'); document.getElementById('test-table'); → $jq('#test-table'); el.classList.add(className); → $(el).addClass(className);

Slide 28

Slide 28 text

Angular Structure

Slide 29

Slide 29 text

Angular DOM manipulation ng-show → Mostra uma elemento baseado numa flag ng-hide → Esconde um elemento baseado numa flag ng-repeat → Percorre uma lista de elementos ng-click → Faz o evento de click para um elemento ng-model → Seleciona qual elemento do controller ele representa

Slide 30

Slide 30 text

Exercício 5 http://codepen.io/glauberramos/pen/dYOaLP

Slide 31

Slide 31 text

6 Dicas

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

1 APRENDA VANILLA JS

Slide 34

Slide 34 text

APRENDA OOP JS 2

Slide 35

Slide 35 text

USE O CONSOLE 3

Slide 36

Slide 36 text

USE MICRO FRAMEWORKS microjs.com 4

Slide 37

Slide 37 text

Slide 38

Slide 38 text

AUTOMATIZE WORKFLOW 6

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Links https://github.com/ericelliott/essential-javascript-links https://medium.com/javascript-scene/learn-javascript-b631a4af11f2 www.superherojs.com www.codeschool.com/paths/javascript www.github.com/sorrycc/awesome-javascript