Aula de introdução a JS

Transcript

1. INTRODUÇÃO A JAVASCRIPT COM REACT Professor: Nélio Frazão Email: neliofrazac@gmail.com
2. SOBRE NÉLIO Nélio Frazão, Frontend, com 12 anos de experiência. Possui MBA em Marketing Digital, pela Faculdade Estácio/Idez em /João Pessoa/PB. e especialista em Desenvolvimento de Aplicações para WEB pelo UNIPÊ
3. AVALIAÇÃO
4. DOM(DOCUMENT OBJECT MODEL) Document: Acessa os documentos HTML. Elements:São todas as tags escritas nos arquivos HTML e XML que se transformam em elementos da árvore DOM Texts: É o texto que vai entre os elementos. Todo o conteúdo das tags. Attributes: É a junção de todos atributos para um nó específico.
5. JAVASCRIPT Segundo a wikipedia JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide Web
6. TIPAGEM Strings Uma String nada mais é que texto puro. Numbers São os números, seja eles integer, float, double etc. Booleans São os operadores booleanos (true ou false) Arrays É uma estrutura de dado para armazenar uma coleção de valores, sendo eles de qualquer tipo. Objects Conjunto de atributos aninhados a uma variável denomina-se um objeto. Functions um conjunto de instruções que executa uma tarefa ou calcula um valor
7. VAR, LET, CONST var aula = 'javaScript' let professor = 'Nélio' const spa = 'React'
8. VAR, LET, CONST { var aula = 'javaScript' } console.log(aula) // 'javaScript' { let aula = 'javaScript' } console.log(aula) // Uncaught ReferenceError: aula is not defined
9. VAR, LET, CONST var aula = 'javaScript' var aula = 'Java' console.log(aula) // 'java' let aula = 'javaScript' let aula = 'Java' console.log(aula) //Uncaught SyntaxError: Identifier 'aula' has already been declared
10. HOSTING O ato de içar ou erguer, puxar para cima. Hosting é um comportamento do javaScript de mover declarações para o topo do escopo.
11. ARRAYS const comida = [] comida[0] = 'Pizza' comida[1] = 'Batata Frita' comida[2] = 'Hambúrguer' console.log(comida) ["Pizza", "Batata frita", "Hambúrguer"] Novo Array Atribuindo valores
12. ARRAYS const comida = ['Pizza', 'Batata frita', 'Hambúrguer'] console.log(comida) ["Pizza", "Batata frita", "Hambúrguer", "Pão"] comida.push('Pão')
13. OBJETOS const pessoa = {} pessoa.nome = 'João' pessoa.sobrenome = 'Silva' pessoa.idade = 34 console.log(pessoa) {nome: "João", sobrenome: "Silva", idade: 34} Novo Objeto Atribuindo valores Chave Valor
14. ARRAY DE OBJETOS const pessoas = [ { nome: 'João', sobrenome: 'Silva', idade: 34, }, { nome: 'Maria', sobrenome: 'Joaquina', idade: 30, } ]
15. DESTRUCTURING const pessoa = { nome: 'João', sobrenome: 'Silva', idade: 34, } console.log(pessoa.nome) // João console.log(pessoa.sobrenome) // Silva console.log(pessoa.idade) // 34 const {nome, sobrenome, idade } = pessoa console.log(nome) // João console.log(sobrenome) // Silva console.log(idade) // 34
16. DESTRUCTURING const comida = ['Pizza', 'Batata frita', 'Hambúrguer'] console.log(comida[0] // Pizza console.log(pessoa[1]) // Batata frita console.log(pessoa[2]) // Hambúrguer const [pizza, batatFrita, hamburguer ] = comida console.log(pizza) // Pizza console.log(batatFrita) // Batata frita console.log(hamburguer ) // Hambúrguer const [, batatFrita, hamburguer ] = comida console.log(batatFrita) // Batata frita console.log(hamburguer ) // Hambúrguer const [,, hamburguer ] = comida console.log(hamburguer ) // Hambúrguer
17. FUNÇÕES function somaNumeros(valor1, valor2) { return valor1 + valor2 } Palavra reservada Nome da função Parâmetros Corpo da função
18. FUNÇÕES somaNumeros(10, 12) //22 const pegaResultadoSoma = somaNumeros(10, 12) Armazenando o resultado em uma constante
19. FUNÇÕES const pegaResultadoSoma = somaNumeros(10, 12) function subtraiNumeros(valor1, valor2) { return valor1 - valor2 } subtraiNumeros(pegaResultadoSoma , 5)
20. FUNÇÕES ANÔNIMA const somaNumeros = function(valor1, valor2) { return valor1 + valor2 } console.log(somaNumeros(10, 12))
21. ARROW FUNCTIONS const somaNumeros = (valor1, valor2) => { return valor1 + valor2 } console.log(somaNumeros(10, 12)) //22 const somaNumeros = (valor1, valor2) => ( valor1 + valor2 ) console.log(somaNumeros(10, 12)) //22 const somaNumeros = (valor1, valor2) => valor1 + valor2 console.log(somaNumeros(10, 12)) //22
22. ARROW FUNCTIONS const escreveMeuNome = nome => `Me chamo ${nome}` console.log(nome('Nélio')) //Me chamo Nélio
23. FUNCTIONS E DESTRUCTURING const somaNumeros = ({ valor1, valor2, valor3 }) => valor1 + valor2 + valor3 const pegaValor = somaNumeros({ valor1: 10, valor2: 20, valor3: 20, }) console.log(pegaValor) // 50
24. WEB COMPONENTS Componentes Web são um conjunto de normas atualmente sendo produzidos por engenheiros do Google como também uma especificação da W3C que permitem a criação de componentes reutilizáveis em documentos e aplicações web. A intenção por trás deles é trazer a engenharia de software baseada em componentes para a web
25. SPA • Aplicações de páginas únicas • Client-side • Load • Router
26. REACT React é uma biblioteca JavaScript para construção de interfaces de usuário.
27. OBRIGADO neliofrazac@gmail.com http:/ /www.linkedin.com/in/neliofrazao