Introdução Ao Javascript Parte 5

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<arr2.length; i++)
{
  document.write(arr2[i] + '<br>');  
}

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

javascript

Be Sociable, Share!

Participa! Comenta...