WEBDESIGN. Professor: Paulo Marcos Trentin - Escola CDI de Videira

Transcrição

1 WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

2 Introdução ao JavaScript É uma linguagem client-side que possui diversas aplicações, entre elas: Validar formulários; Comunicar com o servidor; Adicionar efeitos ao site; Adicionar funcionalidades extras. 2/7/2011 2

3 Introdução ao JavaScript Apesar de seu nome conter Java ela é muito diferente desta. É uma linguagem interpretada. Era conhecida como LiveScript quando foi lançada no navegador Netscape 2.0 em setembro de Segundo a literatura, seu nome foi mudado devido a fama do Java na época, então em conjunto com a Sun, a Netscape adotou o nome JavaScript. 2/7/2011 3

4 Onde é usada? Todos os sites modernos usam JavaScript. Ela permite maior interação com o usuário, evitando as recargas (refresh) repentinas da página seja para validar um formulário ou obter dados do servidor. 2/7/2011 4

5 Como começar Inserindo no HTML: 2/7/2011 5

6 Como começar Inserindo em arquivo externo: 2/7/2011 6

7 JavaScript Linguagem de Programação JavaScript é uma linguagem de programação. Portanto, contém variáveis, funções, operadores aritméticos e condicionais. É parcialmente orientada a objetos. Aprenderemos a programar! 2/7/2011 7

8 O que é uma variável? Toda informação que queremos administrar precisa ser armazenada em algum lugar temporário primeiro. Podemos pensar na variável como uma caixa. Ela pode conter algo dentro, algum valor. Esse valor pode ser um número, um nome, uma imagem ou ser nulo (caixa vazia). 2/7/2011 8

9 Criando uma variável em JavaScript 2/7/2011 9

10 Brincando com variáveis operadores aritméticos Operador Ação - Subtração + Adição / Divisão % Módulo -- (menos menos) Decremento ++ (mais mais) Incremento 2/7/

11 Brincando com variáveis operadores aritméticos 2/7/

12 Brincando com variáveis - resultado 2/7/

13 Concatenando (unindo) valores de variáveis Neste exemplo o operador aritmético + é usado para unir o valor de duas variáveis, não somar. 2/7/

14 Concatenando (unindo) valores de variáveis - resultado 2/7/

15 Concatenando (unindo) valores de variáveis - atividade Produza a seguinte saída no navegador (com seu nome e sexo): 2/7/

16 Concatenando (unindo) valores de variáveis - atividade Resposta 2/7/

17 Concatenando (unindo) valores de variáveis - testes Faça vários testes, como exemplo abaixo, e verifique as saídas no navegador. 2/7/

18 Concatenando (unindo) valores de variáveis - questão Por que nos últimos exemplos o operador aritmético + não executou alguma soma? Poderíamos somar o nome de duas pessoas, por exemplo? Qual a diferença entre um nome e um número? 2/7/

19 Concatenando (unindo) valores de variáveis - questão 2/7/

20 Concatenando (unindo) valores de variáveis - questão Podemos ver que quando usamos as aspas simples ' ' ou duplas " ", o navegador interpreta seu valor como um texto, ou seja uma string. 2/7/

21 Brincando com variáveis operadores condicionais Operador Ação == Igual a (igualdade)!= Diferente de > Maior que < Menor que >= Maior que ou igual <= Menor que ou igual 2/7/

22 Tomada de decisões operador if É muito comum na programação precisarmos fazer tomadas de decisões, ou seja, fazer com que o fluxo de processamento siga para um lado ou para o outro de acordo com uma informação. Uma tomada de decisão basicamente é uma comparação. O operador de condição if significa se. 2/7/

23 Tomada de decisões - if - exemplo 2/7/

24 Tomada de decisões - else Digamos que a variável sexo pode somente conter o valor Masculino ou Feminino. Podemos então fazer apenas um teste, senão saberemos que é o outro valor. Por exemplo: Se o valor da variável sexo for masculino, então imprima Você é um Homem senão imprima Você é uma mulher. O operador condicional else, significa senão. 2/7/

25 Tomada de decisões - else - exemplo 2/7/

26 Tomada de decisões - else - problema O que aconteceria se o valor da variável sexo não fosse nem Masculino e nem Feminino? Como podemos resolver esse problema? 2/7/

27 Tomadas de decisões - operadores lógicos Operador Ação && AND (e) OR (ou)! NOT (não) 2/7/

28 Tomada de decisões - else solução do problema 2/7/

29 Tomada de decisões - else - solução do problema - resultado 2/7/

30 Funções É um conjunto de código que contém uma tarefa que precisa ser executada em vários pontos da página. Por exemplo, estamos sempre mandando imprimir algo na tela do usuário. E se fizéssemos uma função que faz isso? Em vez de digitar document.write() usaríamos apenas exibe(). Para criarmos uma função usamos a palavra reservada function seguida do nome da função. 2/7/

31 Funções - criando uma função 2/7/

32 Funções - criando uma função - resultado 2/7/

33 Funções passando uma variável por parâmetro 2/7/

34 Funções passando mais parâmetros por chamada 2/7/

35 Retorno de Função Assim como uma função pode receber valores, ela pode também retorná-los. Para retornar um valor de dentro da função, basta usar a palavra reservada return seguida do valor ou variável que se deseja retornar. 2/7/

36 Retorno de Função - testando 2/7/

37 Exercício Faça 3 funções: A primeira função ao ser chamada apenas deve exibir algo na tela; A segunda deve receber dois ou mais parâmetros e somá-los imprimindo então o resultado para o usuário; A terceira função deve apenas retornar algum valor ao ser chamada, e esse valor deve ser armazenado em uma variável. Os nomes das funções e conteúdos ficam a seu critério. Use sua criatividade! 2/7/