Metodologia da aula
Não faremos uma aplicação Angular, apenas utilizaremos o ambiente de produção Angular para revisar/estudar os principais conceitos das linguagens Javascript e Typescript utilizando o console javascript do navegador (acessível por meio da tecla F12)
1
Parte I - Conceitos básicos da linguagem
2
Preparando o projeto
Explicação
3
Solução:
Problema:
Tarefa
Apague o conteúdo do arquivo src/main.ts, substituindo pelo conteúdo abaixo
Em seguida, rode a aplicação com o comando abaixo:
4
Visualizando a ‘aplicação’
Todos os resultados deste capítulo são mostrados na janela do console JavaScript.
Abra a ferramenta do desenvolvedor (tecla F12) e clique na aba Console (lembre-se: estamos usando o Google Chrome)
5
Google Chrome Javascript console
OBS: As saídas serão sempre mostradas nessa janela do console!
6
Alterando novamente o main.ts
Ocorre erro de compilação se esquecermos do ; ?
O que acontece quando eu salvo o arquivo main.ts ?
7
Compreendendo o Workflow básico
8
Compreendendo o Workflow básico
3. O navegador recarrega o documento HTML e começa a processar os seus elementos. Ele carrega os arquivos JavaScript especificados pelos elementos <script> do documento HTML, incluindo o bundle que contém o main.ts.
4. O navegador executa os dois comandos contidos no main.ts, que irão escrever mensagens no console JavaScript do navegador.
9
Variáveis, operadores e tipos de dados
10
var, let e const
Escopo de variável (var)
As variáveis a e b no código ao lado têm escopo de função, sendo acessíveis de qualquer parte da função, diferente do que ocorre em outras linguagens
11
var, let e const
Escopo de variável (let)
O escopo da variável b é do bloco do if() {...}, não sendo possível acessá-la de fora desse bloco, o que gera um erro de compilação Typescript error TS2304: Cannot find name 'b'.
12
var, let e const
const: constante
Usamos a palavra chave const para declarar uma constante. Caso se tente alterar o seu valor, o compilador retorna o error TS2540: Cannot assign to 'pi' because it is a constant ...
13
error TS1155: 'const' declarations must be initialized.
Operadores aritméticos, de atribuição e relacionais
14
++, -- | Pré ou pós incremento/decremento |
+, -, *, /, % | Soma/concatenação, subtração, multiplicação, divisão, resto da divisão |
<, <=, >, >= | Dispensa comentários :) |
==, != | Igualdade e desigualdade |
===, !== | Idêntico e não idêntico |
&&, || | Operadores lógicos E e OU |
=, +=, -=, ... | Atribuição |
?: | Operador ternário |
Igual não significa ser idêntico!
x==y retorna true se as variáveis possuem o mesmo valor (embora possam ser de tipos diferentes)
x===y retorna true se as variáveis possuem o mesma valor E são do mesmo tipo.
OBS: Esse operador é útil em código javacript (linguagem não tipada), mas é irrelevante no typescript (linguagem tipada).
15
Igual não significa ser idêntico! (testando o código no site do W3Schools)
16
var x = 5;
var y = "5"; //depois altere para y = 5 e execute novamente o código
if(x==y){
document.getElementById("demo").innerHTML = "x == y";
}
if(x===y){
document.getElementById("demo").innerHTML = "x === y";
}
Igual não significa ser idêntico! (testando o código no Visual Studio Code)
var x = 5;
var y = "5";
if(x==y){
document.getElementById("demo").innerHTML = "x == y";
}
if(x===y){
document.getElementById("demo").innerHTML = "x === y";
}
17
Usando tipos de dados: string
Salve o arquivo e veja o que é impresso no console.
18
Métodos e atributos úteis de string
Exercício: teste todos esses métodos.
19
length | Retorna a quantidade de caracteres da string (tamanho) |
charAt(index) | Retorna a string que contém o caractere na posição index |
concat(string) | Concatena a string invocada com a string passada no parâmetro |
indexOf(termo, inicio) | Retorna o primeiro índice onde o termo aparece (inicio: opcional) |
replace(termo, novoTermo) | Substitui as ocorrência de termo pelo novoTermo na string |
slice(inicio, fim) | Retorna a substring entre os índices inicio e fim |
split(termo) | Quebra a string em um array de strings separadas por termo |
toUpperCase() toLowerCase() | Deixa todos os caracteres em MAIÚSCULO Deixa todos os caracteres em minúsculo |
trim() | Remove os espaços em branco iniciais e finais da string. |
Template string
Estilo tradicional
Usando template string
20
Usando tipos de dados: number
Salve o arquivo e veja o que é impresso no console.
21
Métodos de conversão string -> number
Exercício: teste esses métodos.
22
Método | Descrição |
Number(str) | Cria um valor inteiro ou real |
parseInt(str) | Cria um valor inteiro |
parseFloat(str) | Cria um valor real |
Métodos de conversão number -> string
Exercício: teste esses métodos.
23
Método | O que retorna? |
toString() | A string da base 10 do número |
toString(2|8|16) | O número na notação binária, octal ou hexadecimal |
toFixed(n) | Representação do número real com n dígitos após a vírgula (arrendonda) |
toExponential(n) | Notação científica com uma casa decimal e n dígitos após a vírgula |
toPrecision(n) | N dígitos no total (antes e após a vírgula) |
Usando tipos de dados: boolean
Salve o arquivo e veja o que é impresso no console.
24
Usando tipos de dados: enum
Salve o arquivo e veja o que é impresso no console.
25
Usando tipos de dados: undefined e null
26
O que será impresso?
Usando tipos de dados: undefined e null
27
Usando tipos de dados: array
Salve o arquivo e veja o que é impresso no console.
28
Declaração e inicialização juntas
Usando tipos de dados: array (tipado)
Salve o arquivo e veja o que é impresso no console.
29
Operador de propagação (spread)
O operador de propagação ... é usado para expandir um array de forma que possa seu conteúdo possa ser usado como argumento de uma função ou combinado em outro array.
Salve o arquivo e veja o que é impresso no console.
30
Métodos do objeto Array (1/3)
Exercício: teste todos esses métodos.
31
Método | Descrição |
concat(array2) | Ret. um novo array concatenado ao array2. |
join(sep) | Ret. uma string formada pelos elementos do array separados por sep |
pop() | Remove e retorna o último elemento do array. |
shift() | Remove e retorna o primeiro elemento do array. |
push(item) | Adiciona um novo elemento no final do array. |
unshift(item) | Adiciona um novo elemento no início do array. |
reverse() | Ret. um novo array que contém os itens na ordem inversa. |
slice(ini,fim) | Retorna o subarray com os elementos entre as posições ini e fim. |
Métodos do objeto Array (2/3)
Exercício: teste todos esses métodos.
32
Método | Descrição |
sort() | Ordena o array. É possível passar uma função de comparação. |
splice(index, count, e?) | Remove count elementos do array a partir do index e (opcional) insere o elemento e no lugar. Retorna os elementos removidos. |
unshift(item) | This method inserts a new item at the start of the array. |
every(test) | Invoca a função test para cada item do array e retorna true se a função retorna true para todos os elementos. |
some(test) | Invoca a função test para cada item do array e retorna true se a função retorna true para pelo menos um elemento. |
filter(test) | Ret. um array com os elementos para os quais a função test retorna true. |
find(test) | Ret. o primeiro item do array para o qual a função test retorna true. |
Métodos do objeto Array (3/3)
Exercício: teste todos esses métodos.
33
Método | Descrição |
findIndex(test) | This method returns the index of the first item in the array for which the test function returns true. |
foreach(callback) | This method invokes the callback function for each item in the array, as described in the previous section. |
includes(value) | This method returns true if the array contains the specified value. |
map(callback) | This method returns a new array containing the result of invoking the callback function for every item in the array. |
reduce(callback) | This method returns the accumulated value produced by invoking the callback function for every item in the array. |
Usando tipos de dados: tupla
Salve o arquivo e veja o que é impresso no console.
34
Usando tipos de dados: any
35
Estruturas de condição e repetição
36
Estrutura de condição
Salve o arquivo e veja o que é impresso no console.
37
Estrutura de repetição: for (exemplo 1)
Salve o arquivo e veja o que é impresso no console.
38
Estrutura de repetição: for (exemplo 2)
Salve o arquivo e veja o que é impresso no console.
39
Estrutura de repetição: for (exemplo 3)
Esse for é conhecido como for of (usa o conceito de Iterator)
40
Estrutura de repetição: foreach
Salve o arquivo e veja o que é impresso no console.
41
Funções
42
Funções javascript
Expressão de uma função
Declaração de uma função
Salve o arquivo e veja o que é impresso no console.
43
Definindo funções com parâmetros
Salve o arquivo e veja o que é impresso no console.
44
Definindo funções com parâmetro múltiplo
Salve o arquivo e veja o que é impresso no console.
45
Parâmetros default e rest
Será que seria possível invocar a função do slide anterior informando menos ou mais argumentos? Exemplo:
falaMaju(“Neymar”)
falaMaju(“Wesley Safadão”, true, “feijão”, 2.99)
46
SIM!
O número de argumentos que você passa para uma função não precisa bater com a quantidade de parâmetros da função.
47
Parâmetros default e rest
falaMaju(“Neymar”) -> o que será impresso?
48
Parâmetros default e rest
falaMaju(“Wesley Safadão”, true, “feijão”, 2.99)
Salve o arquivo e veja o que é impresso no console.
49
Funções que retornam valores
Semelhante a como fazemos com métodos em java
50
Usando função como argumento de outra função
Salve o arquivo e veja o que é impresso no console.
51
Construindo uma ‘cadeia’ de funções
Salve o arquivo e veja o que é impresso no console.
52
Funções lambda
São funções que são usadas como argumentos para outras funções.
53
Parte II - Conceitos avançados e de Orientação a Objeto
54
Definindo Objetos (de forma literal)
propriedade1: valor1,
propriedade2: valor2,
...
Salve o arquivo e veja o que é impresso no console.
55
Definindo Classes e objetos (como no Java)
Salve o arquivo e veja o que é impresso no console.
56
Definindo getters e setters
57
Herança (extends)
Salve o arquivo e veja o que é impresso no console.
58
Classe abstrata
Lembre-se que uma classe abstrata não pode ser instanciada e seus métodos podem ou não estar implementados.
Crie a classe Cachorro que herda da classe Animal.
59
Interface
Lembre-se que uma interface contém apenas as assinaturas dos métodos.
Comente o método digaOi da interface IPessoa e veja o erro que aparece.
60
Interface (usando o termo implements)
Comente o método digaOi da interface IPessoa e veja o erro que aparece.
61
O conceito de módulos
62
Criando módulos
63
A cláusula export é usada para tornar a classe utilizável de fora do arquivo (cria-se um módulo).
Como arquivo contém duas classes, o módulo criado conterá duas classes. O padrão é que cada classe esteja em seu próprio arquivo (como é feito em java).
64
Importado uma classe (módulo)
Escreva o código abaixo no main.ts
Salve o arquivo e veja o que é impresso no console.
65
Tipos de import
Relativo. Ex: importando um módulo do seu projeto.
Não relativo. Ex: importando um módulo do Angular (pasta node_modules)
66
Renomeando imports
Para simular esse problema, crie o arquivo DuplicateName.ts na pasta modules, contendo o conteúdo ao lado.
67
Problema: E se no meu projeto eu tiver que importar duas classes que possuem o mesmo nome?
Renomeando imports: usando um alias
Altere o arquivo main.ts
68
Criando um novo módulo
Crie a classe TempConverter na pasta src.
69
Tipos Indexáveis
Associam uma chave a um valor (como Map na API Java)
Altere a classe main.ts (lembre-se dos imports):
70
Usando modificadores de acesso
71
Tipo | Descrição |
public | Pode ser acessado de qualquer lugar (padrão) |
private | Pode ser acessado apenas de dentro da classe. |
protected | Pode ser acessado por classes filhas. |
Referências
72