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.

JavaScript: Introdução e Operadores (aula 1)

1,393 views

Published on

Curso de Extensão em Desenvolvimento Web - Módulo III: JavaScript.
Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

  • Be the first to comment

JavaScript: Introdução e Operadores (aula 1)

  1. 1. Aula 1:
  2. 2. prof. Gustavo Zimmermann | contato@gust4vo.com introdução
  3. 3. prof. Gustavo Zimmermann | contato@gust4vo.com Linguagens
  4. 4. prof. Gustavo Zimmermann | contato@gust4vo.com Uma linguagem de programação é um método padronizado para comunicar instruções para um computador. ” “ JavaScript – Introdução e Operadores Linguagens
  5. 5. prof. Gustavo Zimmermann | contato@gust4vo.com Tipos de Linguagens •Linguagem de Marcação ex.: HTML, XML, ... •Linguagem de Formatação ex.: CSS •Linguagem de Script ex.: JavaScript, ActionScript, ... •Linguagem de Programação ex.: ASPX, JSP, PHP, Object Pascal, C#, ... JavaScript – Introdução e Operadores Linguagens
  6. 6. prof. Gustavo Zimmermann | contato@gust4vo.com Linguagem de Programação Linguagem de Script Vs. JavaScript – Introdução e Operadores Linguagens
  7. 7. prof. Gustavo Zimmermann | contato@gust4vo.com
  8. 8. prof. Gustavo Zimmermann | contato@gust4vo.com
  9. 9. prof. Gustavo Zimmermann | contato@gust4vo.com Linguagem de Programação Linguagem de Script
  10. 10. prof. Gustavo Zimmermann | contato@gust4vo.com SERVER-SIDE Client-Side Vs. JavaScript – Introdução e Operadores Linguagens
  11. 11. prof. Gustavo Zimmermann | contato@gust4vo.com Client-Side A linguagem que o navegador entende :) JavaScript – Introdução e Operadores Linguagens
  12. 12. prof. Gustavo Zimmermann | contato@gust4vo.com Client-Side Linguagem de Marcação Linguagem de Formatação Linguagem de Script JavaScript – Introdução e Operadores Linguagens
  13. 13. prof. Gustavo Zimmermann | contato@gust4vo.com Server-Side A linguagem que o navegador NÃO entende :( JavaScript – Introdução e Operadores Linguagens
  14. 14. prof. Gustavo Zimmermann | contato@gust4vo.com NAVEGADOR
  15. 15. prof. Gustavo Zimmermann | contato@gust4vo.com NAVEGADOR
  16. 16. prof. Gustavo Zimmermann | contato@gust4vo.com NAVEGADOR
  17. 17. prof. Gustavo Zimmermann | contato@gust4vo.com Client-Side JavaScript – Introdução e Operadores Linguagens
  18. 18. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Linguagens Server-Side
  19. 19. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript O INICIO
  20. 20. prof. Gustavo Zimmermann | contato@gust4vo.com A origem do CSS JavaScript – Introdução e Operadores JavaScript – o inicio Brendan Eich Inicialmente batizada de Mocha, posteriormente teve seu nome mudado para LiveScript e por fim JavaScript. LiveScript foi o nome oficial da linguagem no lseu lançamento na versão beta do navegador Netscape 2.0 em setembro de 1995, mas teve seu nome mudado em um anúncio conjunto com a Sun Microsystems em dezembro de 1995 quando foi implementado no navegador Netscape versão 2.0B3. 1995
  21. 21. prof. Gustavo Zimmermann | contato@gust4vo.com JScript JavaScript – Introdução e Operadores JavaScript – o inicio Bill Gates Microsoft desenvolveu um dialeto compatível com a linguagem de nome JScript para evitar problemas de marca registrada. JScript adicionou novos métodos para consertar métodos do Javascript relacionados a data que apresentavam problemas[carece de fontes]. JScript foi incluído no Internet Explorer 3.0, liberado em Agosto de 1996. 1996 JScript é uma variação do JavaScript e usado em Active Server Pages. Essa linguagem de script permite a utilização de controles ActiveX. O Internet Explorer é capaz de interpretar JScript em páginas da Web. JScript é utilizado também na criação de scripts para Messenger Plus! Live.
  22. 22. prof. Gustavo Zimmermann | contato@gust4vo.com Submissão JavaScript – Introdução e Operadores JavaScript – o inicio Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para Ecma internacional como candidato a padrão industrial e o trabalho subsequente resultou na versão padronizada chamada ECMAScript. 1996
  23. 23. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores JavaScript – o inicio Bibliotecas Famosas
  24. 24. prof. Gustavo Zimmermann | contato@gust4vo.com Onde entra o JavaScript?
  25. 25. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Onde entra o JavaScript? O desenvolvimento modular 01. SEMÂNTICA 02. ESTILOS 03. INTERATIVIDADE
  26. 26. prof. Gustavo Zimmermann | contato@gust4vo.com •Manipular Conteúdo Apresentação Navegador •Interagir Usuário Formulários Linguagens dinâmicas JavaScript – Introdução e Operadores Onde entra o JavaScript? Onde entra o JavaScript?
  27. 27. prof. Gustavo Zimmermann | contato@gust4vo.com Exemplos
  28. 28. prof. Gustavo Zimmermann | contato@gust4vo.com Hello World!
  29. 29. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Hello World! <!DOCTYPE html> <html lang="pt-BR"> <head> <title>Olá Mundo!</title> <script> alert("Hello World!"); </script> </head> <body> <h1>Curso de JavaScript</h1> </body> </html>
  30. 30. prof. Gustavo Zimmermann | contato@gust4vo.com Browsers
  31. 31. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers “JavaScript é uma linguagem de script orientada a objeto que se destina a manipular os elementos de um Browser, fazendo com que o usuário possa interagir com essas páginas da web.”
  32. 32. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers Interpreta Oferece referências aos elementos (objetos) presentes no Browser BROWSER
  33. 33. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers Objetos do Browser Fazendo um paralelo Cachorro Objeto cor, altura, peso, raça Atributos (no JavaScript eu chamo de propriedades) comer( ), latir( ), dormir( ) Métodos (ações)
  34. 34. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers Objetos do Browser Fazendo um paralelo Cachorro Acessos Cachorro.cor; Cachorro.latir( );
  35. 35. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers Categorias de Objetos •Objetos Internos string, date, number •Objetos do Browser window, document •Objetos Personalizados construídos pelo programador
  36. 36. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Browsers Inspetor de Objetos <F12>
  37. 37. prof. Gustavo Zimmermann | contato@gust4vo.com Eventos
  38. 38. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Exemplo: <img id="cara" onclick="alert(‘Triste');" src="images/cara_triste.jpg" />
  39. 39. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Mouse: EVENTO DESCRIÇÃO onclik O evento ocorre quando o usuário clica em um elemento. oncontextmenu O evento ocorre quando o usuário clica com o direito em um elemento para abrir um menu de contexto. ondblclick O evento ocorre quando o usuário clica duas vezes em um elemento. onmousedown O evento ocorre quando o usuário pressiona um botão do mouse sobre um elemento. onmouseenter O evento ocorre quando o ponteiro é movido para um elemento
  40. 40. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Mouse: EVENTO DESCRIÇÃO onmouseleave O evento ocorre quando um usuário move o ponteiro do mouse para fora de um elemento. onmousemove O evento ocorre quando um usuário move o ponteiro do mouse sobre o elemento. onmouseover O evento ocorre quando o ponteiro é movido para um elemento, ou em um de seus filhos. onmouseout O evento ocorre quando um usuário move o ponteiro do mouse para fora de um elemento ou de um de seus filhos. onmouseup O evento ocorre quando o usuário solta o botão do mouse sobre um elemento.
  41. 41. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Teclado: EVENTO DESCRIÇÃO onkeydown O evento ocorre quando o usuário solta uma tecla, após pressiona-la. onkeypress O evento ocorre quando o usuário pressiona uma tecla onkeyup O evento ocorre quando o usuário solta uma tecla.
  42. 42. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Formulário: EVENTO DESCRIÇÃO onblur O evento ocorre quando um elemento perde o foco. onchange O evento ocorre quando o conteúdo de um elemento de formulário, seleção, ou o estado verificado mudaram (para <input>, <keygen>, <select> e <textarea>). onfocus O evento ocorre quando um elemento recebe foco. onfocusout O evento ocorre quando um elemento está prestes a perder o foco.
  43. 43. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Formulário: EVENTO DESCRIÇÃO oninput O evento ocorre quando um elemento recebe entrada do usuário. oninvalid O evento ocorre quando um elemento é inválido. onreset O evento ocorre quando um formulário é resetado. onsearch O evento ocorre quando um usuário escreve algo em um campo de pesquisa (para <input = "search">).
  44. 44. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Eventos Eventos do Formulário: EVENTO DESCRIÇÃO onselect O evento ocorre após o usuário seleciona algum texto (para <input> e <textarea>). onsubmit O evento ocorre quando um formulário é enviado. Mais eventos: <http://www.w3schools.com/jsref/dom_obj_event.asp>
  45. 45. prof. Gustavo Zimmermann | contato@gust4vo.com Objetos Personalizados
  46. 46. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Objetos Personalizados function <script> function sorrir(){ document.getElementById("cara").src = "images/cara_feliz.jpg"; } </script>
  47. 47. prof. Gustavo Zimmermann | contato@gust4vo.com Variáveis
  48. 48. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Variáveis Conceito Variável é um nome na qual pode-se atribuir um valor. var x = 25102014; //number var y = “Ricardo e Naidane”; //string var z = true; //bolean var m = casal; //object
  49. 49. prof. Gustavo Zimmermann | contato@gust4vo.com Nomeações Para a nomeação de referências precisamos respeitar 4 regras básicas: 1.Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas; 2.Sem caracteres especiais (@#$%&*()+[]ªº°<>/|); 3.Sem acentuação ou pontuação (“’!?¨´`^~.:;,); 4.Underlines (_) e Traços (-) ao invés de Espaço; 5.Quando se tratar de nomeação de variáveis: •É aceitável usar $ ou _ no início do nome. Ex: $idade, _idade; •Não é aceitável usar números no inicío da nomeação . Ex: 3idade. JavaScript – Introdução e Operadores Variáveis
  50. 50. prof. Gustavo Zimmermann | contato@gust4vo.com Nomeações palavras-chave JavaScript JavaScript – Introdução e Operadores Variáveis break case catch continue default delete do else finaly for function if in instanceof new return switch this throw try typeof var vold while with
  51. 51. prof. Gustavo Zimmermann | contato@gust4vo.com Nomeações palavras reservadas da especificação ECMA-262 JavaScript – Introdução e Operadores Variáveis abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatie
  52. 52. prof. Gustavo Zimmermann | contato@gust4vo.com Nomeações palavras reservadas típicas dos Browsers JavaScript – Introdução e Operadores Variáveis alert array blur boolean date document escape eval focus functions history image isNaN length location math name navigator number object onLoad open outerHeight parent parseFloat regExp status string
  53. 53. prof. Gustavo Zimmermann | contato@gust4vo.com Constantes
  54. 54. prof. Gustavo Zimmermann | contato@gust4vo.com Scape de String Cada caractere em uma string pode ser representado por uma sequência de escape. Uma sequência de escape começa com uma barra invertida (), que informa ao intérprete JavaScript que o próximo caractere é um caractere especial. JavaScript – Introdução e Operadores Constantes VALOR DO CARACTERE UNICODE| SEQUÊNCIA DE ESCAPE SIGNIFICADO CATEGORIA u0009 t Tab Espaço em branco u000A n Avanço de linha (nova linha) Terminador de linha u0020 Espaço Espaço em branco u0022 " Aspas duplas (") u0027 ' Aspas simples (') u005C Barra invertida () u7231 Caractere Japonês símbolo amor Caractere
  55. 55. prof. Gustavo Zimmermann | contato@gust4vo.com Outros tipos JavaScript – Introdução e Operadores Constantes var nome; //undefined nome = null; //null nome = 3 * “pessoas”; //NaN nome = 1.7976931348623157e+309; // Infinity nome = 2 + Infinity; // Infinity
  56. 56. prof. Gustavo Zimmermann | contato@gust4vo.com Constantes ??? Variáveis que não variam! JavaScript – Introdução e Operadores Constantes const HORAS_DO_DIA = 24; Normalmente são escritas com letras maiúsculas para diferenciar das variáveis visualmente
  57. 57. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Constantes e Variáveis 1.<script> 2.//Alerta na tela 3. alert(”Constantes e Variáveis”); 4.//Declaração de Variáveis 5. var x = 5; 6. var y = 6; 7. var z = x + y; 8./* Aqui faço a impressão dos resultados e valores iniciais */ 9. alert(x); 10. alert(y); 11. alert(”A soma de x+y é igual a ”+z); 12.</script>
  58. 58. prof. Gustavo Zimmermann | contato@gust4vo.com Camadas
  59. 59. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Camadas 01. SEMÂNTICA 02. ESTILOS 03. INTERATIVIDADE
  60. 60. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Camadas Tipos de Utilização •Inline •Incorporado •Externo
  61. 61. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Camadas Tipos de Utilização: inline <img onclick=“alert(‘Tipo Inline’);” src=“imagem.jpg” />
  62. 62. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Camadas Tipos de Utilização: incorporado <!DOCTYPE html> <html lang=“pt-br”> <head> <title>Título da página</title> <script> alert(“Tipo incorporado”); </script> </head> <body> <img src=“imagem.jpg” /> </body> </html>
  63. 63. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Camadas Tipos de Utilização: externo <!DOCTYPE html> <html lang=“pt-br”> <head> <title>Título da página</title> <script type=“text/javascript” src=“media/scripts/funcoes.js”></script> </head> <body> <img src=“imagem.jpg” /> </body> </html> alert(“Tipo incorporado”); Arquivo HTML Arquivo JavaScript
  64. 64. prof. Gustavo Zimmermann | contato@gust4vo.com Popup Boxes
  65. 65. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Popup Boxes Alert Box alert("Aula de JavaScript!");
  66. 66. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Popup Boxes Confirme Box var resposta = confirm("Você esta curtindo a aula?"); if (resposta == true) { msg = "Pressionou OK = SIM"; } else { msg = "Pressionou CANCELAR = NÃO"; }
  67. 67. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Popup Boxes Prompt Box var nome = prompt("Como você se chama?"); if (nome != null) { document.getElementById("pessoa").innerHTML ="Olá " + nome + "! Como você está hoje?"; }
  68. 68. prof. Gustavo Zimmermann | contato@gust4vo.com operadores
  69. 69. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores Matemáticos Operador Descrição Exemplo Resultado + Adição x = 5 + 2 7 - Subtração x = 5 – 2 3 * Multiplicação x = 5 * 2 10 / Divisão x = 5 / 2 2,5 % Resto da divisão x = 5 % 2 1 ++ Incremento x = ++6 x = 6++ 7 -- Decremento x = --4 x = 4-- 3 *Os operadores aritméticos são utilizados para realizar operações numéricas com os dados utilizados pelo programa.
  70. 70. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores Matemáticos: adaptações ax  ax  b a(x  x)  b ) 100 10 6) 7) 8) b  ( b 9) a ax  ax  ab 2 b a  2 a  b 2 2 a b  1) 2) 3) 4) 5) a b a b   * 2 3 a  2*b
  71. 71. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores Matemáticos: adaptações O custo ao consumidor de um carro novo é a soma do custo de fábrica com a percentagem do distribuidor e dos impostos (aplicados, primeiro os impostos sobre o custo de fábrica, e depois a percentagem do distribuidor sobre o resultado). Supondo que a percentagem do distribuidor seja de 28% e os impostos 45%. Escrever um fluxograma e um algoritmo que leia o custo de fábrica de um carro e informe o custo ao consumidor do mesmo.
  72. 72. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores de Atribuição Operador Exemplo Sinônimo Resultado = x = y x = y 5 += x += y x = x + y 15 -= x -= y x = x - y 5 *= x *= y x = x * y 30 /= x /= y x = x / y 2 %= x %= y x = x % y 0
  73. 73. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores Relacionais OPERADOR DESCRIÇÃO == Igual a <> ou != Diferente de === Igual e do mesmo tipo que !== Valor e tipos diferentes de > Maior que < Menor que >= Maior ou igual a <= Menor ou igual a *Situações onde é necessário comparar informações para que o programa possa tomar uma decisão.
  74. 74. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Operadores Lógicos OPERADOR DESCRIÇÃO ! NOT Negação && AND Conjunção || OR Disjunção * Usados para momentos onde se é necessário trabalhar com duas ou mais condições
  75. 75. prof. Gustavo Zimmermann | contato@gust4vo.com JavaScript – Introdução e Operadores Operadores Conversão de dados var x = 12 + 4; //16 var y = "12"+4; //124 var z = "12"/4 //3 Use o parseiInt() para converter textos em números.
  76. 76. prof. Gustavo Zimmermann | contato@gust4vo.com <fim />

×