O documento apresenta uma introdução sobre CSS e JavaScript para desenvolvimento de aplicações web. Resume os principais tópicos de CSS como separação de estilo e conteúdo, tipos de folhas de estilo e sintaxe básica. Também resume conceitos iniciais de JavaScript como linguagem do lado do cliente e interação com HTML.

1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
CSS e JavaScript
andre.costa@pro.unifacs.br

2. 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.

3. 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/

4. CSS
• Tipos de CSS
• Linkadas ou Importadas
• Incorporadas
• Inline

5. CSS
• Linkadas ou Importadas

6. CSS
• Linkadas ou Importadas

7. CSS
• Incorporadas

8. CSS
• Inline

9. CSS
• Exemplo

10. CSS
• Sintaxe
seletor { propriedade: valor; }
seletor_2
{
propriedade_1: valor;
propriedade_2: valor;
}

11. CSS
• Seletores (principais)
tag {}
• Ex.:
table
{
background-color: #cdcdcd;
text-align: center;
}

12. CSS
• Seletores (principais)
#id {}
• Ex.:
#id_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table id=“id_tabela”></table>

13. CSS
• Seletores (principais)
.classe {}
• Ex.:
.classe_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table class=“classe_tabela”></table>

14. 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>

15. 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>

16. CSS
• Propriedades
• Font

17. CSS
• Propriedades
• Text

18. CSS
• Propriedades
• Margin

19. CSS
• Propriedades
• Border

20. CSS
• Propriedades
• Padding

21. CSS
• Propriedades
• Background

22. CSS
• Propriedades
• List

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

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

25. 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.

26. JS
• Como utilizar?
• Incorporado ao HTML

27. JS
• Como utilizar?
• Importado de um arquivo JavaScript

28. JS
• Exemplo

29. JS
• Exemplo

30. JS
• Exemplo

31. JS
• Função

32. JS
• Interagindo com HTML (DHTML)

33. JS
• Interagindo com HTML (DHTML)
• onClick
• onChange
• onSubmit
• onBlur / onFocus
• onMouseOver / onMouseOut
• onKeyPress / onKeyDown / onKeyUp

34. JS
• Interagindo com HTML (DHTML)
• document.getElementById(“id”).value
• document.getElementById(“id”).innerHTML
• document.getElementById(“id”).src
• document.getElementById(“id”).style.display

35. JS

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

37. 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.