Tutorial Anterior > Introdução Ao Javascript Parte 4
Chegamos ao quinto tutorial da série sobre javascript e já sabemos como controlar a estrutura da página, trabalhar com funções e variáveis além de criar blocos condicionais. Veja só, você já pode dizer que sabe programar em javascript!
Apesar disso você ainda tem muito a aprender. Por isso, nesta sequência você vai aprender a controlar a manipular o texto e a trabalhar com arrays.
String
No javascript o texto precisa estar entre aspas, seja ela simples ou dupla. Mas e se o texto possuir aspas? Então é preciso adicionar barra (\) na frente.
var texto = “Primeira frase”;
var outro = “Frase com \“citação\””;
var texto = ‘Com aspas simples e “dupla”’.
Neste última linha foram usadas simples e duplas sem conflito pois você somente precisa escapar a aspa que engloba a string.
Para juntar duas strings, basta utilizar o sinal de mais entre elas:
var texto = ‘primeiro pedaço ‘ + ‘parte final’;
alert(texto + ‘ ‘ + ‘anexo’);
Métodos E Propriedades
O javascript possui diversos métodos e propriedades que permitem acessar e manipular o conteúdo texto das variáveis.
length – esta propriedade retorna o número de caracteres da string. Utilizada principalmente para saber se algum campo do do formulário foi deixado em branco.
var txt = ‘texto’;
document.write(txt.length) // mostra 5
substring – retorna um pedaço do texto, onde especificamos o início da contagem e até que caractere será extraído.
var txt = 'texto';
document.write(txt.substring(0,3)) // mostra tex
A contagem começa em 0 e não é incluído o caractere na posição do último índice.
substr – o funcionamento é parecido com o método anterior, com a diferença de que o segundo índice informa quantos caracteres serão extraídos.
var txt = 'texto';
document.write(txt.substr(0,4)) // mostra text
indexOf – com este método você pode procurar por um determinado caractere dentro da string. Retorna um número, que é a posição do símbolo dentro do texto procurado. Lembrando que a contagem começa do zero.
var txt = 'texto';
document.write(txt.indexOf('e')) //mostra 1
Quando ele encontra mais de uma ocorrência do caractere, retorna a posição do primeira encontrado. O indexOf() é utilizado principalmente na validação de e-mail para garantir que o arroba foi digitado.
lastIndexOf – procura a última ocorrência do caractere dentro da string.
var txt = 'texto';
document.write(txt.lastIndexOf('t')) //mostra 3
charAt – retorna o caractere que esta em determinada posição. Lembrando que a contagem inicia em zero.
var txt = 'texto';
document.write(txt.charAt(2)) // mostra x
split – útil para dividir a string. Retorna uma array com índice número contendo as partes, extraído o caractere separador.
var txt = 'texto';
var partes = txt.split('t');
document.write(partes[1]); // mostra ex
A divisão acima retornou três partes, um espaço em branco ‘ex’ e ‘o’. Outro método útil na validação de e-mail onde você divide a string com base nos pontos (.) do endereço.
toLowerCase / toUpperCase – as letras ficam todas minúsculas e maiúsculas respectivamente. A forma de utilizar é um pouco diferente dos métodos vistos acima, pois a string vem antes do método e não entre os parênteses.
var txt = 'Texto';
document.write(txt.toUpperCase()); //mostra TEXTO
document.write(txt.toLowerCase()); //mostra texto
Métodos Matemáticos
Efetuar operações matemáticas simples como multiplicar e somar variáveis é tranquilo, como vimos no terceiro tutorial da série. Mas existem cálculos mais complexos ou que não retornam valores inteiros o que exige um ajuste. Para estes casos o javascript disponibiliza uma extensa gama de métodos e propriedades. Veremos as mais comumente usadas.
ceil() – arredonda o número para cima e trabalha somente com inteiros.
document.write(Math.ceil(1.256)); //mostra 2
floor() – arredonda no numero para baixo e retorna somente inteiros.
document.write(Math.floor(1.256)); // mostra 1
round() – arredonda para o número inteiro mais perto.
document.write(Math.round(1.356)); //mostra 1
document.write(Math.round(1.656)); //mostra 2
random() – gera números randômicos entre 0 e 1. Se quiser pode multiplicar o número gerado e aumentar a imprevisibilidade.
document.write(Math.random());
document.write(Math.random()*9);
Para saber todos os métodos e propriedades disponíveis acessa esta página (http://www.w3schools.com/jsref/jsref_obj_math.asp).
Criando Arrays
Compreender o funcionamento das arrays é crucial para trabalhar com qualquer linguagem de programação. Ao invés de criar cinco variáveis, basta criar uma array com cinco itens. Isso torna o código mais conciso e elegante.
No javascript as Array tem índice numérico começando em zero e são criadas através do objeto Array. A forma como são criadas é bastante dinâmica.
var arr1 = new Array('item1','item2','item3');
var arr2 = new Array();
arr2[0] = 'item1';
arr2[1] = 'item2';
arr2[2] = 'item3';
var arr3 = ['item1','item2','item3'];
Observe que quando a array é criada literalmente, como no terceiro exemplo, ao invés do parênteses é preciso coloca o colchetes.
Acessando Arrays
Como dito acima, o índice da array é numérico, então basta indicar a posição do item entre colchetes. Ainda trabalhando com as três arrays criadas anteriormente, vamos acessá-las.
document.write(arr2[1]); //mostra item 2
document.write(arr3[2]); //mostra item 3
Para acessar arrays mais extensas, a melhor alternativa é utilizar o laço for.
for (i=0; i
}
Modificando A Array
Os valores dentro da array além de acessados podem ser modificados conforme a necessidade. São métodos que te deixam no controle total sobre o conteúdo.
- concat() – une arrays;
- join() – une todos os elementos da array, gerando um string;
- slice() – permite criar um array com um pedaço de outra;
- reverse() – inverte a ordem da array;
- push() – adiciona itens no final da array e retorna o tamanho;
- unshift() – adiciona elemento no início da array e retorna o tamanho dela;
- pop() – remove o último elemento da array e retorna este elemento;
- shift() – remove o primeiro elemento da array e retorna ele;
- splice() – adiciona e remove elementos ao mesmo tempo;
- sort() – classifica alfabeticamente a array. Não é útil para números pois ele se baseia apenas no primeiro caractere nestes casos.
Vejamos a aplicação, lembrando que estes métodos alteram a array e com isso o resultado do código acompanha as alterações feitas pelas linhas anteriores.
var arr1 = new Array('item1','item2','item3');
var arr2 = new Array('item4','item5','item6');
var unindo = arr1.concat(arr2);
document.write(unindo);// item1,item2,item3,item4,item5,item6
var junto = arr1.join(' - ') ;
document.write(junto);// item1 - item2 - item3
var primeiro = arr1.shift();
document.write(primeiro);// item1
var ultimo = arr2.pop();
document.write(ultimo); // item6
var maisum = arr2.push('item7');
document.write(maisum); // 3
var inverso = arr1.reverse();
document.write(inverso);// item3, item2
var pedaco = unindo.slice(1,4);
document.write(pedaco);// item2,item3,item4
var emenda = unindo.splice(0, 1, 'item01');
document.write(emenda); //item1
var inicio = arr1.unshift('maisumitem');
document.write(inicio); //3
Próximo Tutorial > Introdução Ao Javascript Parte 5
