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 1-31 29
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. 2
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. 3
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"). 4
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); 5
STRINGS: INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO IFMA 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 6
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; 7
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; 8
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; 9
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 10
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; 11
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; 12
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. 13
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 14
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. 15
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>>][)]; 16
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. 17
Funções: INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO IFMA Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 18
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 ); 19
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; } 20
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) 21
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. 22
Manipulação de Eventos DOM Nível 0: 23
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 24
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!!! 25
Vamos Praticar!!! Vamos fazer como nosso amigo ao lado. Vamos entender um pouco mais do JavaScript praticando!! 26
Perguntas Página do Professor Mauro: http://www.dai.ifma.edu.br/~mlcsilva 27
Próxima Aula... JavaScript: Manipulação de Formulários (Eventos e Funções) 28
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. 29