Ficha 1 JSB

1. Percorrer e Manipular Conteúdo de Páginas Web

Neste capítulo a abordagem aponta para o auxílio de bibliotecas em javascript para percorrer os
elementos da DOM (Document Object Model), e especificamente estaremos trabalhando com o jQuery,
para realização desse feito.

jQuery – é uma biblioteca em javascript desenvolvida implementando o padrão de desenho facade e que
o torna muito prático na hora de desenvolver scripts. Muitos sites e aplicações web fazem uso dessa
biblioteca no seu código, é tornou-se tão essencial que alguns frameworks foram construídos contando
com o jQuery como dependência para o seu funcionamento como é o caso do bootstrap.

Padrão de Desenho – padrão de desenho conhecido como Design Pattern é nada mais que uma forma de
solução para problemas comuns, acordada entre a comunidade de uma certa profissão, eles não estão
presentes somente na programação, o seu surgimento vem de outro campo do conhecimento, mas é tão
bem aplicado que acabou abrangindo outras áreas por ser apenas uma estratégia para resolução de um
problema. Exemplos de padrões de desenho em outras áreas temos:

- Para engenharia civil:

* Uma única entrada de edifício, tendo pessoas entrando e saindo constantemente (solução: porta
giratória); travessia de transporte terrestre para um extremo separado por águas (solução: ponte
aérea);Entre outros exemplos que se tornaram padrão para esses problemas comuns.

Facade – padrão de desenho que consiste em abstrair a implementação de uma funcionalidade

adicionando uma camada para tornar o seu uso mais simplificado. Um exemplo disso é o acesso ao valor
de um objecto no dom:

Em javascript puro (vannila) : document.getElementById(‘id do elemento’).value;

Em jQuery: $(“#id do elemento”).val;

1.1. Como fazer uso da biblioteca jQuery (implementação)

O jQuery pode ser instalado de muitas formas por meio de gestores de dependências ou manualmente a
por apontar o endereço cdn( rede de distribuição de conteúdos).

Observaremos 2 formas que são por cdn e manualmente.

Por cdn pode-se fazer referência ao endereço de distribuição, que atualmente é:

<script src="https://code.jquery.com/jquery-
3.6.0.min.js" integrity="sha256-
/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></scr
ipt>
Ficha 1 JSB

Ou então baixar o arquivo em https://releases.jquery.com e depois referência o ficheiro no projecto ou

página que vai fazer uso da biblioteca.

Nota: o carregamento dos scripts é feito em ordem de linhas, o que quer dizer que a biblioteca só será
reconhecida se for carregada antes do script que vai fazer uso da mesma.

Implementação

Para percorrermos elementos da DOM primeiro deve-se entender a sintaxe do jQuery: qualquer instrução
em jQuery começa com o símbolo sifrão ($), que informa ao navegador o uso da biblioteca.

Nos casos de seleção de um elemento da DOM, este pode ser selecionado de várias formas, sendo pelo
nome da tag, nome do atributo da tag, class aplicada ao elemento, ou id.

Imaginemos que na nossa página temos um campo de texto reservado para preenchimento do nome de
quem esta a cadastrar-se cujo nome do campo seja nome, o id do campo nome e a classe formulario.
Então este elemento estaria representado da seguinte forma:

<input type=”text” name=”nome” id=”nome” class=”formulario”>

Pegando o elemento pela tag:

$(“input”)

Pegando o seu valor:

$(“input”).val()

Nota: sendo que o input num formulário de cadastro pode ser um conjunto, o resultado desta operação
pode não ser o desejado.

Pegando o elemento pelo tipo:

$(“input:text”)

Pegando o seu valor:

$(“input:text”).val()

Nota:Similar ao método anterior, este também pode não trazer resultados favoráveis a não ser que seja
o único elemento deste tipo presente na página.

Pegando o elemento pelo nome:

Ficha 1 JSB

$(“input[name=’nome’]”)

Pegando o seu valor:

$(“input[name=’nome’]”).val()

Nota: este método é mais preciso e usado para selecionar um elemento em específico.

Pegando o elemento pelo id:

$(“#nome”)

Pegando o seu valor:

$(“#nome”).val()

Nota: este método é igual ao método anterior

Pegando o elemento pela classe:

$(“.formulario”)

Pegando o seu valor

$(“.formulario”).val()

Nota: este método é melhor usado quando se pretende abrangir uma quantidade maior de elementos
que aplicam a mesma classe.

Como arrancar um script ao carregar a página

Para execução do script sem que ocorra um trigger ou gatilho é necessário envolver o script por um
conjunto de símbolos:

(function(){

//instruções

})();

A título de exemplo vamos construir um formulário de cadastro de estudante para poder manipular os
objectos da DOM.
Ficha 1 JSB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table>
<tr>
<td>Nome:</td>
<td><input type="text" name="nome" id="nome"
class="formulario"/></td>
</tr>
<tr>
<td>Apelido:</td>
<td><input type="text" name="nome" id="apelido"
class="formulario"/></td>
</tr>
<tr>
<td>Genero:</td>
<td><input type="radio" name="genero" id="genero"
class="formulario" value="Masculino"/>Masculino</td>
<td><input type="radio" name="genero" id="genero"
class="formulario" value="Feminino"/>Feminino</td>
<td><input type="radio" name="genero" id="genero"
class="formulario" value="Outro"/>Outro</td>
</tr>
<tr>
<td>Curso:</td>
<td><select name="curso" id="curso" class="formulario">
<option value="Quimica">Quimica</option>
<option value="Civil">Civil</option>
<option value="Electrica">Electrica</option>
<option value="Electronica">Electronica</option>
<option value="Ambiente">Ambiente</option>
<option value="Informatica">Informatica</option>
</select></td>
</tr>
<tr>
<td>Descricao do que espera aprender</td>
Ficha 1 JSB

<td><textarea class="formulario" name="descricao"

id="descricao"></textarea></td>
</tr>
<tr>
<td><input type="button" name="submeter" id="submeter"
class="formulario" value="submeter" ></td>

</tr>
</table>
</form>
<div id="resultado">

</div>

<script src="https://code.jquery.com/jquery-
3.6.0.min.js" integrity="sha256-
/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
(function(){
$("#submeter").click(function(evt){
evt.preventDefault();
let nome=$("#nome").val();
let apelido=$("#apelido").val();
let genero=$("#genero").val();
let curso=$("#curso").val();
let descricao=$("#descricao").val();
let resultado=$("#resultado");
resultado.html("Nome: "+nome+"<br>Apelido: "+apelido+"<br>Genero:
"+genero+"<br>Curso: "+curso+"<br>Descricao:<br> "+descricao);
})
})();
</script>
</body>
</html>

A seguir o resultado do formulário:

Ficha 1 JSB

Após preencher e submeter o formulário: