Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Basics

Glauber
September 30, 2015

JS Basics

Slides for a workshop I gave about Javascript basics.

Glauber

September 30, 2015
Tweet

More Decks by Glauber

Other Decks in Technology

Transcript

  1. Primitives and Objects var thrutly = true; var falsy =

    false; var name = ‘blablabla’; var number = 1; var person = { name: ‘blablabla’ } Booleans Strings Numbers Objects
  2. Functions everywhere! function bla() { return 1; } bla(); //

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

    bla(); // 1 var sum = function(a, b) { return a + b; } sum(1 , 2); // 3
  4. Exercício 1 Modificar a função “say” para receber um parámetro

    e retornar uma string “Person says {parametro}”.
  5. 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
  6. 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());
  7. 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
  8. Foreach var array = [{ name: 'bla' }, { name:

    'bla2' }, { name: 'bla3' }]; for(index in array) { console.log(array[index].name); }
  9. Toda função é um objeto Todo objeto contém um link

    para outro objeto chamado prototype
  10. 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());
  11. 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());
  12. Backend vs Frontend var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ url: root

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

    method: 'GET' }).then(function(data) { console.log(data); });
  14. 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
  15. jQuery - DOM Ready $(function() { //código vai aqui });

    Todo HTML vira o DOM quando abrimos uma página no browser
  16. 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);
  17. 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
  18. 5