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
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
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
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
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
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
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
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
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
É 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
É 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
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
+, -, * (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
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
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
“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
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
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
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
.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
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
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
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
jessilyneh
akihiro_kokubo
csswizardry
kneath
samlambert
mraible
andyhume
deanohume
lara
axbom
nmsamuel
jonrohan
aleyda
