Programa de Formação de Desenvolvedores WEB

Arquitetura de software é fundamental para a estrutura e evolução do software. Ela faz parte da engenharia de software, para você ter segue o link sugerido pela IBM http://walderson.com/IBM/RUP7/LargeProjects/core.base_rup/workproducts/rup_software_architecture_document_C367485C.html

O Entendimento da Importância é fundamental, ela irá fortalecer o aprendizado do significado da definição da Arquitetura de Aplicação. Durante o video, sugiro você criar uma conta gratuita no JIVOCHAT. Segue o link: https://www.jivochat.com.br/

O Arquiteto de Software irá proporcionar a solução estrutural e tecnológica para projeto de Software. Durante essa aula, você irá aprender comigo, os principais pontos e a importância da atividade de um arquiteto de software em um projeto.

Sugestão de Leitura:

CAMADAS E CAMADAS” (LAYERS E TIERS)

Evolução das camadas em aplicações corporativas

A noção de camadas ganhou destaque na década de 90, com o surgimento de sistemas cliente/servidor. O cliente mantinha a interface de usuário e outros códigos da aplicação. O servidor tipicamente era um banco de dados relacional. Essa arquitetura de duas camadas facilita o desenvolvimento de aplicações com acesso intensivo a dados, na medida em que as ferramentas mais populares, como Visual Basic e Delphi possuíam controles de interface com usuários especialmente desenvolvidos para utilização de comandos SQL.

Se toda a responsabilidade da aplicação fosse simplesmente a exibição e atualização de dados, os sistemas cliente/servidor funcionariam perfeitamente. O problema surge com a lógica de domínio (domain logic): regras de negócio, validações, cálculos. É comum escrevê-los no cliente, mas isto é deselegante, ineficaz e geralmente embute a lógica diretamente nas telas de interface de usuário. À medida que a lógica de domínio torna-se mais complexa, o código torna-se mais difícil de ser trabalhado.

Além disso, ao embutir a lógica nos componentes de apresentação, a duplicação de código é quase uma certeza.

Uma das alternativas é colocar a lógica de domínio em stored procedures do banco de dados. Todavia, as stored procedures possuem mecanismos limitados de estruturação, o que leva novamente a código deselegante e ineficaz. Além disso, muitos apreciam os bancos de dados relacionais por possuir o padrão SQL, o que permitiria a troca de fornecedor do gerenciador de bancos de dados. Mas stored procedures são totalmente proprietárias, o que elimina esse benefício.

Ao mesmo tempo em que a arquitetura cliente/servidor ganhava popularidade, o mesmo ocorria com o mundo de orientação a objetos. A comunidade de objetos tinha a resposta para o problema de lógica de domínio: vá para o sistema de três camadas. Nesta abordagem, temos a camada de apresentação para interface com usuário, uma camada de domínio para a lógica de domínio, e uma camada de dados. Desta forma, toda a intrincada lógica de domínio pode sair da interface com o usuário e ser implementada numa camada onde pode ser estruturada adequadamente com objetos.

Certamente aqui se apresentaram alguns desafios, tanto para o desenvolvimento dos sistemas em termos de ferramental quanto conceitual, no tocante à representação dos dados dos objetos em modelos relacionais, por exemplo, além da necessidade de servidores de aplicação que contivessem recursos para garantir consistência, desempenho e escalabilidade, entre outros requisitos.

A onda mais recente que impactou a arquitetura de sistemas foi a popularização da Internet. O mundo todo desejava implantar sistemas com acesso por navegadores. Mas se toda a lógica de negócio estava enterrada num cliente rico, toda ela deveria ser construída novamente para atender uma interface Web.

Por outro lado, as ferramentas que surgiram para construção de sistemas Web eram menos amarradas a SQL e, portanto mais sensíveis a uma terceira camada.

Layers e Tiers

Ao discutir a utilização de camadas, há sempre confusão com os termos layer e tier. Freqüentemente são utilizados como sinônimos, mas muitos vêem tier como uma implicação de separação física. Sistemas cliente/servidor são freqüentemente descritos como sistemas two-tier: O cliente é um desktop e o servidor é, em geral, um SGBD. A utilização de layer reforça o fato de que não é necessário que as camadas estejam em máquinas diferentes. Uma camada de lógica de domínio pode ser executada num desktop ou num servidor de banco de dados. Nesta situação, há dois nós, mas três layers diferentes. Com um banco de dados local, as três layers podem ser executadas num único laptop, mas ainda haverá três layers diferentes.

Resumindo, layers são tidos como camadas lógicas enquanto tiers o são para camadas físicas.

As três camadas...

A camada de apresentação cuida da interação entre o usuário e o software. Pode ser tão simples quanto um sistema de linha de comando, ou um cliente rico com interface gráfica ou ainda um sistema baseado em navegadores de Internet. As responsabilidades primárias da camada de apresentação são exibir a informação para o usuário e interpretar os comandos emitidos pelo usuário em ações para as camadas de domínio e de dados.

A camada de dados cuida de toda interação com SGBDs e outras fontes de dados. Pode ser um monitor de transações, outras aplicações, sistemas de mensagens e assim por diante. Para a maior parte das aplicações corporativas, a fonte de dados é um banco de dados cuja responsabilidade é a persistência de dados não voláteis.

A camada de lógica de domínio, também chamada de camada de negócio, cuida das necessidades da aplicação no domínio em que ela se insere. Envolve cálculos baseados em dados digitados e em informações armazenadas, validação de informações vindas da camada de apresentação, e qual fonte de dados deve ser acionada, baseado em comandos recebidos do usuário.

Camada	Responsabilidades
Apresentação	Provisionamento de serviços, exibição de informações
Domínio / Negócio	Lógica particular ao sistema
Dados	Comunicação com bancos de dados, sistemas de mensagens, monitores de transação

A camada de domínio pode ser arranjada de tal maneira que se interponha separando as outras duas. Contudo, pode ser também que a camada de apresentação faça acesso à camada de dados diretamente. Apesar de ser menos “puro”, pode ser prático em alguns casos.

Uma aplicação pode possuir várias interfaces em cada uma das três camadas. Por exemplo, pode existir uma interface da camada de apresentação para ser utilizada por usuários da aplicação como linha de comando e outra para usuários da aplicação como interface gráfica, ou mesmo uma interface para ser utilizada por outro sistema, como um Web Service. O mesmo se aplica às demais camadas, permitindo abstrair fontes de dados e/ou permitir a aplicação de conjuntos diversos de regras de negócios. A construção de aplicações deste modo, todavia, não é trivial, e seu desenvolvimento deve considerar questões de custo, tempo de desenvolvimento, desempenho, entre outras.

Junto com a separação em camadas caminha uma regra importante sobre dependências: as camadas de domínio e de dados nunca devem ser dependentes da camada de apresentação. Esta regra facilita a utilização de diferentes camadas de apresentação baseados na mesma fundação, sem sérias alterações. O relacionamento entre domínio e dados é mais complexo e depende dos padrões de arquitetura utilizados para a camada de dados.

Namespaces são uma maneira de organizar Interface, Classes, Classes Abstratas e Enumeradores  que ocorrem em um programa C#. Ele é um pouco semelhante no conceito a uma pasta do sistema de arquivos em um computador. Como pastas, namespaces deve ativar classes para ter um nome exclusivo totalmente qualificado. Um programa C# contém um ou mais namespaces e cada namespace é definido por você o programador, ou definido como parte de uma biblioteca de classes escrita anteriormente.

Classes são agrupamentos lógicos composto por atributos e métodos.

Uma classe é definida nos seus aspectos estruturais através de seus atributos e nos seus aspectos comportamentais através de suas operações.

Atributo da classe: São propriedades semelhantes que os objetos de uma classe possuem. O "João da Silva" além do nome, também é caracterizado por outros atributos, endereço, número do contribuinte, CPF, etc. Cada atributo permite definir um intervalo de valores que as instâncias dessa propriedade podem apresentar. Meu carro é branco, o seu é preto. Essas propriedades de carro são descritas pelo atributo cor.

Um objeto é basicamente um bloco de memória que foi alocado e configurado de acordo com o esquema. Um programa pode criar vários objetos da mesma classe. Objetos também são chamados de instâncias e podem ser armazenados em uma variável nomeada ou em uma matriz ou coleção. O código de cliente é o código que usa essas variáveis para chamar os métodos e acessar as propriedades públicas do objeto. Em uma linguagem orientada a objetos, como o C#, um programa típico consiste em vários objetos que interagem dinamicamente.

Um método é um bloco de código que contém uma série de instruções. Um programa faz com que as instruções sejam executadas chamando o método e especificando os argumentos de método necessários. No C#, todas as instruções executadas são realizadas no contexto de um método.

Os métodos são declarados em uma classe especificando o nível de acesso, como public ou private, modificadores opcionais, como abstract ou valor retornado, o nome do método e os parâmetros de método. Juntas, essas partes são a assinatura do método.

 É a habilidade de poder definir diversas propriedades, métodos ou procedimentos em uma classe com o mesmo nome mas parâmetros diferentes

A herança, assim como o encapsulamento e o polimorfismo, é uma das três principais características da programação orientada ao objeto. A herança permite que você crie novas classes que reutilizam, estendem e modificam o comportamento definido em outras classes. A classe cujos membros são herdados é chamada classe base e a classe que herda esses membros é chamada classe derivada. Uma classe derivada pode ter apenas uma classe base direta.

Todos os tipos e membros de tipo têm um nível de acessibilidade, que controla se podem ser usados de outro código no seu assembly ou outros assemblies. Você pode usar os modificadores de acesso a seguir para especificar a acessibilidade de um tipo ou membro quando você o declarar:

public O tipo ou membro pode ser acessado por qualquer outro código no mesmo assembly ou em outro assembly que faz referência a ele.

private O tipo ou membro pode ser acessado somente pelo código na mesma classe ou struct.

protected O tipo ou membro pode ser acessado somente pelo código na mesma classe ou struct ou em uma classe derivada dessa classe.

internal O tipo ou membro pode ser acessado por qualquer código no mesmo assembly, mas não de outro assembly.

Uma classe static é basicamente o mesmo que uma classe não estática, mas há uma diferença: uma classe estática não pode ser instanciada. Em outras palavras, você não pode usar a palavra-chave new para criar uma variável do tipo de classe. Como não há nenhuma variável de instância, você acessa os membros de uma classe estática usando o próprio nome de classe.

Uma interface contém apenas as assinaturas de métodos e propriedades . Uma classe que implementa a interface deve implementar os membros da interface que estão especificados na definição de interface. 

A palavra-chave abstract permite que você crie classes e membros de classe que estão incompletos e devem ser implementados em uma classe derivada

O polimorfismo costuma ser chamado de o terceiro pilar da programação orientada a objetos, depois do encapsulamento e a herança. O polimorfismo é uma palavra grega que significa "de muitas formas" e tem dois aspectos distintos:

• Em tempo de execução, os objetos de uma classe derivada podem ser tratados como objetos de uma classe base, em locais como parâmetros de método, coleções e matrizes. Quando isso ocorre, o tipo declarado do objeto não é mais idêntico ao seu tipo de tempo de execução.

• Métodos virtuais e as classes derivadas podem substituí-los, o que significa que elas fornecem sua própria definição e implementação. Em tempo de execução, quando o código do cliente chama o método, o CLR procura o tipo de tempo de execução do objeto e invoca a substituição do método virtual. Dessa forma, você pode chamar em seu código-fonte um método de uma classe base e fazer com que a versão de uma classe derivada do método seja executada.

Os métodos virtuais permitem que você trabalhe com grupos de objetos relacionados de maneira uniforme. Por exemplo, suponha que você tem um aplicativo de desenho que permite que um usuário crie vários tipos de formas sobre uma superfície de desenho. Você não sabe em tempo de compilação que tipos específicos de formas que o usuário criará. No entanto, o aplicativo precisa manter controle de todos os diferentes tipos de formas que são criados e atualizá-los em resposta às ações do mouse do usuário. Você pode usar o polimorfismo para resolver esse problema em duas etapas básicas:

1. Crie uma hierarquia de classes em que cada classe de forma específica derive de uma classe base comum.

2. Use um método virtual para invocar o método adequado em qualquer classe derivada por meio de uma única chamada para o método da classe base.

Genéricos foram adicionados à versão 2.0 da linguagem C# e o common language runtime (CLR). Genéricos apresentam ao .NET Framework o conceito de parâmetros de tipo, que possibilitam a criação de classes e métodos que adiam a especificação de um ou mais tipos até que a classe ou método seja declarado e instanciado pelo código do cliente. Por exemplo, ao usar um parâmetro de tipo genérico T, você pode escrever uma única classe que outro código de cliente pode usar sem incorrer o custo ou corre o risco de conversões de tempo de execução ou operações de conversão boxing, conforme mostrado aqui:

// Declare the generic class.
public class GenericList<T>
{
    void Add(T input) { }
}
class TestGenericList
{
    private class ExampleClass { }
    static void Main()
    {
        // Declare a list of type int.
        GenericList<int> list1 = new GenericList<int>();

        // Declare a list of type string.
        GenericList<string> list2 = new GenericList<string>();

        // Declare a list of type ExampleClass.
        GenericList<ExampleClass> list3 = new GenericList<ExampleClass>();
    }
}

Script do Banco de Dados:

CREATE DATABASE [Blogging];
GO

USE [Blogging];
GO

CREATE TABLE [Blog] (
[BlogId] int NOT NULL IDENTITY,
[Url] nvarchar(max) NOT NULL,
CONSTRAINT [PK_Blog] PRIMARY KEY ([BlogId])
);
GO

CREATE TABLE [Post] (
[PostId] int NOT NULL IDENTITY,
[BlogId] int NOT NULL,
[Content] nvarchar(max),
[Title] nvarchar(max),
CONSTRAINT [PK_Post] PRIMARY KEY ([PostId]),
CONSTRAINT [FK_Post_Blog_BlogId] FOREIGN KEY ([BlogId]) REFERENCES [Blog] ([BlogId]) ON DELETE CASCADE
);
GO

INSERT INTO [Blog] (Url) VALUES
('http://blogs.msdn.com/dotnet'),
('http://blogs.msdn.com/webdev'),
('http://blogs.msdn.com/visualstudio')
GO

Comandos utilizados:

 Install-Package Microsoft.EntityFrameworkCore.SqlServer
 Install-Package Microsoft.EntityFrameworkCore.Tools
 Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design

Scaffold-DbContext "Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

Olá !

Primeiro ponto muito importante, assista esse vídeo para ajudar na compreensão do assunto abordado na :  https://www.youtube.com/watch?v=QJncFirhjPg

Complementando, a computação em nuvem tem se estabelecido nos últimos anos como uma importante plataforma de pesquisa que apresenta uma série vantagens e de estimulantes desafios. Tarefas como obtenção, compartilhamento, manipulação e exploração de enorme quantidade de dados são absolutamente comuns no cenário
atual, porém a execução das mesmas demanda um grande volume de recursos. 

A computação em nuvem pode contribuir com este cenário a medida que pode disponibilizar de forma indefinida recursos de processamento, memória, armazenamento, dentre outros, para utilização imediata.
A disponibilidade destes recursos agrega uma série de vantagens para as organizações e usuários, visto que preocupações com complexas instalações e manutenções de infra-estruturas deixam de existir e passam a ser de exclusiva responsabilidade dos provedores de serviços, além de possibilitar que os usuários
se concentrem exclusivamente nas regras dos negócios que lhes são pertinentes.

Este cenário de escalabilidade de serviços, processos e infra-estrutura quase ilimitados não possui precedentes e efetivamente melhora a flexibilidade relacionada a estruturas de tecnologia de informação (TI) bem como pode diminuir o custo total dos negócios pelo provimento de serviços sob demanda. 

EXERCÍCIO:

PASSOS:

• CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA QUE NO MOMENTO DO CARREGAMENTO DA PAGINA, SEJA ATRIBUÍDO UM VALOR QUALQUER PARA UMA VARIÁVEL.

• DISPARE TAMBÉM NO MOMENTO DO CARREGAMENTO DA PAGINA UM ALERTA COM O VALOR DA VARIÁVEL  ANTERIOR.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA REALIZAR OPERAÇÕES DE SOMA, MULTIPLICAÇÃO, DIVISÃO E SUBTRAÇÃO; (NÃO PRECISA UTILIZAR IF/ELSE)

• DISPARE O RESULTADO NUM ALERTA;

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA REPRESENTAR O USO DO OPERADOR TERNÁRIO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA SABER ENTRE DOIS NÚMEROS, QUAL DOS DOIS É O MAIOR.

• DISPARE O RESULTADO NUM ALERTA;

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA MONTAR UMA CALCULADORA SIMPLES UTILIZANDO O SWITCHCASE.

• DISPARE O RESULTADO VIA ALERT.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR VALORES DE UMA LISTA DE STRINGS UTILIZANDO FOR.

• DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR ENQUANTO UMA VARIÁVEL TIVER O VALOR MENOR QUE 10, USANDO  WHILE.

• DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR ENQUANTO UMA VARIÁVEL TIVER O VALOR MENOR QUE 10, USANDO DOWHILE

• DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNÇÃO EM JAVASCRIPT PARA DISPARAR UM ALERTA COM A DATA ATUAL.
• ADICIONE UM BOTÃO PARA CHAMAR ESSE MÉTODO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

• CRIE UMA FUNÇÃO EM JAVASCRIPT PARA LER UM ARRAY DE NÚMEROS ATÉ 10.
• ADICIONE UM BOTÃO PARA CHAMAR ESSE MÉTODO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO

EXERCÍCIO:

PASSOS:

 1 - BASEADO A AULA CRIE UM SCRIPT PARA APLICAR AUTOCOMPLETE EM UM CAMPO INPUT;

EXERCÍCIO:

PASSOS:

 1 - BASEADO A AULA CRIE UM SCRIPT PARA RETORNAR A QUANTIDADE DE SPAN DE UMA PAGINA;

EXERCÍCIO:

PASSOS:

 1 - ADICIONAR UMA LISTA (UL) E 5 ITENS DA LISTA(LI);

 2 - PARA CADA ITEM DA LISTA COLOCAR UM TEXTO QUALQUER;

 3 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO PRIMEIRO ITEM;

 4 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO ÚLTIMO ITEM;

5 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO 3 ITEM;

EXERCÍCIO:

PASSOS:

 1 - BASEADO A AULA, CRIE UM SCRIPT PARA RETORNAR O TEXTO DE ITENS QUE NÃO SÃO IMPARES, DE UMA SÉRIE DE 5 DIVS;

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR ATRAVÉS DE UM ALERTA O NOME DE UM ELEMENTO, NO QUAL ELE TÁ SENDO REFERENCIADO.

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA ADICIONAR UM VALOR QUALQUER PARA UMA DIV ATRAVÉS DO ÍNDICE ;

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR EM UM ALERTA UMA FRASE DENTRO DE UM PARAGRAFO.
• CRIE UM SCRIPT PARA ALTERAR UMA PALAVRA NO QUAL VOCÊ ESCOLHEU, MOSTRE ESSE RESULTADO NA PRÓPRIA PAGINA

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA LOCALIZAR TODOS OS ITENS DE UM PARAGRAFO INCLUINDO O PRÓPRIO PARAGRAFO. 

*Utilize o exemplo da própria aula.

<p>Então <strong>eu <span></span>realmente</strong> sou desenvolvedor web</p>

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA REMOVER UM ELEMENTO ESPECIFICO DENTRO DE UMA DIV 

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA DESABILITAR DINAMICAMENTE UM BOTÃO DE UMA PAGINA PELO ID DO BOTÃO. 
• COLOQUE  TODOS OS CHECKBOX E RADIO PARA SUA PAGINA CHECKED
• CRIE UM SCRIPT PARA VERIFICAR SE UM CHECKBOX ESTÁ CHECADO.

SUGESTÃO PARA HTML:

<input name="" value="" type="checkbox" />
<input name="" value="" type="radio" />

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA ATRIBUIR UM VALOR E RECUPERAR OS VALORES DOS ELEMENTOS ABAIXO:. 

<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />

<select id="s" name="s">

<option value="option1">option one</option>
<option value="option2">option two</option>
</select>

<select size="4" multiple="multiple">
<option value="option1">option one</option>
<option value="option2">option two</option>
<option value="option3">option three</option>
<option value="option4">option four</option>
</select>

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA REMOVER ITENS APÓS O CLICK DO USUÁRIO. 

SUGESTÃO DA LISTA:

<ul>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
</ul>

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT ADICIONAR DINÂMICAMENTE OUTROS BOTÕES AO CLIQUE EM UM LINK <A>. **UTILIZE O LIVE E AFTER

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT DEMONSTRAR A DIFERENÇA ENTRE EVENT.PREVENTDEFAULT E EVENT.STOPPROPAGATION

EXERCÍCIO:

PASSOS:

•   BASEADO A AULA, CRIE UM SCRIPT PARA CLONAR UM CAMPO INPUT DO TYPE = TEXT E OUTRO TEXTAREA.

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA CAPTURAR AS POSIÇÕES DE MOVIMENTOS DE DENTRO DE UMA DIV, COM BASE NO MOVIMENTO DO MOUSE. 

SUGESTÃO DE CÓDIGO PARA A DIV:

<div style="margin: 400px; height: 300px; width: 100px; background: #ccc; padding: 20px">

relative to this
</div>

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT NO ESTILO DA AULA PARA MOVIMENTAR O MENU NO FORMATO VERTICAL, UTILIZANDO O ANIMATE PARA DAR M EFEITO MAIS LENTO PARA A MOVIMENTAÇÃO APÓS O CLIQUE 

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR UM CONTADOR USANDO O SETINTERVAL LIMITANDO ATÉ O NUMERO 100.

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA INTERAÇÃO COM O USUÁRIO, QUE SEJA SEMELHANTE AO APRESENTADO NA AULA, UTILIZANDO O DIALOG

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA AO MOMENTO DO CLIQUE SEJA ACIONADO O EVENTO DE SLIDEUP E SLIDEDOWN, GARANTA QUE TENHA EFEITO DE ANIMAÇÃO.

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA MOVIMENTAR UMA DIV DE ACORDO COM O EXEMPLO CITADO NA AULA .

EXERCÍCIO:

PASSOS:

• BASEADO A AULA, CRIE UM SCRIPT PARA ESCONDER UMA DIV DE ACORDO COM O EXEMPLO CITADO NA AULA .

Nesta aula, você aprenderá os seguintes eventos: 

.blur()
.change()
.click()
.contextmenu()
.dblclick()

EXERCÍCIOS:

PASSOS:

• MONTE UM PEQUENO FORMULÁRIO COM DOIS CAMPOS INPUTS, DUAS OPÇÕES DE SELEÇÃO E UM BOTÃO; (IMAGINE PARA ESSE FORMULÁRIO UMA TELA DE LOGIN);
• COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:

  
  

  • CHANGE();
  • BLUR() e
  • CLICK()

**A resposta está em anexo

Nesta aula, você aprenderá os seguintes eventos:

event.currentTarget
event.data
event.delegateTarget
event.isDefaultPrevented
Event.isImmediatePropagationStopped

Nesta aula, você aprenderá os seguintes eventos:

event.isPropagationStopped()
event.pageX
event.preventDefault()
Event.relatedTarget
event.result

EXERCÍCIOS:

PASSOS:

• MOSTRE NO CARREGAMENTO DA PAGINA AS MOVIMENTAÇÕES DO MOUSE, USANDO O EVENTO - EVENT.PAGEX.
• ATRAVÉS DE UM EXEMPLO DIFERENCIE O USO DO ISPROPAGATIONSTOPPED E EVENT.PREVENTDEFAULT()

**A resposta está em anexo

Nesta aula, você aprenderá os seguintes eventos:

event.target
event.timeStamp
event.type
event.which
.focus()

EXERCÍCIOS:

PASSOS:

• MONTE UM PEQUENO FORMULÁRIO COM UM CAMPO INPUT E UM BOTÃO;
• COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:
  • EVENT.TARGET;
  • EVENT.TYPE() e
  • FOCUS()

**A resposta está em anexo

Nesta aula, você aprenderá os seguintes eventos:

.focusin()
.hover()
.keydown()
.keypress()
.mousedown()

EXERCÍCIOS:

PASSOS:

• MONTE UM PEQUENO FORMULÁRIO COM UM CAMPO INPUT E UM BOTÃO;
• COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:
  • KEYDOWN();
  • KEYPRESS() e
  • FOCUSIN()

**A resposta está em anexo

Nesta aula, você aprenderá os seguintes eventos:

.mouseenter() 
.resize()
.scroll()
.select()
.submit()
.toggle()
.trigger()

EXERCÍCIOS:

PASSOS: