Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hands On JavaScript

306 views

Published on

Curso de Hands on JavaScript 27/05/2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hands On JavaScript

  1. 1. Hands On JavaScript Professor: Anderson Luís Furlan
  2. 2. Web-Design Front-end Back-end Desenvolvimento Web
  3. 3. Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw Web Design
  4. 4. HTML, CSS e JavaScript Front-end
  5. 5. Java, C#, PHP, Python, Ruby e… JavaScript! Back-end
  6. 6. Front-end - Linguagens
  7. 7. HTML, CSS e JavaScript
  8. 8. HTML
  9. 9. HTML ✓ HTML - HyperText Markup Language ✓ Linguagem de Marcação de Hipertexto. ✓ Motivação: Criar páginas para Web através de marcações chamadas de TAGS ✓ Padrão da Web ✓ Responsável pela ESTRUTURA em uma página Web ✓ Criada em 1980 por Tim Berners-Lee
  10. 10. HTML ✓ Títulos, subtítulos, listas ordenadas, não ordenadas, blocos de códigos, links, entre outros ✓ O HTML5 é a última versão da linguagem ✓ Inclusão de recursos nativos de áudio e vídeo ✓ Novas tags estruturais: <header>, <nav>, <section>, <article>, <main>, <aside> e <footer>. ✓ Separação completa do CSS: <font>, <i>, <b>, <center>, entre outros não devem ser mais utilizados
  11. 11. HTML
  12. 12. CSS
  13. 13. CSS ✓ CSS - Cascade Style Sheets ✓ Linguagem de folhas de estilo ✓ Responsável pelo ESTILO de uma página da Web. ✓ Define o layout de apresentação, as cores, fontes, bordas, espaçamentos, animações, entre outros. ✓ A versão 3 da linguagem CSS permite animações através de regras, sem a necessidade de programar em JavaScript ou plug- ins para tal.
  14. 14. CSS ✓ Pode ser escrito por meio da tag style ou por arquivo ✓ Um arquivo CSS é um conjunto de regras ✓ Uma regra é uma coleção de propriedades de estilo que serão aplicados a alguns conjuntos de elementos HTML ✓ A estilização pode ser por: ✓ Elemento ✓ Classe ✓ ID
  15. 15. CSS
  16. 16. JavaScript
  17. 17. JavaScript ✓ JavaScript ou ECMAScript foi criada por Brendan Eich ✓ Anteriormente era considerada uma linguagem de script, hoje é considerada uma linguagem de programação interpretada ✓ Atualmente está na versão 6 também conhecida como ECMAScript2015 ✓ Núcleo da linguagem: operadores, estruturas de controle, de repetição e declarações ✓ Biblioteca padrão de objetos, como: Array, Date, e Math
  18. 18. JavaScript ✓ A linguagem pode ser estendida para uma variedade de propósitos: Lado cliente ou lado servidor ✓ Usada para criar páginas web interativas, jogos, aplicações servidoras, aplicativos e aplicações desktop
  19. 19. JavaScript ✓ O lado cliente do JavaScript ✓ Objetos para controlar um navegador web ✓ Manipular Document Object Model (DOM) ✓ Eventos ✓ Formulários ✓ Jogos ✓ Gráficos
  20. 20. JavaScript
  21. 21. JavaScript ✓ O lado do servidor do JavaScript: ✓ Criação de web services ✓ Acesso à banco de dados ✓ Manipulação de arquivos
  22. 22. Como usar? ✓ Dentro da tag <script></script> ✓ Em um arquivo com a extensão .js ✓ Importar em <script src=“arquivo.js”></script>
  23. 23. Hello World, JavaScript!
  24. 24. Tipos ✓ Case-sensitive ✓ Comentários C-like: //, /* ... */ ✓ Declaração de variáveis ✓var ✓ let ✓const  Começam _, letra ou $, sendo que os próximos caracteres podem ser números
  25. 25. Tipos
  26. 26. Tipos ✓ Tipos primitivos ✓Boolean: true ou false ✓null ✓undefined ✓Number ✓String ✓Object
  27. 27. Tipos ✓ Array ✓ Object
  28. 28. Tipos ✓ Object
  29. 29. Conversões ✓ Conversões ✓ Tipagem dinâmica
  30. 30. Conversões ✓ Conversões
  31. 31. Document ✓ title ✓ createElement ✓ createTextNode ✓ getElementsByTagName ✓ getElementsByClassName ✓ getElementyById ✓ querySelector ✓ querySelectorAll ✓ write ✓ writeln
  32. 32. Window - Propriedades ✓ fullScreen ✓ history ✓ location ✓ localStorage ✓ name ✓ navigator ✓ outerHeight ✓ outerWidth ✓ pageXOffset ✓ pageYOffset ✓ sessionStorage ✓ scrollbars
  33. 33. Window - Métodos ✓ alert ✓ back ✓ atob ✓ btoa ✓ clearInterval ✓ clearTimeout ✓ close ✓ confirm ✓ forward ✓ home ✓ prompt ✓ resizeTo ✓ scrollTo ✓ setInterval ✓ setTimeout
  34. 34. Console ✓ log ✓ info ✓ time ✓ timeEnd ✓ warn ✓ debug ✓ trace
  35. 35. Eventos ✓ onblur ✓ onerror ✓ onfocus ✓ onchange ✓ onclick ✓ ondblclick ✓ ondrag ✓ ondragend ✓ ondragenter ✓ ondragexit ✓ ondragleave ✓ ondragover ✓ ondragstart ✓ onkeydown ✓ onkeyup ✓ onkeypress ✓ onload ✓ onmousedown ✓ onmousemove ✓ onmouseout ✓ onmouseover ✓ onmouseup ✓ onscroll
  36. 36. Calculadora em JavaScript
  37. 37. JavaScript ✓ A partir do JavaScript as páginas deixaram de ser estáticas para serem dinâmicas ✓ Validações cliente, diminuindo a carga de requisições para o servidor
  38. 38. JavaScript ✓ Formas de integração • Em linha -> diretamente no HTML • Incorporado na tag <script> • Externo ✓ JavaScript suporta Programação Orientação a Objetos, Imperativa e Funcional ✓ É uma linguagem de tipagem fraca -> declaração por meio da palavra-chave var e let
  39. 39. JavaScript ✓ Number.MAX_VALUE/Number.MIN_VALUE ✓ Outros tipos importantes: Math, Date, String, RegExp e Array Fonte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
  40. 40. JavaScript
  41. 41. Lista de Tarefas

×