Informática Numaboa - Tutoriais e Programação
Tutorial Javascript II
|
Sex 13 Out 2006 18:46 |
- Detalhes
- Categoria: Javascript
- Atualização: Quarta, 15 Abril 2009 17:08
- Autor: vovó Vicki
- Acessos: 21153
Dando continuidade à série de tutoriais para iniciantes, o Tutorial Javascript II vai mostrar o que são arrays, operadores e strings.
Arrays
Um array é uma matriz. Simplificando ao máximo, podemos comparar um array a uma planilha de cálculo onde as células são numeradas por linhas e colunas.
A diferença é que, nos arrays, a numeração das linhas e colunas começa com zero e não com 1. Guarde bem esta caraterística, pois ela costuma deixar os principiantes meio confusos 
Criar um array em javascript é muito fácil. Declaramos a variável array e informamos que é um novo (new) Array com, digamos, 3 elementos.
CUIDADO! A palavra-chave Array precisa ser escrita com A maiúsculo senão a javascript não entende o que queremos.
O array de nome matriz é como se fosse uma linha de planilha eletrônica e, como declaramos 3 elementos (colunas), estes são numeradas de 0 a 2. Sabendo disto, podemos atribuir valores a estes elementos. Por exemplo:
Observe que os tipos dos elementos não precisam ser os mesmos: os elementos 0 e 2 são string e o elemento 1 é um número inteiro. Se quisermos mostrar o valor de qualquer elemento, podemos adicionar um alert ao código referenciando o(s) elemento(s) desejado(s). Experimente no ScriptBox abaixo para observar o resultado:
ScriptBox
Troque o número do elemento e teste o resultado. Se quiser que todos sejam mostrados, altere a linha do alert para alert(matriz). Veja que aparecem todos os elementos separados por vírgula.
Arrays multidimensionais
Já que é possível usar tipos diversos nos elementos de um array, nada impede que transformemos um deles em outro array - ou seja, é possível embutir arrays dentro de arrays. Por exemplo, transforme o elemento 1 num array com
Copie e cole este código para o ScriptBox e faça o teste. O resultado deve ser uma caixa de mensagem mostrando o número 3. As possibilidades de embutir arrays em arrays são praticamente infinitas... o problema é não dar um nó na cuca :crazy:
Operadores
Os principais grupos de operadores na Javascript são aritméticos, de string, de comparação e operadores lógicos.
Operadores Aritméticos
Os principais operadores aritméticos servem para fazer as operações de soma, subtração, multiplicação e divisão. Use o ScriptBox abaixo para realizar estas operações usando os respectivos operadores: + - * /
ScriptBox
Operadores de String
O operador de string + é usado para concatenar. O bacana é que podemos concatenar vários tipos sem que a javascript se confunda. Por exemplo:
ScriptBox
Operadores de comparação
Os operadores de comparação servem principalmente para alimentar condições IF. Os principais são:
| Operador | Operação |
|---|---|
| == | igual a |
| != | diferente de |
| < | menor que |
| > | maior que |
| <= | menor ou igual a |
| >= | maior ou igual a |
| === | diferente de, só que o tipo de variável é verificada. |
Observe que, quando queremos comparar dois valores, o operador usado é ==. Não é possível usar o operador de atribuição = para comparar dois valores porque, ao invés de comparar, estaríamos atribuindo um valor. Por exemplo, se
Operadores lógicos
Os operadores lógicos também são conhecidos como operadores booleanos. Se você conhece a lógica booleana então sabe do que se trata. Se não... tá faltando um pouco de base e você pode deixar isto para mais tarde.
| Operador | Operação |
|---|---|
| && | AND |
| || | OR |
| ! | NOT |
Operadores resumidos
A javascript oferece alguns operadores que "resumem" determinadas operações. Por exemplo, podemos substituir a = a + 1 por a++. Veja a tabela abaixo:
| Operador | Operação |
|---|---|
| ++ | incrementa em 1 |
| -- | decrementa em 1 |
| += | A += B é o mesmo que A = A + B |
| -= | A -= B é o mesmo que A = A - B |
| *= | A *= B é o mesmo que A = A * B |
| /= | A /= B é o mesmo que A = A / B |
Operadores de bit
| Operador | Operação |
|---|---|
| >> | desloca os bits para a direita |
| << | desloca os bits para a esquerda |
| & | define uma condição AND numa máscara de bits |
| | | define uma condição OR numa máscara de bits |
| ^ | define uma condição XOR numa máscara de bits |
| ~ | operação NOT bit a bit (troca todos os 1 e 0) |
Operadores especiais
| Operador | Operação |
|---|---|
| typeof | Retorna o tipo de variável. Os valores de retorno são boolean, string, number, function, object e undefined. Por exemplo a = 5; alert( typeof a ) retorna number. |
| void | O operador void é utilizado para realizar uma operação mas não se deseja um valor de retorno. Por exemplo, void( nro = nro + 2 ) realiza a operação, mas nro resulta em undefined. |
| delete | Operador para deletar objetos ou propriedades de objetos. O operador não se aplica aos objetos (e suas propriedades) pre-definidos. |
Strings
O objeto String da Javascript possui vários métodos que facilitam a nossa vida quando precisamos manipulá-lo. Use o ScriptBox para testar os métodos indicados a seguir.
ScriptBox
Principais métodos de String
Todos os exemplos abaixo baseiam-se na variável texto = "Aldeia Numaboa".
| Método | Função |
|---|---|
| charAt(nro) | Retorna o caracter da posição nro: texto.charAt(2) retorna d (lembre-se de que a numeração dos caracteres começa com zero). |
| indexOf(substring) | Retorna a posição da primeira substring dentro da string: texto.indexOf("boa") retorna 11. |
| lastIndexOf(substring) | Retorna a posição da última substring dentro da string: texto.lastIndexOf("a") retorna 13. |
| substring(início,fim) substr(início,fim) | Retorna a substring entre a posição início e fim: texto.substring(2,6) retorna deia. |
| toLowerCase() | Retorna a string em minúsculas: texto.toLowerCase() retorna aldeia numaboa. |
| toUpperCase() | Retorna a string em maiúsculas: texto.toUpperCase() retorna ALDEIA NUMABOA. |
| charCodeAt(nro) | Retorna o código ASCII do caractere na posição nro: texto.charCodeAt(0) retorna 65, o valor ASCII do caracter A. |
| length | Retorna o número de caractere da string: texto.length retorna 14. |
Referências
- W3C - World Wide Web Consortium
- SelfHtml, o mais completo guia de HTML, JavaScript, CSS, etc
- O script do ScriptBox é da autoria do Binny - Bin-Co. Free Scripts