WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
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
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 1995. 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
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
Como começar Inserindo no HTML: 2/7/2011 5
Como começar Inserindo em arquivo externo: 2/7/2011 6
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
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
Criando uma variável em JavaScript 2/7/2011 9
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/2011 10
Brincando com variáveis operadores aritméticos 2/7/2011 11
Brincando com variáveis - resultado 2/7/2011 12
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/2011 13
Concatenando (unindo) valores de variáveis - resultado 2/7/2011 14
Concatenando (unindo) valores de variáveis - atividade Produza a seguinte saída no navegador (com seu nome e sexo): 2/7/2011 15
Concatenando (unindo) valores de variáveis - atividade Resposta 2/7/2011 16
Concatenando (unindo) valores de variáveis - testes Faça vários testes, como exemplo abaixo, e verifique as saídas no navegador. 2/7/2011 17
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/2011 18
Concatenando (unindo) valores de variáveis - questão 2/7/2011 19
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/2011 20
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/2011 21
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/2011 22
Tomada de decisões - if - exemplo 2/7/2011 23
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/2011 24
Tomada de decisões - else - exemplo 2/7/2011 25
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/2011 26
Tomadas de decisões - operadores lógicos Operador Ação && AND (e) OR (ou)! NOT (não) 2/7/2011 27
Tomada de decisões - else solução do problema 2/7/2011 28
Tomada de decisões - else - solução do problema - resultado 2/7/2011 29
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/2011 30
Funções - criando uma função 2/7/2011 31
Funções - criando uma função - resultado 2/7/2011 32
Funções passando uma variável por parâmetro 2/7/2011 33
Funções passando mais parâmetros por chamada 2/7/2011 34
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/2011 35
Retorno de Função - testando 2/7/2011 36
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/2011 37