YUI (Yahoo User Interface) é uma biblioteca JavaScript/CSS opensource desenvolvida e mantida pelos profissionais do desenvolvimento front-end da empresa Yahoo!, uma das maiores do ramo de notícias e buscas na internet.
Essa biblioteca conta com diversas funções, divididas em várias categorias, que permitem realizar uma série de tarefas comuns no desenvolvimento front-end e que com JavaScript e CSS puros gerariam um certo trabalho, além da possibilidade de repetição de código (afinal, o que você está fazendo hoje, provavelmente alguém já fez antes ou alguém fará amanhã).
Por ser uma biblioteca bastante extensa, é interessante estuda-la por partes, de forma a fixar o entendimento de cada parte, principalmente as mais básicas, antes de partir para as mais avançadas.
Tendo isso em mente, veremos neste artigo um das funcionalidades mais básicas, porém das mais importantes desse tipo de biblioteca: como acessar e alterar atributos dos elementos do DOM.
Importando a biblioteca
Para que possamos utilizar a biblioteca, primeiramente precisamos importar o arquivo JavaScrip principal. É possível fazer download e trabalhar com o arquivo local ou apenas referenciar a biblioteca a partir de um servidor de distribuição, nesse caso, o da própria Yahoo!.
Todo trecho de código JavaScript baseado no YUI deverá ficar em uma função que tratará o carregamento do módulo node, o responsável pelo acesso à estrutura do DOM. Então é preciso, após importar a biblioteca, carregar este módulo com uma função de call-back, conforme mostra a Listagem 1.
Listagem 1: Carregando a biblioteca e o módulo node
<head>
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function (Y) {
//os próximos trechos de código JavaScript ficarão aqui
});
</script>
</head>
Criando a interface de exemplo
Como o objetivo aqui é explorar as funções de acesso aos atributos dos elementos HTML, não precisamos de uma interface muito elaborada, então ficaremos apenas com um botão, um input do tipo text e um título H1, conforme o código apresentado na Listagem 2.
Listagem 2: Interface utilizada nos exemplos
<body>
<input type="text" id="txtNome"/>
<button id="btnTestar">Testar</button>
<h1 id="hResultado">Resultado</h1>
</body>
Nossa página, inicialmente, deverá estar como na Figura 1.
Figura 1: Aparência da página de exemplos
Acessando os atributos (função get)
Para acessar um atributo de uma determinada tag, utilizamos o método get fornecido pelo YUI. Esse método deve ser chamado a partir de uma instância do elemento, devidamente referenciada através de uma função como a one.
Uma vez capturado o elemento, pode-se invocar o método get e passar como parâmetro o nome do atributo cujo valor se deseja obter. Por exemplo, se desejarmos obter o texto digitado em um input, devemos passar “value” como parâmetro, de acordo com a Listagem3.
Listagem 3: Acessando o atributo de um elemento
Y.one("#btnTestar").on("click", function(){
var nome = Y.one("#txtNome").get("value");
alert(nome);
});
Se salvarmos abrirmos o exemplo no browser, digitarmos um texto no input e clicarmos no botão Testar, devemos obter como resultado algo semelhante ao que é ilustrado na Figura 2.
Nota 1: a função one funciona como um seletor na biblioteca YUI. Ela seleciona um elemento do DOM a partir do seu id, como foi feito com o botão btnTestar.
Nota 2: o método on atribui um event handler (função que trata um evento) a um evento do objeto selecionado. O primeiro parâmetro é o nome do evento e o segundo é a função que o tratará.
Figura 2: Acessando o atributo value do input
Alterando os atributos (função set)
Também é possível alterar o valor de um atributo, para isso utilizamos a função set. Esta função recebe como parâmetro o nome do atributo cujo valor se deseja definir e o novo valor, respectivamente.
No exemplo que desenvolveremos aqui (Listagem 4), vamos aproveitar o código da Listagem 3 e atribuir o valor digitado no input ao texto do título h1, alterando seu atributo innerText.
Listagem 4: Definindo o valor de um atributo
Y.one("#btnTestar").on("click", function(){
var nome = Y.one("#txtNome").get("value");
Y.one("#hResultado").set("innerText", nome);
});
Podemos salvar o arquivo e abri-lo (ou atualizá-lo) no browser, digitar algum texto no input e pressionar o botão Testar. O resultado obtido deve ser semelhante ao que ilustra a Figura 3.
Figura 3: Alterando o atributo innerText da tag h1
Acessando o elemento que disparou um evento
Para acessar os atributos do elemento que disparou um evento existem duas formas:
- Utilizando o operador this;
- Utilizando o parâmetro e da função, através do objeto target.
Na Listagem 5 obtemos o id do objeto que disparou o evento click, utilizando os dois métodos citados acima. Em seguida, exibimos os dois valores em uma mensagem para compará-los. É de se esperar que ambos sejam iguais e exibam o id do btnTestar.
É importante observar que para utilizar o parâmetro “e”, foi necessário informa-lo dentro dos parênteses da função que trata o evento click do botão, como vemos a seguir.
Listagem 5: Acessando o elemento que disparou o evento
Y.one("#btnTestar").on("click", function(e){
var id = this.get("id");
var id2 = e.target.get("id");
alert(id + " - " + id2);
});
Executando o exemplo teremos o seguinte resultado:
Figura 4: O mesmo atributo acessado de duas formas diferentes
Como esperado, os objetos this e e.target representam o próprio botão btnTestar, logo, seu id é o mesmo. A principal diferença prática entre eles é que para utilizar o e.target é preciso definir o parâmetro “e” na função, enquanto o this já existe naturalmente dentro de qualquer evento, representando o objeto que o disparou.
Conclusão
A biblioteca YUI possui dezenas de funções e objetos que facilitam boa parte do trabalho que desenvolvemos diariamente. Neste artigo foram exploradas apenas duas das principais funções de base, get e set, afinal acessar os atributos dos elementos é uma das necessidades mais comuns quando trabalhamos com JavaScript e HTML.
