Curso de Javascript (parte 6)

Já faz muito tempo desde o último post dessa série sobre Javascript, mas eis que a continuação está aqui! Relembrando o último post, vimos um pouco da sintaxe de Javascript para criação de objetos e arrays. Hoje vamos ver um pouco de funções e o que é possível fazer com elas.

Para começar, abra novamente o console do seu navegador e vamos praticar:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// as dicas continuam as mesmas do último post, e eu acrescento essa: // para criar uma nova linha no Chrome e no Firefox (menos no Firebug) // você pode usar [SHIFT] + [ENTER]   // para declarar uma função: function nome_da_funcao(param1, param2){     // aqui você faz alguma coisa útil     alert(param1);  // exibe o primeiro parâmetro     alert(param2);  // exibe o segundo parâmetro }   // para executar a função: nome_da_funcao('primeiro', 2);   // não é necessário passar todos os parâmetros, o seguinte é válido: nome_da_funcao(1);  // o segundo valor será undefined nome_da_funcao();   // os dois valores serão undefined

Outro detalhe interessante em Javascript: uma variável pode armazenar uma função, ou seja:

1 2 3 4 5 6 7

var funcao = function() {     alert("Essa função não faz nada"); }   // executando: funcao(); funcao(1286, 'bla bla bla'); // parâmetros a mais? nada contra...

Isso cria uma nova possibilidade: funções dentro de objetos, ou seja, métodos (lembrou de programação orientada a objetos? Então chegamos ao ponto interessante!).

Embora Javascript seja considerada por alguns “programadores” como uma linguagem sem orientação a objetos, Javascript utiliza sim alguns conceitos desse método de programação: classes (protótipos), atributos (propriedades), métodos (funções), herança, sobrecarga de métodos, public, private… alguns desses itens podem não ser tão fáceis de implementar como seria em C++, PHP, Java, etc., outros podem até ser mais simples!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// construtor para uma "classe" Pessoa: function Pessoa() {     // definindo as propriedades para o objeto e     // inicializando com valores padrão:     this.nome  = "";     this.idade = 0;       // criando métodos     this.setNome = function(nome){         this.nome = nome;     };       this.getIdade = function(){         return this.idade;     }; }   // usando essa classe: var joao = new Pessoa(); joao.setNome("João");   // não é preciso utilizar métodos para atualizar as propriedades: joao.idade = 33; joao.nome += " da Silva"; // joao.nome = "João da Silva"   // o construtor também pode receber parâmetros, para facilitar o trabalho function Carro(marca) {     this.marca  = marca;     this.modelo = "";     this.ano    = undefined; }   var ferrari = new Carro("Ferrari"); // ferrari.marca == "Ferrari";

Essas características vamos ver com mais detalhes nos próximos posts. Essa foi apenas uma introdução para mostrar uma ideia geral do que é possível fazer com Javascript, que não deixa nada a desejar a outras linguagens em questão de Orientação a Objetos.

Curso de Javascript (parte 5)

Como vimos no último post, é possível utilizar o console Javascript do navegador para fazer testes. No post de hoje vamos utilizar isso para aprender um pouco mais da sintaxe da linguagem.

Para começar, abra o console Javascript (em qualquer página que estiver, pode ser nessa mesmo).

No Chrome (Ctrl+Shift+J), o console deve parecer com isso na parte inferior da página:

No Firefox (Ctrl+Shift+K), deve ser exibido como o seguinte no topo da página:

Ou o Firebug, também exibido na parte inferior da página:

Escolha o que mais lhe agradar. Então, vamos começar. Provavelmente você precise limpar o console (dependendo da página aberta). Para isso, no Chrome digite clear() seguido de [enter]. No Firefox e no Firebug, digite console.clear() e [enter].

// linhas que começam com duas barras são comentários e não serão executadas // o ponto e vírgula ; no final da linha é opcional, mas aqui vou utilizar para // indicar que você deve teclar [enter] // declarando uma variável (que pode conter qualquer tipo de dados) var nome_da_variavel; // declarando e inicializando ao mesmo tempo var string = 'isso é uma string'; // para exibir o conteúdo de uma variável, digite o nome e tecle [enter]: string; // exibe: "isso é uma string" // concatenando (juntando) strings var string1 = "início "; var string2 = "- fim"; var final = string1 + string2; // a variável final é igual a "início - fim"

Objetos

A linguagem Javascript permite criar objetos, que podem conter propriedades e funções ou métodos (lembra orientação a objetos, não? ;-)). Os objetos podem ser criados de duas formas: com construtor ou declarando-o como um objeto (vazio ou não).

// com construtor:

var objeto = new Object();

 

// criando um objeto indiretamente:

var objeto = {};

 

// é possível criar um objeto com propriedades iniciais, mas no console

// isso é meio complicado pois temos apenas uma linha para digitar

// dica: digite tudo igual mas use espaço ao invés de enter

var objeto = {

    propriedade: 'valor',

    outra_propriedade: 123

};

 

// acessando uma propriedade

objeto.propriedade = "novo valor"; Como podemos ver, dentro de um objeto as propriedades podem ser de qualquer tipo válido, incluindo outros objetos (e esses podem conter outros, e outros..), arrays, funções (veremos funções no próximo post), enfim, qualquer coisa válida em Javascript.

Arrays

Semelhante aos objetos, os arrays também podem ser criados de duas formas:

// com construtor:

var array = new Array();

 

// criando um array vazio:

var array = [];

 

// declarar um array com valores iniciais:

var array = [12, "t", 'Seja Livre', new Object(), {posicao: 4}];

 

// acessando um valor do array:

var posicao3 = array[3]; O que vimos hoje já é o básico necessário para um programador Javascript iniciante, no próximo post vamos ver outro ponto importante da linguagem: declaração e uso de funções.

Curso de Javascript (parte 4)

Após um bom tempo sem publicar nada desde o último post da série, hoje continuamos com os tutoriais de Javascript apresentando algumas ferramentas que são muito úteis para qualquer desenvolvedor Web.

A Web é um espaço muito dinâmico principalmente devido às características do Javascript. Tão dinâmico que você nem precisa editar o código da página para poder alterar algum detalhe, é possível fazer isso através do console Javascript do navegador – claro que assim que você fechar a página as alterações se perdem, mas para testes é muito melhor do que editar o código, salvar e recarregar a página para ver as alterações ;-).

O objetivo desse post é justamente se habituar a usar essas ferramentas disponíveis para testar e descobrir coisas novas. No Google Chrome/Chromium, o conjunto de ferramentas do desenvolvedor disponíveis é completo, sem ser necessário instalar nenhuma extensão. No Firefox, é provável que você precise instalar o Firebug, que complementa as opções já disponíveis no navegador. O Firebug também possui uma versão para o Chrome, mas não é tão completa quanto o conjunto de ferramentas padrão do navegador.

Vamos a um exemplo. Imagine que você tenha a seguinte página em HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html>     <head>         <title>Página de testes</title>         <style type="text/css">         #teste{             width: 500px;             height: 200px;             background-color: #AD91DA;             color: #FD65CA;         }         </style>     </head>     <body>         <div id="teste">Teste</div>     <body> </html>

Essa é sua página HTML, mas você quer testar outras cores de fundo na DIV “teste” sem ter que editar o código. Simples:

1. abra o console Javascript (no Chrome: Ctrl+Shift+I ou Ctrl+Shift+J; no Firefox: Ctrl+Shift+K; Firebug: clique no ícone da extensão)
2. no console, digite:

document.getElementById('teste').style.backgroundColor = '#C04' <enter>

Da mesma forma, você pode testar qualquer outro código Javascript no console. O resultado será o mesmo do que se ele estive incluído na sua página, sem no entanto ser necessário alterar os arquivos. Isso é útil para testar ideias sem que elas se “percam” dentro da sua página e fiquem esquecidas, talvez causando bugs.

Esse post foi apenas um aquecimento para os próximos, onde pretendo passar alguns exemplos que podem ser feitos via console, sem a necessidade de um arquivo HTML para implementar (mas como você viu aqui, o resultado será o mesmo). Com isso, esse mini-curso fica mais rápido e fácil de acompanhar, então vamos avançar um pouco mais na sintaxe do Javascript.