…
Olá, escrevi um exemplo de classes com PHP5, como sempre muito simples, vamos ver como escrever um código de mais fácil compreensão do ser humano com orientação à objetos, mas calma lá, isso é o mínimo que se pode fazer com classes e orientação à objeto, não se confunda, isso é apenas um simples…bem simples exemplo, orientação à objetos não se resume apenas à isso. vejamos:
Sintaxe:
classes: Class NomeDaClasse{//atributos, construtor e metodos}
atributos: public/private/protected $nomeDoAtributo;
métodos: function metodoNome(){// resto do codigo}
Os métodos podem receber parâmetros e ficariam assim:
metodoNome($parametro1){ //codigo}
Toda Classe precisa de um construtor para instância-la, neste caso estamos utilizando o PHP5 que tem um método contrutor padrão, __contruct (){} e pode ser usado para todas as classes, os construtores também podem receber parâmetros, mas isso veremos em um outro exemplo, por enquanto vamos nos concentrar no básico.
A Classe usuario – usuario.class.php
<?php
Class Usuario
{
//atributos
private $nome;
private $mail;
private $telefone;
//metodo construtor vazio
function __construct(){//
}
//metodo que seta o atributo nome, recebe 1 parametro/mensagem
function setNome($nome)
{
$this->nome = $nome;
}
//metodo que seta o atributo mail, recebe 1 parametro/mensagem
function setMail($mail)
{
$this->mail = $mail;
}
//metodo que seta o atributo telefone, recebe 1 parametro/mensagem
function setTelefone($telefone)
{
$this->telefone = $telefone;
}
//metodo que retorna o atributo nome
function getNome()
{
return $this->nome;
}
//metodo que retorna o atributo mail
function getMail()
{
return $this->mail;
}
//metodo que retorna o atributo telefone
function getTelefone()
{
return $this->telefone;
}
//metodo que retorna uma frase de boas vindas
function digaOI()
{
$str = “Oi $this->nome, seja bem-vindo ao mundo dos objetos!”;
return $str;
}
} //fim da classe
?>
Vejamos o que acontece acima:
Os métodos precedem da palavra reservada Function, ou seja, function nomeDoMetodo(){ // codigo }.
Métodos podem retornar valores utilizando-se da palavra reservada Return. Mas o que acontece no retorno?
Quando esperamos um valor retornado pela funcion/metodo o valor fica atribuido (a grosso modo) no próprio método, ou seja, se temos o método function getNome(){ return $this->nome;} o valor estará contido justamente no método, queremos dizer com isso que para acessarmos/recuperarmos o valor retornado devemos acessar diretamente o método pelo seu nome, por isso quando escrevos echo getNome() o metodo nos traz seu valor retornado de acordo com que pedimos que ele retornasse, nesta caso o nome.
Os Atributos são acessado precedendo da palavra reservada $this que quer dizer “esse” ou “este“ , então quando escrevemos $this->nome estamos nos referindo a esse->nome ou seja o nome contido nesta classe ou classe a que se refere o método.
No caso do atributo $str não nos referimos à ele utilizando o $this porque $str não é um atributo da classe, ou seja, não definimos ele na classe como as demais, nome, mail e telefone, desta forma ele só existe dentro do método digaOI(), não sendo acessível através de $this->str, a classe não encontraria o atributo gerando um erro fatal.
Quando dizemos $this->nome = $nome estamos dizendo que o atributo nome da classe recebe valor do parâmetro recebido, os parâmetros não precisam ter os mesmo nomes que os atributos, isso é apenas uma questão de estética e padrão. Poderiamos fazer por exemplo algo como:
function setNome($n)
{
$this->nome = $n;
}
Isso teria o mesmo efeito que no exemplo que utilizamos.
Vejamos como instânciar um Objeto do Tipo Usuario.
O “->” é utilizado para acessarmos os atributos ou métodos da classe, seria o equivalente à classe.metodo() como no javascript, java e muitas outras linguagens de programação/script.
Criamos outro arquivo, pode ser index.php
<?
//incluido a classe Usuario no arquivo index
include(‘usuarios.class.php’);
//instanciando o objeto usuario
$clares = new Usuario();
//setando os atributos do objeto
$clares->setNome(“Rafael Clares”);
$clares->setMail(“Rafadinix@gmail.com“);
$clares->setTelefone(“11 4444-5555″);
//recuperando os valores dos atributos
echo $clares->getNome();
echo “<br>\n”;
echo $clares->getMail();
echo “<br>\n”;
echo $clares->getTelefone();
echo “<h3>\n”;
echo $clares->digaOI();
echo “</h3>\n”;
?>
Acima, utilizamos o include que como o nome já diz, inclui um arquivo dentro do arquivo atual, a grosso modo é como se estivessemos juntando os 2 arquivos, existem outros métodos de se incluir arquivos e falarei sobre eles posteriormente.
A palavra reservada NEW é utilizada para criar o novo objeto, neste caso criamos o objeto $clares e em seguida utilizamos os acessos aos métodos que setam os valores dos atributos (set…) e os métodos que retornam os valores dos atributos (get..).
Com isso acho que não fica dúvidas em relação ao exemplo, quanto ao mundo orientado à objetos, ahhh isso é outra coisa que veremos aos poucos e com muita calma, escreva, teste o exemplo acima e vá ao bom e velho google para você adentrar ao tal mundo de objetos, ah …após executar o exemplo não saia por ai achando que você programa orientado à objetos, isso ai é só um bit no universo ; ) …
$obj->mensagem(“Até a próxima!”);
Rafael Clares
Arquivado em: Acessibilidade
…
Opa, um exemplo basicão de Acessibilidade usando JavaScript para alterar o tamanho de uma determinada TAG, ex. P, span, li etc….
A acessibilidade é muito importante, ao fazer um site/página lembre-se sempre que nem todos os visitantes por exemplo, enxergam bem como você! Procure na internet sobre como aplicar a acessibilidade de maneira eficiente e usável.
Vamos ao index.html – Seguindo o mesmo padrão de sempre -> todo o conteúdo dentro da Tag Div conteudo
<html>
<head>
<title>Acessibilidade</title>
<script src=”acess.js” type=”text/javascript”></script>
<link href=”lupa.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”conteudo”>
<!– Todo conteudo dentro da div conteudo–>
<ul>
<p>Este parágrafo terá sua propriedade font-size alterada</p>
<p>Texto Texto</p>
<p> </p>
<span>Texto Span 1</span>
<span>Texto Span 2</span>
<p>
<button onclick=”ChangeFont(‘p’,12)”>P 12px</button>
<button onclick=”ChangeFont(‘p’,20)”>P 20px</button>
<button onclick=”ChangeFont(‘p’,28)”>P 28px</button>
<button onclick=”ChangeFont(’span’,12)”>span 12px</button>
<button onclick=”ChangeFont(’span’,20)”>span 20px</button>
<button onclick=”ChangeFont(’span’,28)”>span 28px</button>
</p>
</ul>
</div>
</body>
</html>
Acima, perceba que temos algumas Tag’s P e outras SPAN, no evento onclick dos botões estamos passando por parâmetro a Tag a que queremos alterar e também o novo tamanho da fonte. Claro que ao invés de utilizar botões comuns você irá dar um rolezinho no google para encontrar uns botões mais apropriados com por ex: algo que represente um texto ou fonte, um icone/botão que acho legal para isso é: uma lupa com tamanhos diferentes para se ter idéia da alteração, use um tamanho menor da imagem para o menor tamanho da fonte e um tamanho maior para uma fonte maior…algo que faça o usuário entender o que vai acontecer por ex: se ele clicar na lupa grande quer dizer que a fonte irá aumentar e assim por diante… Você pode fazer isso com a mesma imagem definindo os tamanhos na própria tag. vai ai um exemplo
<img src=”lupa.jpg” id=”peq” onclick=”ChangeFont(‘p’,12)”>
<img src=”lupa.jpg” id=”med” onclick=”ChangeFont(‘p’,20)”>
<img src=”lupa.jpg” id=”gra” onclick=”ChangeFont(‘p’,28)”>
Acho que já entendeu, não é ?
Então vamos passar para o JavaScript com o arquivo acess.js
// a funcao recebe 2 parametros o primeiro tag e segundo tamanho
function ChangeFont(tag,tam){
// recupera as propriedades da tag passada por paramentro
obj = document.getElementsByTagName(tag);
// verifica quantas tags possuem o objeto (ex: 3 paragrafos)
var tags = obj.length;
// faz o laço alterando a propriedade font das tags
for(i=0; i<=tags-1; i++){
// recupera as propriedades da tag atual para o indice I
obj = document.getElementsByTagName(tag)[i];
// altera o tamanho
obj.style.fontSize = tam+’px’;
}
}
Bem, não há mistérios como podem perceber!
Você passa a Tag (P, Span, Li….) no primeiro parâmetro e entre aspas/apostrofos e passa o tamanho da fonte sem aspas. A funcao ChangeFont irá verificar quantas Tags(ex. paragrafos) existem após guardar a quantidade de Tags encontradas ele irá fazer um laço (loop for) de 0 até a quantidade de Tags-1, só para esclarecer poderia ser de 1 até quantidade de Tags, mas é bom lembrar que os vetores ou arrays no JavaScript começam pelo indice 0 (zero) e é bom que façamos algo dentro dos padrões, claro que você poderia alterar o laço e deixar dessa forma:
for(i=1; i<=tags; i++) // mas isso não é muito legal, quero dizer, devemos começar do começo, de toda forma postarei algo sobre vetores e arrays em breve.
Tem um arquivo CSS também é o lupa.css usado para formatar o tamanho das lupas
#peq
{
cursor:pointer;
width:16px;
height:16px;
border:0px;
}
#med
{
cursor:pointer;
width:18px;
height:18px;
border:0px;
}
#gra
{
cursor:pointer;
width:20px;
height:20px;
border:0px;
}
Bem, alterando um pouco o JS poderiamos claro passar um terceiro parâmetro ou quantos forem necessários.
Vamos ver uma pequena alteração no Js passando também a cor da fonte, o que acha?
É importante usar com moderação, tudo demais acaba ficando feio e inútil!
Nessa nova função poderiamos utilizar uma outra imagem, por exemplo um pequeno retângulo que represente cada cor, poderia também, a função alterar apenas a cor, seria mais objetivo, mas como sei que você irá explorar tais mudanças no script deixei com as mesma imagem, a lupa, também deixei com que o script altere não só a cor mas também o tamanho da fonte, se você encarar como um desafio alterar o script para que ele mude apenas a propriedade COR dos elementos será legal para você não perder o ritimo, além disso estou aqui para tirar suas dúvidas, então comente a vontade e coloque suas dúvidas ai, certo? ;) Vamos lá !
// a funcao recebe 3 parametros tag, tamanho e cor
function ChangeFontCor(tag,tam,cor){
// recupera as propriedades da tag passada por paramentro
obj = document.getElementsByTagName(tag);
// verifica quantas tags possuem o objeto (ex: 3 paragrafos)
var tags = obj.length;
// faz o laço alterando a propriedade font das tags
for(i=0; i<=tags-1; i++){
// recupera as propriedades da tag atual para o indice I
obj = document.getElementsByTagName(tag)[i];
// altera o tamanho
obj.style.fontSize = tam+’px’;
//altera a cor
obj.style.color = cor;
}
}
Perceba que alterei o nome da função para ChangeFontCor para que possamos usar as duas no mesmo Js alterando nos eventos o nome da função e adicionando um terceiro parâmetro, junte as duas funções no mesmo arquivo Js. A alteração ficaria assim:
<img src=”lupa.jpg” id=”peq” onclick=”ChangeFontCor(‘p’,12,’#369′)”>
<img src=”lupa.jpg” id=”med” onclick=”ChangeFontCor(‘p’,20,’#f00′)”>
<img src=”lupa.jpg” id=”gra” onclick=”ChangeFontCor(‘p’,28,’green’)”>
Ahhh se você não sabe, Acessibilidade não se resume apenas ao tamanho da fonte, não pense isso por favor, existem muitos fatores que contribuem para que uma página tenha acessibilidade, ao tempo certo postarei outros exemplos de acessibilidade.Então veja funcionando o Exemplo Accessibilidade testado no IE7 e Firefox
Download da lupa.jpg (só para aqueles que querem aprender)
Download do Exemplo completo (só para aqueles não que querem aprender)
