aula 4 e 5 css e java script

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

CSS e JavaScript

[email protected]

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

•  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


#id {}

•  Ex.: #id_tabela


}

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

CSS


.classe {}

•  Ex.: .classe_tabela


}

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

CSS


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


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

•  Função

JS

•  Interagindo com HTML (DHTML)

JS


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

JS


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

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.

aula 4 e 5 css e java script

Education