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

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

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

Apresentações semelhantes


Apresentação em tema: "Prof. Celso Cardoso Neto. INTRODUÇÃO Atualmente, é cada vez maior a demanda por profissionais nas áreas de desenvolvimento de sites e web design. Por."— Transcrição da apresentação:

1 Prof. Celso Cardoso Neto

2

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

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

10 Colocando JavaScript em uma página Web... Exemplo 1 Meu primeiro JavaScript No browser, clique na opção Exibir código-fonte...

11 Exemplo 1 - Execução

12 Entendendo o script... Exemplo 1 Na parte, 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.

13 Entendendo o script... Exemplo 1 E finalmente temos a tag de fechamento 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

14 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: Este é o meu primeiro JavaScript. Em negrito agora. '); //--> 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...

15 Exemplo 2 - Execução

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

17 Exemplo 3 - Execução

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

19 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 Código 2 No browser, clique na opção Exibir código-fonte...

20 Exemplo 4 - Execução

21

22 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 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:

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

26 O uso de parênteses, chaves e colchetes JavaScript - Exemplo 6 - Uso de barra invertida - javascript_exemplo6.htm

27 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 O uso de parênteses, chaves e colchetes 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.

29 O uso de parênteses, chaves e colchetes Os colchetes [] são usados para acessar elementos de matrizes (arrays). 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.

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

31 O uso de parênteses, chaves e colchetes JavaScript - Exemplo 9 - Uso de parênteses, chaves e colchetes - javascript_exemplo9.htm

32 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: 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 */.

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

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

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

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

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

40 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 Usando variáveis para fazer um cálculo matemático Estudando JavaScript Primeiro Número: Segundo Número: Clique aqui para calcular: Que é parseFloat ? Veja no segundo slide a partir deste...

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

43 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... "); document.write(parseFloat(string2) + " "); document.write(parseFloat(string3)); //--> A execução deste código produzirá o seguinte resultado: NaN 65NaNisNaN

44 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: Estudando JavaScript

45 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: Estudando JavaScript

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

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

48 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: 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

49 Operadores aritméticos...

50 Operadores de atribuição...

51 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: 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;

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

53 Operadores de comparação...

54 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: 10) window.alert('Você digitou um número maior que 10.'); if(numero Digite um número: parseInt Operadores de comparação...

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

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

57 Instrução IF

58 Usando mais de uma instrução IF no mesmo script Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)

59 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 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 Usando mais de uma instrução IF no mesmo script Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)

62 COMANDOS CONDICIONAIS E DE REPETIÇÃO 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+" "); num++; }

63 COMANDOS CONDICIONAIS E DE REPETIÇÃO 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 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 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: for (i=1 ; i<=10 ; i++){ document.write("número: "+ i +" "); } 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.

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

67 COMANDOS CONDICIONAIS E DE REPETIÇÃO 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 INSTRUÇÃO IF... ELSE Realiza determinada ação de acordo com uma condição. Sua sintaxe básica é: if (condição) { comandos } else { comandos }

69 COMANDOS CONDICIONAIS E DE REPETIÇÃO 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) { comandos } else { comandos }

70 COMANDOS CONDICIONAIS E DE REPETIÇÃO INSTRUÇÃO IF... ELSE Veja um exemplo da utilização da instrução if: function condicao(){ if(form1.nome.value==""){ alert("Favor Preencher o campo"); return form1.nome.focus(); } 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.

71 COMANDOS CONDICIONAIS E DE REPETIÇÃO 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 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 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; }

74 Switch Por favor, digite a sua ocupação (Digitador, Programador, Técnico ou Instrutor)

75 Laços - Repetição '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); document.write('Esta é uma linha de texto '); //--> '); } //--> Substituir por....

76 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 Exemplos de códigos '); //--> '); } //-->

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

79 While – exemplo prático '); numero++; } //-->

80 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 e de sua página. Não há nenhum problema se você escrevê-las na parte, mas acreditamos que queira seguir as instruções passadas pelos criadores da linguagem. O fato de termos que escrevê-las na parte é que não corremos o risco de algum código na parte fazer a chamada a uma destas funções enquanto a página não estiver totalmente carregada.

81 Funções - Exemplo 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á!

82 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, mas o código para o botão deve estar na parte da página: 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 Chamando Funções a partir de um LINK... Com a função na parte, digite o código abaixo na parte de sua página: Clique aqui para exibir a mensagem 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 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. 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

85 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

86 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. FUNÇÕES

87 UTILIZANDO FUNÇÕES function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } 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

88 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: function exemplo(texto){ alert(texto); } exemplo("Curso de JavaScript"); FUNÇÕES

89 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: 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

90 É 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: mensagem("SENAC","Minas Gerais"); mensagem("CFP","Informática"); function mensagem(){ for (i=0;i

91 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

92 Escrevendo uma Função com argumentos... Depois de digitar a função na parte de sua página, vá até a parte e digite o seguinte código: Lembre-se de digitar o conteúdo 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: Clique aqui para exibir a mensagem Digite todo o conteúdo acima em apenas uma linha.

93 Escrevendo uma função usando a instrução return... 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

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

95 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

96 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. FUNÇÕES

97 UTILIZANDO FUNÇÕES function primeiraFuncao(){ alert("Isto é uma função JavaScript"); } 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

98 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: function exemplo(texto){ alert(texto); } exemplo("Curso de JavaScript"); FUNÇÕES

99 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: 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

100 É 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: mensagem("SENAC","Minas Gerais"); mensagem("CFP","Informática"); function mensagem(){ for (i=0;i

101 RETURN

102 RETURN FUNÇÕES

103 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 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 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 de sua página: 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.

106 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 de sua página:

107 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 de sua página:

108 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 A mensagem confirm... Para produzir a caixa de texto e o botão, digite o código seguinte na parte de sua página: Digite o seu nome aqui: Agora digite o código abaixo na parte de sua página:

110 Exemplos Observe o código abaixo, em JavaScript. A execução desse código irá gerar a seguinte saída: a) b) c) d) Clique em para executar!http://celsocn.net/pvweb.htm

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

112 Fibonnaci IHM - JavaScript - Fibonnaci javascript_fibonacci.JPG (27769 bytes) document.write(" Série de Fibonnaci "); 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(" "); } No browser, clique na opção Exibir código-fonte... Clique para executar!http://celsocn.net/javascript_fibonnaci.htm

113 Fibonnaci - Execução

114 Fatorial - código

115 Fatorial IHM - JavaScript1 - Fatorial document.write(" Tabela de Fatorial "); for( i = 1, fat = 1; i < 10; i++, fat *= i ) { document.write(i + "! = " + fat); document.write(" "); } javascript_fatorial.JPG (24880 bytes) No browser, clique na opção Exibir código- fonte... Clique para executar!http://celsocn.net/javascript_fatorial.htm

116 Fatorial - Execução

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

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

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

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

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

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

123 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 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. Estados e Capitais Por favor escolha um estado: Selecione um estado Goiás Mato Grosso Paraná São Paulo Rio de Janeiro Tocantins Esta é a capital deste estado:

125 Construindo o programa Estados & Capitais Uso da estrutura Switch... case...

126


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

Apresentações semelhantes


Anúncios Google