Introdução a Web - Site de Thiago Leite

Transcrição

Linguagem Técnica de
Programação III
Introdução à Web
Thiago Leite
[email protected]
segunda-feira, 8 de abril de 13
1
Bibliografia
•
DAVIS, Michele E.;
PHILLIPS, Jon A. 1973-.
Aprendendo PHP &
MySQL. Rio de Janeiro:
Alta Books, 2008.
2
Bibliografia
•
DALL’OGLIO, Pablo.
PHP: programando
com orientação a
objetos. São Paulo:
Novatec Editora, 2007.
3
Bibliografia
•
NIXON, Robin.
Learning PHP,
MySQL, JavaScript,
and CSS: A Stepby-Step Guide to
Creating Dynamic
Websites. California:
O'Reilly Media Inc, 2012.
4
Ementa
1. Introdução a Web
2. Introdução a PHP
3. Orientação a objetos
4. Manipulação de Dados
5
Avaliação
• Primeiro bimestre
• Trabalhos em grupo (5 pontos)
• Grupo de 3 alunos
• Online no Blackboard
• Avaliação bimestral (5 pontos)
6
Avaliação
• Segundo bimestre
• Projeto (5 pontos)
• Grupo de 3 alunos
• Online no Blackboard
• Avaliação bimestral (5 pontos)
7
Avaliação
• Não há arredondamento de
notas
8
Presença em Sala de
Aula
• Limite de 20 faltas
• 2 faltas por dia de aula
• Presença do aluno será cobrada
9
Estilo das Provas
Bimestrais
(FUMARC) Assinale a opção que corresponde à sintaxe correta de um
programa desenvolvido na linguagem PHP.
a) <begin php echo "<p>Olá Mundo</p>" ; end> b) <php echo "<p>Olá Mundo</p>" ; /php> c) <?php echo "<p>Olá Mundo</p>" ; ?>
d) <php { echo "<p>Olá Mundo</p>" ; }> segunda-feira, 8 de abril de 13
10
Estilo das Provas
Bimestrais
(FUMARC) Assinale a opção que corresponde à sintaxe correta de um
programa desenvolvido na linguagem PHP.
a) <begin php echo "<p>Olá Mundo</p>" ; end> b) <php echo "<p>Olá Mundo</p>" ; /php> c) <?php echo "<p>Olá Mundo</p>" ; ?>
d) <php { echo "<p>Olá Mundo</p>" ; }> segunda-feira, 8 de abril de 13
10
Instituto de Tecnologia
de Massachusetts
• Acesso a todo o material da universidade
• MitOpenCourseWare
• http://ocw.mit.edu
• Acesso a parte do conteúdo em português
• Parceria entre MIT e Universia
• http://mit.universia.com.br
11
Cursos Stanford
University
• Cursos online gratuitos
• Livre para qualquer pessoa se inscrever
• Entrega de certificado da Universidade de
Stanford
12
Cursos Piazza
• Cursos online gratuitos pela plataforma
Piazza
• https://piazza.com/itunesu
• disponível em plataforma Web e Mobile
13
Cursos de Extensão
•
Curso Preparatório para
Certificação Linux
LPIC-1
•
Fundamentos,
Configuração e
Instalação de Ativos de
Rede Cisco
•
http://migre.me/dmGQh
14
Introdução à Web
•
Tim Berners-Lee
•
inventor do WWW
(World Wide Web)
•
propôs sistema de
gerência de
informações em 1989
•
diretor da W3C
(World Wide Web
Consortium)
15
O que é WWW?
16
16
Introdução à Web
• HTTP (Hyper Text Transfer Protocol)
• Framework para navegar entre conteúdo
• Linguagem de marcação HTML
• Primeiro navegador e servidor Web
17
Introdução à Web
• HTML (Hyper Text Markup Language) é
utilizado para criar as páginas Web,
incluindo texto e comandos de marcação
18
Introdução à Web
• HTTP é um protocolo baseado no modelo
cliente/servidor
• um servidor pode gerir múltiplas
diferentes conexões
• todas as respostas são enviadas com
garantia de entrega
19
Modelo Cliente/Servidor
20
Modelo Cliente/Servidor
21
Introdução à Web
• Componentes para páginas Web estáticas
• Navegador Web (ex: Firefox, Internet
Explorer, Chrome, Safari)
• Serviços de tradução de nomes (ex: DNS
- Domain Name Service)
• Servidor Web (ex: Microsoft IIS, Apache)
22
Acesso Web Estático
23
Introdução à Web
• Componentes para páginas dinâmicas Web
• Linguagem de script servidor (ex: PHP,
ASP, Perl, Python)
• Banco de Dados (ex: MySQL, Microsoft
SQL Server, Oracle)
• Linguagem de script cliente (ex:
JavaScript,VBScript)
24
Acesso Web Dinâmico
25
Introdução à Web
•
Apache
•
muito além de simplesmente de troca de
arquivos solicitados
•
serve arquivos HTML, imagens, Flash, áudio,
RSS (Really Simple Sindication)...
•
servir arquivos dinâmicos criados por
linguagens como PHP
•
suporte modularizado a outras atividades
26
Introdução à Web
• PHP (PHP: Hypertext Preprocessor)
• linguagem para gerar arquivos dinâmicos
• acesso irrestrito ao servidor web
• interpretará conteúdo em arquivos .php
• analisa conteúdo entre os símbolos <?
php e ?>
27
Introdução à Web
•
MySQL
•
•
banco para armazenamento de dados
•
banco de dados relacional
meio de armazenamento mais eficiente que
arquivos
•
•
•
bases de dados
tabelas
campos
28
Introdução à Web
• JavaScript
• linguagem de script para manipular
HTML
• dinamicamente realizar operações no
cliente
• muito utilizado para validação de campos
em formulários
29
O que é Software Livre?
30
30
Introdução à Web
•
WAMP, MAMP e LAMP
•
Windows, Apache,
MySQL e PHP
•
Mac, Apache, MySQL
e PHP
•
Linux, Apache, MySQL
e PHP
31
Introdução à Web
• HTML é uma linguagem de descrição de
páginas web
• baseada em tags
• tags descrevem um documento
• documentos HTML contém tags em
texto puro
32
Introdução à Web
•
Tags HTML
•
•
•
são formadas com os símbolos < e > (
•
ex: <html>
normalmente vem em pares
•
ex: <b></b>
o primeiro par abre a tag e o segundo fecha
33
Introdução à Web
• Elementos HTML
• tudo entre duas tags
• ex: <p>Isso é um parágrafo.</p>
início da tag
elemento
fim da tag
<p>
Isso é um parágrafo
</p>
<a href="default.htm">
Isso é um link
</a>
<br>
34
Introdução à Web
• Atributos HTML
• alguns elementos HTML possuem
atributos
<p class="intro">Paragrafo com classe</p>
35
Estrutura básica de uma página
HTML
36
Introdução à Web
•
Exemplo de código HTML
<html>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
37
Código HTML Interpretado
38
Á
á
Â
â
À
à
Å
å
Ã
ã
Ä
ä
Æ
æ
É
é
Ê
ê
Á
á
Â
â
À
à
Å
å
Ã
ã
Ä
ä
Æ
æ
É
é
Ê
ê
È
è
Ë
ë
Ð
ð
È
è
Ë
ë
Ð
ð
Í
í
Î
î
Ì
ì
Ï
ï
Í
í
Î
î
Ì
ì
Ï
ï
Ó
ó
Ô
Ó
ó
Ô
ô
Ò
ò
Ø
ø
Õ
õ
Ö
ö
Ú
ú
Û
û
Ù
ù
Ü
ü
ô
Ò
ò
Ø
ø
Õ
õ
Ö
ö
Ú
ú
Û
û
Ù
ù
Ü
ü
Ç
ç
Ç
ç
Ñ
ñ
Ñ
ñ
Ý
ý
Ý
ý
"
<
>
&
"
<
>
&
®
©
Þ
þ
ß
®
©
Þ
þ
ß
Tabela de Codificação HTML
utilizando entities
39
Introdução à Web
•
Exemplo de código HTML utilizando entities
<html>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
40
HTML interpretado com entities
41
versão
ano
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML 1.0
2000
HTML5
2012
XHTML5
2013
Versões do HTML
42
Introdução à Web
• A declaração <!DOCTYPE>
• auxilia o navegador a exibir corretamente
uma página web
• indica a versão e tipo de HTML utilizado
43
Introdução à Web
•
Exemplo de declaração para HTML5
<!DOCTYPE html>
•
Exemplo de declaração para HTML 4.01
<!DOCTYPE HTML PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
•
Lista completa de declarações em http://
www.w3schools.com/tags/tag_doctype.asp
44
Introdução à Web
• Títulos em HTML
• são definidos de <h1> a <h6>
<h1>Isto eh um título</h1>
45
Introdução à Web
• Links HTML
• são definidos com a tag <a>
• podem possuir o atributo target
<a href="http://www.thiagofmleite.com" target="_blank">Isto é um link</a>
46
Introdução à Web
• Imagens HTML
• são definidos com a tag <img>
<img src="w3schools.jpg" width="104" height="142">
47
Introdução à Web
• Comentários em HTML
• são definidos com a tag 
<!-‐-‐ Isso é um comentário -‐-‐>
48
Introdução à Web
• Linhas horizontais em HTML
• são definidos com a tag <hr>
<hr>
49
Introdução à Web
• Quebras de linhas em HTML
• são definidos com a tag <br>
<br>
50
Introdução à Web
• Texto em negrito com HTML
• são definidos com a tag <b>
<b>Texto em negrito</b>
51
Introdução à Web
• Texto em itálico com HTML
• são definidos com a tag <i>
<i>Texto em italico</i>
52
Exercício
• Faça uma página web contendo seu
currículo
53
Introdução à Web
• Tabelas em HTML
• as linhas são definidas pelas tags <tr>
(table row)
• cada linha são dividas em células com
as tags <td> (table data)
• o cabeçalho é definido pelas tags <th>
(table header)
54
Exemplo Tabela HTML
<table border="1">
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td>linha 1, célula 1</td>
</tr>
<tr>
</tr>
</table>
55
Introdução à Web
• Listas em HTML
• listas numeradas definidas pelas tags
<ol> (ordered list)
• listas não numeradas definidas pelas
tags <ul> (unordered list)
• listas de definições utilizam tags <dl>
(definition list)
56
Introdução à Web
• Lista numerada em HTML
<ol>
<li>Café</li>
<li>Leite</li>
</ol>
57
Introdução à Web
• Lista não numerada em HTML
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
58
Introdução à Web
•
Lista de definições em HTML
<dl>
<dt>Café</dt>
<dd>Bebida quente e preta</dd>
<dt>Leite</dt>
<dd>Bebida fria e branca</dd>
</dl>
59
Introdução à Web
• Formulários são definidos pelas tags
<form> e são utilizados para passar dados
dos clientes para o servidor
• tags <input> são elementos de entrada
de dados
• ex: campo, checkbox, password, botão
radio button, botão de submissão e
mais
60
Tipos de Campos para Formulários
61
Introdução à Web
• Exemplo de formulário com campos “text”
<form>
Primeiro nome: <input type="text" name="primeironome"><br>
Sobrenome: <input type="text" name="sobrenome">
</form>
62
Introdução à Web
• Exemplo de formulário com campos
“password”
<form>
Password: <input type="password" name="password">
</form>
63
Introdução à Web
•
Exemplo de formulário com campos “radio”
•
atributo “name” define o grupo
<form>
<input type="radio" name="sexo" value="masculino">Masculino<br>
<input type="radio" name="sexo" value="feminino">Feminino
</form>
64
Introdução à Web
•
Exemplo de formulário com campos “checkbox”
•
atributo “name” define o grupo
<form>
<input type="checkbox" name="veiculo" value="bicicleta">Eu tenho bicicleta<br>
<input type="checkbox" name="veiculo" value="carro">Eu tenho carro </form>
65
Introdução à Web
•
Exemplo de formulário com botão de submissão
•
atributo “action” define destino para os dados do
formulário
•
atributo “method” define o método de envio dos
dados
<form name="input" action="server.php" method="get">
Usuário: <input type="text" name="usuario">
<input type="submit" value="Submeter">
</form>
66
Tag
Descrição
<form>
Define um formulário
<input>
Define um campo de entrada
<textarea>
Define um campo com várias linhas
<label>
Define um rótulo para um campo
<fieldset>
Define um grupo de campos relacionados
<legend>
Define uma legenda para o grupo de campos
<select>
Define uma lista drop-down
<optgroup>
Define um grupo de opções na lista drop-down
<option>
Define uma opção na lista drop-down
<button>
Define um botão
<datalist>
Define uma lista de dados para um campo
Tags para Formulários
67
Introdução à Web
•
Informações adicionais sobre uma página são
definidos pela tag <head>
•
•
•
•
tag <title> define título da página
•
tag <script> define um script cliente
tag <base> define endereço da página
tag <link> define relação com objetos externos
tag <style> define estilos (ex: CSS, JSSS JavaScript Style Sheets)
68
Introdução à Web
•
Tag <meta> define termos para auxiliar a procura da página
•
Define palavras-chave para o documento
•
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
•
Define uma descrição ao conteúdo do documento
• <meta name="description" content="Tutorial de HTML">
•
Define autor
• <meta name="author" content="Thiago Leite">
•
Define tempo de atualização da página
• <meta http-‐equiv="refresh" content="300">
69
Introdução à Web
•
Tag <style>
•
define estilos CSS (Cascading Style Sheets) para
um documento HTML a partir da versão 4
•
•
linguagem semântica para manipulação HTML
•
pode ocorrer no escopo da tag <head> (interno)
ou em qualquer outro ponto do documento
(inline)
define regras visuais para os elementos exibidos
nos clientes
70
Introdução à Web
•
Tag <script>
•
•
define um script de cliente, como JavaScript
•
quando o script for JavaScript, não é necessário
especificar o tipo através do atributo type
•
pode definir scripts externos por meio do atributo
src
comum para validação de formulários e mudança
dinâmica de conteúdo
<script src=”meuscript.js” type=”text/
javascript”></script>
71
Introdução à Web
•
JavaScript
•
Expressões JavaScript são comandos dados aos navegadores
fazerem algo
•
•
O uso de ponto e vírgula ao final das linhas é facultativo
•
•
•
JavaScript é case sensitive
•
As variáveis são fracamente tipadas
Códigos JavaScript podem ser agrupados em blocos de códigos,
como funções
JavaScript ignora espaços extras em algumas expressões
As linhas podem ser “quebradas” utilizando o caractere \ quando
em um contexto de aspas
72
Introdução à Web
• Exemplo de script em JavaScript
<script>
document.write("Olá Mundo!")
</script>
73
Introdução à Web
•
Tag <noscript>
•
alguns navegadores podem não suportar scripts no
lado do cliente
•
retorna feedback ao cliente
<script>
document.write("Olá Mundo!")
</script>
<noscript>Desculpe, seu navegador não suporta JavaScript!</noscript>
74
Introdução à Web
•
Comentários em JavaScript
// Escreva o titulo
document.getElementById("meuTitulo").innerHTML="Bem
-‐vindo!";
/* Escreva um parágrafo */
document.getElementById("meuParagrafo
").innerHTML="Isto é um parágrafo.";
75
Introdução à Web
• JavaScript
• pode reagir a eventos
• pode escrever diretamente no
documento HTML
• pode manipular estilo do documento
76
Introdução à Web
•
Exemplo de reação a eventos em JavaScript
<html>
<body>
<h1>Meu primeiro JavaScript</h1>
<h2 onclick = "this.innerHTML = 'Ops!'">Clique aqui!</h2>
</body>
</html>
77
Introdução à Web
•
Exemplo de escrita diretamente no documento HTML
<html> <body>
<h1>Meu segundo JavaScript</h1>
<p id="demo">JavaScript pode modificar o HTML. </p>
<script> function minhaFuncao() {
x=document.getElementById("demo") // Procura pelo Elemento
x.innerHTML = "Oi! Modifiquei!"; // Modifica o HTML
} </script>
<button type="button" onclick="minhaFuncao()">Clique-‐me!</
button>
</body> </html> segunda-feira, 8 de abril de 13
78
Introdução à Web
•
Exemplo de manipulação de estilos por JavaScript
<html> <body>
<h1>Meu terceiro JavaScript</h1>
<p id="demo"> JavaScript pode modificar os estilos. </p>
<script> function minhaFuncao() {
x=document.getElementById("demo") // Procura pelo Elemento
x.style.color="#ff0000"; // Modifica o estilo
} </script>
<button type="button" onclick="minhaFuncao()">Clique-‐me!</
button>
</body> </html> segunda-feira, 8 de abril de 13
79
Exercício
• Desenvolva um formulário para contato
onde os dados sejam enviados por e-mail
através do cliente de e-mail local
80
Exercício
•
Exemplo de resolução do exercício
<form action="mailto:[email protected]">
Nome:<input type="text" name="nome">
Sobrenome:<input type="text" name="sobrenome">
E-‐mail:<input type="text" name="email">
Comentário: <textarea name="comentario" rows=5 cols=20>
<input type="submit" name="submeter" value="Submeter">
</form>
81
Introdução à Web
• Função alert() em JavaScript
<button type="button" onclick="alert('Bem-‐
vindo!')">Clique!</button>
82
Introdução à Web
• Quando um documento web é carregado o
navegador cria um Document Object
Model (DOM)
• JavaScript procura os elementos baseados
no DOM
83
Árvore DOM
84
Introdução á Web
• Navegando na estrutura DOM
document.head.innerHTML = "<title>Titulo</title>"
document.body.innerHTML = "<p>Paragrafo</p>"
85
Introdução à Web
•
Navegando na estrutura DOM
<html> <body> <p id="intro">Olá Mundo!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script> </body> </html>
86
Introdução à Web
• Os elementos HTML podem ser
manipulados através de
• ID
• Tag
• Nome da classe
87
Introdução à Web
• Exemplo de JavaScript manipulando por Tag
var x=document.getElementsByTagName("td")
alert(x.length);
88
Introdução à Web
• Exemplo de JavaScript manipulando por
nome
var x=document.getElementsByName("x");
alert(x.length);
89
Introdução à Web
•
Variáveis em JavaScript
•
•
•
•
•
•
texto
número
não definidas
booleanas
arrays
objetos
90
Introdução à Web
•
var carro = new String;
var num = new Number;
var undef; var bool = new Boolean;
var array = new Array;
var obj = new Object;
91
Introdução à Web
•
<html> <body> <script>
var x=5, y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
92
Introdução à Web
• Variáveis globais em JavaScript
• variáveis que podem ser acessadas de
qualquer trecho do código a partir do
momento que essas são declaradas
variavel=”Texto”;
93
Introdução à Web
•
Arrays numéricos em JavaScript
var carros = new Array();
carros[0] = "Saab";
carros[1] = "Volvo";
carros[2] = "BMW";
document.write(carros[0] + “<br>”)
94
Introdução à Web
•
Arrays associativos em JavaScript
var itens = new Array();
itens['foo'] = 123456;
itens['bar'] = 789012;
itens['baz'] = 345678;
document.write(itens['foo'] + '<br>')
document.write(itens['bar'] + '<br>')
document.write(itens['baz'] + '<br>')
95
Introdução à Web
•
Arrays multidimensionais em JavaScript
var floricultura = new Array();
floricultura['rosas'] = new Array( "5.00", "7 itens", "vermelha" );
floricultura['orquideas'] = new Array( "2.00", "1 item", "branca" );
96
Introdução à Web
•
Formas de criação de arrays em JavaScript
•
normal
var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo";
•
condensada
var myCars=new Array("Saab","Volvo");
•
literal
var myCars=["Saab","Volvo"];
97
Operador
Descrição
Comparação
Retorno
x==8
false
x==5
true
==
é igual a
===
é exatamente igual
(valor e tipo)
x==="5"
false
x===5
true
!=
não é igual
x!=8
true
!==
não é exatamente
igual (valor e tipo)
x!=="5"
true
x!==5
false
>
é maior que
x>8
false
<
é menor que
x<8
true
>=
é maior ou igual que
x>=8
false
<=
é menor ou igual que x<=8
true
Operadores Relacionais em
JavaScript
98
Operador
Descrição
Exemplo
&&
and
(x < 10 && y > 1) is true
||
or
(x==5 || y==5) is false
!
not
!(x==y) is true
Operadores Lógicos em JavaScript
99
Introdução a PHP
• Estruturas de
controle em
JavaScript
• if
• switch
• while
• for
• for/in
• break
• continue
100
if
101
Introdução à Web
• Estrutura if em JavaScript
if (time<20) {
x="Bom dia";
}
102
Introdução à Web
• Estrutura if..else em JavaScript
if (time<20) {
x="Bom dia";
} else {
x="Boa tarde";
}
103
Introdução à Web
•
Estrutura if..else if..else em JavaScript
if (time<10) {
x="Bom dia";
} else if (time<20) {
x="Boa tarde";
} else {
x="Boa noite";
}
104
switch
105
Introdução à Web
•
Estrutura switch em JavaScript
var day=new Date().getDay();
switch (day) {
case 0: x="Hoje é domingo"; break;
case 1: x="Hoje é segunda-‐feira"; break;
case 2: x="Hoje é terça-‐feira"; break;
case 3: x="Hoje é quarta-‐feira"; break;
case 4: x="Hoje é quinta-‐feira"; break;
case 5: x="Hoje é sexta-‐feira"; break;
case 6: x="Hoje é sábado"; break;
default: x="Dia desconhecido";
}
106
Introdução à Web
• Uso do break com if
for (i=0;i<10;i++) {
if (i==3) break; // para no 3
x=x + "O número é " + i + "<br>";
}
107
Introdução à Web
• Uso do continue com if
for (i=0;i<=10;i++) {
if (i==3) continue; // pula o 3
x=x + "O número é " + i + "<br>";
}
108
Introdução à Web
• Estrutura do for
for (expr1; expr2; expr3) {
// código a ser executado
}
109
Parâmetros
Descrição
expr1
Valor inicial da variável
contadora (opcional)
expr2
Condição de execução
expr3
Valor a ser incrementado a
cada execução (opcional)
for
110
Introdução à Web
• Exemplo de for
carros=["BMW","Volvo","Saab","Ford"];
for (var i=0, len=carros.length; i<len; i++) { document.write(carros[i] + "<br>");
}
111
Introdução à Web
• Exemplo de for/in
var txt
var pessoa={nome:"John",sobrenome:"Doe",idade:
25}; for (x in pessoa) {
txt=txt + pessoa[x];
}
112
while
113
Introdução à Web
• Exemplo de while
while (i<5) {
x=x + "O número é " + i + "<br>";
i++; // iterador de i
}
114
Introdução à Web
• Exemplo de do/while
do {
x=x+"O número é "+i+"<br>";
i++;
} while (i<5); // teste é realizado ao final
115
Introdução à Web
• Criando objetos em JavaScript
pessoa=new Object();
pessoa.nome="John";
pessoa.sobrenome="Doe";
pessoa.idade=50;
pessoa.olhos="azul";
116
Introdução à Web
• Acessando propriedades dos objetos
nomeDoObjeto.nomeDaPropriedade
117
Introdução à Web
• Exemplo de acesso a propriedade de um
objeto
var mensagem = “Olá mundo!”;
var x=mensagem.length;
118
Exercício
• Criar uma tabela dinamicamente com
JavaScript através de um valor fornecido
em formulário
119
Exercício
<html> <body> Número de Linhas:<input id="numero" type="text"> <button onclick="criarTabela()">Gerar</button>
<p id="mostratabela"></p>
<script> function criarTabela(){
var tabela = "<table border=1>"
for (var i=0;i<document.getElementById("numero").value;i++) {
tabela = tabela + "<tr><td>Celula</td></tr>"
}
tabela = tabela + "</table>"
document.getElementById("mostratabela").innerHTML = tabela
} </script> </body> </html>
120
Introdução à Web
•
Validação de formulários com JavaScript
<html> <body> <form name="meuFormulario" onsubmit="return validateForm()" method="post">
Nome: <input type="text" name="nome">
<input type="submit" value="Submit">
</form> (continua)
121
Introdução à Web
•
Validação de formulários com JavaScript
(continuação)
<script>
function validateForm() {
var x=document.forms["meuFormulario"]["nome"].value;
if (x==null || x=="") {
alert("Nome deve ser fornecido");
return false;
}
}
122
Exercício
• Faça a verificação dos campos do
formulário do exercício anterior com
JavaScript
123
Introdução à Web
•
Folhas de Estilo CSS
•
•
•
•
Cascading Style Sheets
definem como mostrar elementos HTML
adicionados a partir do HTML 4.0
Estilos podem ser aplicados
•
•
•
inline
internamente
externamente
124
Introdução à Web
• Estilos inline
• aplicado a um único elemento HTML
<p style="color:blue;margin-‐left:
20px;">Isto é um parágrafo.</p>
125
Introdução à Web
•
Exemplo de uso inline da tag <style> com cor de fundo
•
aplicável a quase todas as tags, com exceção de <base>, <head>,
<html>, <meta>, <param>, <script>, <style> e <title>
<html>
<body style="background-‐color:yellow;">
<h2 style="background-‐color:red;">Isto é um título</
h2>
<p style="background-‐color:green;">Isto é um parágrafo.</p>
</body>
</html>
126
Introdução à Web
•
Aplicar estilos internos com a tag <style> realizando alinhamento de texto
<html>
<head>
<style type="text/css">
body {background-‐color:yellow;}
p {color:blue;}
</style>
</head>
<body>
<h2>Isto é um título</h2>
<p>Isto é um parágrafo.</p>
</body>
</html>
127
Introdução à Web
•
Exemplo de uso externo de folhas de estilos com a tag <link>
•
arquivo “meuestilo.css” precisará conter os estilos
<html> <head> <head>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head> <body>
<h2>Isto é um título</h2>
<p>Isto é um parágrafo.</p>
</body> </html>
128
Sintaxe CSS
129
Introdução à Web
• CSS pode aplicar estilos a seletores
específicos como
• Tags
• IDs
• Classes
• Estado dos elementos
130
Introdução à Web
•
Exemplo de estilos aplicados a tags
<html> <head> <style>
body {background-‐color:yellow;}
h1 {font-‐size:36pt;}
/* Comentário em CSS */
h2 {color:blue;}
p {margin-‐left:50px;}
</style> </head> <body>
<h1>Título tamanho 36</h1>
<h2>Título azul</h2>
<p>Parágrafo com margem afastada 50 pixels a esquerda</p> </body> </html>
131
Introdução à Web
•
Exemplo de estilo aplicado a um seletor ID
#para1 {
text-‐align:center;
color:red;
} </style> </head> <body>
<p id="para1">Olá Mundo!</p>
<p>Este parágrafo não será afetado.</p>
</body> </html>
132
Introdução à Web
•
Exemplo de estilo aplicado a um seletor classe
.center {
}
<h1 class="center">Título centralizado</h1>
<p class="center">Parágrafo centralizado</p> </body> </html>
133
Introdução à Web
•
Exemplo de estilo aplicado a um seletor HTML e classe
p.center {
}
<h1 class="center">Título não centralizado</h1>
<p class="center">Parágrafo centralizado</p> </body> </html>
134
Introdução à Web
•
Exemplo de estilo aplicado a um seletor HTML e seu estado
hr {color:navy;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
<hr> <a href="http://pudim.com.br" target="_blank">Isto é um link</a>
</body> </html>
135
Introdução à Web
•
Exemplo de estilo aplicado a um seletor HTML e seu estado
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-‐size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-‐family:monospace;}
a.ex5:visited,a.ex5:link {text-‐decoration:none;}
a.ex5:hover,a.ex5:active {text-‐decoration:underline;}
<p><a class="ex1" href="http://pudim.com.br">Muda cor</a></p>
<p><a class="ex2" href="http://pudim.com.br">Muda tamanho</a></p>
<p><a class="ex3" href="http://pudim.com.br">Muda cor de fundo</a></p>
<p><a class="ex4" href="http://pudim.com.br">Muda fonte</a></p>
<p><a class="ex5" href="http://pudim.com.br">Adiciona sublinhado</a></p>
</body> </html>
136
Revisão
•
•
•
•
•
•
•
•
•
•
•
•
WWW ou Web
HTTP
Modelo cliente/servidor
Acesso web estático
Acesso web dinâmico
Software livre
Tags
Elementos
Atributos
Estrutura documento HTML
Entities
Títulos e parágrafos
•
•
•
•
•
•
•
•
•
•
•
Tabelas
•
Aplicação de CSS
Formulários
JavaScript
Árvore DOM
Manipular com JavaScript
Tipos de variáveis em JavaScript
Operadores relacionais em JavaScript
Operadores lógicos em JavaScript
Estruturas de controle em JavaScript
Objetos em JavaScript
Validação de formulários em
JavaScript
137
TRE-BA
(CESPE) Para a construção de páginas web,
pode-se combinar a linguagem HTML com
diferentes tecnologias, entre elas a CSS, que
permite melhorar a apresentação do sítio.
a) Certo
b) Errado
138
TRE-BA
(CESPE) Para a construção de páginas web,
pode-se combinar a linguagem HTML com
diferentes tecnologias, entre elas a CSS, que
permite melhorar a apresentação do sítio.
a) Certo
b) Errado
138
Fiocruz
(FGV) No que tange ao Cascading Style Sheets – CSS,
pode-se colocar os estilos em três lugares: folhas de estilo,
<style> e style. Nesse sentido, analise as afirmativas abaixo.
I. I. Uma folha de estilo é um arquivo independente que pode
ser anexado a um documento HTML, usando-se o
elemento <body> ou o enunciado @import de CSS.
II. <style> é um elemento de HTML que pode ser embutido
dentro do documento HTML por si só.
III. Style é um atributo que pode ser embutido dentro de
qualquer elemento HTML.
139
(continuação)
a) se somente a afirmativa I estiver correta.
b) se somente a afirmativa II estiver correta.
c) se somente a afirmativa III estiver correta.
d) se somente as afirmativas II e III estiverem
corretas.
e) se todas as afirmativas estiverem corretas.
140
(continuação)
a) se somente a afirmativa I estiver correta.
b) se somente a afirmativa II estiver correta.
c) se somente a afirmativa III estiver correta.
d) se somente as afirmativas II e III estiverem
corretas.
e) se todas as afirmativas estiverem corretas.
140
CNJ
(CESPE) Uma maneira de criar um código
HTML dinâmico é a partir da definição de
objetos JavaScript dentro da tag <head>
a) Certo
b) Errado
141
CNJ
(CESPE) Uma maneira de criar um código
HTML dinâmico é a partir da definição de
objetos JavaScript dentro da tag <head>
a) Certo
b) Errado
141
TRE-RJ
(CESPE) HTML (hypertext markup language)
é uma linguagem de programação,
atualmente na versão 5, muito utilizada para
ambientes desktop.
a) Certo
b) Errado
142
TRE-RJ
(CESPE) HTML (hypertext markup language)
é uma linguagem de programação,
atualmente na versão 5, muito utilizada para
ambientes desktop.
a) Certo
b) Errado
142
PC-ES
(CESPE) O HTML (Hypertext Markup
Language) é uma linguagem usada para
acessar dados na Web.
a) Certo
b) Errado
143
PC-ES
(CESPE) O HTML (Hypertext Markup
Language) é uma linguagem usada para
acessar dados na Web.
a) Certo
b) Errado
143
TRE-BA
(CESPE) O código Javascript existente em
um documento HTML é executado no
navegador que está acessando esse
documento.
a) Certo
b) Errado
144
TRE-BA
(CESPE) O código Javascript existente em
um documento HTML é executado no
navegador que está acessando esse
documento.
a) Certo
b) Errado
144
TRE-RJ
(FGV) Assinale a alternativa que contém, na linguagem
HTML, a tag que delimita a área onde serão inseridas
as informações que serão exibidas no browser:
a) <BODY>
b) </HEAD>
c) <LINK>
d) <META>
e) <HTML>
145
TRE-RJ
(FGV) Assinale a alternativa que contém, na linguagem
HTML, a tag que delimita a área onde serão inseridas
as informações que serão exibidas no browser:
a) <BODY>
b) </HEAD>
c) <LINK>
d) <META>
e) <HTML>
145
PROCON-RJ
(CEPERJ) Ao construir um site para a internet, para gerar
uma página cujo fundo corresponda à figura procom.jpg,
deve ser inserido um parâmetro na tag <body>. Um
exemplo correto para essa sintaxe é:
a) <body screen=”procom.jpg”> ... </body>
b) <body bottom=”procom.jpg”> ... </body>
c) <body bgcolor=”procom.jpg”> ... </body>
d) <body watermark=”procom.jpg”> ... </body>
e) <body background=”procom.jpg”> ... </body>
146
PROCON-RJ
(CEPERJ) Ao construir um site para a internet, para gerar
uma página cujo fundo corresponda à figura procom.jpg,
deve ser inserido um parâmetro na tag <body>. Um
exemplo correto para essa sintaxe é:
a) <body screen=”procom.jpg”> ... </body>
b) <body bottom=”procom.jpg”> ... </body>
c) <body bgcolor=”procom.jpg”> ... </body>
d) <body watermark=”procom.jpg”> ... </body>
e) <body background=”procom.jpg”> ... </body>
146
TRT
(FCC - adaptado) Considere a página HTML:
<html> <head> <title>Cadastro</title> <style type="text/css"> // inserir algo aqui
</style> </head> <body> <p> <a href=”music.html”>Músicas</p> </body> </html> A instrução que deve ser utilizada no interior do elemento para retirar o sublinhado do
link ao posicionar o ponteiro do mouse sobre ele é:
a)
a:hover{text-decoration:underline}
b)
a:hover{text-decoration:none}
c)
a:hover{text-decoration:normal}
d)
a:visited{text-decoration:none}
e)
a:{text-decoration:none}
147
TRT
(FCC - adaptado) Considere a página HTML:
<html> <head> <title>Cadastro</title> <style type="text/css"> // inserir algo aqui
</style> </head> <body> <p> <a href=”music.html”>Músicas</p> </body> </html> A instrução que deve ser utilizada no interior do elemento para retirar o sublinhado do
link ao posicionar o ponteiro do mouse sobre ele é:
a)
a:hover{text-decoration:underline}
b)
a:hover{text-decoration:none}
c)
a:hover{text-decoration:normal}
d)
a:visited{text-decoration:none}
e)
a:{text-decoration:none}
147
TRT
(FCC) A especificação HTML 4 indica que uma tag <script> deve ser
posicionada dentro de uma tag <head> ou <body> e que pode aparecer
em um número qualquer de vezes em cada uma delas. Entretanto, a posição
da tag <script> no código pode influenciar no desempenho da página.
Com relação ao tema, analise as asserções a seguir.
Para garantir que a página esteja praticamente renderizada antes que a
execução do script tenha início, é aconselhável colocar todas as tags
<script> ao final da página, imediatamente antes do fechamento da tag
<body>
PORQUE
toda vez que uma tag <script> for encontrada, a página terá que parar e
aguardar o download do código (caso seja externo) e sua execução antes
que seu restante possa ser processado.
148
(continuação)
É correto afirmar:
a) As duas asserções são proposições verdadeiras, mas a segunda não
é a justificativa correta da primeira.
b) A primeira asserção é uma proposição verdadeira, e a segunda, uma
proposição falsa.
c) A primeira asserção é uma proposição falsa, e a segunda, uma
proposição verdadeira.
d) As duas asserções são proposições verdadeiras, e a segunda é a
justificativa correta da primeira.
e) Tanto a primeira quanto a segunda asserção são proposições falsas.
149
(continuação)
É correto afirmar:
a) As duas asserções são proposições verdadeiras, mas a segunda não
é a justificativa correta da primeira.
b) A primeira asserção é uma proposição verdadeira, e a segunda, uma
proposição falsa.
c) A primeira asserção é uma proposição falsa, e a segunda, uma
proposição verdadeira.
d) As duas asserções são proposições verdadeiras, e a segunda é a
justificativa correta da primeira.
e) Tanto a primeira quanto a segunda asserção são proposições falsas.
149
Secretaria de Estado do
Desenvolvimento Econômico
Sustentável - SC
(CONSULPLAN) Qual TAG usamos no HTML
para definir uma opção em uma drop-down list?
a) <option>
b) <optgroup>
c) <options>
d) <val>
e) <value>
150
Sustentável - SC
para definir uma opção em uma drop-down list?
a) <option>
b) <optgroup>
c) <options>
d) <val>
e) <value>
150
Sustentável - SC
para definir uma lista ordenada?
a) <lo>
b) <olist>
c) <ordl>
d) <ol>
e) <rl>
151
Sustentável - SC
para definir uma lista ordenada?
a) <lo>
b) <olist>
c) <ordl>
d) <ol>
e) <rl>
151
TCE-ES
(CESPE) É necessário que as variáveis
tenham a definição de um tipo antes de
serem utilizadas em um programa JavaScript.
a) Certo
b) Errado
152
TCE-ES
(CESPE) É necessário que as variáveis
tenham a definição de um tipo antes de
serem utilizadas em um programa JavaScript.
a) Certo
b) Errado
152
TSE
(CONSULPLAN) No que diz respeito aos
operadores em JavaScript, sejam as variáveis do
mesmo tipo a=3 e b=5. As operações
a!=b e a!=3 && b==5
retornarão, respectivamente, os seguintes valores
a) verdadeiro e falso.
b) falso e verdadeiro.
153
TSE
(CONSULPLAN) No que diz respeito aos
operadores em JavaScript, sejam as variáveis do
mesmo tipo a=3 e b=5. As operações
a!=b e a!=3 && b==5
retornarão, respectivamente, os seguintes valores
a) verdadeiro e falso.
b) falso e verdadeiro.
153
TSE
(CONSULPLAN) Observe o código em
JavaScript.
154
(continuação)
Na execução no browser Internet Explorer
8 BR, este código irá gerar a seguinte saída
a) 1 2 3 5 8 13
b) 0 1 1 2 3 5
155
(continuação)
Na execução no browser Internet Explorer
8 BR, este código irá gerar a seguinte saída
a) 1 2 3 5 8 13
b) 0 1 1 2 3 5
155

Introdução a Web - Site de Thiago Leite

Transcrição

Documentos relacionados

Centro para aprender o francês como segunda língua e melhor se

Lista dos feriados oficiais em que a Embaixada de Portugal em

sobre o programa Mr. Bean Lançado em 1990, “Mr. Bean” tem 14

HORÁRIO ESCOLAR NOVO - Noite SUBSEQUENTE

república de angola assembleia nacional programa de divulgação

MAPA DE VILAS DO ATLÂNTICO TÁBUA DE MARÉS TÁBUA DE

FERIADOS DO PREGÃO DO CME GROUP CHICAGO EM 2014

GUIA DE ESTUDOS – 8º ANO DO ENSINO FUNDAMENTAL/2014

horários do pregão viva-voz do cme group chicago nos feriados 2016

-425-35-5 1. Sinonímia -35Creatinina em urina 24 horas Creatinúria