Você está na página 1de 65

UFCD 0158 - JAVASCRIPT

Bruno Santos
brunofrs7@gmail.com

1
OBJETIVOS

• Identifica, caracteriza e executa com correções as operações em JavaScript.

2
CONTEÚDOS

• JavaScript
• Criação de um script simples
• Exploração das capacidades do JavaScript; Programas a funcionar em JavaScript
• Princípios básicos da aprendizagem de JavaScript
• Utilização e armazenamento de valores
• Utilização de strings e arrays
• Teste e comparação de valores
• Repetir-se: Utilizar loops
• Recursos avançados de JavaScript: utilizar objetos embutidos
• Trabalho com objetos browser
• Criação de objetos personalizados; Resposta a eventos 3
CONTEÚDOS

• Trabalho com páginas da Web; Utilização de janelas e frames


• Obtenção de dados com formulários
• Utilização de imagens gráficas e animação; criação de scripts específicos do
navegador
• Recursos avançados de script da Web:Trabalho com folhas de estilo
• Criação de páginas dinâmicas com camadas
• Criação de scripts para múltiplos navegadores
• Trabalho com multimédia e plug-ins. Depuração de aplicativos JavaScript;
Aprimoração de uma página da Web com JavaScript
• Criação de um script de shopping cart
• Criação de um jogo no JavaScript. Apêndice: Outros recursos de JavaScript;
Ferramentaspara desenvolver JavaScript 4
REFERÊNCIAS BIBLIOGRÁFICAS

• PORTELA, Filipe e QUEIRÓS, Ricardo, Introdução ao Desenvolvimento Moderno para a Web,


FCA, 2018
• QUEIRÓS, Ricardo, Criação Rápida de Sites Responsivos com Bootstrap, FCA, 2017
• TAVARES, Frederico, PHP com Programação Orientada a Objetos, FCA, 2016
• ABREU, Luis, HTML5, FCA, 2016
• ABREU, Luis, JavaScript 6, FCA, 2015
• ABREU, Luis,ASP.NET 4.5.1, FCA, 2014
• ABREU, Luis e CARNEIRO, João Paulo,ASP.NET 4.5 – Curso Completo, FCA, 2013
• ABREU, Luis e CARNEIRO, João Paulo,ASP.NET MVC, FCA, 2012
• REMOALDO, Pedro, CSS3, FCA, 2011

5
WEBGRAFIA

• https://www.w3.org/TR/html5
• https://wiki.whatwg.org/wiki/
• https://www.w3.org/Style/CSS/
• https://www.w3.org/TR/css/
• https://www.w3schools.com/

6
WEBGRAFIA

• https://getbootstrap.com/
• https://materializecss.com/
• https://fontawesome.com/
• https://daneden.github.io/animate.css/
• https://fonts.google.com/
• https://jquery.com/

7
WEBGRAFIA

• https://www.codecademy.com/catalog/language/html-css
• https://www.codecademy.com/catalog/language/javascript
• https://www.codecademy.com/catalog/subject/web-development
• https://www.udemy.com/topic/html/
• https://www.udemy.com/topic/css/
• https://www.udemy.com/topic/javascript/
• https://www.udemy.com/topic/php/

8
SOFTWARE RECOMENDADO

VISUAL STUDIO CODE EXTENSÕES

https://code.visualstudio.com/ 9
AVALIAÇÃO

• Trabalho prático
• Teste
• Trabalho de aula
• Participação e motivação
• Pontualidade e assiduidade
• Relações interpessoais/ Trabalho em equipa

10
JAVA
JAVASCRIPT
SCRIPT

• JavaScript é uma linguagem de programação que pode ser aplicada em um


documentos HTML usada para criar interações dinâmicas em sites. Ela foi
inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação
Mozilla e da Corporação Mozilla.
• É possível fazer muitas coisas com JavaScript. Mas vamos começar com coisas
simples como ajustar layouts, fazer coisas acontecerem quando botões são
clicados, slides e galerias de imagem — mas com mais prática é possível criar
jogos, animações gráficas em 2D e 3D, aplicativos com base de dados e muito
mais.
• Javascript é uma linguagem de script com base na linguagem de programação
ECMAScript.
• Atualmente é o padrão em linguagem “client side” para qualquer browser.
11
JAVASCRIPT

12
EXEMPLOS DE
UTILIZAÇÃO

• Validação de formulários
• Galerias de fotos
• Janelas de aviso
• Banners
• Janelas de publicidade
• Menus pop-up

13
PRINCIPAIS
CARATERÍSTICAS

• Suporta elementos usuais de sintaxe de programação (ex.: if, while,…)


• Tipos de dados dinâmicos (ex.: uma variável inteira pode ser redefinida como
string ao longo do código)
• Sintaxe semelhante à orientação a objetos
• Case sensitive

14
CÓDIGO
INLINE

15
FICHEIRO
EXTERNO

HTML JS

16
ESPECIFICAÇÃO

• Deve sempre ser apresentado o tipo de script a que o ficheiro se refere, assim
deve ser acrescentado o parâmetro seguinte:

17
VARIÁVEIS

• As variáveis em Javascript não têm um tipo de dados associado diretamente,


assim podemos criar o seguinte:

18
OPERADORES

19
IF-ELSE

20
COMPARAÇÃO ENTRE
TIPOS DE VARIÁVEIS

21
LOOPS
(WHILE)

22
LOOPS
(FOR)

23
FUNÇÕES DE
RETORNO

24
FUNÇÕES DE
EXECUÇÃO

25
FUNÇÕES DE
ARREDONDAMENTO

26
FUNÇÕES DE
ARREDONDAMENTO

27
PASSAGEM DE
PARÂMETROS

28
ARRAYS EM JS

29
ARRAYS EM JS

30
INSERIR ELEMENTO
EM ARRAY

31
REMOVER ELEMENTO
EM ARRAY

32
POSIÇÃO DE UM
ELEMENTO NUM ARRAY

33
ORDENAR
ARRAY

34
ORDENAR
ARRAY

35
SOMA
VS
CONC ATENAR

36
SOMA
VS
CONC ATENAR

37
MÁXIMO

38
MÍNIMO

39
CONVERSÕES

40
RANDOM

41
RANDOM

Gera um número aleatório até 10, inclusive


Utilizando apenas o Math.random()*10 iria gerar um valor até a10 exclusivo

42
CHARAT

Valor numa determinada posição

43
SUBSTR

Permite selecionar uma parte de uma string


dando a posição inicial e o nº de carateres a selecionar

44
SPLIT

Permite dividir o conteúdo de uma string num Array separando


o mesmo por um carater específico

45
TOLOWERCASE

46
TOUPPERCASE

47
DATAS

48
DATAS

49
HORAS

50
OBJECT

• A classe object permite criar elementos personalizados pelo utilizador, assim


posso por exemplo criar o objeto “produto” com os atributos nome, preço,
cor, …

51
EVENTOS

• O JavaScript é uma linguagem orientada a eventos. Os eventos podem ser


produzidos pelo sistema, como os que resultam do facto de carregar ou
descarregar uma página; ou resultar de ações diretas do visitante, como premir
um botão no rato, por exemplo. Na tabela seguinte apresenta-se uma lista de
eventos e os objetos é que se aplicam.

52
Elementos Eventos suportados
HTML
Blur Click Change Focus Load Mouseover Select Submit Unload

Button X

Checkbox X

Document X X

Form X

Link X X

Radio X

Reset X

Selection X X X

Submit X

Text X X X X

Textarea X X X X

53
EVENTOS

• A cada evento corresponde o respetivo manipulador do evento. Assim, aos eventos


anteriores correspondem aos seguintes com o manipuladores de evento:
• onblur, onclick, onchange, onfocus, onload, onmouseover, onselect, onsubmit,
onunload
• Os manipuladores de evento são por vezes escritos usando um misto de
minúsculas/maiúsculas (exemplo: onClick), uma vez que os navegadores não
distinguem maiúsculas de minúsculas no HTML. No entanto, a norma HTML 4.01
especifica que os manipuladores de eventos devem ser escritos em minúsculas.
• Considera-se, por exemplo, o evento Click. Em HTML pode escrever-se onClick
mas deve escrever-se onclick.

54
EVENTOS
ONLOAD / ONUNLOAD

55
EVENTOS – ONCLICK

56
EVENTOS – ONCLICK

57
EVENTOS – ONCLICK

58
EVENTOS – ONSUBMIT

59
EVENTOS – ONSUBMIT

FORMULÁRIO APÓS CLIQUE NO BOTÃO

60
EVENTOS – ONFOCUS

61
EVENTOS – ONFOCUS

62
EVENTOS
ONMOUSEOVER

63
EVENTOS
ONMOUSEOVER

64
HTML EMBEBIDO

65