A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

INTERFACE HOMEM-MÁQUINA

Apresentações semelhantes


Apresentação em tema: "INTERFACE HOMEM-MÁQUINA"— Transcrição da apresentação:

1 INTERFACE HOMEM-MÁQUINA
Prof. Celso Cardoso Neto JavaScript

2 INTERFACE HOMEM-MÁQUINA

3 JavaScript INTRODUÇÃO
Atualmente, é cada vez maior a demanda por profissionais nas áreas de desenvolvimento de sites e web design. Por isso, cresce também a necessidade de conhecimento das linguagens que compõem esta tecnologia. O uso do JavaScript como linguagem de apoio no desenvolvimento de sites nunca esteve tão evidenciado como nos dias atuais. É utilizando esta linguagem, que os profissionais de informática conseguirão adentrar no universo da interatividade e dinamismo que um site precisa ter.

4 JavaScript O que é JavaScript?
JavaScript é a linguagem de programação usada pela maioria dos webmasters e desenvolvedores de páginas web em geral. Como toda linguagem de programação, o JavaScript obedece uma série de convenções. Você deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maiúsculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem próxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas características e resultados.

5 JavaScript Por que aprender JavaScript?
Seja você um webmaster profissional ou apenas um estudante que quer fazer a sua própria página na Internet, deve conhecer no mínimo os primeiros passos da linguagem, ou seja, colocar um script já pronto em suas páginas. Todas aquelas coisas que você vê diariamente em páginas web, tais como: envio de formulários, a data, as mensagens na barra de status e muitos outros efeitos são conseguidos por meio de JavaScript. Para completar, pensa nas imensas possibilidades de expandir os seus conhecimentos de web design e ainda acrescentar mais um ponto positivo ao seu currículo profissional.

6 JavaScript Exibir código-fonte JavaScript é o mesmo que Java?
Os códigos fontes são impossíveis de ser visualizados em linguagens do tipo compilada, já que eles fazem parte do arquivo executável final. Os códigos fonte de nossos códigos JavaScript, contudo, não poderão ser escondidos, uma vez que serão interpretados no browser, possibilitando assim, que o usuário veja-os facilmente por meio do comando dos browsers. Exibir código-fonte

7 JavaScript JavaScript é o mesmo que Java?
Não. Antes de discutirmos as diferenças entre as duas linguagens, é bom que saibamos a diferença entre linguagem COMPILADA e linguagem INTERPRETADA. Linguagens COMPILADAS são aquelas como Delphi, Visual Basic, C++, entre outras. O Java pertence a este grupo de linguagens, as quais geralmente produzem um executável, ou seja, um arquivo com a extensão .exe. O JavaScript é uma linguagem INTERPRETADA. O que isso quer dizer? Quando o browser (usaremos sempre este nome para nos referirmos ao navegador de Internet) reconhece um JavaScript, automaticamente o interpretador contido no browser executa esse script. Isso faz com que os arquivos JavaScript sejam apenas linhas de texto, que, quando inseridos em uma página web, apropriadamente, produzirão os resultados que queremos.

8 O que é preciso para aprender JavaScript?
Hoje em dia, a maioria dos webmasters está usando editores HTML visuais, mas você pode escolher entre esses editores ou simplesmente escrever os seus scripts usando o Bloco de Notas do Windows ou qualquer outro editor de texto. É interessante conhecer HTML....

9 Colocando JavaScript em uma página Web ...
Podemos colocar códigos JavaScript em nossas páginas web usando as tags <script></script>. As tags script podem ser colocadas na parte <body></body> ou <head></head> da página. Pode-se usar tags nestes dois lugares. Por agora, vamos usar tags na parte <body> quando queremos que o resultado do script seja exibido no momento que a página for acessada. Os scripts colocados na parte <head> geralmente são FUNÇÕES que serão chamadas a partir dos diversos elementos HTML em seu devido tempo. . As tags script podem ser colocadas na parte ou da página. Pode-se usar tags nestes dois lugares. Por agora, vamos usar tags na parte quando queremos que o resultado do script seja exibido no momento que a página for acessada. Os scripts colocados na parte geralmente são FUNÇÕES que serão chamadas a partir dos diversos elementos HTML em seu devido tempo.", "width": "800" }

10 Colocando JavaScript em uma página Web ... Exemplo 1
<html> <head> <title>Meu primeiro JavaScript</title> </head> <body> <script language="javascript"> <!--   document.write('Este é o meu primeiro JavaScript'); //--> </script> </body> </html> No browser, clique na opção Exibir código-fonte ... http://celsocn.net/javascript_exemplo_1.htm. No browser, clique na opção Exibir código-fonte ...", "width": "800" }

11 Exemplo 1 - Execução JavaScript

12 JavaScript Entendendo o script ... Exemplo 1
Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir". A parte do código: document.write('Este é o meu primeiro JavaScript'); transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script“.

13 JavaScript Entendendo o script ... Exemplo 1
E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não? Vamos rever o código completo? Aqui está: <html> <head> <title>Meu primeiro JavaScript</title> </head> <body> <script language="javascript"> <!--   document.write('Este é o meu primeiro JavaScript'); //--> </script> </body> </html> que quer dizer Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira . Simples, não? Vamos rever o código completo? Aqui está: Meu primeiro JavaScript ", "width": "800" }

14 Exemplo 2 JavaScript Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. Para praticar JavaScript e HTML ao mesmo tempo, tente o código: <script language="javascript"> <!--   document.write('<b>Este é o meu primeiro JavaScript. Em negrito agora.</b>'); //--> </script> Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. No browser, clique na opção Exibir código-fonte ... Cuidado com a quebra de linha. A instrução document.write( Texto aqui ) deve estar em apenas uma linha. http://celsocn.net/javascript_exemplo_2.htm. No browser, clique na opção Exibir código-fonte ...", "width": "800" }

15 Exemplo 2 - Execução JavaScript

16 Exemplo 3 JavaScript Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado. Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics). No browser, clique na opção Exibir código-fonte ...

17 Exemplo 3 - Execução JavaScript

18 Resultado não é o mesmo que resultado
JavaScript Como qualquer outra linguagem de programação, o JavaScript também segue uma série de sintaxes e convenções. Se você já é programador, deve saber que em algumas linguagens tem que usar um ponto-e-vírgula (;) no final de cada instrução, capitalizar a primeira letra de cada variável, não pode começar o nome de uma variável com um número e assim por diante. Programar é assim mesmo... Aprender uma série de regras e tentar infringí-las o mínimo possível. Seguindo essas regras de programação ao pé da letra, fará com que os seus scripts funcionem corretamente e não trará dor de cabeça na hora de ver o que deu "errado" em determinada função. JavaScript é sensível a maiúsculas e minúsculas. Se você declarar uma variável de nome "Calculo", não poderá mais tarde tentar acessar essa variável usando o nome "calculo". Lembre-se disso!!! Se você alterar um simples "a" por "A", seu código não funcionará corretamente (se funcionar). E lembre-se! Nada de acentos!!!

19 JavaScript O ponto-e-vírgula...
Todas as instruções em JavaScript devem terminar com um ponto-e-vírgula, que também serve para separar uma instrução da outra. Observe os seguintes trechos de código: Código 1 <script language="javascript"> <!--   window.alert('Observe o ponto-e-vírgula no final da instrução.'); //--> </script> Código 2 <script language="javascript"> <!--   var numUm = 20;   var numDois = 30;   window.alert(numUm + numDois); //--> </script> No browser, clique na opção Exibir código-fonte ... Código 2 http://celsocn.net/javascript_exemplo_4.htm. No browser, clique na opção Exibir código-fonte ...", "width": "800" }

20 Exemplo 4 - Execução JavaScript

21 Exemplo 4 - Execução JavaScript

22 JavaScript Espaços em branco
JavaScript, igual ao seu parceiro de trabalho, o nosso HTML de todos os dias, ignora espaços, tabulações e inserção de linhas novas que aparecem nas instruções. Mas cuidado! Enquanto você pode digitar o seu código assim: var numUm=10; ou var numDois = 20; sempre precisará de espaço entre os nomes das funções, instruções e nomes de objetos, como veremos em seguida. Quando os espaços estiverem dentro de uma string (nome dado a uma linha de texto em programação), o interpretador tratará esses espaços como parte da sua linha de texto.

23 JavaScript Linhas de texto (strings), aspas duplas e aspas simples
Uma string é uma sequência de texto formada por números, letras, espaços ou qualquer outro caractere. Todas as strings estarão fechadas por aspas duplas ("meu texto") ou aspas simples ('meu texto'), dependendo da ocasião. As aspas simples são usadas dentro de uma instrução com aspas duplas ou vice-versa. Vamos ver o seguinte código: <form>   <input type="button" value="Clique Aqui"   onclick="window.alert('Estou estudando JavaScript agora.');"> </form>

24 JavaScript Linhas de texto (strings), aspas duplas e aspas simples
Uma string é uma sequência de texto formada por números, letras, espaços ou qualquer outro caractere. Entendendo o que está acontecendo... Primeiro criamos um formulário com um botão e, ao clicar no botão, o seguinte evento aconteceu: onclick="window.alert('Estou estudando JavaScript agora.');“ Ou seja, ao clicar no botão, a página exibirá a mensagem que está contida entre parênteses. Observe que usamos aspas duplas (" ") para definir o evento que aconteceria ao clicar no botão, e usamos aspas simples (' ') para definir a string a ser exibida na caixa de mensagem!

25 JavaScript A barra invertida (\n) e linha de texto (strings)
A barra invertida é usada com muita frequencia em JavaScript e não deve jamais se confundida com a barra simples (/). Usando a barra invertida, é possível inserir caracteres em nossas linhas de texto, produzidas por nossos scripts, que normalmente não poderiam ser produzidas pelo teclado somente. Suponhamos que queremos criar uma linha de texto que exiba o seu nome em uma linha e a sua ocupação na linha logo abaixo. <script language="javascript"> <!--   window.alert(‘João Paulo II\nAnalista de Sistemas'); //--> </script> Aqui a sua mensagem aparecerá em duas linhas, já que usamos a barra invertida juntamente com a letra "n". Sempre que você usar isso em seu código (\n), terá uma quebra de linha automaticamente. O "\n" representa um retorno e uma inserção de linha (line feed). Aqui a sua mensagem aparecerá em duas linhas, já que usamos a barra invertida juntamente com a letra n . Sempre que você usar isso em seu código (\n), terá uma quebra de linha automaticamente. O \n representa um retorno e uma inserção de linha (line feed).", "width": "800" }

26 JavaScript O uso de parênteses, chaves e colchetes
<html> <head> <title>JavaScript - Exemplo 6 - Uso de barra invertida - javascript_exemplo6.htm</title> <meta name="GENERATOR" content="Microsoft FrontPage 3.0"> </head> <body> <script language="javascript"> <!-- document.write('Usando a barra invertida, é possível inserir caracteres em nossas linhas de texto, produzidas por nossos scripts,'); document.write('que normalmente não poderiam ser produzidas pelo teclado somente.'); document.write('Suponhamos que queremos criar uma linha de texto que exiba o seu nome em uma linha e a sua ocupação na linha logo abaixo.'); window.alert('Celso Cardoso Neto\nProfessor Curso de Análise de Sistemas'); //--> </script> </body> </html> ", "width": "800" }

27 JavaScript O uso de parênteses, chaves e colchetes
Parênteses (), chaves {} e colchetes [] são usados com muita frequência em JavaScript. Antes de tudo, lembre-se de que todas as vezes que se abre um destes símbolos, deverá fechá-lo apropriadamente para que não apareça erro nos scripts. Os parênteses são usados para conter os argumentos passados para funções ou métodos.

28 JavaScript O uso de parênteses, chaves e colchetes
<script language="javascript"> <!--   window.open('exemplo1.htm', 'novaJanela', 'toolbar=no'); //--> </script> Pode-se observar pelo exemplo acima que tudo que está dentro dos parênteses são argumentos passados para o método open do objeto window. Este método é usado para abrir uma nova janela, como veremos em outra parte do curso. Vale dizer que este código funciona perfeitamente. Coloque o código na parte <body></body> de sua página, troque "exemplo1.htm" pelo nome da página que você deseja abrir e execute para ver o resultado. Experimente com os códigos o máximo que você puder para ir pegando a maneira de programar em JavaScript. Pode-se observar pelo exemplo acima que tudo que está dentro dos parênteses são argumentos passados para o método open do objeto window. Este método é usado para abrir uma nova janela, como veremos em outra parte do curso. Vale dizer que este código funciona perfeitamente. Coloque o código na parte de sua página, troque exemplo1.htm pelo nome da página que você deseja abrir e execute para ver o resultado. Experimente com os códigos o máximo que você puder para ir pegando a maneira de programar em JavaScript.", "width": "800" }

29 JavaScript O uso de parênteses, chaves e colchetes
Os colchetes [] são usados para acessar elementos de matrizes (arrays). <script language="javascript"> <!--   var pessoas = new Array();   pessoas[0] = "Roberto";   pessoas[1] = "Marcelo";   pessoas[2] = "Carlos";   pessoas[3] = "Francisco";   document.write(pessoas[2]); //--> </script> Observe que aqui os colchetes são usados para definir os elementos da matriz pessoas, e então os parênteses são usados para passar o argumento (um elemento da matriz) para o método write do objeto document. Observe que aqui os colchetes são usados para definir os elementos da matriz pessoas, e então os parênteses são usados para passar o argumento (um elemento da matriz) para o método write do objeto document. http://celsocn.net/javascript_exemplo_8.htm.", "width": "800" }

30 JavaScript O uso de parênteses, chaves e colchetes
As chaves { } são usadas para conter múltiplas instruções. Com o uso de chaves é possível colocar várias instruções dentro de uma única função ou fluxo de código. Observe o código: <script language="javascript"> <!--   var meuNumero = 10;   if(meuNumero == 10){     window.alert('O valor de meuNumero é igual a 10');     document.write('meuNumero é igual a 10');   } //--> </script> Observe que aqui as chaves foram usadas para colocar as duas instruções que seriam chamadas, caso a instrução condicional if(meuNumero == 10) retornasse um valor positivo. Observe que aqui as chaves foram usadas para colocar as duas instruções que seriam chamadas, caso a instrução condicional if(meuNumero == 10) retornasse um valor positivo. http://celsocn.net/javascript_exemplo_9.htm.", "width": "800" }

31 JavaScript O uso de parênteses, chaves e colchetes
<html> <head> <title>JavaScript - Exemplo 9 - Uso de parênteses, chaves e colchetes - javascript_exemplo9.htm</title> <meta name="GENERATOR" content="Microsoft FrontPage 3.0"> </head> <body> <script language="javascript"> <!-- var meuNumero = 10; if(meuNumero == 10){ window.alert('O valor de meuNumero é igual a 10'); document.write('meuNumero é igual a 10'); } //--> </script> </body> </html> http://celsocn.net/javascript_exemplo_9.htm.", "width": "800" }

32 JavaScript Comentários
Comentários são úteis para mostrar informações sobre direitos autorais, assim como informações sobre cada função, caso precise revisar o seu código mais tarde. Exemplo 1: <script language="javascript"> <!--   // A linha abaixo escreve o texto na página   document.write('Este código está comentado'); //--> </script> Exemplo 2: Para comentar o seu código usando múltiplas linhas, você pode usar a barra juntamente com um asterísco no início e no fim do comentário. Abra o comentário usando /* e feche usando */. <script language="javascript"> <!--   /* A linha abaixo escreve o texto na página e eu     estou usando mais de uma linha no meu     comentário   */   document.write('Este código está comentado'); //--> </script> Exemplo 2: Para comentar o seu código usando múltiplas linhas, você pode usar a barra juntamente com um asterísco no início e no fim do comentário. Abra o comentário usando /* e feche usando */. ", "width": "800" }

33 JavaScript Nomes de variáveis e de funções Regra 1:
O primeiro caractere do nome da função ou da variável deve ser uma letra do alfabeto (maiúsculo ou minúsculo), uma barra (chamada em inglês de underscore) que deve ser escrita (_) sem nenhum espaço entre a barra e o próximo caractere ou um sinal de dólar $. O sinal de dólar não é recomendado, já que algumas versões do JavaScript não o reconhecem (versões mais antigas). Veja os exemplos de nomes de variáveis e funções exemplificando esta regra: var MeuResultado = 234; function Voltar() var meuResultado = 394; var _Resultado = 432; function Visualizar_Resultado() var $Canal = 'Outro'; Regra 2: Não se pode usar um número para iniciar o nome de uma função ou de variável. Regra 3: Nomes de variáveis e de funções não podem conter espaços. No caso de realmente precisar de um espaço (para identificar melhor uma função ou nome de variável), você pode usar a barra (_) como nos exemplos abaixo: var Meu_Numero = 21; function Fechar_Janela()

34 JavaScript Nomes de variáveis e de funções Regra 4:
Os nomes das funções e das variáveis não podem ser iguais a nenhuma das palavras reservadas. Todas as linguagens de programação têm uma série de palavras que são usadas internamente, e quando estamos programando, não podemos usar estas palavras, pois o compilador ou o interpretador recusará o nosso código, já que o uso das palavras reservadas causará erros irremediáveis no fluxo do código. As palavras reservadas do JavaScript são listadas em seguida. Recomenda-se que se use sempre nomes bem sugestivos para as suas funções ou variáveis. Dando nomes fáceis de ser lembrados ou associados, fará com que o seu trabalho seja bem mais produtivo e poupará muito tempo na hora de referenciar esses nomes no seu código.

35 Palavras Reservadas JavaScript

36 JavaScript Palavras Reservadas
Além das palavras listadas, é recomendável evitar escolher nomes semelhantes aos da tabela abaixo para suas variáveis ou funções. Tais nomes são de objetos, métodos ou propriedades dos navegadores Internet Explorer, Netscape, Firefox, etc. JavaScript

37 Variáveis São nomes dados aos locais de memória do computador onde alguns dados serão armazenados durante a execução de nossos scripts. JavaScript Quando declaramos uma variáveis em um script, ela fica guardada na memória até que decidamos fechar a janela na qual o script está sendo executado. Variáveis são declaradas usando a palavra-chave var. Observe os exemplos abaixo: var meu_numero = 10; var resultado = 100; var nome = 'Carlos Alberto'; Exemplo prático: <script type="text/javascript"> <!--   var texto = 'Esta é a minha primeira variável';   document.write(texto); //--> </script> Este exemplo declara uma variável chamada texto e define como valor para esta variável a string (linha de texto) "Esta é a minha primeira variável". O método write do objeto document pega esta variável e a escreve na página. Ao colocar a nossa linha de texto entre aspas, estamos dizendo ao interpretador que a variável var texto = 'Esta é a minha primeira variável'; deve ser tratada como string. Este exemplo declara uma variável chamada texto e define como valor para esta variável a string (linha de texto) Esta é a minha primeira variável . O método write do objeto document pega esta variável e a escreve na página. Ao colocar a nossa linha de texto entre aspas, estamos dizendo ao interpretador que a variável. var texto = Esta é a minha primeira variável ; deve ser tratada como string.", "width": "800" }

38 Variáveis JavaScript Variáveis em JavaScript não são tipadas (typed). O que isso quer dizer? Em linguagens como Delphi ou Visual Basic, nós sempre temos que definir que tipo de variável estamos usando. Quando estamos usando estas linguagens, temos que dizer ao compilador se a variável armazenará um valor boolean (true ou false - verdadeiro ou falso), integer (inteiro), e assim por diante. Em JavaScript isso não acontece. Você pode diferenciar uma variável tipo texto (string) de uma variável que armazenará outros valores, simplesmente colocando o valor dessa variável entre aspas. Vamos ver um exemplo de uma variável do tipo numérico: <script type="text/javascript"> <!--   var resultado = 100;   document.write('O valor da variável resultado é ' + resultado); //--> </script> Observe que agora não se coloca aspas ao redor do valor da variável, portanto, o interpretador vai tratá-la como uma variável de tipo numérico. Observe que agora não se coloca aspas ao redor do valor da variável, portanto, o interpretador vai tratá-la como uma variável de tipo numérico.", "width": "800" }

39 Valores de variáveis podem ser alterados em tempo de execução
JavaScript Os valores de suas variáveis podem ser alterados quando os seus scripts estiverem em execução. É por meio de variáveis que você pode realizar cálculos em seus scripts. Vamos ver um exemplo bem prático do uso de variáveis. Vamos criar um código e alterar o valor de nossa variável durante a execução da página. O código é este: <script type="text/javascript"> <!--   var frase = 'O valor desta variável será alterado em seguida';   window.alert(frase);   frase = 'O valor da variável frase foi alterado aqui';   document.write(frase); //--> </script> Observe que, por estar entre aspas, essa variável é do tipo string. Em seguida chamamos o método window.alert para exibir uma mensagem com este valor. Depois que a mensagem é exibida, nós alteramos o valor da variável para frase = 'O valor da variável frase foi alterado aqui'; e usamos o método write do objeto document para escrever o novo valor da variável na página. Observe que, por estar entre aspas, essa variável é do tipo string. Em seguida chamamos o método window.alert para exibir uma mensagem com este valor. Depois que a mensagem é exibida, nós alteramos o valor da variável para frase = O valor da variável frase foi alterado aqui ; e usamos o método write do objeto document para escrever o novo valor da variável na página.", "width": "800" }

40 JavaScript Usando variáveis para fazer um cálculo matemático
O próximo script pode parecer um pouco complexo. O script é simples. Deseja-se que a página exiba duas caixas de texto em que o usuário deverá digitar dois valores. Ao clicar o botão Calcular, será exibida uma mensagem com a soma dos valores informados.

41 Veja no segundo slide a partir deste ...
Usando variáveis para fazer um cálculo matemático JavaScript <html> <head><title>Estudando JavaScript</title> <script type="text/javascript"> <!--   function calcular(){     var primeiroNum = parseFloat(document.form1.text1.value);     var segundoNum = parseFloat(document.form1.text2.value);     window.alert(primeiroNum + segundoNum);   } //--> </script> </head> <body> <form name="form1"> Primeiro Número: <input type="text" name="text1"><br> Segundo Número: <input type="text" name="text2"><br> Clique aqui para calcular: <input type="button" value="Calcular" onclick="calcular()"> </form> </body> </html> Que é parseFloat ? Veja no segundo slide a partir deste ...

Primeiro Número:
Segundo Número:
Clique aqui para calcular:
Que é parseFloat ? Veja no segundo slide a partir deste ...", "width": "800" }

42 JavaScript Usando variáveis para fazer um cálculo matemático
O código resultará na página mostrada na imagem abaixo:

43 JavaScript Usando variáveis para fazer um cálculo matemático
Que é parseFloat ? Objeto Global - Método parseFloat Analisa uma string e retorna um valor de ponto-flutuante. Sintaxe: parseFloat(string) onde string é a string que poderá conter um valor de ponto-flutuante válido. Este método procurará um valor numérico no início da string. Se encontrado, o método continuará até que um caractere não dígito seja encontrado, retornando o valor numérico e descartando o restante da string. Se o primeiro caractere da string não for um dígito, o método retorna um valor NaN. Você pode ainda testar se a string contém um valor númerico válido usando o método isNaN. Exemplo : Como verificar se uma string contém um valor numérico válido <script language="javascript"> <!--   var string1 = "87.32";   var string2 = "Arquivo";   var string3 = "65,54";   document.write(parseFloat(string1) + "<br>");   document.write(parseFloat(string2) + "<br>");   document.write(parseFloat(string3)); //--> </script> A execução deste código produzirá o seguinte resultado: NaN 65 A execução deste código produzirá o seguinte resultado: 87.32 NaN 65.", "width": "800" }

44 JavaScript Usando variáveis para armazenar dados do usuário
Deseja-se um script que solicite ao visitante que digite o seu nome. Armazenamos essa string (a linha de texto que conterá o nome do visitante) e em seguida escrevemos uma mensagem de boas-vindas na página, usando o conteúdo dessa variável. Vamos ao código: <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> <!--   var nome;   nome = window.prompt('Por favor, digite o seu nome', 'Seu nome');   document.write('Olá, ' + nome + '! Bem-vindo ao meu site.'); //--> </script> </body> </html> ", "width": "800" }

45 JavaScript Vida útil das variáveis
Variáveis podem ter o seu valor armazenado e disponível durante a execução da página. Porém, dependendo do lugar em que as suas variáveis são declaradas, podem ter algumas diferenças neste conceito. Observe o código a seguir: <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> <!--   // aqui estamos declarando a variável nome   var nome = “Joao de Deus'; //--> </script> <script type="text/javascript"> <!--   // aqui pegamos o valor da variável e o escrevemos na página   document.write(nome); //--> </script> </body> </html> ", "width": "800" }

46 JavaScript Vida útil das variáveis
Este tipo de variável é chamado de global. Declaramos uma variável em um script e então podemos acessá-la a partir de qualquer lugar da página. Vamos ver agora a diferença entre uma variável global e uma variável local. Observe o código abaixo: <script type="text/javascript"> <!--   function declarar(){     // aqui declaramos a variável nome dentro da função     // declarar()     var nome = 'Carlos Ramos';   } //--> </script> <script type="text/javascript"> <!--   // aqui pegamos o valor da variável e o escrevemos na página   declarar();   document.write(nome); //--> </script> Tentando executar esta segunda versão do código resultará em um erro de script porque, como a variável nome foi declarada dentro da função declarar(), ela não existe na memória até que a função seja chamada, e deixará de existir quando a função sair de execução. É recomendável que se use sempre funções globais até que tenha um bom domínio de JavaScript. Tentando executar esta segunda versão do código resultará em um erro de script porque, como a variável nome foi declarada dentro da função declarar(), ela não existe na memória até que a função seja chamada, e deixará de existir quando a função sair de execução. É recomendável que se use sempre funções globais até que tenha um bom domínio de JavaScript.", "width": "800" }

47 JavaScript O que são operadores ?
Operadores são os símbolos que usamos quando estamos trabalhando com valores. Todos sabemos que = 4. Os sinais + e = são operadores, já que trabalham com os valores da nossa operação aritmética. JavaScript tem muitos operadores. Observe o código abaixo: var nome = 'Ricardo Smith‘; O símbolo = é um operador de atribuição. Operadores de atribuição são usados para passar um valor a uma variável. Um outro muito usado é o operador de adição +. Veja o exemplo. <script type="text/javascript"> <!--   var numUm = 23;   var numDois = 45;   var resultado = numUm + numDois;   window.alert(resultado); //--> </script> Nesse código temos um bom exemplo do uso de operadores. Primeiro usamos o operador de atribuição = para passar valores às variáveis numUm e numDois, e então usamos o operador de adição + para somar os valores destas duas variáveis e apresentar o resultado em uma mensagem usando o método window.alert. Nesse código temos um bom exemplo do uso de operadores. Primeiro usamos o operador de atribuição = para passar valores às variáveis numUm e numDois, e então usamos o operador de adição + para somar os valores destas duas variáveis e apresentar o resultado em uma mensagem usando o método window.alert.", "width": "800" }

48 JavaScript O que são operadores ?
Vamos ver mais alguns operadores. Observe abaixo o uso dos operadores para comparações. O operador de igualdade == é usado para comparar valores e então executar a ação definida por você durante a execução do script. Vamos ao código: <script type="text/javascript"> <!--   var numero = 120;   if(numero == 120){     window.alert('A variável numero é igual a 120');   } //--> </script> Neste código usamos o operador de igualdade dentro de uma expressão condicional if para testar se o valor da variável numero era igual a 120. Como o valor era igual a 120, a mensagem foi exibida Neste código usamos o operador de igualdade dentro de uma expressão condicional if para testar se o valor da variável numero era igual a 120. Como o valor era igual a 120, a mensagem foi exibida.", "width": "800" }

49 Operadores aritméticos...
JavaScript

50 Operadores de atribuição...
JavaScript

51 JavaScript Operadores de atribuição...
Para atribuir valor a uma variável, pode-se usar o operador de atribuição "=" como estivemos fazendo em nossos exemplos anteriores. A tabela acima lista os principais operadores de atribuição. Vamos escrever um script usando o operador "+=". Observe o código abaixo: <script type="text/javascript"> <!--   var numUm = 100;   var numDois = 200;   numDois += numUm;   document.write(numDois); //--> </script> Este script é bem simples. Nas primeiras duas linhas do script, nós atribuímos valores às variáveis numUm e numDois, usando o operador de atribuição "=". Na terceira linha, nós usamos a construção numDois += numUm; que quer dizer "pegue o valor da variável numDois, some ao valor da variável numUm e atribua o resultado na variável numDois". Este script poderia ser modificado, substituindo esta linha por numDois = numDois + numUm; Este script é bem simples. Nas primeiras duas linhas do script, nós atribuímos valores às variáveis numUm e numDois, usando o operador de atribuição = . Na terceira linha, nós usamos a construção numDois += numUm; que quer dizer pegue o valor da variável numDois, some ao valor da variável numUm e atribua o resultado na variável numDois . Este script poderia ser modificado, substituindo esta linha por numDois = numDois + numUm;", "width": "800" }

52 JavaScript Operadores de atribuição...
Vamos usar o mesmo script, mas desta vez com o operador "*=" que quer dizer o seguinte: "pegue o valor da variável numDois, multiplique pelo valor da variável numUm e atribua o resultado na variável numDois". Vamos ao código: <script type="text/javascript"> <!--   var numUm = 100;   var numDois = 200;   numDois *= numUm;   document.write(numDois); //--> </script> Ao executar o código, você verá o valor 2000 ser escrito na página, já que a variável numDois multiplicada pelo valor da variável numUm resultado mesmo neste valor. Novamente aqui você pode escrever o mesmo script, usando numDois = numDois * numUm; O símbolo "*" é usado para as multiplicações. Ao executar o código, você verá o valor 2000 ser escrito na página, já que a variável numDois multiplicada pelo valor da variável numUm resultado mesmo neste valor. Novamente aqui você pode escrever o mesmo script, usando numDois = numDois * numUm; O símbolo * é usado para as multiplicações.", "width": "800" }

53 Operadores de comparação...
JavaScript

54 JavaScript Operadores de comparação...
Operadores de comparação comparam dois valores e retornam um valor verdadeiro (true) ou falso (false). Este tipo de operador é usado para fazer com que o seu script execute uma ação, dependendo do valor de uma operação. Veja o código: <script type="text/javascript"> <!--   function checar(){     var numero = parseInt(document.form1.text1.value);     if(numero == 10)       window.alert('Você digitou o número 10.');     if(numero > 10)       window.alert('Você digitou um número maior que 10.');     if(numero < 10)       window.alert('Você digitou um número menor que 10.');   } //--> </script> <form name="form1"> Digite um número: <input type="text" name="text1"> <input type="button" value="Checar" onclick="checar()"> </form>

Digite um número:
", "width": "800" }

55 JavaScript Operadores de comparação...
Este script produzirá um formulário como o que está exibido na figura seguinte:

56 JavaScript Operadores lógicos
Operadores lógicos são usados para testar valores em seus scripts e executar partes do código, dependendo do resultado do teste. Um bom uso destes operadores é aquele que verifica se o usuário preencheu os campos de um formulário com os valores válidos. Vamos escrever um script usando um destes operadores: <script type="text/javascript"> <!--   var digito1 = 20;   var digito2 = 30;   if((digito1 == 20) && (digito2 == 30))     window.alert('Os valores estão corretos.'); //--> </script> Neste código a mensagem só será exibida se os valores das variáveis digito1 e digito2 passarem pelo teste com o operador "&&", usado para testar duas condições ao mesmo tempo. Neste código a mensagem só será exibida se os valores das variáveis digito1 e digito2 passarem pelo teste com o operador && , usado para testar duas condições ao mesmo tempo.", "width": "800" }

57 JavaScript Instrução IF
<script type="text/javascript"> <!--   var valor1 = 200;   var valor2 = 300;   var resultado = valor1 + valor2;   if(resultado == 500){     window.alert('O resultado é igual a 500.');   } //--> </script> ", "width": "800" }

58 JavaScript Usando mais de uma instrução IF no mesmo script
<script type="text/javascript"> <!-- function checar(){   var ocupacao = document.form1.text1.value;   if(ocupacao == "Digitador")     window.alert('Como está a sua velocidade de digitação?');   if(ocupacao == "Programador")     window.alert('Você programa em Java?');   if(ocupacao == "Técnico")     window.alert('Você conserta computadores?');   if(ocupacao == "Instrutor")     window.alert('Tem ensinado muito ultimamente?'); } //--> </script> <form name="form1"> Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form>

Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)
", "width": "800" }

59 JavaScript Usando mais de uma instrução IF no mesmo script
O script apresentado exibirá um resultado semelhante ao mostrado na seguinte figura: Este script usa várias instruções if para checar a ocupação digitada pelo usuário e exibe uma mensagem de acordo com cada uma. Mas esse script tem um problema, que vamos ver em seguida.

60 JavaScript Usando mais de uma instrução IF no mesmo script
No script anterior, o nosso usuário tem que escolher uma das opções e preencher a caixa de texto. Mas, e se nosso usuário tiver uma outra ocupação, digitá-la na caixa de texto e clicar o botão? O nosso script não fará nada, já que ele apenas exibirá as mensagens se as condições das instruções if forem satisfeitas. Veja uma nova versão do código abaixo no qual propomos uma solução para o problema, acrescentando condições else. Vamos ao código ...

61 JavaScript Usando mais de uma instrução IF no mesmo script
<script type="text/javascript"> <!-- function checar(){   var ocupacao = document.form1.text1.value;   if(ocupacao == "Digitador"){     window.alert('Como está a sua velocidade de digitação?');   }   else if(ocupacao == "Programador"){     window.alert('Você programa em Java?');   }   else if(ocupacao == "Técnico"){     window.alert('Você conserta computadores?');   }   else if(ocupacao == "Instrutor"){     window.alert('Tem ensinado muito ultimamente?');   }   else{     window.alert('Informe uma das opções acima.');   } } //--> </script> <form name="form1"> Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form>

Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)
", "width": "800" }

62 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO WHILE A instrução while realiza uma ação enquanto determinada condição for satisfeita. Sua sintaxe básica é: while (expressão) { comandos } Exemplo: Utilização do laço while que é repetido por total de 10 vezes: num=0; while(num<10){ document.write("Número: "+num+"<br>"); num++;

63 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO FOR A instrução for realiza uma ação até que determinada condição seja satisfeita. Sua sintaxe básica é: for (início;condição;incremento) { comandos }

64 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO FOR O início determina o valor inicial do laço for. Normalmente é 0 ou 1, porém poderá ser especificado qualquer outro valor. O valor especificado é atribuído em uma variável, por exemplo i=0, count=1. A condição determina a expressão que irá controlar o número de repetições do laço. Enquanto esta expressão for verdadeira, o laço continuará, caso o laço seja falso, o laço terminará. Por exemplo: i<20. Enquanto o valor de i for menor que 20, a condição é verdadeira. O incremento determina como o laço irá contar, de 1 em 1, 2 em 2, 5 em 5, 10 em 10, enfim. Exemplo: i++. Será aumentado o valor da variável i a cada repetição. Diferente de todas as outras linguagens, em JavaScript, a instrução for, utiliza ponto e vírgula para separar os argumentos ao invés de vírgula.

65 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO FOR Vejamos um exemplo prático de utilização do laço for que conta valores de 1 até 10, acrescentando um valor de cada vez: <script> for (i=1 ; i<=10 ; i++){ document.write("número: "+ i +"<br>"); } </script> i é a variável utilizada para armazenar o contador do laço for. Logo mais, o laço inicia com 1 e continua até 10. A expressão condicional é i<10 (i é menor que 10). Enquanto a expressão condicional for verdadeira, o laço for continua. No incremento, a cada repetição do laço será adicionado a variável i mais 1. i é a variável utilizada para armazenar o contador do laço for. Logo mais, o laço inicia com 1 e continua até 10. A expressão condicional é i<10 (i é menor que 10). Enquanto a expressão condicional for verdadeira, o laço for continua. No incremento, a cada repetição do laço será adicionado a variável i mais 1.", "width": "800" }

66 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO FOR Veja outro exemplo: <script> for (i=1 ; i<=10 ; i=i+2){ document.write("iteração: "+i+"<br>"); } </script> ", "width": "800" }

67 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO FOR...IN Podemos dizer que o laço for...in é uma versão especial da instrução for, que é usada para saber os nomes de propriedades e conteúdos das propriedades de objetos no JavaScript. Esta instrução é muito usada na depuração de códigos. Por exemplo, caso uma parte do código JavaScript não esteja funcionando corretamente e existe uma suspeita de que existe uma falha do objeto JavaScript, o usuário poderá usar for...in para examinar as propriedades do objeto usado. Sua sintaxe é formada da seguinte maneira: for (variável in objeto){ instruções; }

68 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO IF ... ELSE Realiza determinada ação de acordo com uma condição. Sua sintaxe básica é: if (condição) { comandos } else { }

69 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO IF ... ELSE Caso haja mais de uma condição a ser avaliada pode-se fazer o uso da instrução ELSE IF. Observe sua sintaxe: if (condição) { comandos } else if (condição2) { } else { }

70 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO IF ... ELSE Veja um exemplo da utilização da instrução if: <script> function condicao(){ if(form1.nome.value==""){ alert("Favor Preencher o campo"); return form1.nome.focus(); } </script> <pre> <form name="form1"> Nome: <input type="text" name="nome" onBlur="condicao(this.value)"> Neste exemplo foi criada uma função que testará o conteúdo da variável nome, que ocorrerá assim que o usuário retirar o foco do campo, caso o valor da variável esteja vazio, será exibida uma mensagem de alerta informando para o preenchimento e em seguida o foco será retornado para o campo nome. Em caso contrário, o script continuará seu processamento normal até o fim.

 
Nome: Neste exemplo foi criada uma função que testará o conteúdo da variável nome, que ocorrerá assim que o usuário retirar o foco do campo, caso o valor da variável esteja vazio, será exibida uma mensagem de alerta informando para o preenchimento e em seguida o foco será retornado para o campo nome. Em caso contrário, o script continuará seu processamento normal até o fim.", "width": "800" }

71 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO IF Além dos métodos condicionais apresentados, a linguagem JavaScript suporta um método alternativo para criar expressões condicionais. Este método já suportado em outras linguagens de programação permite ao usuário construir um exemplo prático e simples para sua utilização. Sua sintaxe básica tem a seguinte formação: (condição) ? Valor verdadeiro : Valor falso; onde condição é a expressão à ser avaliada. onde Valor verdadeiro, especifica a ação que ocorrerá se a condição for verdadeira. onde Valor falso, especifica a ação que ocorrerá caso a condição seja falsa.

72 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript INSTRUÇÃO IF Veja abaixo um exemplo de utilização deste tipo de expressão condicional: exemplo=prompt("Digite seu nome ou clique em Cancelar.",""); (exemplo==null) ? alert("O usuário Cancelou!") : alert("O usuário digitou: "+exemplo); Assim como na maioria das linguagens de programação a instrução if não está limitada a utilização apenas do sinal de igualdade (==). O usuário poderá fazer diferentes tipos de testes lógicos como se os valores são diferentes, maior que ou menor que, entre outros.

73 COMANDOS CONDICIONAIS E DE REPETIÇÃO
JavaScript SWITCH Esta instrução é bem semelhante com uma estrutura IF, porém é mais eficiente em razão de ser mais simples sua utilização e seu entendimento. Veja a sintaxe utilizada para o uso de instruções SWITCH: switch (expressão){ case CONSTANTE: comandos; break; case CONSTANTE2: case default: }

74 Switch JavaScript <script type="text/javascript"> <!-- function checar(){   var ocupacao = document.form1.text1.value;   switch(ocupacao.toLowerCase()){     case 'digitador' :{       window.alert('Como está a sua velocidade de digitação?');       break;     }     case 'programador' :{       window.alert('Você programa em Java?');       break;     }     case 'técnico' :{       window.alert('Você conserta computadores?');       break;     }     case 'instrutor' :{       window.alert('Tem ensinado muito ultimamente?');       break;     }     default:{       window.alert('Informe uma das opções acima.');     }   } } //--> </script> <form name="form1"> Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form> Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)

", "width": "800" }

75 JavaScript Laços - Repetição
<script type="text/javascript"> <!--   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>');   document.write('Esta é uma linha de texto<br>'); //--> </script> Substituir por.... <script type="text/javascript"> <!--   var i;   for(i = 1; i <= 10; i++){     document.write('Esta é uma linha de texto<br>');   } //--> </script> Substituir por.... ", "width": "800" }

76 JavaScript Laços - Repetição for() (ação a ser executada)
Aqui nós definimos o laço e abrimos os parênteses para escrevermos os parâmetros da nossa instrução. Observe que a ação a ser executada no loop deve estar dentro das chaves { }. Vamos ver agora os parâmetros a serem usados. i = 1; Aqui nós definimos o valor da variável i. Você deve sempre colocar o valor de 1 para esta variável, já que o loop deverá começar a partir do primeiro elemento. i <= 10; Esta é a parte mais importante do loop, já que aqui nós definimos os parâmetros principais da instrução. Esta parte do código quer dizer: "Enquanto a variável i for menor ou igual a 10, execute o trecho de código a seguir". É claro que você pode alterar tanto o nome da variável quanto o valor das vezes que o loop será executado. i++ Neste trecho do código será acrescido um valor à variável, em em bom português quer dizer "todas as vezes que o laço passar aqui, faça o favor de acrescentar 1 a esta variável". Como o símbolo "++" significa incremento, o valor da variável será aumentado até que satisfaça o valor definido na instrução. Quando ele for atingido, o loop não mais será executado.

77 JavaScript Exemplos de códigos
<script type="text/javascript"> <!--   document.write('Esta é uma linha de texto<br>'); //--> </script> <script type="text/javascript"> <!--   var nome = 'Roberto';   document.write(nome); //--> </script> <script type="text/javascript"> <!--   var nome = 'Roberto';   document.write('Meu nome é ' + nome); //--> </script> <script type="text/javascript"> <!--   var i;   for(i = 1; i <= 10; i++){     document.write('Esta é uma linha de texto número ' + i + '<br>');   } //--> </script> JavaScript JavaScript.", "width": "800" }

78 While JavaScript Enquanto as instruções if e if...else possibilitam a você testar todas as condições possíveis, a instrução switch deixa as suas condições if mais dinâmicas e fáceis de serem lidas, a instrução for possibilita a execução de um laço (loop) determinado número de vezes, e a instrução while permite a execução de um loop até que uma condição seja satisfeita. Esta é a diferença entre as instruções for e while. Enquanto na instrução for você define a quantidade de vezes que o loop executa, na instrução while você pode definir que o laço será executado até que uma condição ou valor seja satisfeito. Como exemplo de um loop while podemos ter um script que lê todos os elementos de um array e então escreve esse conteúdo na página. O uso do loop while aqui é muito simples, já que while em inglês significa "enquanto", ou seja, enquanto não alcançarmos o fim dos valores, continue executando o loop.

79 JavaScript While – exemplo prático
<script type="text/javascript"> <!--   var numero = 1;   while(numero <= 10){     document.write('Esta é uma linha de texto<br>');     numero++;   } //--> </script> ", "width": "800" }

80 Funções JavaScript Funções são partes muito importantes de uma linguagem de programação. Todas as linguagens de programação têm os seus conjuntos de funções. Mas, o que é uma função? Para simplificar, funções são trechos de código que você pode executar, fazendo a chamada por meio de um link, um botão ou até mesmo dentro de uma outra função. O JavaScript tem um bom número de funções built-in, ou seja, funções que já fazem parte da linguagem, mas a grande parte das funções que for utilizar será escrita por você mesmo. As funções em JavaScript deverão ser escritas entre a parte <head> e </head> de sua página. Não há nenhum problema se você escrevê-las na parte <body></body>, mas acreditamos que queira seguir as instruções passadas pelos criadores da linguagem. O fato de termos que escrevê-las na parte <head></head> é que não corremos o risco de algum código na parte <body></body> fazer a chamada a uma destas funções enquanto a página não estiver totalmente carregada.

81 JavaScript Funções - Exemplo
<script type="text/javascript"> <!--   function mensagem(){     window.alert('Esta mensagem foi chamada por meio de uma função.');   } //--> </script> Execute o código e veja. Não aconteceu nada! Por quê? Para que as funções sejam executadas, elas precisam ser chamadas a partir de um ponto do código. Vamos ver como chamar funções por meio de botões e links. Quando estivermos estudando os eventos em JavaScript, você verá que é possível chamar funções a partir de qualquer evento. Nessa parte do curso vamos usar o evento onclick, que acontece quando o usuário clica em um botão ou link. Vamos lá! Execute o código e veja. Não aconteceu nada! Por quê? Para que as funções sejam executadas, elas precisam ser chamadas a partir de um ponto do código. Vamos ver como chamar funções por meio de botões e links. Quando estivermos estudando os eventos em JavaScript, você verá que é possível chamar funções a partir de qualquer evento. Nessa parte do curso vamos usar o evento onclick, que acontece quando o usuário clica em um botão ou link. Vamos lá!", "width": "800" }

82 JavaScript Chamando Funções a partir de um BOTÃO ...
Chamar funções a partir de um botão é muito simples, como veremos em seguida. Escreva um formulário e um botão na sua página, como mostra a figura. Veja o código para o botão logo abaixo da figura: Este é o código HTML para o botão. Observe que você colocou o código da função na parte <head></head>, mas o código para o botão deve estar na parte <body></body> da página: <form name="form1">   <input type="button" value="Exibir Mensagem" onclick="mensagem()"> </form> Agora execute a página e clique no botão. Você verá a mensagem ser exibida na tela. Observe o trecho do código HTML: onclick="mensagem() É nesta parte que definimos a ação que será executada no evento onclick do botão. Lembre-se de colocar a ação que será executada pelo evento do botão entre aspas e se for uma função, usar o mesmo nome e tipo de letras (maiúsculas e minúsculas).

83 JavaScript Chamando Funções a partir de um LINK ...
Com a função na parte <head></head>, digite o código abaixo na parte <body></body> de sua página: <a href="javascript:mensagem()">Clique aqui para exibir a mensagem</a> Simples, não? Observe que usamos um link normal, mas na propriedade href digitamos o código a ser executado, usando a linha: javascript:mensagem() Aqui nós estamos identificando que o link deverá executar um código JavaScript e então passamos o nome da função. Não se esqueça de usar os dois pontos (:) depois da palavra JavaScript.

84 JavaScript FUNÇÕES FUNÇÕES
Funções em JavaScript nada mais são que uma rotina JavaScript que possui um conjunto de instruções à serem executadas. Sua sintaxe compõem-se dos seguintes parâmetros: function nomeFunção(argumentos) { Comandos } Se a função possuir argumentos, estes deverão estar colocados entre parênteses após o nome da função. O corpo da função deverá ser colocado entre chaves que indicarão o início do bloco de instruções e o fim do bloco de instruções. Normalmente, as funções são definidas dentro do cabeçalho da página HTML representados pelo tag <HEAD>. Com isto, todas as funções são carregadas assim que a página é carregada, bem antes que o usuário pense em executar alguma ação.

85 JavaScript FUNÇÕES FUNÇÕES
Vejamos um exemplo simples de uma função que exibe uma mensagem na tela: function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } Com isto, o usuário apenas definiu a função, para que ela seja executada, é necessário fazer a sua chamada. Para chamar a função basta incluir seu nome no local do código que deseja que ela seja executada.

86 JavaScript FUNÇÕES FUNÇÕES
No exemplo a seguir, note que após a função foi feita sua chamada, bastando para tanto redigir seu nome, observe: function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } primeiraFuncao(); É padrão da linguagem JavaScript que ao encontrar a chamada de uma função, ele desvia para as instruções respectivas desta função e ao terminá-la, volta para o primeiro código após a chamada da função. Uma função pode ser chamada de diversas formas, dentro da área do código JavaScript e até mesmo através de um evento dentro de um tag HTML, como um botão de formulário ou hiperlink.

87 JavaScript FUNÇÕES FUNÇÕES <HTML> <HEAD>
<TITLE>UTILIZANDO FUNÇÕES</TITLE> </HEAD> <BODY> <SCRIPT> function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } </SCRIPT> <INPUT TYPE="BUTTON" VALUE="Clique aqui!" onClick="primeiraFuncao()"> </BODY> </HTML> Neste exemplo, foi definido a chamada da função através do evento onClick, que é processado assim que o usuário dá um clique sobre o botão que executará a função. Neste exemplo, foi definido a chamada da função através do evento onClick, que é processado assim que o usuário dá um clique sobre o botão que executará a função.", "width": "800" }

88 JavaScript FUNÇÕES FUNÇÕES
O usuário poderá através do uso de funções passar valores a mesma, com isto a função usará os valores no processamento. Vejamos no exemplo abaixo que foi definido como argumento da função exemplo a variável texto, esta variável é usada como o texto que será exibido pela instrução alert. Ao chamar a função, basta o usuário definir o texto que deseja ser apresentado como argumento da função: <script> function exemplo(texto){ alert(texto); } exemplo("Curso de JavaScript"); </script> ", "width": "800" }

89 JavaScript FUNÇÕES FUNÇÕES
Em algumas situações o usuário talvez queira retornar um valor de uma função. Para isto, basta fazer o uso da instrução return mais o valor que queira retornar. Vejamos um exemplo típico do uso de uma função que irá retornar um determinado valor. Observe: <script> var ret=prompt("digite o nome",""); var shor=mostranome(ret); alert(shor); function mostranome(nome){ if (nome=="" || nome==null) return ("erro"); else return (nome); }

90 JavaScript FUNÇÕES FUNÇÕES
É claro que se houvesse vários argumentos à serem exibidos, isto seria uma maneira penosa de programar. Através da linguagem JavaScript, o usuário poderá fazer uso do objeto arguments que é criado dentro de uma função. Este objeto é um array que poderá receber todos os argumentos necessários para passar a função quando a mesma for chamada. Veja no exemplo a seguir sua utilização: <script> mensagem("SENAC","Minas Gerais"); mensagem("CFP","Informática"); function mensagem(){ for (i=0;i<mensagem.arguments.length;i++){ alert(mensagem.arguments[i]); } </script> ", "width": "800" }

91 JavaScript FUNÇÕES RETURN
Esta instrução tem como finalidade marcar o final de uma função. A linguagem JavaScript ao encontrar esta instrução ele irá retornar para o ponto imediatamente após a chamada da função. Ela ainda pode ser definida com um valor de retorno ou não. Quando um valor é incluído com esta instrução, a função irá retornar este valor definido pela instrução. Quando um valor não é inclído com a instrução return, então a função retorna um valor nulo. Por padrão, esta instrução jamais é usada fora de uma função. Quando isto acontece, a linguagem irá retornar um erro quando a mesma estiver definida fora de uma função. Os parênteses apresentados no exemplo seguinte não são obrigatórios. Vejamos alguns exemplos de scripts usando a instrução return.

92 JavaScript Escrevendo uma Função com argumentos ...
Depois de digitar a função na parte <head></head> de sua página, vá até a parte <body></body> e digite o seguinte código: <form name="form1">   <input type="button" value="Mensagem"   onclick="mensagem('Esta função foi chamada a partir do botão')"> </form> Lembre-se de digitar o conteúdo <input...botão')"> em apenas uma linha. Assim que você executar o código, verá uma chamada à função mensagem(). Como a função tem como parâmetro a variável texto e o método alert exibirá o conteúdo desta variável, tudo que temos a fazer é substituir esta variável pelo texto que queremos exibir. Veja agora como usar um link para fazer a mesma chamada à função, mas, desta vez substituindo a linha de texto. Logo abaixo do código para o botão, escreva o seguinte código: <a href="javascript:mensagem('A função foi chamada a partir de um link')"> Clique aqui para exibir a mensagem</a> Digite todo o conteúdo acima em apenas uma linha.

93 JavaScript Escrevendo uma função usando a instrução return ...
<script type="text/javascript"> <!--   function total(um, dois){     var resultado;     resultado = um + dois;     return resultado;   }   function exibir(){     window.alert(total(20, 40));   } //--> </script> Para executar todo este código, digite as duas funções acima na parte <head></head> da página e digite o código seguinte na parte <body></body>: <form name="form1">   <input type="button" value="Resultado" onclick="exibir()"> </form> Para chamar a mesma função por meio de um link, use o código seguinte: <a href="javascript:exibir()">Clique para ver o resultado</a> Para executar todo este código, digite as duas funções acima na parte da página e digite o código seguinte na parte :

Para chamar a mesma função por meio de um link, use o código seguinte: Clique para ver o resultado", "width": "800" }

94 JavaScript FUNÇÕES FUNÇÕES
Funções em JavaScript nada mais são que uma rotina JavaScript que possui um conjunto de instruções à serem executadas. Sua sintaxe compõem-se dos seguintes parâmetros: function nomeFunção(argumentos) { Comandos } Se a função possuir argumentos, estes deverão estar colocados entre parênteses após o nome da função. O corpo da função deverá ser colocado entre chaves que indicarão o início do bloco de instruções e o fim do bloco de instruções. Normalmente, as funções são definidas dentro do cabeçalho da página HTML representados pelo tag <HEAD>. Com isto, todas as funções são carregadas assim que a página é carregada, bem antes que o usuário pense em executar alguma ação.

95 JavaScript FUNÇÕES FUNÇÕES
Vejamos um exemplo simples de uma função que exibe uma mensagem na tela: function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } Com isto, o usuário apenas definiu a função, para que ela seja executada, é necessário fazer a sua chamada. Para chamar a função basta incluir seu nome no local do código que deseja que ela seja executada.

96 JavaScript FUNÇÕES FUNÇÕES
No exemplo a seguir, note que após a função foi feita sua chamada, bastando para tanto redigir seu nome, observe: function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } primeiraFuncao(); É padrão da linguagem JavaScript que ao encontrar a chamada de uma função, ele desvia para as instruções respectivas desta função e ao terminá-la, volta para o primeiro código após a chamada da função. Uma função pode ser chamada de diversas formas, dentro da área do código JavaScript e até mesmo através de um evento dentro de um tag HTML, como um botão de formulário ou hiperlink.

97 JavaScript FUNÇÕES FUNÇÕES <HTML> <HEAD>
<TITLE>UTILIZANDO FUNÇÕES</TITLE> </HEAD> <BODY> <SCRIPT> function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } </SCRIPT> <INPUT TYPE="BUTTON" VALUE="Clique aqui!" onClick="primeiraFuncao()"> </BODY> </HTML> Neste exemplo, foi definido a chamada da função através do evento onClick, que é processado assim que o usuário dá um clique sobre o botão que executará a função. Neste exemplo, foi definido a chamada da função através do evento onClick, que é processado assim que o usuário dá um clique sobre o botão que executará a função.", "width": "800" }

98 JavaScript FUNÇÕES FUNÇÕES
O usuário poderá através do uso de funções passar valores a mesma, com isto a função usará os valores no processamento. Vejamos no exemplo abaixo que foi definido como argumento da função exemplo a variável texto, esta variável é usada como o texto que será exibido pela instrução alert. Ao chamar a função, basta o usuário definir o texto que deseja ser apresentado como argumento da função: <script> function exemplo(texto){ alert(texto); } exemplo("Curso de JavaScript"); </script> ", "width": "800" }

99 JavaScript FUNÇÕES FUNÇÕES
Em algumas situações o usuário talvez queira retornar um valor de uma função. Para isto, basta fazer o uso da instrução return mais o valor que queira retornar. Vejamos um exemplo típico do uso de uma função que irá retornar um determinado valor. Observe: <script> var ret=prompt("digite o nome",""); var shor=mostranome(ret); alert(shor); function mostranome(nome){ if (nome=="" || nome==null) return ("erro"); else return (nome); }

100 JavaScript FUNÇÕES FUNÇÕES
É claro que se houvesse vários argumentos à serem exibidos, isto seria uma maneira penosa de programar. Através da linguagem JavaScript, o usuário poderá fazer uso do objeto arguments que é criado dentro de uma função. Este objeto é um array que poderá receber todos os argumentos necessários para passar a função quando a mesma for chamada. Veja no exemplo a seguir sua utilização: <script> mensagem("SENAC","Minas Gerais"); mensagem("CFP","Informática"); function mensagem(){ for (i=0;i<mensagem.arguments.length;i++){ alert(mensagem.arguments[i]); } </script> ", "width": "800" }

101 JavaScript FUNÇÕES RETURN <script> <!-- function teste(){
var valor=5; if (valor>=5){ return (true); } else { return (false); } --> </script> ", "width": "800" }

102 JavaScript FUNÇÕES RETURN <script> <!-- function teste(){
var valor=5; if (valor>=5){ return (true); } else { return (false); } --> </script> ", "width": "800" }

103 JavaScript A mensagem alert ...
Mensagens alert, prompt e confirm são geradas quando fazemos uso das propriedades do objeto window. Todas essas mensagens são métodos deste objeto. alert é o tipo de mensagem mais simples em JavaScript e pode ser expressa da seguinte forma: window.alert("O texto da mensagem vai aqui"); Este tipo de mensagem gera uma pequena janela, conforme visto na figura a seguir:

104 JavaScript A mensagem prompt ...
As mensagens prompt são exibidas ao usuário solicitando que ele digite alguma coisa. De posse da informação desejada, você pode efetuar alguma ação nos seus scripts. As mensagens prompt podem ser escritas com o seguinte argumento: window.prompt(mensagem, texto padrão) prompt é um método do objeto window, mensagem é o texto que será exibido na caixa de mensagem e texto padrão é o que aparece escrito como entrada padrão.

105 JavaScript A mensagem prompt ...
Vamos escrever uma mensagem que pede ao usuário que digite o seu nome e então, armazenando o nome em uma variável, nós vamos escrever uma mensagem de boas-vindas na página. Digite o código a seguir na parte <head></head> de sua página: <script type="text/javascript"> <!--   var nome;   nome = window.prompt("Por favor, digite seu nome", "Seu nome");   document.write("Bem-vindo ao meu site, " + nome); //--> </script> O fato de colocarmos este script na parte <head></head> é que será o primeiro conteúdo a ser escrito na página. Todas as vezes que seus visitantes acessarem a página, eles digitarão seus nomes e quando clicarem no botão OK, verão uma mensagem personalizada escrita na página. O funcionamento do script é muito simples. Primeiro criamos uma variável nome, em seguida definimos que essa variável receberá o resultado da nossa mensagem e a partir daí, usamos a variável para escrever na página, usando o método write do objeto document. A seguir, vamos levar o nosso script um pouco mais adiante e fazer um cálculo matemático. O fato de colocarmos este script na parte é que será o primeiro conteúdo a ser escrito na página. Todas as vezes que seus visitantes acessarem a página, eles digitarão seus nomes e quando clicarem no botão OK, verão uma mensagem personalizada escrita na página. O funcionamento do script é muito simples. Primeiro criamos uma variável nome, em seguida definimos que essa variável receberá o resultado da nossa mensagem e a partir daí, usamos a variável para escrever na página, usando o método write do objeto document. A seguir, vamos levar o nosso script um pouco mais adiante e fazer um cálculo matemático.", "width": "800" }

106 JavaScript Fazendo um cálculo matemático usando mensagens prompt ...
O script seguinte demonstra bem o uso das mensagens prompt para solicitar que o usuário digite um valor, e então faça um cálculo baseado nos valores informados. Digite o código abaixo na parte <body></body> de sua página: <script type="text/javascript"> <!--   var numero1 = parseInt(window.prompt("Digite um número", "0"));   var numero2 = parseInt(window.prompt("Digite outro número", "0"));   var resultado = numero1 + numero2;   window.alert("A soma dos números é: " + resultado); //--> </script> ", "width": "800" }

107 JavaScript A mensagem confirm ...
As mensagens confirm são usadas para fazer uma pergunta ao usuário e então, baseado na resposta, executar uma ação em seus scripts. As mensagens confirm podem ser escritas seguindo a sintáxe: window.confirm(pergunta); Em que confirm é o método do objeto window para exibir a mensagem e pergunta é o texto da pergunta que será feita ao usuário. Veja a ilustração deste tipo de mensagem: Para produzir esta mensagem, digite o código seguinte na parte <body></body> de sua página: <script type="text/javascript"> <!--   window.confirm("Você deseja mesmo acessar esta página?"); //--> </script> ", "width": "800" }

108 JavaScript A mensagem confirm ...
Quando você executar este código, verá que tanto faz clicar no botão OK ou Cancelar; o seu script não executa nenhuma ação. Para que isso aconteça, é preciso que o nosso código esteja preparado para executar um procedimento caso o usuário clique no botão OK (para confirmar o que foi perguntado) e outro procedimento caso o usuário clique no botão Cancelar (respondendo não à pergunta). Vamos criar um script que pergunta ao usuário se o nome digitado em uma caixa de texto é realmente o nome que ele desejava escrever. Veja em seguida a figura produzida pelo script:

109 JavaScript A mensagem confirm ...
Para produzir a caixa de texto e o botão, digite o código seguinte na parte <body></body> de sua página: <form name="form1">   Digite o seu nome aqui:<br>   <input type="text" name="text1">   <input type="button" value="Confirmar" onclick="checar()"> </form> Agora digite o código abaixo na parte <head></head> de sua página: <script type="text/javascript"> <!--   function checar(){     var nome = document.form1.text1.value;     if(window.confirm("O seu nome é mesmo " + nome + "?")){       window.alert("Você confirmou que o seu nome é " + nome);     }     else{       window.alert("OK, o seu nome não é " + nome);     }   } //--> </script> ", "width": "800" }

110 JavaScript Exemplos Observe o código abaixo, em JavaScript.
A execução desse código irá gerar a seguinte saída: Clique em para executar!

111 Fibonnaci - código JavaScript Execute!!!!!!

112 Fibonnaci JavaScript <html> <head> <title>IHM - JavaScript - Fibonnaci</title> </head> <body> <p><img src="javascript_fibonacci.JPG" width="487" height="277" alt="javascript_fibonacci.JPG (27769 bytes)"></p> <script language="JavaScript"> document.write("<h2>Série de Fibonnaci</h2>"); for( i = 1, k = 1, j = 0, fibo = 0; i < 16; i++, fibo=k+j, k=j, j=fibo) { document.write("Fibonnaci (" + i + ") = " + fibo); document.write("<br>"); } </script> </body> </html> Clique para executar! No browser, clique na opção Exibir código-fonte ... Clique http://celsocn.net/javascript_fibonnaci.htm para executar! No browser, clique na opção Exibir código-fonte ...", "width": "800" }

113 Fibonnaci - Execução JavaScript

114 Fatorial - código JavaScript

115 Fatorial JavaScript <html> <head> <title>IHM - JavaScript1 - Fatorial</title> </head> <script language="JavaScript"> document.write("<h2>Tabela de Fatorial</h2>"); for( i = 1, fat = 1; i < 10; i++, fat *= i ) { document.write(i + "! = " + fat); document.write("<br>"); } </script> <body> <p><img src="javascript_fatorial.JPG" width="398" height="233" alt="javascript_fatorial.JPG (24880 bytes)"></p> </body> </html> Clique para executar! No browser, clique na opção Exibir código-fonte ...

javascript_fatorial.JPG

Clique http://celsocn.net/javascript_fatorial.htm para executar! No browser, clique na opção Exibir código-fonte ...", "width": "800" }

116 Fatorial - Execução JavaScript

117 JavaScript Exemplo Data do Dia Execute!!!!!!
Clique em Data do Dia No browser, clique na opção Exibir código-fonte ...

118 JavaScript Exemplo JavaScript301 IHM - VT6 Execute!!!!!!
Clique em js301 No browser, clique na opção Exibir código-fonte ...

119 JavaScript Exemplo JavaScript302 IHM - VT6 Execute!!!!!!
Clique em js302 No browser, clique na opção Exibir código-fonte ...

120 JavaScript Exemplo JavaScript303 IHM - VT6 Execute!!!!!!
Clique em js303 No browser, clique na opção Exibir código-fonte ...

121 JavaScript Exemplo JavaScript304 IHM - VT6 Execute!!!!!!
Clique em js304 No browser, clique na opção Exibir código-fonte ...

122 JavaScript Exemplo JavaScript305 IHM - VT6 Execute!!!!!!
Clique em js305 Corrija os erros ! No browser, clique na opção Exibir código-fonte ...

123 JavaScript Construindo o programa Estados & Capitais
Programa que deixa o usuário escolher um estado e assim poder visualizar em uma caixa de texto a capital correspondente. Não serão colocados todos os estados e as capitais. Observe que usaremos a instrução switch neste código.

124 JavaScript Construindo o programa Estados & Capitais
Programa que deixa o usuário escolher um estado e assim poder visualizar em uma caixa de texto a capital correspondente. Não serão colocados todos os estados e as capitais. Observe que usaremos a instrução switch neste código. <html> <head> <title>Estados e Capitais</title> </head> <body> <form name="form1">   Por favor escolha um estado:<br>   <select name="estados" onchange="ver_estado()">     <option value="-1">Selecione um estado</option>     <option value="Goiás">Goiás</option>     <option value="Mato Grosso">Mato Grosso</option>     <option value="Paraná">Paraná</option>     <option value="São Paulo">São Paulo</option>     <option value="Rio de Janeiro">Rio de Janeiro</option>     <option value="Tocantins">Tocantins</option>   </select><br>   Esta é a capital deste estado:<br>   <input type="text" name="capital"> </form>

125 JavaScript Construindo o programa Estados & Capitais
<script type="text/javascript"> <!-- function ver_estado(){   var estado = document.form1.estados.value;   switch(estado){     case 'Goiás':{       document.form1.capital.value = 'Goiânia';       break;     }     case 'Mato Grosso':{       document.form1.capital.value = 'Cuiabá';       break;     }     case 'Paraná':{       document.form1.capital.value = 'Curitiba';       break;     }     case 'São Paulo':{       document.form1.capital.value = 'São Paulo';       break;     }     case 'Rio de Janeiro':{       document.form1.capital.value = 'Rio de Janeiro';       break;     }     case 'Tocantins':{       document.form1.capital.value = 'Palmas';       break;     }     default:{       document.form1.capital.value = '';     }   } } //--> </script> </body> </html> JavaScript Uso da estrutura Switch ... case ... Construindo o programa Estados & Capitais JavaScript. Uso da estrutura Switch ... case ... Construindo o programa Estados & Capitais.", "width": "800" }

126 INTERFACE HOMEM-MÁQUINA
FIM


Carregar ppt "INTERFACE HOMEM-MÁQUINA"

Apresentações semelhantes


Anúncios Google