aula 4 e 5 css e java script

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

CSS e JavaScript

andre.costa@pro.unifacs.br

CSS  

•  CSS - Cascading Style Sheets

•  É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

CSS  

•  “Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.”

Maujor (o dinossauro da CSS) http://www.maujor.com/

CSS  

•  Tipos de CSS

•  Linkadas ou Importadas •  Incorporadas •  Inline

CSS  

•  Linkadas ou Importadas

CSS  

•  Linkadas ou Importadas

CSS  

•  Incorporadas

CSS  

•  Inline

CSS  

•  Exemplo

CSS  

•  Sintaxe

seletor { propriedade: valor; }

seletor_2 {

propriedade_1: valor;propriedade_2: valor;

}

CSS  

•  Seletores (principais)

tag {}

•  Ex.: table

{background-color: #cdcdcd;text-align: center;

}

CSS  

•  Seletores (principais)

#id {}

•  Ex.: #id_tabela

{background-color: #cdcdcd;text-align: center;

}

•  <table id=“id_tabela”></table>

CSS  

•  Seletores (principais)

.classe {}

•  Ex.: .classe_tabela

{background-color: #cdcdcd;text-align: center;

}

•  <table class=“classe_tabela”></table>

CSS  

•  Seletores (principais)

tag_pai tag_filho {}

•  Ex.: table tr td { color: #FF0000; }

•  <table> <tr>

<td>Texto modificado</td> </tr> <tr>

<td>Texto modificado</td> </tr>

</table>

CSS  

•  Seletores (principais)

tag_pai tag_filho.classe {}

•  Ex.: table tr td.textoVermelho { color: #FF0000; }

•  <table> <tr>

<td>Texto</td> </tr> <tr>

<td class=“textoVermelho”>Texto modificado</td> </tr>

</table>

CSS  

•  Propriedades

•  Font

CSS  

•  Propriedades

•  Text

CSS  

•  Propriedades

•  Margin

CSS  

•  Propriedades

•  Border

CSS  

•  Propriedades

•  Padding

CSS  

•  Propriedades

•  Background

CSS  

•  Propriedades

•  List

CSS  

Mão  na  massa!      Crie  uma  folha  de  es/lo  para  o  layout  criado  com  HTML.  

CSS  

Mão  na  massa!      Pra/que!!  Agora  que  tem  o  conhecimento  de  HTML  e  CSS,  desenvola  o  seu  próprio  site.  

JS  

•  JS - JavaScript

•  É uma linguagem client-side baseada no ECMAScript para navegadores web.

•  Dá mais inteligência às páginas web •  Dá suporte a Orientação a Objetos (OO) •  Sintaxe semelhante à PHP, JAVA, C/C++, etc.

JS  

•  Como utilizar? •  Incorporado ao HTML

JS  

•  Como utilizar? •  Importado de um arquivo JavaScript

JS  

•  Exemplo

JS  

•  Exemplo

JS  

•  Exemplo

JS  

•  Função

JS  

•  Interagindo com HTML (DHTML)

JS  

•  Interagindo com HTML (DHTML)

•  onClick •  onChange •  onSubmit •  onBlur / onFocus •  onMouseOver / onMouseOut •  onKeyPress / onKeyDown / onKeyUp

JS  

•  Interagindo com HTML (DHTML)

•  document.getElementById(“id”).value •  document.getElementById(“id”).innerHTML •  document.getElementById(“id”).src •  document.getElementById(“id”).style.display

JS  

JS  

•  jQuery

•  É um framework JavaScript amplamente utilizado que fornece diversos componentes prontos para os usuários. Vale a pena estudar o jQuery!!!

JS  

Mão  na  massa!      Pra/que!!  Agora  que  você  conhece  JavaScript,  faça  a  validação  da  página  de  cadastro  na  Agenda  desenvolvida  em  sala  de  aula.