JS Basics

Slides for a workshop I gave about Javascript basics.

Transcript

1. BASICS
2. glauberramos.github.io/jsbasics
3. High level Dynamic JavaScript Untyped Interpreted
4. Primitives and Objects var thrutly = true; var falsy = false; var name = ‘blablabla’; var number = 1; var person = { name: ‘blablabla’ } Booleans Strings Numbers Objects
5. Functions everywhere! function bla() { return 1; } bla(); // 1 function sum(a, b) { return a + b; } sum(1 , 2); // 3
6. Functions everywhere! var bla = function() { return 1; } bla(); // 1 var sum = function(a, b) { return a + b; } sum(1 , 2); // 3
7. Exercício 1 Modificar a função “say” para receber um parámetro e retornar uma string “Person says {parametro}”.
8. 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
9. 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());
10. 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
11. If var isActive = true; if (isActive) { console.log('Está ativo!'); } else { console.log('Está inativo'); }
12. For for (i=0; i < 10; i++) { console.log(i + 1); }
13. Foreach var array = [{ name: 'bla' }, { name: 'bla2' }, { name: 'bla3' }]; for(index in array) { console.log(array[index].name); }
14. Toda função é um objeto Todo objeto contém um link para outro objeto chamado prototype
15. 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());
16. Todas propriedades são acessiveis É possível modificar a “classe” dinamicamente
17. 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());
18. Temos métodos privados e métodos públicos
20. Exercício 3 Criar 2 pessoas diferentes e imprimir seus nomes na tela
21. Backend vs Frontend var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ url: root + '/users/1', method: 'GET' }).then(function(data) { console.log(data); });
22. Callback var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ url: root + '/users/1', method: 'GET' }).then(function(data) { console.log(data); });
23. 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
24. jQuery - Funções http://oscarotero.com/jquery/
25. jQuery - DOM Ready $(function() { //código vai aqui }); Todo HTML vira o DOM quando abrimos uma página no browser
26. Exercício 4 http://codepen.io/glauberramos/pen/NGbeLP
27. 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);
28. Angular Structure
29. 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
30. Exercício 5 http://codepen.io/glauberramos/pen/dYOaLP
31. 6 Dicas
33. 1 APRENDA VANILLA JS
34. APRENDA OOP JS 2
35. USE O CONSOLE 3
36. USE MICRO FRAMEWORKS microjs.com 4
38. AUTOMATIZE WORKFLOW 6
40. 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