Prof. Celso Cardoso Neto. INTRODUÇÃO Atualmente, é cada vez maior a demanda por profissionais nas áreas de desenvolvimento de sites e web design. Por

Prof. Celso Cardoso Neto

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.

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.

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.

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.

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.

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....

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.

Colocando JavaScript em uma página Web ...

Exemplo 1<html><head><title>Meu primeiro JavaScript</title></head><body> <script language="javascript"></script> </body></html>

http://celsocn.net/javascript_exemplo_1.htm

No browser, clique na opção Exibir código-fonte ...


Exemplo 1 - Execução

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  que quer dizer "aqui está o final do código a ser executado por este script“.

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

Exemplo 2

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

Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha.





Exemplo 3

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).





Resultado não é o mesmo que resultado

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!!!

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

Código 2<script language="javascript"></script>






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.

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>



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!

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"></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).

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




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.




<script language="javascript"></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.


Os colchetes [] são usados para acessar elementos de matrizes (arrays). <script language="javascript"></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.




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"></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.





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


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

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()

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.

Palavras Reservadas

Palavras ReservadasAlé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.

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.

• 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"></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ávelvar texto = 'Esta é a minha primeira variável';deve ser tratada como string.

Variáveis

• 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"></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.

Valores de variáveis podem ser alterados em tempo de execução

• 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"></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.

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.


<html><head><title>Estudando JavaScript</title><script type="text/javascript"></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 ...


O código resultará na página mostrada na imagem abaixo:


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

A execução deste código produzirá o seguinte resultado:87.32NaN65

http://www.arquivodecodigos.net/arquivo/referencias/javascript/global/propriedade_NaN.php

http://www.arquivodecodigos.net/arquivo/referencias/javascript/global/metodo_isNaN.php

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

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"></script><script type="text/javascript"></script></body></html>

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"></script><script type="text/javascript"></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.

O que são operadores ?

• Operadores são os símbolos que usamos quando estamos trabalhando com valores. Todos sabemos que 2 + 2 = 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"></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.

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"></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

Operadores aritméticos...

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"></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;


• 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"></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.

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

<form name="form1">Digite um número: <input type="text" name="text1"><input type="button" value="Checar" onclick="checar()"></form>


Este script produzirá um formulário como o que está exibido na figura seguinte:


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"></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.

Instrução IF

<script type="text/javascript"></script>

Usando mais de uma instrução IF no mesmo script

<script type="text/javascript"></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>


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.


• 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 ...


<script type="text/javascript"></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>

COMANDOS CONDICIONAIS E DE REPETIÇÃO

INSTRUÇÃO WHILE

A instrução while realiza uma ação enquanto determinada condição forsatisfeita.

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++;}


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}


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.


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.


INSTRUÇÃO FOR

• Veja outro exemplo:

<script>for (i=1 ; i<=10 ; i=i+2){document.write("iteração: "+i+"<br>");}</script>


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;}


INSTRUÇÃO IF ... ELSE

• Realiza determinada ação de acordo com uma condição.

• Sua sintaxe básica é:

if (condição) {comandos} else {comandos}



• 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) {comandos} else {comandos}



• 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.


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.


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áriodigitou: "+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.


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: comandos; break;case default: comandos; break;}

Switch

<script type="text/javascript"></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>

Laços - Repetição

<script type="text/javascript"></script>

<script type="text/javascript"></script>

Substituir por....

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.

Exemplos de códigos<script type="text/javascript"></script>

<script type="text/javascript"></script>

<script type="text/javascript"></script>

<script type="text/javascript"></script>

While

• 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.

While – exemplo prático

<script type="text/javascript"></script>

Funções

• 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.

Funções - Exemplo

<script type="text/javascript"></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á!

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).

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.

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.

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.

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:


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.

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.

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>

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);}

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>

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.

FUNÇÕES

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.

Escrevendo uma função usando a instrução return ...

<script type="text/javascript"></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>

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.

FUNÇÕES

FUNÇÕES

• Vejamos um exemplo simples de uma função que exibe uma mensagem na tela:


• 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.

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:


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.

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.

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>

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);}

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>

FUNÇÕES

FUNÇÕES

RETURN

<script></script>

RETURN

<script></script>

FUNÇÕES

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:

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.

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"></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.

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

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


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:


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

Exemplos

Observe o código abaixo, em JavaScript.

A execução desse código irá gerar a seguinte saída:a)0 1 1 2b)0 2 3 5c)1 2 3 5d)1 3 5 8

Clique em http://celsocn.net/pvweb.htm para executar!

Fibonnaci - código

Execute!!!!!!

Fibonnaci

<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 http://celsocn.net/javascript_fibonnaci.htm para executar!

Fibonnaci - Execução

Fatorial - código

Fatorial

<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 http://celsocn.net/javascript_fatorial.htm para executar!

Fatorial - Execução

Exemplo Data do Dia

Execute!!!!!!

Clique em Data do Dia

http://celsocn.net/javascript_data_do_dia.htm


Exemplo JavaScript301

Execute!!!!!!

Clique em js301

http://celsocn.net/javascript_301.htm


IHM - VT6


Clique em js302



Execute!!!!!!

IHM - VT6



Execute!!!!!!

IHM - VT6

Clique em js303




Execute!!!!!!

IHM - VT6

Clique em js304




Corrija os erros !

Execute!!!!!!

IHM - VT6

Clique em js305


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.

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>

Construindo o program

a Estados &

Capitais

<script type="text/javascript"></script>

</body></html>

Uso da estrutura Switch ... case ...

Documents

Prof. Celso Cardoso Neto. INTRODUÇÃO Atualmente, é cada vez maior a demanda por profissionais nas áreas de desenvolvimento de sites e web design. Por