desenvolvimento de aplicações web (daw) - pucsp.brjarakaki/daw/daw_4.pdf · html e javascript...
TRANSCRIPT
Desenvolvimento de Aplicações WEB
(DAW)
Prof. Julio Arakaki1o. Semestre 2016
HTML – FORMS
Utilizado para coletar dados de entrada do usuário.Sintaxe:
<html><body>
<form name="form" action="http://www.site.br/teste.php" method="POST">
<! Elementos de entrada: caixas de texto
checkbox radio buttons submit buttons select ...
>
</form>
</body></html>
Ou GET
HTML – FORMS
TextArea: várias linhas de texto <html><body>
<form name=”formulario”>Área de texto <br/><textarea cols="40" rows="5"></textarea>
</form></body>
</html>
HTML – FORMS
Text: uma linha de texto <html><body>
<form name=”formulario”><br/>Forneça um texto <br/><input type="text" size="15"
value="" maxlength="15" align="center" name="text"></form>
</body></html>
HTML – FORMS
Password: uma linha de texto <html><body>
<form name=”formulario”><br/>Forneça um texto <br/><input type="password" size="15"
maxlength="15" align="center" name="text"></form>
</body></html>
HTML – FORMS
Checkbox: seleção de uma ou mais opções <html><body>
<form name=”formulario”><div align="left"><br>
<br/>Não é OO<br/><input type="checkbox" name="option1" value="C" checked> Linguagem C<br><input type="checkbox" name="option2" value="C++" > C plus plus<br><input type="checkbox" name="option3" value="C#"> C sharp<br><input type="checkbox" name="option3" value="Java"> Java<br>
</div></form>
</body></html>
HTML – FORMS
Radio Button: seleção de uma opção entre várias <html><body>
<form name=”formulario”><div align="left"><br>
<br/>Melhor Linguagem<br/><input type="radio" name="grupo1" value="C" > C<br><input type="radio" name="grupo1" value="C#"> C#<br><input type="radio" name="grupo1" value="Java" checked> Java<hr><br/>Melhor Bebida<br/><input type="radio" name="grupo2" value="Vinho" checked> Vinho<br><input type="radio" name="grupo2" value="Cerveja"> Cerveja<br><input type="radio" name="grupo2" value="Pinga" > Pinga<br>
</div><br></form>
</body></html>
HTML – FORMS
Select: cria um menu (“dropdown list”) <html><body>
<form name=”formulario”><div align="left">
<br/>Selecione a disciplina<br/><select name="disciplinas"><option value="ed1" selected>Estrutura de Dados</option><option value="lp3">Laboratório de Programação III</option><option value="lr2">Laboratório de Redes II</option></select>
</div></form>
</body></html>
HTML – FORMS
Radio Button: seleção de uma opção entre várias <html><body>
<form name=”formulario”><div align="left">
<b>Forneça seu CPF</b><input type="text" size="25" value=""><br><br><input type="submit" value="Enviar"> <input type="reset" value="Limpar"><br>
</div></form>
</body></html>
HTML – FORMS
Código Fonte:Veja seminario.html
HTML e JavaScript
Javascript: linguagem de programação interpretada. Originalmente implementada para navegadores web. Os scripts são executados no cliente e interagem com o usuário sem a necessidade do servidor. Principal linguagem para programação clientside em navegadores web. (https://pt.wikipedia.org/wiki/JavaScript)
SINTAXE<html>
<body><script type=”text/javascript”>
// código javascript</script>
</body></html>
HTML e JavaScript
Exemplo<html><body>
<h1>Teste JavaScript</h1><p id="demo"></p><script >
var x = 5;var y = 6;var z = x + y;document.getElementById("demo").innerHTML = z;alert("valor de z: " + z);
</script></body>
</html>
HTML e JavaScript….
<body><h1>Validando Entrada</h1><p>Digite um número de 1 a 10</p><input id="numero"><button type="button" onclick="validar()">Enviar</button><p id="msg"></p>
<script>function validar() {
var x, texto;
// Pega o valor do campo de texto id="numero" x = document.getElementById("numero").value;
// Verifica se eh um numero e esta entre 1 e 10 if (isNaN(x) || x < 1 || x > 10) { texto = "Invalida Invalida: " + x; } else { texto = "Entrada Valida: " + x; } document.getElementById("msg").innerHTML = texto;
}</script>
</body>...
HTML e JavaScript
TUTORIAL COMPLETO
http://www.w3schools.com/js/default.asp
Atividade (individual)
Utilizando como base o exemplo: 1) Criar um formulário para cadastro de aluno em disciplina Optativa.
Características: dados pessoais (nome, cpf, rg, endereço...) dados do aluno (ra, disciplinas já cursadas,...) dados do perfil (login, password (com confirmação),
imagem, ...) incluir um campo com área de texto para sugestões. incluir validações (p. exemplo: idade, data de
nascimento, senha (tem que ter números e letras)... entre outros. (usar a criatividade)
Disponibilizar no inbox da disciplina.Entregar até a próxima aula