Programação Especial

INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Linguagem de Programação para Web
JavaScript
(Manipulação de Vetores, Strings, Datas e Operações
Matemáticas. Funções e Eventos)
Prof. Mauro Lopes
Linguagem de Programação para WEB – Prof. Mauro Lopes
1 - 29
31
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Objetivos
• Iremos avançar um pouco mais em nosso estudo
sobre o JavaScript. Iremos tratar nesta aula de
assuntos como manipulação de arrays, métodos
para strings, manipulações de data e hora, criação
de funções e manipulações de eventos. Este
conhecimento é fundamental para que possamos
trabalhar em rotinas mais aplicáveis às páginas que
iremos desenvolver.
Linguagem de Programação para WEB – Prof. Mauro Lopes
2 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Plano de Aula
•
•
•
•
•
•
Variáveis Indexadas;
Métodos para manipulação de STRINGS;
Operações Matemáticas;
Métodos para Manipulação de Data e Hora;
Introdução a Funções;
Introdução a Manipulação de Eventos.
Linguagem de Programação para WEB – Prof. Mauro Lopes
3 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Variáveis Indexadas:
– Uma das técnicas de programação mais importantes é a utilização de
variáveis indexadas, também denominadas arrays, tabelas, matrizes,
conjuntos, vetores e arranjos.
– Um array é uma sequência de valores (elementos). Um array literal é
uma sequência de zero ou mais expressões dentro de colchetes;
var diasDaSemana= [ "domingo","segunda","terça", "quarta","quinta","sexta","sábado" ];
– A variável diasDaSemana passa a ser uma referência para o array de
comprimento 7 (isto é, com sete elementos). O comprimento de um
array pode ser obtido através da propriedade length.
alert("Numero de dias da semana= " + diasDaSemana.length);
– Os elementos de um array são acessados através do seu índice
(posição) . O primeiro elemento ocupa o índice 0, o último ocupa o
índice length-1;
• Ex: diasDaSemana[2] acessa ao terceiro elemento do array (a string "terça").
Linguagem de Programação para WEB – Prof. Mauro Lopes
4 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Variáveis Indexadas:
– Um array pode ser criado pela forma alternativa new Array(size) em
que size indica o número de elementos do array. Nesse caso todos os
elementos ficam iniciados com null;
– Ex:
// tab fica a referenciar um array de 5 elementos, todos com o valor null
var tab=new Array(5);
– Exemplo:
var dias="";
for (var i=0; i < diasDaSemana.length; ++i)
dias += diasDaSemana[i] + "\n";
alert(dias);
Linguagem de Programação para WEB – Prof. Mauro Lopes
5 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• STRINGS:
Um literal string consiste em 0 ou mais caracteres
delimitados por plicas ‘ ou aspas ". Os delimitadores
têm de ser do mesmo tipo- ambos aspas ou ambos
plicas. Exemplos:
"blah"
’blah’
"1234"
"one line \n another line"
• A um valor do tipo string podem ser aplicados as
propriedades e métodos dos objetos String
Char
Meaning
\b
Backspace
\f
Form feed
\n
New line
\r
Carriage return
\t
Tab
\’
Apostrophe or single quote
\"
Double quote
\\
Backslash character (\)
• Exemplos:
var s="abc";
alert(s.length);
// 3
Linguagem de Programação para WEB – Prof. Mauro Lopes
6 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Métodos para manipulação de STRINGS:
– A manipulação de uma seqüência de caracteres, ou seja, uma string
ocorre através por meio de um objeto denominado STRING;
– A forma mais comum de usar o dado string é criar uma variável para o
seu armazenamento:
var nome_jogador = “Ronaldo”;
Ou
nome_jogador = new String(‘Ronaldo’);
– Vamos trabalhar a partir deste “objeto” os principais métodos para
manipulação de STRINGS;
Linguagem de Programação para WEB – Prof. Mauro Lopes
7 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Métodos para manipulação de STRINGS:
– Maiúsculo e Minúsculo
• STRING.toUpperCase(): todos os caracteres em maiúsculo;
• STRING.toLowerCase(): todos os caracteres em minúsculo;
– Formatar Fonte
• STRING.bold(): todos os caracteres em negrito;
• STRING.italics(): todos os caracteres em itálico;
• STRING.strike(): todos os caracteres em tachado (riscado);
• STRING.sub(): todos os caracteres em subscrito;
• STRING.sub(): todos os caracteres em subrescrito;
– Formatar Tamanho
• STRING.big(): todos os caracteres em tamanho grande;
• STRING.small(): todos os caracteres em tamanho pequeno;
• STRING.fontsize(): define o tamanho dos caracteres;
Linguagem de Programação para WEB – Prof. Mauro Lopes
8 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Propriedades e Métodos para manipulação de
STRINGS:
– Comprimento de STRING
• STRING.length: retorna tamanho da STRING;
– Concatenação de STRINGS
• STRING.concat(): concatena um conjunto de STRINGS passadas como
argumento;
– Utilização de Substrings
• STRING.slice(inicio, [fim]): dividir a STRING em partes;
• STRING.subtring(inicio,fim): dividir a STRING em partes;
• STRING.substr(inicio [, comprimento]): dividir a STRING em partes;
• STRING.split(separador [, limite]): dividir a STRING em partes;
Linguagem de Programação para WEB – Prof. Mauro Lopes
9 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções parseInt, parseFloat e comentários
– A função parseInt() permite manipular informações como dados do tipo
inteiro; Ele é importante visto que por padrão o JavaScript considera
todo dado como um string;
– A função parseFloat() permite manipular informações como dados do
tipo ponto flutuante; Ele é importante visto que por padrão o JavaScript
considera todo dado como um string;
– JavaScript utiliza as convenções de comentários utilizadas em C e C++,
ou seja:
– // comentário
• Tudo o que está escrito entre o // e o fim da linha será ignorado.
– /* comentário em
diversas linhas */
• comentários em diversas linhas com o código
Linguagem de Programação para WEB – Prof. Mauro Lopes
10 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Operações Matemáticas Predefinidas:
– A linguagem JavaScript possui um conjunto de recursos matemáticos
predefinidos. Para usar esses recursos, é necessário utilizar o objeto
Math, que possui a seguinte sintaxe:
Math.[<propriedade | método>]
– Com o objeto Math é possível utilizar os métodos:
• abs: retorna o valor absoluto de um número;
• acos: retorna o arco cosseno de um número;
• asin: retorna o arco seno de um número;
• atan: retorna o arco tangente de um número;
• atan2: retorna o ângulo em radianos;
• ceil: retorna o menor número inteiro maior ou igual ao número
passado como parâmetro;
Linguagem de Programação para WEB – Prof. Mauro Lopes
11 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Operações Matemáticas Predefinidas:
– Com o objeto Math é possível utilizar os métodos: (continuação)
• cos: retorna o cosseno de um número;
• exp: retorna o exponencial de um número com base no logaritmo
natural;
• floor: retorna o próximo valor inteiro menor que o valor passado
como parâmetro;
• log: retorna o logaritmo natural de um número;
• max: retorna o maior valor de uma lista de valores informados;
• min: retorna o menor valor de uma lista de valores informados;
• pow: retorna a potência de uma base e relação a um expoente;
• random: retorna um valor randômico entre 0 e 1;
• round: arredonda um número para o valor inteiro mais próximo;
Linguagem de Programação para WEB – Prof. Mauro Lopes
12 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Operações Matemáticas Predefinidas:
– Com o objeto Math é possível utilizar os métodos: (continuação)
• sin: retorna o seno de um número;
• tan: retorna a tangente de um número;
• sqrt: retorna a raiz quadrada de um número;
– O objeto Math possui um conjunto de propriedades que é seu
conjunto de constantes e um conjunto de métodos que são suas
funções matemáticas.
Linguagem de Programação para WEB – Prof. Mauro Lopes
13 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Métodos para manipulação de Data e Hora:
– Pesquise sobre o objeto Date e identifique quais os principais métodos
para manipulação de data e hora. Acesse, por exemplo, o site
http://www.devguru.com;
– Como resultado da pesquisa, faça um script em JavaScript que:
• Apresente a data atual do computador no formato DD/MM/AAAA;
• De acordo com o horário apresente a frase “Bom dia”, “Boa Tarde”
ou “Boa Noite”;
PARTICIPE !!
ISSO FAZ PARTE DA SUA AVALIAÇÃO
Linguagem de Programação para WEB – Prof. Mauro Lopes
14 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções:
– Funções em JavaScript são uma parte fundamental da linguagem,
mas elas não são exatamente o que parecem ser;
– Funções são objetos. Nós podemos atribuir uma função a uma
variável ou passá-la como argumento para chamada de outra função;
– Há três abordagens para a criação de funções em JavaScript:
• declarativa/estática;
• dinâmica/anônima;
• literal.
Linguagem de Programação para WEB – Prof. Mauro Lopes
15 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções declarativas:
– O tipo mais comum de funções usa o formato declarativo/estático;
– Essa abordagem começa com a palavra chave function, seguida pelo
nome da mesma, parênteses contendo zero ou mais argumentos e, a
seguir, o corpo da função;
– Algumas convenções são utilizadas, como a notação camelCase.
Geralmente usamos um verbo, seguido por um ou mais substantivos,
com a primeira letra de cada um destes em maiúscula;
– Uma função declarativa em JavaScript pode ser indicada de acordo
com a seguinte sintaxe:
function <Nome> ([<parâmetros>]) {
[<Instruções>];
return [(][<expressão>>][)];
}
Linguagem de Programação para WEB – Prof. Mauro Lopes
16 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções declarativas:
– As funções se comunicam com o programa que as chama por meio
de argumentos;
– Variáveis baseadas em tipos primitivos, como string, booleano ou
numérico, são passadas para uma função por valor;
– Objetos passados para uma função, por outro lado, o são por
referência. Por exemplo, ao passar um array, estamos passando um
objeto;
– Uma função pode retornar um valor ou não. Se o fizer, a instrução
return pode aparecer em qualquer lugar no código, e poderia haver
até mais de uma instrução return;
– Quando a aplicação processando JavaScript encontra uma instrução
return, ela para o processamento do código da função nesse ponto e
retorna o controle para a instrução que a chamou.
Linguagem de Programação para WEB – Prof. Mauro Lopes
17 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções:
Vamos ver na prática !!!
Acompanhe o exemplo
exposto pelo Professor.
Linguagem de Programação para WEB – Prof. Mauro Lopes
18 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções anônimas:
– Funções são objetos. Como tal você pode criá-las, da mesma forma
que um array, usando um construtor e atribuindo a função a uma
variável;
var func = new Function (“x”, “y”, “return x * y”);
– Este tipo de função muitas vezes é chamada de função anônima
porque a própria função não é declarada ou nomeada diretamente;
– A aplicação processando JavaScript, diferentemente da função
declarativa, cria a função anônima de forma dinâmica;
– Cada vez que ela é chamada, a função é reconstruída
dinamicamente;
– Sintaxe:
var variable = new Function (“param1”, “param2”,…, “paramn”, “function body”);
Linguagem de Programação para WEB – Prof. Mauro Lopes
19 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Funções literais:
– Funções literais também são conhecidas como expressões de
funções porque a função é criada como parte de uma expressão, em
vez de como um tipo distinto de instrução;
– Elas lembram as funções anônimas pelo fato de não terem um nome
de função específico;
– Entretanto, diferente daquelas, funções literais são analisadas
apenas uma vez;
– Na verdade, além do fato de a função ser atribuída a uma variável,
funções literais lembram funções declarativas;
– Sintaxe:
var variable = function (parâmetros){
comandos;
}
Linguagem de Programação para WEB – Prof. Mauro Lopes
20 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Eventos:
– Eventos são disparados quando determinada atividade ocorre dentro
de uma página web, incluindo quando a página termina de ser
carregada;
– Em JavaScript, você pode capturar esse eventos por meio de
“ganchos” conhecidos como manipuladores de eventos, que você
pode usar para chamar uma função;
– Os eventos em JavaScript são intuitivos de se entender. A W3C
categoriza os eventos em três áreas distintas:
• Interface de usuário (mouse, teclado)
• Lógica (resultado de um processo)
• Mutação (ação que modifica um documento)
Linguagem de Programação para WEB – Prof. Mauro Lopes
21 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Manipulação de Eventos DOM Nível 0:
– Os eventos estão associados aos elementos de páginas e você pode
adicioná-los aos elementos em forma de atributos;
– Adicionar eventos como atributos a um elemento às vezes é
conhecido como modelo inline ou modelo de registro inline;
<body onload=“mostrarMsg()”>
– Você também pode acessar um manipulador de eventos diretamente
como uma propriedade em cada objeto. Este modelo as vezes é
chamado de modelo tradicional ou modelo de registro tradicional;
window.onload=calcularNumero;
– A manipulação de eventos tradicional é também conhecida como
modelo de eventos DOM Nível 0.
Linguagem de Programação para WEB – Prof. Mauro Lopes
22 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Manipulação de Eventos DOM Nível 0:
Linguagem de Programação para WEB – Prof. Mauro Lopes
23 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Manipulação de Eventos DOM Nível 2:
– Duas grandes diferenças entre o modelo mais antigo e o modelo de
eventos DOM Nível 2 são:
• O modelo mais novo não é tão dependente de uma propriedade
específica de manipulador de eventos;
• Você pode registrar múltiplas funções de manipuladores de
eventos em um único objeto;
– Neste modelo não usamos propriedades de manipuladores de
eventos (onclick, onmouseover, etc).
– Cada objeto apresenta três métodos:
• addEventListener
• removeEventListener
• dispatchEventListener
Linguagem de Programação para WEB – Prof. Mauro Lopes
24 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
• Manipulação de Eventos DOM Nível 2:
– A Sintaxe de AddEventListener é:
objeto.addEventListener(“evento”,função,boolean);
• O evento como click, load, é o primeiro parâmetro;
• A função do manipulador de eventos é o segundo;
• Nos navegadores mais novos este item é opcional. O padrão dele
é estar como false para que possa trabalhar de forma padrão com
a captura de eventos. Se for true, o evento será tratado como em
cascata ou propagação;
– Problema: A Microsoft, pelo menos até o IE8, apenas suporta o seu
próprio modelo de manipulação de eventos !!!
Linguagem de Programação para WEB – Prof. Mauro Lopes
25 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Programação Especial
Vamos Praticar !!!
Vamos fazer como nosso
amigo ao lado. Vamos
entender um pouco mais
do JavaScript praticando!!
Linguagem de Programação para WEB – Prof. Mauro Lopes
26 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Perguntas
Página do Professor Mauro:
http://www.dai.ifma.edu.br/~mlcsilva
Linguagem de Programação para WEB – Prof. Mauro Lopes
27 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Próxima Aula...
• JavaScript:
Manipulação
(Eventos e Funções)
Linguagem de Programação para WEB – Prof. Mauro Lopes
de
Formulários
28 -29
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA
Referências
• Materiais avulsos da Internet e o Livro Guia de
Orientação e Desenvolvimento de Sites - Html ,
Xhtml , Css e Javascript / Jscript, Jose Augusto
N. G. Manzano, 1ª Edição - Editora Érica, 382
páginas.
Linguagem de Programação para WEB – Prof. Mauro Lopes
29 -29