Revisão HTML - Livro

•

ESTÁCIO

Monique Vieira

07/05/2019

Prévia do material em texto

Revisão - Tecnologia para Internet 2 - Prova AV2 
1- JQuery (Atentar aos seletores e os métodos) 
Jquery é uma biblioteca construída com os comandos do JavaScript e tem como 
principal objetivo facilitar a construção de programas em JavaScript. 
Seletores 
 São comandos que permitem acessar um objeto DOM. O $() é a maneira resumida 
de usar a função. 
 Seletor de elementos - Acessa um ou vários elementos no arquivo 
HTML.EX: //abaixo seletor+acao 
 $("p").click(function() { 
 Seletor ID $("#”) - Acessa os elementos pela sua id. EX: A tag com a 
identificação id=titulo troca a cor do fundo para azul e letra branca */ 
 $("#titulo").attr("style", "background-color:blue; color:white"); 
 Seletor por classe css $(“.”) - Seleciona as tags que possuem uma classe 
especifica. EX: A tag com a classe troca a cor do fundo para azul e letra 
branca */ 
$(".cor").attr("style", "background-color:blue; color:white"); 
 Seletor por classe $this $(this) - Acessa somente o elemento que está sendo 
utilizado no momento. EX: //abaixo: seletor+acao 
$(this).attr("style", "background-color:blue; color:white"); 
Métodos 
 val() - Pega o valor de uma tag input. 
 attrib() - Adiciona ou remove o valor de um atributo . 
addclass() - Adiciona uma classe css em um elemento. 
Método ready() tem uma função de tratamento de evento como argumento: 
$(document).ready(<função de tratamento do evento>); 
Criamos uma função em javascript normalmente: 
function(){ 
//código a ser executado pela função 
} 
E passamos a função como argumento do método ready(): 
$(document).ready({ function(){ 
//excuta quando o DOM foi carregado 
}); 
 
Eventos 
Os navegadores podem captar eventos que são acionados conforme as ações dos 
usuários em um site como por exemplo: clicar, foco em um elemento, etc. Eventos 
mais comuns: Click, Focus, Blur, Change. EX: 
On: 
$('button').on('click',function(){ 
//executa o código da função 
}); 
Focus: 
</html> Focus Exemplo: 
<!doctype html> 
 <html> 
<head> 
<meta charset="utf-8"> 
 <title>Demo</title> 
</head> 
 <body> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> $( document ).ready(function() { //Código das funcoes em jquery }); 
</script> </body> </html> 
Sintaxe: Todo o acesso aos elementos DOM é realizado com a seguinte 
sintaxe: $(selector).acao(); 
 
2- Formulário em HTML (identificar formulário, métodos POST e GET 
Para criar um formulário, temos que usar a tag form. 
<!DOCTYPE html> 
<html> 
<body> 
<form method="post" action=""> 
<label for="nome">Nome:</label> 
<input type="text" name="nome" id="nome" > 
<br><br> 
<label for="nome">Senha do site:</label> 
<input type="password" name="nome" id="nome" > 
<br><br> 
<label for="datanasc">Data de nascimento:</label> 
<input type="date" name="datanasc" id="datanasc" > 
<br><br> 
<label for="experiencia">Tempo de experiência:</label> 
<input type="number" name="experiencia" id="experiencia" > 
<br><br> 
<label for="email'">E-mail:</label> 
<input type="email" name="email" id="email"> 
<br><br> 
<label for="site">Site:</label> 
<input type="url" name="site" id="site"> 
<br><br> 
<label for="telefone">Telefone:</label> 
<input type="tel" name="telefone" id="telefone"> 
<br><br> 
<label for="cidade">Cidade:</label> 
<input type="text" name="cidade" id="cidade"> 
<br><br> 
<label for="uf">Estado:</label> 
<select name="estado" id="uf"> 
<option value="ES">Espírito Santo</option> 
<option value="MG">Minas Gerais</option> 
<option value="RJ">Rio de Janeiro</option> 
<option value="SP">São Paulo</option> 
</select> 
<br><br> 
<label for="sexo">Sexo:</label> 
<input type="radio" id="sexo" name="gender" 
value="female">Feminino 
<input type="radio" id="sexo" name="gender" 
value="male">Masculino 
<br><br> 
<label for="comentario">Mensagem</label> 
<textarea cols="40" rows="5" id="comentario" 
name="msg"></textarea> 
<input type="hidden" id="idusuario" name="idusuario" 
value="id#001"> 
<br><br> 
<input type="submit" name="submit" value="Enviar"> 
</form> 
</body> 
</html> 
O PHP possui uma série de variáveis de ambiente que ajudam na recepção de dados 
via formulário. 
 GET - $_GET - Recebe valores via método GET 
O método GET envia a informação codificada para o servidor anexada no 
request (ou requisição) da página. 
Exemplo: 
 Dado o programa abaixo chamado teste.php 
<?php 
echo 'Bom dia: ' . htmlspecialchars($_GET["nome"]) . '!'; 
?> 
E assumindo que o usuário entrou com http://localhost/tste.php?nome=Andre 
Será exibido: Bom dia: Andre! 
 POST - $_POST - Recebe os valores pelo método POST 
O método POST envia dados por meio dos cabeçalhos do protocolo HTTP. A 
informação enviada é codificada como no método GET e pelo cabeçalho QUERY_ 
STRING é possível verificar os dados que foram enviados para o servidor. 
Exemplo: Dado o programa abaixo chamado teste.php. 
<?php 
echo 'Hello ' . htmlspecialchars($_POST["nome"]) . '!'; 
?> 
 REQUEST - $_REQUEST - Recebe os valores pelos métodos POST ou GET 
Exemplo: Dado o programa abaixo chamado teste.php. 
<?php 
echo 'Hello ' . htmlspecialchars($_POST["nome"]) . '!'; 
?> 
EX: <form action=http://localhost:8080/teste.php method=post> 
3- Conexão com o bando de dados por PDO (prestar atenção no executar e consulta 
– Orientação a objeto) 
 
Esta classe permite a conexão do PHP com os seguintes bancos de dados: CUBRID, 
MS SQL Server, Firebird IBM, Informix, MySQL, MS SQL Server, Oracle, ODBC 
and DB2, PostgreSQL, SQLite, 4D. 
 
Exemplo de conexão com o MySQL 
 <?php 
$dsn = 'mysql:dbname=testdb;host=127.0.0.1'; 
 $user = 'dbuser'; 
 $password = 'dbpass'; 
 try { $dbh = new PDO($dsn, $user, $password); 
} catch (PDOException $e) { 
echo 'Connection failed: ' . $e->getMessage(); 
} 
?> 
 EXECUTAR 
Permite executar um comando SQL e retorna a quantidade de registros que foram 
afetados pelo comando. Este comando não retorna os resultados de uma consulta. 
Exemplo de inclusão: 
 <?php 
 $dsn = 'pgsql:dbname=testdb;host=127.0.0.1'; 
 $user = 'dbuser'; 
 $password = 'dbpass'; 
try { $dbh = new PDO($dsn, $user, $password); 
} catch (PDOException $e) { 
echo 'Connection failed: ' . $e->getMessage() 
; } 
 $count = $dbh->exec("insert into aluno(matricula, nome) values('201712345', 
'Luiz') "); 
 echo "<p>$count registro foi incluído</p>"; 
?> 
 
 CONSULTA 
Executa uma consulta SQL retornando um objeto com os resultados; 
 Exemplo de consulta: <?php 
$dsn = 'pgsql:dbname=testdb;host=127.0.0.1'; 
 $user = 'dbuser'; 
 $password = 'dbpass' 
 try { $dbh = new PDO($dsn, $user, $password); 
 } catch (PDOException $e) { 
 echo 'Connection failed: ' . $e->getMessage(); 
} 
 $sql = 'SELECT matricula, nome FROM aluno ORDER BY nome'; 
foreach ($dbh->query($sql) as $row) { 
 
print $row['matricula'] . "\t"; 
print $row['nome'] . "\t"; 
} 
?> 
4- Orientação a objeto em PHP (Prestar atenção nos atributos protegidos e 
públicos) 
Todo código em PHP deve estar entre os código <?php e ?> e sua sintaxe é muito 
parecida com a linguagem C. O final da linha deve conter um ponto e vírgula ( ; ) . 
 Criação de variáveis em PHP - As variáveis no PHP são criadas com um cifrão ($) + 
nome da variável e como é uma linguagem script não é necessário defini-la com um tipo. 
As classes e objetos foram incorporadas à linguagem PHP a partir da versão 5 e 
implementa as seguintes características: 
• Classes; 
• Objetos; 
• Herança; 
• Interfaces; 
• Abstração;• Métodos mágicos (Magic Methods). 
<?php 
 class Celular { 
 /* atributos */ 
 var $preco; 
var $titulo; 
/*métodos de acesso*/ 
function setPreco($p){ 
$this->preco = $p; 
} 
function gePreco(){ 
return $this->preco; 
} 
 function setTitulo($t){ 
$this->titulo = $t; 
} 
function getTitulo(){ 
return $this->preco ; 
 } 
} 
?> 
A visibilidade dos atributos em PHP obedece aos conceitos que aprendemos 
sobre orientação a objetos e pode ser: 
• public 
public $variável = “teste”; 
• protected 
protected $outra = “outro teste”; 
• private 
private $mais_uma = “novo teste”; 
EX: 
 <?php 
class Usuario{ 
public $nome_usuario = ""; 
private $logado = false; 
public function login() { 
 $this->logado = true; 
} 
 
public function logout() { 
$this->logado = false; 
} 
public function estaLogado() { 
return $this->logado; 
} 
} 
class Administrador extends Usuario { 
public function criaForum( $nomeForum ) { 
echo "$this->nome_usuario criou um forum: $nomeForum<br>"; 
} 
public function banir( $usuario ) { 
echo "$this->nome_usuario baniu o usuario: $usuario- 
>nome_usuario<br>"; 
} 
} 
 ?> 
5- Questão 9 (2 pontos) é para criar um programa 
EX1. 
<!doctype html> 
 <html> 
 <head> 
 <meta charset=latin1> 
<title>Uma pagina com javascriptscript </TITLE> 
<script> alert('Oi Mundo'); 
 </script> </head> 
<body> 
 <h1> Teste de javascript </h1> 
<script> console.log('abra o console do seu navegador geralmente com a tecla F11'); 
 </script> 
 </body> 
</html> 
EX2. 
 html> 
 <head> 
 <title>Teste</title> 
 </head> 
 <body> 
 <?php 
 /* Função com argumentos */ 
 function soma($n1, $n2) { 
 $soma = $n1 + $n2; 
 echo "A soma é $soma"; 
 } 
 /* Chamando a função */ 
 soma(2,3); 
 ?> 
 </body> 
 </html>