webmaster

Introdução Ao Javascript Parte 5

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

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');
}

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

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Deixe o seu comentário, participe!

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.