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.

Java script1

845 views

Published on

Slide de aula introdutorio de JavaScript

  • Be the first to comment

  • Be the first to like this

Java script1

  1. 1. parte 1Prof Evandro Manara Miletto
  2. 2. SumárioIntroduçãoVariáveis e tipos de dadosOperadores
  3. 3. O que é JavaScript?JavaScript é uma linguagem de programação criada pelaNetscape para adicionar interatividade ás páginas HTMLO código em JavaScript é colocado dentro das páginas HTML, ouseja, é uma linguagem que roda no navegador do cliente (clientside)JavaScript é uma linguagem interpretada, ou seja, o códigoexecuta sem uma compilação preliminar Curiosidades: 1a versão criada em 1995 e implementada em 1996 no Netscape Navigator Ja foi chamado de Mocha, LiveScript, JavaScript e atualmente o nome oficial é ECMA Script ( ver ECMA International) que o mantém http://www.ecma-international.org/
  4. 4. Onde atua o JavaScript?Tecnologia capaz de proverinteratividade do site com ointernauta, seguindo os padrõesdo W3C
  5. 5. O que não é JavaScript?JavaJava não tem nenhuma relação com JavaScript!
  6. 6. O que você pode fazer com JS?Por ser uma linguagem de programação, JavaScript permitecriar conteúdo dinâmico para o usuárioJavaScript é capaz de ler e modificar o HTML de uma página.Isto permite criar ou eliminar partes de uma páginaJavaScript pode reagir a eventos, ou seja, pode ser executadoquando alguma coisa acontecer Por exemplo, um evento pode ser disparado quando um usuário clicar num elemento em HTML ou uma página terminar de carregar, etc
  7. 7. O que + você pode fazer com JS?JavaScript pode ser utilizado para validar dados dos formuláriosantes do envio para o servidorJavaScript também é utilizado na criação de máscaras para oscampos. Por exemplo, o usuário digita 5130234567 e este texto éformatado automaticamente para: (51) 3023-4567JavaScript é a base para o desenvolvimento de interfacesinterativas com AJAX(Asynchronous Javascript And XML)
  8. 8. exemplos de uso de JS:http://netscape.aol.com/ (change canvas)http://www.clicrbs.com.br/rs/ (personalizar capa)http://maps.google.com.br/ (drag and drop, visualização,fechamento de div, etc.)http://www.google.com.br (autocompletar)http://www.facebook.com/ (jenela de chat, mouseover fotos,etc.)http://jqueryui.com/demos/ (drag, acordeon, etc.)http://dojotoolkit.org/widgets (guias, calendários, etc.)Validação de campos de formulário
  9. 9. Primeiro programa JavaScript JavaScript dentro da tag body <html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World"); </script> </body> </html>
  10. 10. Pop Up JavaScript “Hello World!”JavaScript dentroda tag head Declarando uma função em JavaScript <html> <head> <script type="text/javascript"> function message(){ alert("Function: Hello World"); } </script> </head> <body onload="message()"> </body> </html>
  11. 11. JavaScript nas tags Head e Body <html> <head> <script type="text/javascript"> function hello(){ alert("Function: Hello World"); } </script> </head> <body onload="hello()"> <script type="text/javascript"> <!-- document.write("Hello World"); --> </script> </body> </html>
  12. 12. “Linked JavaScript” na tag Head <html> <head> <script type="text/javascript" src="script.js"></script> </head> <body> </body> </html> script.js function hello(){ alert("Function: Hello World"); }
  13. 13. Variáveis e tipos de dados
  14. 14. Regras para variáveis em JSJavaScript é uma linguagem case-sensitive ( a e A são variáveis diferentes )Variáveis necessitam iniciar com uma letra ou um underscoreUtilize a palavra-chave var para declarar (criar) uma variável var usuario; var _resultado; var 2valor;
  15. 15. Variável Local x GlobalLocal   Uma variável declarada dentro de uma função JavaScript torna-se LOCAL e pode ser acessada apenas dentro dessa função (variável de escopo local). Pode-se ter variáveis locais como o mesmo nome em funções diferentes São destruídas ao sair da funçãoGlobal Variáveis declaradas fora de uma função torna-se GLOBAL e todos os scripts e funções na página Web podem acessá-las São destruídas quando se fecha a página do navegador. Variáveis declaradas sem o var, sempre se tornam GLOBAIS
  16. 16. Declarando variáveis em JS O exemplo abaixo apresenta a declaração de duas variáveis: x e carname. var x; var carname; Também é possível inicializar uma variável no momento da declaração var x=5; x=5; var carname=”fusca”; = carname=”fusca”; É possível também redeclarar uma variável. Neste caso, o valor original é perdido x=5; x;
  17. 17. Tipos de dados JavaScriptNumbers   qualquer valor que possa ser calculado (positivo ou negativo).Strings   uma seqüência de caracteresBoolean verdade ou falso (true e false).  Null um valor vazio (ausência de valor). Atenção: null é diferente de 0 (zero).
  18. 18. NumbersOs números podem ser escritos em três bases: Base 10 (decimal) exemplo: 56 (sem o zero) Base 8  (octal) Exemplo: 056 o zero na frente representa um número em octal Base 16 (hexadecimal) exemplo: ox5F ou OX5F O zero x (ox) define um número em hexadecimal.
  19. 19. Numbers - ponto flutuante 7.2945 -34.2 2e3 =>2x103 => 2000 2e-3 => 2 x 10-3 => 0.002
  20. 20. StringsUma String é uma seqüência de caracteres: "Hello!" // String declarada com aspas duplas ‘245‘ // String declarada com aspas simples "" // String vazia Nota: Uma String vazia é diferente de Null  
  21. 21. BooleanDiferente de outras linguagens de programação o valor deum boolean é apenas true ou falseEm JavaScript, o valor zero (0) e um (1) não são consideradoscomo true ou false  
  22. 22. NullO null é um tipo de dado que indica que uma variável não possuivalorO valor null é retornado se você tentar utilizar uma variável quenão foi definida e sem valorUm exemplo, se o usuário escolher cancelar, o null é retornadona função prompt:   function nome(){ alert(prompt("Nome","digite o seu nome")); }
  23. 23. NaN (not a number)Algumas funções retornam um valor especial chamado NaNÉ possível fazer um teste para verificar se um valor é um númeroou não: function notANumber(){ alert(isNaN("Hello")); }
  24. 24. Operadores
  25. 25. Operadores artiméticos“=” atribui valores a uma variável e “+” soma valores y=5; z=2; x=y+z; valor de x?considerando Y=5
  26. 26. Operadores de atribuiçãoconsiderando x=10 e Y=5Operador + faz adição e concatenação (usado em string)
  27. 27. Operadores de comparaçãoconsiderando x=5
  28. 28. Operadores lógicosusados para determinar a lógica entre variáveis e valores
  29. 29. Comentários em JScomentários em linha simples começam com //em múltiplas linhas começam com /* e terminam com */
  30. 30. Exercício 1 Criar um formulário Web com apenas 1 botão com o valor “Mostrar o Alert box” que abra uma janela com a mensagem: “Olá Mundo! eu sou um Alert Box”, conforme exemplo abaixo:
  31. 31. Exercício 2 Procurar na Web uma solução para mostrar uma caixa de prompt e após a inserção do nome, dar as boas vindas!
  32. 32. Referências Tutorial de JavaScript do W3C http://www.w3schools.com/js JavaScript Datatypes http://www.sislands.com/coin70/week1/datatype.htm Baseado no material do Prof Rodrigo Prestes Machado

×