-
Notifications
You must be signed in to change notification settings - Fork 0
Sumários
- Apresentação da disciplina Introdução à Programação na Web - IPW
- Modo de funcionamento da UC
- Moodle
- Informação institucional
- Divulgação de Mensagens
- Publicação de notas
- Slack
- No nome de utilizador, usar primeiro e último nome seguido da turma, entre parênteses (e.g. "Filipe Freitas (leic31d)").
- Workspace da Unidade Curricular
- Regras de avaliação
- Bibliografia
- Comandos - init, status, add, commit, push, pull
-
World Wide Web (WWW)
- História
- Arquitetura
- Cliente (browser)
- Servidor de hipertexto
- Protocolo de interação entre cliente e servidor (Hypertext Transfer Protocol)
-
Arquitetura Cliente <=> Servidor
-
Distinção entre tecnologias Web de cliente (browser) e servidor.
- Cliente: HTML, CSS, JavaScript
- Servidor: Node.js, PHP, Java, .NET, C/C++, etc.
-
Evolução histórica de IPW e crescendo da importância do Javascript.
-
Evolução histórica do Javascript desde o seu aparecimento em 1995 com o objetivo inicial de uma linguagem de scripting para o browser, até à versão EcmaScript 6
-
Análise das características da linguagem de programação Javascript:
-
Scopes:
-
let
econst
– variáveis que NÃO podem ser usadas fora do bloco em que foram declaradas. Temporal Dead Zone -
var
- scope da função onde é declarada. Recomendação de NÃO usar.
-
-
Sistema de tipos EcmaScript edição 6:
Object
e Primitivos (todos os outros que não sãoObject
) -
Tipos Primitivos:
Undefined
,Null
,Boolean
,Number
,String
. -
operador
typeof
-
Objetos
- Um objeto em JavaScript é um contentor de pares nome-valor!
-
Objeto Literal:
{ prop1: valor1, prop: valor2, …}
- propriedades são membros de um objeto que armazenam valores.
- Uma propriedade que armazena uma função é um método
- 2 sintaxes para acesso a propriedades:
-
Dot notation: -
obj.propName
- Apenas pode ser usada para acesso a propriedades com nomes que são identificadores válidos
-
Subscript notation
- Aceder a uma propriedade com nome dado por uma expressão:
obj[exp]
- Pode ser usada para acesso a propriedades cujo nome não é um identificador válido
- Chamar um método com nome dado por uma expressão:
obj[exp]()
- Aceder a uma propriedade com nome dado por uma expressão:
-
Dot notation: -
- Introspeção sobre objetos em Javascript :
- Enumeração sobre nomes das propriedades de um objeto –
for(let key in objRef)
- Enumeração sobre nomes das propriedades de um objeto –
-
Arrays
- Arrays literais: [“elem1”, , “elem2”] -- a posição 1 fica com o elemento undefined
- Não são tipificados, logo são heterogéneos.
- Os elementos são obtidos por uma chave numérica, ou em string, tal como para as outras propriedades
- A principal diferença para os objetos é que têm uma propriedade length.
Eloquent Javascript - Capitulo 1
Eloquent Javascript - Capitulo 2
Eloquent Javascript - Capitulo 4
- As funções são declaradas como literais que criam um valor função. 2 formas (existe uma 3ª forma):
- função sem nome - definição de função - e.g.
function () {}
(função anónima) - função com nome - declaração de função - e.g.
function foo()
{}
- função sem nome - definição de função - e.g.
- Uma função tem uma propriedade
name
que guarda o nome declarado na função. - Funções anónimas têm a propriedade
name
igual a string vazia (""
). - O número de argumentos, não tem que coincidir com o número de parâmetros
- Arrow Functions
-
Closure de uma função:
- Criado um novo por cada invocação da função
- Pode ter um tempo de vida superior à execução dessa chamada à função, se ficarem acessíveis funções criadas nessa chamada
Eloquent Javascript - Capitulo 3
-
Higher-Order Functions
-
Função Construtora - Chamada realizada com o operador prefixo
new
- O operador
new
altera o significado dothis
que refere o objecto criado; - O construtor retorna implicitamente o novo objecto (
this
) a não ser que haja retorno explícito;
- O operador
-
Prototypes
- O protótipo tem a semântica do padrão de desenho Prototype
- O protótipo serve de “modelo” à criação de novos objectos
- Cada objecto tem uma propriedade implícita que refere o seu protótipo.
- Exemplos de actualização do
prototype
e reflexo nos objectos com esseprototype
-
Properties Lookup (o objecto tem precedência sobre o protótipo)
- Primeiro procura no objecto uma propriedade com o nome igual
- Caso não encontre, então procura no prototype uma propriedade com esse nome prototype chain
-
4 formas de chamar uma função:
- Como uma função -- this igual ao objeto global ou
undefined
(se em modostrict
) - Como um método -- this igual ao target e.g.
target.methodName()
- Como construtor -- this igual ao objeto criado e.g.
new funcName()
- com apply() ou call()
- Como uma função -- this igual ao objeto global ou
-
Modo
strict
Recursos
-
Node.js: Google's V8 JavaScript engine + event loop + low-level I/O API;
-
Node Package Manager (
npm
)- É constituído por 3 componentes:
- npm CLI
-
npm init
-y - Cria um ficheiro package.json -
npm install mocha chai --save-dev
- instalamocha
echai
como dependência de desenvolvimento.
-
-
ECMAScript Modules
- "type": "module" no ficheiro package.json
-
Testes unitários com a framework Mocha
- Executar testes
- "scripts": { "test": "mocha"} no ficheiro package.json
- npm run test
- Executar testes
- Event Loop para executar operações (na forma de callbacks) quando um evento ocorre.
- Felix Geisendörfer: “everything runs in parallel except your code.”
- Os callbacks NÃO são interrompidos por outros callbacks, nem correm em paralelo com outros callbacks.
- Do ponto de vista da linguagem JavaScript o Node.js oferece um ambiente single-threaded.
- Todas as operações de I/O do Node.js podem ser executadas em paralelo e.g. ler ficheiros; pedidos HTTP,….
- As operações de I/O usam técnicas non-blocking.
Distinção entre os modelos:
- single-threaded com IO bloqueante
- multi-threaded
- single-threaded com IO não-bloqueante assíncrono
Distinção entre modelo de chamada síncrono versus assíncrono.
-
Esquematização num diagrama de sequência que evidencia a diferença entre o modelo de chamada síncrono vs assíncrono.
-
Exemplo de bloqueio da thread principal Node.js
-
callback
(err, data) => {...}
-
Modelos assíncronos:
-
callback
(err, data) => {...}
--err
edata
traduzem os 2 casos de sucesso ou falha. -
Promise
é um objecto que encapsula os dois possíveis resultados: sucesso ou falha -
async
/await
-- semelhante ao idioma síncrono.
-
callback
-
Uma
Promise
pode:- adicionar um callback a cada caso através de
.then()
ou.catch()
- ter um dos 3 estados:
pending
,fulfilled
, ourejected
- adicionar um callback a cada caso através de
-
Exemplo de leitura dum ficheiro
- Modo assíncrono com callback
- Modo assíncrono com `Promise
Recursos
-
URI (Uniform Resource Identifier) - Identificador único de um recurso
- URN (Uniform Resource Name) - Identifica o recurso por nome
- URL ( Uniform Resource Locator) - Identifica o recurso indicando a forma de acesso e a sua localização
-
URL
- Sintaxe:
URL = scheme:[//[userinfo@]host[:port]]path[?query][#fragment]
-
HTTP (Hypertext Transfer Protocol)
- Características do HTTP:
- nível aplicacional
- stateless
- pedido-resposta
- o protocolo subjacente deve suportar entrega fiável – e.g. TCP.
- Características do HTTP:
-
Demonstração de pedidos GET e resposta HTTP;
-
Gamas de códigos de estado HTTP:
- 1xx - Resposta informativa
- Mais relevantes: 100
- 2xx - Sucesso
- Mais relevantes: 200 e 201
- 3xx - Redirecionamento
- Mais relevantes: 301 e 302
- 4xx - Erro de cliente
- Mais relevantes: 400, 403 e 404
- 500 - Erro no servidor
- 500, 502 e 504
- 1xx - Resposta informativa
-
Pedidos HTTP GET usando Promises
-
World Wide Web
- Perspetiva Histórica
- Princípios da World Wide Web
- Identificação - URI
- Interação - HTTP
- Formatos - HTML, Json, Texto, etc.
-
Revisão sobre URIs
-
HTTP (Hypertext Transfer Protocol)
- Características do HTTP:
- nível aplicacional
- stateless
- pedido-resposta
- o protocolo subjacente deve suportar entrega fiável – e.g. TCP.
- Sintaxe de um pedido HTTP:
<Request Line>\r\n
[<HeaderFields>\r\n]+
\r\n
-
Request Line: <RequestMethod> <Uri> <HttpVersion>
- RequestMethod: 'GET´| ´POST
|
PUT|
DELETE`, ... - Uri: Uri absoluto para o recurso ou apenas a componente da path e seguintes
- HTTP/1.1
- RequestMethod: 'GET´| ´POST
- HeaderFields: Pares
<Name>: <Value>
- Headers pedido: Host, Accept, Cookie, etc
- Headers resposta: Server, Set-Cookie, Cache-Control
- Headers entidade (podem ser usados nos pedidos e respostas): Content-Type, Content-Length, Content_Encoding
- Corpo da pedido (aka. body or payload), caso exista
-
- Características do HTTP:
-
Sintaxe de uma resposta HTTP:
Response Line: <HttpVersion> <StatusCode> <StatusMessage>
[<HeaderFields>\r\n]+
- Corpo da resposta (aka. body or payload), caso exista
-
Pedidos e resposta HTTP via telnet:
> set crlf
> open www.isel.pt 80
> uma vez crlf
> GET / HTTP/1.1
> Host: www.isel.pt
> duas vezes crlf
HTTP/1.1 303 See Other
Content-Type: text/html; charset=UTF-8
Location: https://www.isel.pt/
Server: Microsoft-IIS/8.5
Date: Mon, 01 Nov 2021 17:48:58 GMT
Content-Length: 143
<head><title>Document Moved</title></head>
<body><h1>Object Moved</h1>This document may be found <a HREF="https://www.isel.pt/">here</a></body>
-
Demonstração de pedidos e resposta HTTP via curl, browser e Postman;
-
Métodos HTTP
- GET
- PUT
- DELETE
- POST
-
Classificação dos métodos HTTP:
Método | Seguro | Idempotente |
---|---|---|
GET | v | v |
PUT | v | |
DELETE | v | |
POST |
-
Seguro
Request methods are considered “safe” if their defined semantics are essentially read-only; i.e., the client does not request, and does not expect, any state change on the origin server as a result of applying a safe method to a target resource.
-
Idempotente
A request method is considered “idempotent” if the intended effect on the server of multiple identical requests with that method is the same as the effect for a single such request.
-
Headers
- Accept
- Content-type - text/html, text/plain, application/json, application/x-www-form-urlencoded, etc.
- Content-Length
- Authorizaton
- etc.
Recursos
- Information Management: A Proposal
- Architecture of the World Wide Web, Volume One
- URI Schemes @ IANA
- HTTP Status codes
- ElasticSearch - schema-free + RESTful + NoSQL
- ElasticSearch - Armazena e indexa documentos JSON via HTTP
-
run:
> elasticsearch
- RESTFull API
- Elastic - Recursos = Documentos JSON
- Documentos JSON URI =
elastic host``/``indice``/``type
-
curl http://localhost:9200/_cat/indices
-- listar índices -
curl http://localhost:9200/_all
-- detalhes de todos os índice -
curl http://localhost:9200/books
-- detalhes de um índice, e.g.books
-
curl http://localhost:9200/books/_search
-- listar documentos de um índice, e.g.books
-
curl http://localhost:9200/books/_doc/b01
-- detalhes de um documento com_id
=b01
-
- Manipular:
-
curl -X PUT http://localhost:9200/books
-- Criar um índice, e.g.books
-
curl -X DELETE http://localhost:9200/books
-- Apagar índice -
curl -X DELETE http://localhost:9200/books/_doc/b01
-- Apagar o documento com_id
=b01
-
curl -X POST
versusPUT
para criar um documento.
-
> curl -X PUT --data '{ "name" : "Filipe" }' -H "Content-Type: application/json" http://localhost:9200/books/_doc/b01
> curl -X POST --data '{ "name" : "Joao" }' -H "Content-Type: application/json" http://localhost:9200/books/_doc
Recursos
-
Utilização do módulo 'express' para implementação de um servidor HTTP
-
Módulo Express:
-
Módulo que disponibiliza uma framework web robusta e extensível
-
Routing
- Determina como a aplicação responde a um pedido para um endpoint
- Registo de rotas/endpoints
- Método HTTP
- path
- handler - função que é invocada quando há um pedido para a rota registada
-
Passagem de parâmetros/dados por:
- route parameters
- query-string
- corpo do pedido
-
Acesso ao corpo do pedido HTTP
req.body
- É necessário um middleware para cada
content-type
-
Built-in middlewares
-
express.static
- serve conteúdos estático -
express.json
- parsing de payloads JSON -
express.urlencoded
- parsing de URL-encoded payloads
-
- Para outros content types são necessários middlewares externos
- É necessário um middleware para cada
-
Recursos
- Desenho e documentação duma Web API para gestão de tarefas
- Swagger
- Divisão nos módulos
- server.js
- tasks-web-api.js
- tasks-services.js
- tasks-db-mem.js
- Implementação em memória - tasks-db-mem.js
- Tratamento de erros
- Introdução de utilizadores
- Token Authentication
- Testes Unitários com Promises
-
Hypertext Markup Language (HTML)
- Define a estrutura e significado (semântica) dos documentos
- Elementos, marcas (Tags) e Atributos
- Nós de texto
- Estrutura base de um Documento HTML:
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
-
self-closing elements:
<img>
,<br>
,<hr>
, etc - Elementos sem qualquer significado semântico. Apenas servem como contentores para aplicar estilo :
<div>
e<span>
- Criação de hyperlinks:
<a href="http://shayhowe.com">Shay</a>
-
npm install hbs
-
Handlebars templates
view
model
- Instruções de controlo de fluxo na view handlebars :
{{#each property-array}} … {{/each}}
{{#if }} ...{{else }}
- Integração com Express - ver módulo server.js
-
Implementação do módulo tasks-web-ui.js
Recursos
- HTML Forms
- Content-Type: application/x-www-form-urlencoded
-
express.urlencoded
middleware - Post/Redirect/Get - ver tasks-web-ui.js
- Testes de integração
- supertest - npm install supertest --save-dev
- tasks-api.test.js
- Aula Prática
-
express.static
- serve conteúdos estático -
Cascading Style Sheets (CSS)
- Linguagem de apresentação para definir a aparência do conteúdo
- CSS: Regra, Selector, Properties e Values
- Sintaxe:
selector { propriedade:valor; ...}
- Seletores simples:
- Tipo (elemento):
p
- Classe:
.someClass
- Id:
#someId
- Tipo (elemento):
- Seletores Combinados
- Descendentes:
p span
- Filhos:
p > span
- Descendentes:
- Bootstrap
- Handlebars - layout.hbs e {{{body}}}
Recursos
-
Middlewares
- São funções que têm acesso ao objeto
Request
(req
) eResponse
(res
) e a funçãonext
, no cíclo de atendimento de um pedido HTTP. - função com o descritor
(req, resp, next) => void
- Podem realizar as seguintes tarefas:
- Executar código
- Alterar os objetos
Request
eResponse
- Terminar o pedido (enviando a resposta)
- Invocar o middleware seguinte
- São funções que têm acesso ao objeto
-
Cookies
- Request header
Cookie
- Response header
Set-Cookie
- Atributos:
Expire
,path
, etc. - Módulo
cookie-parser
- Exemplo de utilização de cookies - cesto de compras
- Request header
-
Módulo expressSession
- Exemplo de utilização com o cesto de compras
-
Passport middlewares
passport.initialize()
passport.session()
-
Functions
- login and logout
- serialize and deserialize
-
Exemplo de uso do passport
-
Document Object Model (DOM)
-
Define a estrutura lógica, forma de acesso e manipulação de documentos.
-
Obter elementos.
document
:-
document::getElementById()
,document::querySelector()
edocument::querySelectorAll()
-
-
document.body
-
Propriedade DOM de manipulação de elementos:
-
innerHtml
--String
com conteúdo HTML dos elementos descendentes -
innerText
--String
com apenas com o texto (sem HTML) dos elementos descendentes -
Eventos DOM
interface EventTarget: Node { void addEventListener(String type, EventListener listener); }
-
-
-
Fetch API
- Interface assíncrona baseada em Promises para obter recursos da rede
- Disponível em todos os web browsers (atuais), através da função global
fetch()
presente no objeto global - Utilização básica:
fetch('http://localhost:8080/tasks') .then(function(response) { return response.json(); }) .then(function(tasks) { console.log(JSON.stringify(tasks)); });
-
Exemplos na aplicação de tarefas
- Remoção duma tarefa
- Alterar uma tarefa
Recursos