Curso de Java (Parte 6) Introdução a Front-end

Curso de Java
PARTE 06
Front-End Web
Uma Introdução
HTML: principais tags / forms / request method
Request/Response
Conteúdo Estático vs Dinâmico
CSS
Java Script
por: Mário Sergio
mariosergio30@gmail.com
linkedin.com/in/mario-sergio-a1125831

Arquivos de Exemplo
GIT: https://github.com/mariosergio30/front_end.git

3
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#JavaScript_running_order
Referência:
Front-End: HTML – CSS – Java Script

Front-End: HTML – CSS – Java Script
4https://www.quora.com/What-is-the-best-way-to-learn-HTML-CSS-and-JavaScript
Referência:
Estrutura
e
Conteúdo
Formatação
Linguagem de
programação
no lado Cliente
(Interpretada pelo browser)

HTML
5
HTML é a linguagem base para desenvolver
websites. O acrônimo HTML vem do inglês e
significa Hypertext Markup Language.
- É uma linguagem de Marcação de Texto
- Utiliza TAG´s para definir a Estrutura da Página < />
- É Interpretada diretamente pelo Browser
- Não é uma Linguagem de Programação !
(pois não possui variáveis, estrutura de decisão, repetição)

HTML – Exemplo Mínimo
7
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Título da página</title>
</head>
<body>
<h1>Aqui vai o texto do título</h1>
<p>Aqui vai o texto do parágrafo. Geralmente parágrafos tem muitas palavras, letras menores que as do título</p>
</body>
</html>
Abertura da Tag head
Fechamento da Tag head
Algumas tags não exigem fechamento (são exceções)
ATRIBUTO lang da Tag html (notação: atributo=“valor”)
- HTML não possui um analisador sintático rígido como nas linguagens de
programação.
- Caso você esqueça de “fechar” uma TAG, o navegador tentará resolver, mas
não haverá garantia do resultado desejado.

HTML – Ferramental Didático
8
https://www.w3schools.com/
Praticaremos HTML/CSS/JS utilizando:
https://www.mozilla.org/pt-BR/firefox/developer/

Mãos à Obra
9
Utilizaremos o w3School para conhecer e treinar os
principais elementos HTML

HTML – Lista de Tags
11https://nathaliaolveira.wordpress.com/2012/01/19/htm5/
Referência:

HTML – Atributos de Manipulação de Eventos
12

Request/Response
15
Conteúdo Estático vs Conteúdo Dinâmico:
Aplicações WEB
Páginas WEB
Conteúdo Estático Conteúdo Dinâmico
java
asp.net
PHP
...

Request/Response: Chamando uma Página Dinâmica
16
Request a uma aplicação WEB em Java:
URL: http://localhost:8080/basico/startlogin?aluno=José

17
Request a uma aplicação WEB em Java:
URL: http://localhost:8080/basico/startlogin?aluno=José&idade=5
Servidor porta mapeamento recurso parametro=valor
início dos parametros
separador
dos parametros
Quando a porta é omitida
o navegador considera a porta 80
(padrão do protocolo http)
Domínio ou IP
ex:
google.com
192.168.1.2
Protocolo
de
Comunicação
OBS: Veremos esta aplicação de BackEnd em detalhes no curso de 07 Java Web Backend

18
Request a uma aplicação WEB em Java: dados provenientes de uma consulta ao banco de dados.
OBS: Veremos esta aplicação de BackEnd em detalhes no curso de Java Web Back-end

HTML – Forms
19
Tags HTML que permitem entrada de dados do usuário:

HTML – Elementos de um Form
20

HTML – Tag input: Atributo Type
21
URL que será chamada quando o formulário for SUBMETIDO
(destino dos dados do formulário)
Nome do parâmetro a ser passado na URL

HTML – Request Method
22https://www.javatpoint.com/get-vs-post
Saber mais:
GET:
Os dados do formulário (parâmetros)
são todos passados no cabeçalho (header)
da requisição HTTP
POST: (Mais Seguro)
Os dados do formulário (parâmetros)
são todos passados no corpo (body)
da requisição HTTP

HTML – Forms
23
Conteúdo textual da página anterior:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="../aluno/salvar" method=“POST" target="_blank">
Nome:<br>
<input type="text" name="primeiro_nome" value="Mickey">
<br>
Sobrenome:<br>
<input type="text" name="segundo_nome" value="Mouse">
<br>
Profissão:<br>
<select name="profissao">
<option value="1">Administrador</option>
<option value="2">Programador</option>
<option value="3">Médico</option>
<option value="4">Advogado</option>
</select>
<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Mãos à Obra
24
Com base no exercício anterior,
melhore seu “Sistema Escolar”:
1- Crie uma interface WEB para capturar os dados
necessários para matrícula do Aluno (use o elemento form)
2-Utilize o atributo action para direcionar os dados do
formulario para:
http://enderecodamaquinadoprofessor:8080/site/aluno/salvar

CSS
26
Web Design: “O que o usuário vê” !!!
https://templated.co/Templates:

CSS
27
Enquanto HTML descreve “O QUE” será exibido na pagina (conteúdo), CSS descreve
“COMO” esse conteúdo deverá ser exibido (cores, posicionamento, fonts...)
CSS é a sigla para o termo em inglês
Cascading Style Sheets, que traduzido
para o português significa Folha de Estilo
em Cascatas.
Sintaxe:
Um html com múltiplos Estilos, exemplo: https://www.w3schools.com/css/css_intro.asp

CSS
28
Dentro da tag
<style>
haverá apenas
código CSS

CSS
29
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
font-family: verdana;
font-size: 300%;
}
h1, h2 {
color: blue;
}
p {
color: red;
font-family: courier;
font-size: 160%;
border: 1px solid navy;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a topic</h2>
<p>This is paragraph 1.</p>
</body>
</html>

CSS – Onde deve ficar o Código ?
30
Há 3 maneiras diferentes de incluir código CSS:
•Internal - usando o elemento <style> dentro do elemento <head>
<head>
<style>
.....
</style>
</head>
•Inline - usando o atributo style dentro de um elemento HTML
<body style="background-color: powderblue;">
•External - usando um arquivo externo com extensão .css para incluir
apenas o código CSS.
- É preciso importar o arquivo CSS dentro do arquivo html, usando a
tag link
- Ex.: <link rel="stylesheet" type="text/css" href="css/styles.css">

CSS - Seletores
31
elemento: referencia o nome do elemento html (body, div, li, ul, ol, p...)
p {
text-align: center;
color: red;
}
classe: referencia o atributo class do elemento html
.destaque {
text-align: center;
color: red;
}
id: referencia o atributo id do elemento html
#topico1 {
text-align: center;
color: red;
}
Em CSS temos seletores de:
<h1 class="destaque">Red and center-aligned heading</h1>
<p class="destaque">Paragrafo 1.</p>
<p class="destaque" id="topico1">Paragrafo 2.</p>
Obs: o valor do id de um elemento deve ser único na página.
Conteúdo HTML

CSS/HTML - Cores
32https://www.w3schools.com/html/html_colors.aspReferência:
Atributos style Inline, para incluir código CSS
diretamente dentro do elemento

CSS/HTML - Cores
33
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:rgb(255, 255, 255);">RGB Branco</h1>
<h1 style="background-color:rgb(0, 0, 0); color: rgb(255, 255, 255">RGB Preto</h1>
<h1 style="background-color:rgb(255, 0, 0);">RGB Vermelho</h1>
<h1 style="background-color:rgb(0, 255, 0);">RGB Verde</h1>
<h1 style="background-color:rgb(0, 0, 255);">RGB Azul</h1>
<h1 style="background-color:#0000FF;">Cor HEXA</h1>
</body>
</html>

CSS – Exemplo Table
34
Exemplo - Formatação de Tabelas:

CSS – Exemplo Table
35
exemplo_table.css
exemplo_table.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/exemplo_table.css">
<script charset="UTF-8" src="js/aprendendo.js"></script>
</head>
<body onload="carregou()">
<h2>HTML Table</h2>
<strong>Empresa Selecionada:</strong> <span id="empresa_sel"></span>
<br>
<table id="myTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="exibe(1,0)">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<td onclick="exibe(3,0)">Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
#empresa_sel {
color: #0000FF;
font-weight: bold;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
text-align: center;
}
td {
text-align: left;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}

CSS – Definindo Layouts
36
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_colsReferência:
exemplo_layout.html

CSS – Definindo Layouts
37
Conteúdo CSS textual da página anterior: <style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>

CSS – Display
38
https://www.w3schools.com/css/css_display_visibility.aspReferência:
Faz o bloco desaparecer

CSS – Display
39
https://gridbyexample.com/examples/example1/
https://www.w3schools.com/css/css_grid.asp
Referências:

Mãos à Obra
40
Você pode utilizer o w3School para conhecer e treinar os
principais recursos CSS

Java Script
41
JavaScript uma linguagem de programação orientada a objetos
que é executada no browser (lado cliente), permitindo transformar
páginas web estáticas (html puro), em páginas dinâmicas,
complexas e ricas.

Java Script
42
- Interação com o usuário sem necessidade de processamento no lado servidor.
- Consegue manipular código html e css (DOM- Document Object Model).
Principais Vantagens:
Exemplo:

Java Script
43
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Entendendo…

Java Script
44
https://www.seguetech.com/java-vs-javascript-difference/
Referências:
LEITURA:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript

JS – Ferramental Didático
45
https://www.w3schools.com/js/
Praticaremos Java Script utilizando:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Vis%C3%A3o_Geral

JS – Saída de Dados
46
Um simples exemplo que aborda: saída de dados, variáveis, funções, eventos e DOM
Praticar: https://www.w3schools.com/js/js_output.asp
exemplo_saidas_4maneiras.html

JS – Saída de Dados
47
Código do exemplo anterior:
<!DOCTYPE html>
<html>
<body>
<h2>No JS há 4 maneiras de exibir uma saida</h2>
<p id="resultado"></p>
<br>
<button type="button" id="botao1">Saidas com InnerHTML, alert e log</button>
<br>
<br>
<button type="button" onclick="saidaComWrite()">Saida Com documento.write()</button>
<script>
var calculo = 10 + 20;
c = "Resultado do Calculo foi: ";
function saidaComWrite() {
document.write("<h1>Saída com documento.write(), substitui todo o conteúdo existente pelo Novo</h1>!");
}
function saidaComInnerAlertLog() {
document.getElementById("resultado").innerHTML = c + calculo;
window.alert(c + calculo);
console.log(c + calculo);
}
document.getElementById("botao1").addEventListener("click", saidaComInnerAlertLog);
</script>
</body>
</html>

JS: DOM- Document Object Model
48
Recursos que permitem manipular código html e css apartir do código Java Script

JS: HTML DOM EventListener
49
Elemento HTML Evento Função a ser chamada quando o evento ocorrer
Propagação (opcional)
Exemplo:
var botao = document.getElementById("myBtn");
botao.addEventListener("mouseover", myFunction);
botao.addEventListener("click", mySecondFunction);
botao.addEventListener("mouseout", myThirdFunction);
Exemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_add_many2

JS: HTML DOM EventListener
50Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events
Tipos de Eventos:

JS – Ferramental Didático
51
Um exemplo no https://jsfiddle.net/
Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events

JS – Exemplo: DOM + Events
52
Um exemplo no https://jsfiddle.net/
function exibe(line,col) {
valor = document.getElementById("myTable").rows[line].cells.item(col).innerHTML;
document.getElementById("empresa_sel").innerHTML = valor;
alert('Você selecioneou a empresa: ' + valor);
}
function carregou() {
alert('A página foi carregada com sucesso !’);
}
Código Java Script do exemplo anterior:
Código fonte completo:
exemplo_table.html
exemplo_table.css
aprendendo.js
<body onload="carregou()">
<span id="empresa_sel"></span>
<table id="myTable">
Manipuladores
de Evento

JS – Exemplo Avançado: DOM + Events
53
fonte completo:
exemplo_table_avancado.html
exemplo_table.css
exemplo_table_avancado.js

JS – Frameworks / Libraries / Tools
Desenvolver escrevendo código diretamente em JavaScript nos dias atuais,
considerando o nível de complexidade que as aplicações web alcançaram,
demandaria um trabalho quase que impossível de se realizar.
Com a evolução dos frameworks e libraries
para Java Script, passou a ser possível o
desenvolvimento de Rich Client Web
Applications com maior velocidade e
produtividade.
54

Curso de Java (Parte 6) Introdução a Front-end

Mais conteúdo relacionado

Mais procurados

Semelhante a Curso de Java (Parte 6) Introdução a Front-end

Mais de Mario Sergio

Curso de Java (Parte 6) Introdução a Front-end