JAVASCRIPT 101 EM UMA HORA JÉSSICA FÉLIX (JESSILYNEH)

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

Java JavaScript JAVASCRIPT 101 EM UMA HORA @jessilyneh

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

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

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

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

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

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

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

O QUE É O DOM JAVASCRIPT 101 EM UMA HORA @jessilyneh

O QUE É O DOM - ANALOGIA DA CASA Document Element

atribute class, id, href, src JAVASCRIPT 101 EM UMA HORA @jessilyneh

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

Java JavaScript JAVASCRIPT 101 EM UMA HORA @jessilyneh

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

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

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

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

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

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

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

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

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

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

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

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

Angular Em Angular, um componente é composto por uma classe TypeScript e um template HTML. JAVASCRIPT 101 EM UMA HORA @jessilyneh

React Em React, um componente pode ser uma função JavaScript que retorna JSX. JAVASCRIPT 101 EM UMA HORA @jessilyneh

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

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

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

HTTPS://SPEAKERDECK.COM/JESSILYNEH

@JESSILYNEH

obrigada <3 in/jessilyneh/ @jessilyneh