Prof Evandro Manara Miletto. parte 1

Tamanho: px

Começar a partir da página:

Download "Prof Evandro Manara Miletto. parte 1"

Raquel Neto Beltrão
7 Há anos
Visualizações:

1 Prof Evandro Manara Miletto parte 1

2 Sumário Introdução Variáveis e tipos de dados Operadores

3 O que é JavaScript? JavaScript é uma linguagem de programação criada pela Netscape para adicionar interatividade ás páginas HTML O código em JavaScript é colocado dentro das páginas HTML, ou seja, é uma linguagem que roda no navegador do cliente (client side) JavaScript é uma linguagem interpretada, ou seja, o código executa sem uma compilação preliminar Curiosidades: 1 a 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

4 Onde atua o JavaScript? Tecnologia capaz de prover interatividade do site com o internauta, seguindo os padrões do W3C

5 O que não é JavaScript? Java Java não tem nenhuma relação com JavaScript!

6 O que você pode fazer com JS? Por ser uma linguagem de programação, JavaScript permite criar conteúdo dinâmico para o usuário JavaScript é capaz de ler e modificar o HTML de uma página. Isto permite criar ou eliminar partes de uma página JavaScript pode reagir a eventos, ou seja, pode ser executado quando 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 O que + você pode fazer com JS? JavaScript pode ser utilizado para validar dados dos formulários antes do envio para o servidor JavaScript também é utilizado na criação de máscaras para os campos. Por exemplo, o usuário digita e este texto é formatado automaticamente para: (51) JavaScript é a base para o desenvolvimento de interfaces interativas com AJAX(Asynchronous Javascript And XML)

8 exemplos de uso de JS: (change canvas) (personalizar capa) (drag and drop, visualização, fechamento de div, etc.) (autocompletar) (jenela de chat, mouseover fotos, etc.) (drag, acordeon, etc.) (guias, calendários, etc.) Validação de campos de formulário

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 Pop Up JavaScript Hello World! JavaScript dentro da tag head <html> Declarando uma função em JavaScript <head> <script type="text/javascript"> function message(){ alert("function: Hello World"); } </script> </head> <body onload="message()"> </body> </html>

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">  </script> </body> </html>

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 Variáveis e tipos de dados

14 Regras para variáveis em JS JavaScript é uma linguagem case-sensitive ( a e A são variáveis diferentes ) Variáveis necessitam iniciar com uma letra ou um underscore Utilize a palavra-chave var para declarar (criar) uma variável var usuario; var _resultado; var 2valor;

15 Variável Local x Global Local 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ção Global 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 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; var carname= fusca ; x=5; carname= fusca ; É possível também redeclarar uma variável. Neste caso, o valor original é perdido x=5; x; =

17 Tipos de dados JavaScript Numbers qualquer valor que possa ser calculado (positivo ou negativo). Strings uma seqüência de caracteres Boolean Null verdade ou falso (true e false). um valor vazio (ausência de valor). Atenção: null é diferente de 0 (zero).

18 Numbers Os 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 Numbers - ponto flutuante e3 =>2x10 3 => e-3 => 2 x 10-3 => 0.002

20 Strings Uma 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 Boolean Diferente de outras linguagens de programação o valor de um boolean é apenas true ou false Em JavaScript, o valor zero (0) e um (1) não são considerados como true ou false

22 Null O null é um tipo de dado que indica que uma variável não possui valor O valor null é retornado se você tentar utilizar uma variável que não foi definida e sem valor Um exemplo, se o usuário escolher cancelar, o null é retornado na função prompt: function nome(){ } alert(prompt("nome","digite o seu nome"));

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úmero ou não: function notanumber(){ } alert(isnan("hello"));

24 Operadores

25 Operadores artiméticos = atribui valores a uma variável e + soma valores considerando Y=5 y=5; z=2; x=y+z; valor de x?

26 Operadores de atribuição considerando x=10 e Y=5 Operador + faz adição e concatenação (usado em string)

27 Operadores de comparação considerando x=5

28 Operadores lógicos usados para determinar a lógica entre variáveis e valores

29 Comentários em JS comentários em linha simples começam com // em múltiplas linhas começam com /* e terminam com */

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 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 Referências Tutorial de JavaScript do W3C JavaScript Datatypes Baseado no material do Prof Rodrigo Prestes Machado

Documentos relacionados

Introdução ao Javascript

Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação