Aula 5 – Javascript
Blocos de código
Todo bloco de código tem um início representado por: { e um fim representado por: }.
Uma representação de bloco de código é:
nome do bloco { //este é o início do bloco
}//este é o fim do bloco
Funções
Uma função é um bloco de código é definida por:
nomeDaFunção(){
//codigo a ser executado
}
Função é um bloco de código que pode ser chamado em qualquer lugar da página.
Exemplo de comparações:
function validarEntrada(){
var valor=document.getElementById("inputValor").value;
if(valor<50){
alert("menor que 50");
}else if(valor == 50){
alert("igual a 50");
}else if(valor > 50 && valor <= 75){
alert("valor entre 50 e 75");
}else{
alert("valor maior que 75");
}
}
Exercícios:
<html>
<head>
<script>
function validarEntrada(){
var valor=document.getElementById("inputValor").value;
if(valor<50){
alert("menor que 50");
}else if(valor == 50){
alert("igual a 50");
}else if(valor > 50 && valor <= 75){
alert("valor entre 50 e 75");
}else{
alert("valor maior que 75");
}
}
</script>
</head>
<body>
<input type="text" id="inputValor" />
<input type="button" onclick="validarEntrada'();" value="Testar"/>
</body>
</html>
<html>
<head>
<title>Página de teste</title>
<script type="text/javascript">
function validaSaudacao(){
var date;
date = new Date();
if(date.getHours()>=6 && date.getHours()<12){
document.getElementById("saudacao").innerHTML="Bom Dia!";
}else if(date.getHours()>=12 && date.getHours()<18){
document.getElementById("saudacao").innerHTML="Bom Tarde!";
}else{
document.getElementById("saudacao").innerHTML="Bom Noite!";
}
}
</script>
</head>
<body onload="validaSaudacao();">
<div id="saudacao" style="width: 100% float:left;"></div>
</body>
</html>
Aula 4 – CSS, conceitos básicos
O CSS é aplicado num html de três formas:
- Diretamente na tag, utilizando o atributo style;
Dentro de sua tag html você pode colocar um código CSS, assim aplicando naquele elemento a formatação necessária.
Exemplo:
<html> <head> <title>Exemplo</title> </head> <body> <h1 style="font-size:50px; color: red;">Exemplo de utilização do style</h1> </body> </html>
O resultado para este exemplo seria um Header primário (H1), vermelho, com tamanho da fonte em 50px.
- Referenciado a um id;
Como já explicamos em aula anterior o atributo id é único, assim nomeamos no html os componentes, quando implementamos nosso CSS podemos atribuir formatação exclusiva ao elemento.
Exemplo (HTML):
<html> <head> <title>Exemplo</title> </head> <body> <h1 id="titulo">Exemplo de utilização de referência por id</h1> </body> </html>
Exemplo (CSS):
#titulo {
font-size: 50px;
color: red;
}
Obteríamos o mesmo resultado do exemplo anterior.
- Classes
São a melhor forma de reaproveitamento do código em CSS, você pode atribuir uma classe a vários elementos, podendo formatar de forma fácil todos esses elementos ao mesmo tempo. Classe é definida por . + nome da classe, segue exemplo.
Exemplo (HTML):
<html> <head> <title>Exemplo</title> </head> <body> <h1 class="destacar">Exemplo de utilização de classes</h1> <p class="destacar">Este texto também estará formatado</p> </body> </html>
Exemplo (CSS):
.destacar {
font-size: 50px;
color: red;
}
Obteríamos o mesmo resultado do exemplo anterior, porém tanto o título quanto o parágrafo vão ter a mesma formatação.
Aula 3 – Conceitos Básicos
Tópicos da aula:
- Atributos
- Headings
- Comentário
- Formatação de texto utilizando html
- Styles
- Introdução ao CSS
Aula 2 – Conceitos Básicos HTML
Conceitos Básicos HTML
Aula sobre os conceitos básicos de server-side e client-side, tags html e tabelas.
Aula 1 – Introdução ao HTML
Client-Side
É quando o processamento de uma página (direcinando para o enfoque do curso) se dá sem a necessidade de interpretação do código por um servidor;
Ex: Páginas HTML de conteúdo estático, uma vez baixada do servidor não será necessário a utilização do mesmo.
Server-side
É quando a página requer que o servidor interprete o código para montar a mesma, sendo sempre necessário um servidor ativo para sua visualização.
Ex: Páginas em php, java ou outra linguagem que requer interpretação. Site Ex: Google requer interação com servidor.
O que é HTML?
HTML é a linguagem que descreve uma página da internet.
- HTML é a sigla para Hyper Text Markup Language (Linguagem de Marcação de Hipertexto);
- HTML não é uma linguagem de programação
- Linguagem de marcação é definida por tags de marcação
- HTML usa tags de marcação para estruturar sua linguagem
HTML TAGS
Marcações html são comumente chamadas de HTML tags;
- As tags HTML são definidas pelos símbolos < e >, onde entre eles são colocadas palavras chaves;
- É comum toda tag ter um início e um fim, representando o início por: < > e o fim por </ >;
Documentos HTML = WEB PAGES
- Documentos HTML descrevem uma web page;
- Documentos HTML contem tags HTML e texto plano;
Um navegador pode interpretar diretamente um arquivo html sem ser necessária estrutura de servidores para hospedagem deste arquivo (client-side).
Exemplo de página HTML
<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>Esta é minha primeira página html</p> </body> </html>
Explicando o código:
<html> = tag inicial para início de qualquer documento html;
<head> = cabeçalho da página
<title> = Título da página
<body> = Corpo do documento
<h1> = Título 1 ou Header 1, tag padrão para títulos
<p> = Parágrafo
todas as tag com a / indicam fim da mesma;
Exercício 1:
Utilizando as tags apresentadas anteriormente, faça uma página contendo:
- Seu nome no título da página
- Um título com o texto: Olá Mundo
- um parágrafo com seu nome completo e sua idade: Ex: Meu nome é Fernando Fabricio dos Santos, eu tenho 22 anos;
Cabeçalhos: HEADING
cabeçalhos em HTML são definidos pelas tags <h1> até <h6>
Parágrafos
Definidos pela tag <p>
Links:
Definidos pela tag <a>, e tem por função ao serem clicados levar a outra página ou realizar uma ação, uma das propriedades da tag <a> é o href, que leva a outro arquivo. Por exemplo: caso você tenha salvo seu arquivo Principal.html e outro arquivo Aula1.html no mesmo diretório se colocarmos no arquivo Principal.html a seguinte Tag: <a href=”Aula1.html”>Primeira Aula</a> ao clicar sobre o texto Primeira Aula você irá abrir o arquivo Aula1.html, dando o início a navegação. Mais propriedades desta tag serão disponibilizados posteriormente;
Arquivos para desmonstrar o exemplo:
Principal.html:
<html> <head> <title>Principal</title> </head> <body> <a href="Aula1.html">Primeira Aula</a> </body> </html>
Aula1.html:
<html> <head> <title>Aula 1</title> </head> <body> <h1>Primeira Aula de HTML</h1> </body> </html>
Imagens:
Para inserir uma imagem em HTML é utilizada a tag <img>, sua principal propriedade é o endereço da imagem, que é atribuído a tag pelo atributo: SRC. Exemplo:
Aula1.html
<html> <head> <title>Aula 1</title> </head> <body> <h1>Primeira Aula de HTML</h1> <img src="primeiraImagemInserida.jpg" /> </body> </html>
Outros atríbutos podem ser atribuídos a tag <img> como: width (largura), height (altura), border (borda) e muitos outros que serão apresentados no decorrer do curso.
Exercício 2:
Crie uma pasta no computador com seu nome, dentro desta pasta crie seu primeiro documento html que será nomeado de: index.html. Este arquivo deverá conter:
- Título da página com seu nome;
- Título primário contendo o texto: Aulas Projeto Renovo:
- Título secundário com seguinte texto: Aula 1 – 14/03/2010;
- Link para visualizar o exercício realizado (direcionando para o Arquivo: Aula1.html) com o seguinte texto: Exercício;
Crie outro arquivo na mesma pasta nomeado Aula1.html, este arquivo deverá conter:
- Título da página com seu nome;
- Título primário contendo o texto: Primeira aula
- Parágrafo com site de onde foi tirada a imagem
- Link para retornar para a página index.html, com o seguinte texto: Retornar;
Resolução:
index.html
<html> <head> <title>Fernando Fabricio dos Santos</title> </head> <body> <h1>Aulas Projeto Renovo:</h1> <h2>Aula 1 - 14/03/2010</h2> <a href="Aula1.html">Exercício</a> </body> </html>
Aula1.html
<html> <head> <title>Fernando Fabricio dos Santos</title> </head> <body> <h1>Primeira Aula</h1> <p>http://www.pogcast.com.br/wordpress/wp-content/uploads/2009/03/eumemu.jpg</p> <img src="eumemu.jpg" /> <a href="index.html">Retornar</a> </body> </html>
Fonte de pesquisa:
W3 Schools:
http://www.w3schools.com/html/html_primary.asp
Motive
http://www.motive.co.nz/glossary/