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

javascript 101 em uma hora

Jessilyneh
January 19, 2024
76

javascript 101 em uma hora

Jessilyneh

January 19, 2024
Tweet

Transcript

  1. Eu sou a Jess Desenvolvedora senior, atuo como tech lead

    no maior banco da América Latina Trabalhei 1 ano como I.T. Architect no maior banco da Zona do Euro Tech Lead voluntária na ONG Lacrei Saude há quase dois anos Instrutora do curso "desvendando a Sintaxe do Javascript" na Linux Tips Organizadora do Nerdzão e co-organizadora da conferência CityJS no Brasil. Co-host do podcast Devs Na Estrada Compartilho conteúdo no twitter, youtube e dev.to JAVASCRIPT 101 EM UMA HORA @jessilyneh
  2. AS BASES Variáveis e Tipos de Dados Operadores Estruturas de

    Controle Funções Objetos e Arrays Manipulação do DOM (vamos começar por aqui) Eventos Debug Princípios básicos de programação assíncrona (Bonus) JAVASCRIPT 101 EM UMA HORA @jessilyneh
  3. CONCEITOS ECMAScript é como o um "desenho técnico" para construir

    linguagens de script. Javascript é uma linguagem de programação que segue a especificação ECMAScript @jessilyneh Mozilla Docs é onde você aprende usar o JavaScript ECMA 262 é a especificação que explica como o JavaScript deve ser e o que deve ter TC39 é o comitê técnico responsável pela manutenção e atualizações do ECMAScript Javascript é suportado por padrão por quase todos os navegadores
  4. Quem veio primeiro? ECMAScript ou o Javascript? JAVASCRIPT 101 EM

    UMA HORA 1995 Anos 90 1999 anos 2000 2009 2015 JavaScript foi criado por Brendan Eich como uma linguagem de programação para a web, inicialmente chamada de "Mocha" O Internet Explorer (IE) da Microsoft começou a fazer suas próprias implementações da linguagem, como o JScript. O Netscape iniciou o padrão ECMAScript para guiar o desenvolvimento do JavaScript. O IE dominou o mercado, mas surgiram outros navegadores, como Firefox, Chrome, Safari e Opera. O ECMAScript lançou sua 5ª edição, com recursos como o modo estrito. O ECMAScript 6 foi lançado com grandes mudanças e melhorias. O ECMAScript continua evoluindo, com novas versões sendo lançadas periodicamente atual @jessilyneh
  5. O que é ECMAScript e o que tem a ver

    com o Javascript? JAVASCRIPT 101 EM UMA HORA Javascript ECMAScript DOM BOM Ambiente de desenvolvimento: Web/navegador ECMAScript® Language Specification define toda a lógica para criação e edição de objetos, arrays, números, etc... DOM (Document Object Model) possibilita a comunicação com documentos HTML/XML (por exemplo, document.getElementById('id');). BOM (Browser Object Model): hierarquia de objetos do navegador (por exemplo, objeto de localização, objeto de histórico, elementos de formulário). API's do Navegador Funcionalidades Experimentais @jessilyneh
  6. E o ECMAScript fora do navegador? JAVASCRIPT 101 EM UMA

    HORA Javascript ECMAScript Bibliotecas do Node.js Funcionalidade s Experimentais Módulos do Node.js Acesso ao sistema de arquivos Ambiente de desenvolvimento: Node.js ECMAScript é a especificação que define a linguagem JavaScript como um todo, incluindo a sintaxe, recursos e estrutura. Tanto o Node.js Core quanto os módulos e bibliotecas externas são implementados em conformidade com essa especificação, permitindo que o JavaScript no servidor tenha uma base consistente e compartilhe a mesma linguagem fundamental em todo o ecossistema. Node.js Core Runtime @jessilyneh
  7. ES5 e ES6 JAVASCRIPT 101 EM UMA HORA ES5 é

    uma abreviação de ECMAScript 5 e também conhecido como ECMAScript 2009, foi a primeira grande revisão do JavaScript. ES6 é a sexta edição do padrão ECMAScript é ES6 ou ECMAScript 6. Também é conhecido como ECMAScript 2015. É o padrão adotado pela maioria dos navegadores, atualmente. Foi a segunda maior revisão do JavaScript. @jessilyneh
  8. O QUE É O DOM Úma representação estruturada de uma

    página web. É uma "árvore" ou um "mapa" que permite aos programas (como o JavaScript) interagir e manipular o conteúdo, estrutura e estilo de uma página web. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  9. O QUE É O DOM - ANALOGIA DA CASA Document

    <html> Element <h1> <p> <a> atribute class, id, href, src JAVASCRIPT 101 EM UMA HORA @jessilyneh
  10. console.log( ) é usado para exibir mensagens no console, como

    realizar testes, CONCEITOS DOM é uma estrutura de arvore que o JavaScript consegue manipular elementos HTML @jessilyneh debug ou depurador executa a aplicação passo a passo para localizar comportamentos errados Develper Tools é onde conseguimos executar código no console do navegador prompt( ) é uma caixa de diálogo que solicita ao usuario uma pequena quantidade de texto. alert( ) é uma caixa de diálogo que com conteúdo especificado e botão de ok
  11. Java JavaScript O que é É como blocos de lego

    É como massa de modelar Facilidade de uso Tem muitas regras, é difícil no começo mas é previsivel É flexível, é fácil no começo. Se não souber usar, a flexibilidade atrapalha Executar precisa traduzir (compilar) o que escreveu para uma linguagem que o computador entende. Pode usar direto. O computador (ou navegador) entende sem a precisar de tradução DIFERENÇAS ENTRE JAVA E JAVASCRIPT @jessilyneh JAVASCRIPT 101 EM UMA HORA
  12. Python JavaScript O que é É como blocos de madeira

    É como massa de modelar Facilidad e de uso É flexível e fácil de usar É flexível, é fácil no começo. Se não souber usar, a flexibilidade atrapalha Executar pode ser traduzido para uma linguagem que o computador entende para melhor desempenho. Pode usar direto. O computador (ou navegador) entende sem a precisar de tradução JAVASCRIPT E PYTHON @jessilyneh JAVASCRIPT 101 EM UMA HORA
  13. boolean é usado para verdadeiro e falso, para validar resultado

    de comparação. SINTAXE JAVASCRIPT Tipos primitivos tipos básicos de dados a partir dos quais todos os demais são construídos null representa nada, vazio ou valor desconhecido. undefined quando um valor de variável não é atribuído strings para letras, numeros ou caracteres especiais, sempre entre aspas numbers recebe numerosm tanto os inteiros como de ponto flutuante e NaN @jessilyneh
  14. Ordem das operações, com o acronimo PEMDAS Operadores aritméticos sendo

    +, -, * (multiplicação) e / (divisão) @jessilyneh Condicionais, determinar quando um trecho de código vai ser executado ou não. if ( ) Repetições executa uma tarefa de forma repetida com base em uma condição. for ( ) Operadores Lógicos, sendo & - AND, | - OR, ^ - XOR, ~ - NOT Coerção de tipos vai converter automaticamente o tipo de variáveis, numa operação SINTAXE JAVASCRIPT @jessilyneh
  15. VAR para escopo de função e tenha em mente o

    hoisting. Pode ser retribuída e redefinida Variáveis são valores nomeados que podem armazenar um tipo de dado no JavaScript LET está disponível apenas no bloco em que foi declarada, pode ser retribuída CONST escopo de bloco, não pode ser reatribuída depois de definida Escopo contexto atual do código, que determina quais variáveis podem ser acessadas Hoisting pode usar variáveis e funções antes de elas serem declaradas. SINTAXE JAVASCRIPT @jessilyneh
  16. Ciclode vida de uma aplicação JavasScript Carrega o código fonte

    JavaScript na aplicação Análise do código fonte Compila o código fonte em código de máquina Otimização de código Criação do objeto principal e escopo global Executa o código gerenciamento de eventos fim da execução JAVASCRIPT 101 EM UMA HORA @jessilyneh
  17. Ciclo de vida de uma aplicação JavaScript David Flanagan -

    “JavaScript: O guia definitivo” Criação do objeto global (Global Object): Em Javascript do lado do cliente, o objeto Window também é o objeto Global. O objeto Window está no topo do encadeamento de escopo e suas propriedades e métodos são efetivamente variáveis globais e funções globais. O objeto Window representa uma janela, guia ou quadro do navegador. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  18. Ciclo de vida de eventos JavaScript A cada evento, a

    ação se propaga através do Document Object Model (DOM). O DOM possui uma estrutura em árvore, com elementos irmãos, filhos e pais. Os eventos sempre percorrem a árvore em uma sequência. https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Um evento pode ser tão simples quanto hover ou click. Quando os eventos acontecem, existem listeners para executar a funcionalidade como desejada. Representação da Árvore DOM JAVASCRIPT 101 EM UMA HORA @jessilyneh
  19. Ciclo de vida de eventos JavaScript https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Uma função JavaScript

    conhecida como event handler é ativada quando um evento ocorre. Um elemento pode esperar e “ouvir” a ocorrência do evento adicionando um event listener à interface responsiva. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  20. ESTRUTURA DE DADOS Como vou realizar uma busca nestes dados?

    Preciso salvar estes dados ordenados? Qual a relação entre os dados armazenados? Qual a frequência de incluir, atualizar e remover dados? Qual a quantidade? Qual o tipo do dado? JAVASCRIPT 101 EM UMA HORA @jessilyneh
  21. Pilha, Ultimo a Entrar, Primeiro a Sair. .push( ) e

    .pop( ) CONCEITOS Arrays arranjos de valores (containers) que podem conter outros valores. Objetos, contém atributos ( o que é) e métodos (o que faz) Cadeia de protótipos,objetos herdam propriedades e métodos de outros objetos. Fila, Primeiro a Entrar, Primeiro a Sair. .push( ) e .shift( ) Lista inserção, remoção e acesso a elementos em qualquer posição, não apenas no início ou no fim. @jessilyneh
  22. Angular React Vue O que é Framework Biblioteca Framework Propósito

    Aplicações SPA completas Interface de usuário flexível e reutilizável Balancear facilidade e flexibilidade Empresas que usam Google, IBM, Microsoft Facebook, Airbnb, Netflix Alibaba, Xiaomi, Adobe Escalabilidade Alta Alta Alta ANGULAR , REACT E VUE JAVASCRIPT 101 EM UMA HORA @jessilyneh
  23. Angular Em Angular, um componente é composto por uma classe

    TypeScript e um template HTML. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  24. React Em React, um componente pode ser uma função JavaScript

    que retorna JSX. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  25. Vue Em Vue, um componente pode ser definido em um

    arquivo .vue, que contém uma seção de template, uma seção de script e uma seção de estilo. JAVASCRIPT 101 EM UMA HORA @jessilyneh
  26. A programação orientada a objetos (OOP) organiza o código em

    unidades independentes, os "objetos". Cada objeto é um "exemplar" de uma "classe", que seria o "modelo", definindo as propriedades e métodos. ORIENTAÇÃO A OBJETOS JAVASCRIPT 101 EM UMA HORA @jessilyneh
  27. As funções podem ser atribuídas a variáveis, passadas como argumentos

    para outras funções e retornadas como valores. -imutabilidade: objeto criado não pode ser modificado - ausência de efeitos colaterais: qualquer mudança no estado do sistema ou qualquer interação com o mundo exterior que ocorre dentro de uma função PROGRAMAÇÃO FUNCIONAL @jessilyneh