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.

Curso JavaScript - Aula de Introdução como Programar

38 views

Published on

Aula introdutória ao JavaScript. Conceitos básicos como variáveis, funções, tipos de dados e eventos.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Curso JavaScript - Aula de Introdução como Programar

  1. 1. • Histórico e Conceito. • Sintaxe e Estrutura da Linguagem. • Associação com HTML: – <script type=“text/javascript”> • Objetos da Linguagem: – String, Math, RegExp • Funções Internas do JavaScript.
  2. 2. • Maneira implementada pelos navegadores para manipulação dinâmica do HTML: – DOM • Pode-se manipular as CSS com JavaScript – Propriedade style • É possível manipular requisições: – Ajax • Frameworks bem desenvolvidas e práticas.
  3. 3. • Desenvolvida por Bredan Eich (1995) quando trabalhava na Netscape. – Nome inicial era: LiveScript. – Versão atual: 1.8.5 • Derivada da ECMAScript: – Linguagem derivada da ECMA. • Padrão internacional. • Veja o Apêndice “Apêndice - Ecma-262.pdf”. • Existem outras implementações: – JScript da Microsoft: pouco usada.
  4. 4. • O nome mudou: LiveScript para JavaScript • Porque? – Quando do navegador Netscape foi lançado (1995) com o suporte a Applets da linguagem Java, numa jogada de marketing, mudaram o nome para popularizar a linguagem. • Consequência: – Consolidação errônea de que JavaScript é uma linguagem derivada da linguagem Java.
  5. 5. • Interpretada essescialemente pelo navegador e em alguns casos pelo servidor. – Foco do estudo: client-side. • Tipagem Dinâmica. • Case Sensitive. • Baseada em objetos – Herança baseada em protótipos • Avaliação em tempo de execução
  6. 6. Foco: JavaScript não obstrutivo
  7. 7. • Tag <script>, para associação e incorporação de códigos JavaScript • Geralmente filha de <head> com os atributos: – type: geralmente “text/javascript”. – scr: localização do script. – charset: opcional, pode ser UTF-8, ou ISO-8859-1 – async: para scripts executados assincronicamente.
  8. 8. <script type=“text/javascript” src=“dir/arquivo.js”></script> <script type=“text/javascript”> var nomes = [‘Zé’, ‘Zina’, ‘Jão’]; </script>
  9. 9. • Caso o navegador não tenha suporte para JavaScript, ou ele esteja desativado: – Utiliza-se a tag <noscript> – Mensagem informando que os scripts não estão habilitados. – É interessante utilizar. Mas lembre-se é melhor ainda se o JavaScript não interferir na navegação: não obstrutivo.
  10. 10. <script type=“text/javascript”> var nomes = [‘Zé’, ‘Zina’, ‘Jão’]; </script> <noscript> Seu navegador não tem suporte para JavaScript. </noscript>
  11. 11. Regras para nomear
  12. 12. • Nome de qualquer variável, constante, função, objeto, propriedade, método ou coleção: – O primeiro caráter deve ser uma letra ou uma underscrore “_”. – Os caracteres seguintes podem ser letras, números ou underscore. – Não deve haver espaço entre os caracteres. – O nome não deve ser igual a uma palavra reservada da linguagem.
  13. 13. Trabalhando com valores
  14. 14. var nome; nome = “Zé”; nome = 18; Não declarei tipo e alterei o tipo de dado da variável: Tipagem Dinâmica!
  15. 15. const idade = 18; Não declarei tipo e não poderei mais alterar o valor de idade.
  16. 16. • Conjunto de valores associados em uma única variável. var nomes = new Array(“Jão”, “Zé”, “Creuza”); var nomes = [“Jão”, “Zé”, “Creuza”]; var nomes[“homem”] = [“Jão”, “Zé”]
  17. 17. Aritméticos, lógicos e comparação
  18. 18. • Tipo de Operadores: – Aritméticos. – Lógicos e Relacionais. – Bit-a-Bit ou Bitwise. – Atribuição Composta. – Outros operadores. • Ver apêndice: “Operadores JavaScript.pdf”
  19. 19. Comandos para Programar
  20. 20. // Comentário de uma linha /* Comentário de múltiplas linhas */ /** Formato de comentário * recomendado para métodos e * propriedades de Objetos **/
  21. 21. if(nome == “Zé”){ // bloco de instruções } else // else “opcional” switch(nome){ case ‘Zé’: // bloco de instruções. break; case ‘Jão’: // bloco de instruções. break; default: // não caiu e nenhum case. break; }
  22. 22. for(var i=0; i<10; i++) { // instruções. } for(argumento in objeto){ //instrução; } while(i != 10) { i++; } do { i++; } while(i != 10);
  23. 23. function getNome(){ return this.nome; } function setNome(nome = ‘Zé’) { this.nome = nome; }
  24. 24. try { // tetando executar uma instrução } catch(Exception e) { alert(e.getMessage()); // tento outra instrução. } finally { alert(‘Deu tudo errado!’); } if(valor == 0) { throw new Exception(“Não pode ser Zero!”); }
  25. 25. Muito mais do que você Pensa!
  26. 26. • Objetos podem ser divididos em quatro grupos: – Intrínsecos. – Criados pelo usuário. – Objetos da entidade executora (ex: Navegador). – Objetos Embutidos
  27. 27. • Encapsulamento • Herança • Poliformismo • Interface de Objetos: – Classes: C++, Java, PHP – Protótipos: JavaScript Considere um objeto Animal. Gato é um animal, logo Gato pode herdar funcionalides de Animal. Gato pode modificar essas funcionalidades – poliformismo – e implementar novas em tempo de execução: protótipos!
  28. 28. function Gato (nome, raca) { this.nome = nome; this.raca = raca; this.brincar = function() {} this.comer = function() {} } var Bolota = new Gato(‘Bolota’, ‘Persa’); Bolota.brincar(); var Bolota = {}
  29. 29. Objetos intrínsecos da linguagem
  30. 30. • Array • Boolean • Date • Error • Function • Global • Math • Number • Objetct • RegExp • String
  31. 31. www.tiago.blog.br tiago@tiago.blog.br

×