APRESENTAÇÃO E BREVE CONSIDERAÇÃO

A disciplina de técnica de linguagem de programação nesta classe aborda uma nova

linguagem de programação de alto nível e os modelos de programação POO muita
utlizada actualmente em desenvolvimento de software.
O que é HTML? – É uma linguagem de marcação que serve para dar significado e
estrutura ao conteúdo web, como, por exemplo, definir cabeçalhos, parágrafos, fazer
referências ou inserir imagens e vídeos.
O que é CSS? – É uma linguagem de folha de estilos, que tem o papel de tornar uma
página apresentável na web, relacionada diretamente com o design e aparência.

O que é PHP? – É uma linguagem de programação para páginas. Com ela, você
desenvolver sites dinâmicos, extensões de aplicações e agilizar o processo de
desenvolvimento de um sistema.
O que é JavaScript? – É uma linguagem de programação de comportamento que permite
a criação de conteúdos dinâmicos, controle de mídias e animações para deixar seu site
mais interativo e interessante.

HISTÓRIA DA INTERNET
Há 40 anos, enquanto os principais meios de comunicação eram o telégrafo e o telefone,
os computadores eram grandes máquinas que realizavam cálculos e armazenavam
informações. De forma geral, seu uso tinha fins exclusivamente científicos e
governamentais.

Cf Em 1957, os Estados Unidos e a União Soviética protagonizavam a Guerra Fria, um

embate em termos ideológicos, econômicos, políticos, militares e tecnológicos.

O governo dos Estados Unidos na época temia um ataque russo as bases militares. Um
ataque que poderia trazer a público informação sigilosas, tornando os Estados Unidos
vulneráveis. Então foi idealizado um modelo de troca e compartilhamento de informação
que permitisse a descentralização das mesmas. As inovações que tentaram resolver esse
problema levaram ao que conhecemos hoje como Internet.
Em 1958, um ano após o lançamento do primeiro satélite artificial da história, o Sputnik
1, pela URSS, os Estados Unidos criaram a DARPA (Defense Advanced Research
Projects Agency,ou Agência de Projetos de Pesquisa Avançada de Defesa, em português).
A DARPA é fundamental na história da Internet, uma vez que foi responsável pela
pesquisa e desenvolvimento de novas tecnologias para fins defensivos e militares, entre
elas, a rede de computadores.
Em 1961, Leonard Kleinrock apresentou sua teoria de comutação de pacotes sua tese de
doutorado no MIT.Ele alegava que dois servidores poderiam se comunicar para enviar e
receber informações transportadas por pacotes por meio de uma rede de nós.
Esses pacotes podiam seguir caminhos diferentes, dependendo da saturação da rede, e ser
refeitos na chegada ao destino.

Já em 1962, J. C. R Licklider, chefe da DARPA e pioneiro da Internet, descreveu o

conceito de uma rede galáctica para acessar rapidamente dados de qualquer lugar do
mundo.
De forma independente, Paul Baran trabalhou na comutação de pacotes na RAND
Corporation. Em 1962, ele apresentou um sistema de comunicações que, por meio de
computadores conectados a uma rede descentralizada
ARPANET

Em 29 de Outubro de 1969 ocorreu a transmissão do que pode ser considerado o primeiro

E-mail da história. O texto desse primeiro e-mail seria "LOGIN", conforme desejava o
Professor Leonard Kleinrock da Universidade da Califórnia em Los Angeles (UCLA),
mas o computador no Stanford Research Institute, que recebia a mensagem, parou de
funcionar após receber a letra “O”.

A conexão por nós foi tão bem-sucedida que, meses depois, quatro universidades
americanas já estavam interconectadas assim nasceu a ARPANET. A ARPANET
funcionava através de um sistema conhecido como chaveamento de pacotes, que é um
sistema de transmissão de dados em rede de computadores no qual as informações são
divididas em pequenos pacotes, que por sua vez contém:

• trecho dos dados

• o endereço do destinatário
• informações que permitiam a remontagem da mensagem original.

O cientista Tim Berners-Lee criou a World Wide Web, a linguagem HTML e o

protocolo HTTP em 1992. Essa linguagem simples, mas eficiente, era usada para a criação
dos sites com o conceito de hipertexto (documentos ligados entre si). A empresa norte-
americana Netscape criou o protocolo HTTPS (HyperText Transfer Protocol Secure),
possibilitando o envio de dados criptografados para transações comercias pela internet.

MODELO CLIENTE E SERVIDOR

O servidor é a máquina responsável por disponibilizar recursos e serviços, atendendo as
solicitações dos demais dispositivos da rede

O cliente é um elemento que beneficia se dos recursos e serviços disponibilizados pelo

servidor por intermédio das respostas as suas solicitações
Uma estrutura cliente-servidor é um modelo de arquitetura de rede em que um programa
de computador (cliente), solicita um serviço ou recurso de outro programa de computador
(servidor), recebendo uma resposta com as informações solicitadas por meio de
protocolos de rede em infraestruturas de TI.
DESENVOLVIMENTO WEB
Existem basicamente duas camadas quando se trata de desenvolvimento web: Front-end
e Back-end. A camada de front-end é onde fica a estrutura HTML, as regras CSS e os
comandos JavaScript, ou seja, tudo que é apresentado para os usuários. Essa camada
também é chamada de client-side. Na camada de back-end pode ter várias tecnologias
diferentes, como: PHP, Java, Ruby, Python, entre outras, dependendo dos objetivos do
site e “a própria opção do programador” (também chamada de server-side).
Por exemplo: ao criar um script em linguagem back-end que apenas calcula a soma de
2+2, será o servidor (back, server) que calculará esse resultado. Se o mesmo cálculo for
feito em alguma linguagem front-end, como JavaScript, por exemplo, quem calculará será
o navegador (front, client, browser) do usuário. Por isso o termo client ou server.
Assim, os profissionais que trabalham na interface do usuário, são chamados de
Desenvolvedores Front-end, e aqueles que trabalham no core da aplicação, fazendo uma
programação que somente o servidor irá entender, são chamados de Desenvolvedores
Back-end.

Front-end (client-side)
As linguagens client-side são linguagens onde apenas o navegador vai entender. Quem
vai processar essa linguagem não é o servidor, mas sim o browser (navegador web).

• Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup

Language) cria a estrutura do layout da página: determina em quantos “blocos” a
página será dividida, se terá cabeçalho, rodapé, menus.

• Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) cria a apresentação

da página: toda formatação é feita através de regras CSS. Através de CSS se
posiciona todos os elementos na página, se colore, se formata.

• JavaScript é a linguagem de programação que você usa para adicionar recursos

interativos ao seu site.

O desenvolvimento client-side é baseado em 3 camadas principais: informação,

formatação e comportamento. As camadas possibilitam o desenvolvimento independente
de cada área da produção. Se quisermos modificar o design, podemos fazê-lo
manipulando apenas o CSS, sem se preocupar com HTML, Javascript ou programação
server-side.

Back-end (server-side)
As linguagens server-side são linguagens que o servidor entende, ou seja, é o código que
o servidor vai processar e depois vai mandar para o navegador alguma resposta, algum
retorno. As linguagens usadas no server-side, como por exemplo são: PHP, Java, Ruby,
Python, podem ser usadas para sites que precisam, por exemplo, acessar um Banco de
Dados (BD), sites que precisam ter algum tipo de serviço (web service) etc.

INTRODUÇÃO A HTML
Foi criada por Tim Berners-Lee, quando trabalhava no CERN (Centro Europeu de
Pesquisa Nuclear), na Suíça. Lee também criou na mesma época o protocolo HTTP e a
World Wide Web, enquanto procurava uma solução para compartilhamento de arquivos
no centro.
O HTTP é o protocolo de rede que permite a transferência de arquivos, ao passo que a
World Wide Web (WWW) é o sistema que cataloga e permite compartilhar documentos
por meio do HTTP.

Estrutura de um elemento html

A HTML consiste de uma série de elementos, que você usa para delimitar ou agrupar
diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As
tags anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar
palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo,
veja a seguinte linha de conteúdo

Na imagem acima, perceber-se o uso da tag para a criação de um parágrafo simples. A

maioria das tags possuem uma abertura e um fechamento, e você identifica isso pela
presença da barra no fechamento da tag. Entretanto, algumas tags não possuem a
necessidade de conteúdo interno e por isso não possuem fechamento. É o caso, por
exemplo, as tags <img> e <br>
Atributos em são palavras especiais usadas dentro da tag de abertura para controlar o
comportamento do elemento. Com eles podemos identificar melhor um elemento,
informar qual arquivo aquela tag deve utilizar, indicar o tipo de um campo de texto e etc.

Os atributos são classificados em dois tipos que são atributos globais são aqueles que
são aceites por todos os tipos de tag, como id, class e style. Atributos específicos são
aqueles que só podem ser utilizadas por alguma tag especifica como src, href e disabled
Estrutura de um documento html

Um documento HTML, deve-se sempre escrever a estrutura básica de um documento

desse formato, em um arquivo com extensão ponto html como exemplo index.html.

• Linha 1: indica que o documento atual será escrito na versão mais atualizada da
• linguagem (no caso, HTML5)
• Linhas 2 e 11: delimitam o documento HTML, que é sempre dividido em duas
• partes: a cabeça e o corpo. Na linha 2, também estamos indicando que o conteúdo
desse site será no idioma Português do Brasil.
• Linhas 3 e 7: delimitam a cabeça da página, local onde são realizadas algumas
• configurações iniciais como formatos, estilos, ícone de favoritos, etc.
• Linha 4: adiciona ao documento atual o suporte a caracteres acentuados.
• Linha 5: indica que o conteúdo aparecerá, por padrão, ocupando todo o espaço
disponível da tela
• Linha 6: configura o título da página, que aparecerá como identificação da aba
do navegador, ao lado do favicon.
• Linhas 8 e 10: delimitam o corpo da página, a maior porção do site, que vai
aparecer na tela. É aqui onde colocaremos todo o nosso conteúdo.
 Instalação e configuração de ferramentas

Um editor HTML é um software que ajuda as pessoas a criar, editar e organizar código
HTML. Ele simplifica o processo, oferecendo recursos como destaque de sintaxe, auto-
completar e pré-visualização, tornando mais fácil para qualquer pessoa, desde iniciantes
até profissionais, desenvolver sites e páginas da web com eficiência.
As características mais comuns de um bom editor HTML são:

Realce de sintaxe diferencia as tags HTML em diferentes cores com base em suas
categorias, tornando mais fácil ler e reconhecer a estrutura do código.
Auto-completar sugere automaticamente elementos e atributos HTML com base nos
valores digitados anteriormente.
Detenção de erros. verifica erros de sintaxe sempre que você digita algum código
incorretamente, para que o erro seja corrigido imediatamente.

Integração FTP conecta seu servidor web a um cliente FTP diretamente do painel.
Dobramento de código oculta uma seção do código e se concentra em partes
específicas do documento HTML.

• Notepad ++
• Sublime Text
• Visual Studio Code

Existem no mercado diversos software que fazem essa função, cada um com suas
características. Cabe ao profissional analisar qual se encaixa melhor no seu perfil e
necessidades.

OBS: o recomendado para um iniciante é um editor de texto simples.

Instalação do Visual Studio Code

Visual Studio Code é um editor de código criado pela Microsoft e que tem uma grande
adoção pelas comunidades de diversas linguagens e tecnologias.
A instalação do VS Code no Windows é relativamente simples, basta acessar o site oficial
do Visual Studio Code e fazer o Download da sua última versão, clicando no botão
"Download for Windows" link de acesso https://code.visualstudio.com/ Em seguida,
execute o instalador baixado e siga as instruções na tela.
OBS:O Visual Studio Code também esta disponível para sistema Linux e MacOS, e
nas versões de 64bit e 32bit.

Viewport

A janela de visualização (Viewport) é a área visível do usuário em uma página da web.

A janela de visualização varia de acordo com o dispositivo e será menor em um telefone
celular do que na tela de um computador.

Configuração da Viewport

O HTML5 introduziu um método para permitir que os webs designers assumam o

controle da janela de visualização, por meio da <meta> tag.

No código acima incluiu-se na linha 6 a <meta> Viewport, responsável por fornecer as

instruções ao navegador sobre como controlar as dimensões e o dimensionamento da
página
A width=device-width - define a largura da página para seguir a largura da tela do
dispositivo (que varia dependendo do dispositivo).

A initial-scale=1.0 - define o nível de zoom inicial quando a página é carregada pela

primeira vez pelo navegador.
Web Design Responsivo

Antes dos tablets e celulares, as páginas da web eram projetadas apenas para telas de
computador, e era comum que as páginas da web tivessem um design estático e um
tamanho fixo. Então, quando começamos a navegar na Internet usando tablets e telefones
celulares, as páginas da web de tamanho fixo eram grandes demais para caber na janela
de visualização. Para corrigir isso, os navegadores nesses dispositivos reduziram a página
inteira da web para caber na tela.

É chamado de web design responsivo quando se usa CSS e HTML para redimensionar,
ocultar, reduzir, ampliar ou mover o conteúdo para que fique bem em qualquer tela.
Vantagens

• Boa experiência do usuário: web design responsivo é especialmente projetado

para responder de acordo com o comportamento do cliente ou usuário e suas
necessidades, de acordo com o tamanho da tela.

• SEO amigável: sites responsivos são geralmente responsáveis pela classificação

superior em SEO (Search Engine Optimization).O Google favorece websites
responsivos e, sobretudo quando a busca é feita via dispositivo móvel, dá
preferência a esses sites. Uma das atualizações do Google de 2015, por exemplo,
ganhou o carinhoso apelido de Mobilegeddon (Mobile + Armageddon). A
intenção do Google era favorecer os sites que são responsivos ou que já tinham
uma versão mobile em detrimento aos outros.

• Alcance aos usuários: o alcance e maior, porque não só atende os usuários em

computadores convencionais, mais também aos novos usuários com plataformas
mobile, que vem surgindo.

• Facilita a gestão: atualizações de conteúdo estáticos e manutenção só precisam

ser feitas uma vez, em um único site.

• Foco no que interessa: a experiência do usuário pode ser otimizada, ao esconder

conteúdo menos relevantes na versão mobile.
Desvantagem

• Desempenho: os navegadores carregam todo conteúdo de um arquivo, mesmo

o que não esta a ser exibido na tela. Caso o site não seja desenvolvido da
melhor forma possível torna o carregamento da página muito lenta.

• A navegação é difícil: sites responsivos são especialmente projetados para

caber em dispositivos pequenos. Mas manter a simplicidade de grandes sites
para pequenos dispositivos às vezes se torna difícil.

Media Queries

Media Queries é um recurso do CSS 3 que permite que a renderização do conteúdo

que se adapte a diferentes condições, como a resolução da tela. Tornou-se um padrão
recomendado pelo W3C em junho de 2012, e é uma tecnologia fundamental de web
design responsivo.
Sintaxe

Existem dois tipos de seguimento de @media que são: Para as impressoras se usa print
e para leitores de tela se usa screen
 ou

O código a baixo se aplica apenas a telas iguais ou maiores que 600 pixels de largura,
quando ter uma tela desta especificação vai mudar a color do título em azul.
JAVA SCRIPT
Definição
JavaScript é uma linguagem de programação de alto nível, interpretada, que permite a
criação de conteúdos dinâmicos, controle de mídias e animações, que torna o seu site mais
interativo e interessante para o usuário.

Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da
World Wide Web. JavaScript permite páginas da Web interativas e, portanto, é uma parte
essencial dos aplicativos da web. A grande maioria dos sites usa, e todos os principais
navegadores têm um mecanismo JavaScript dedicado para executá-lo.
História
A história do JavaScript teve sua origem bem no início da internet, no decorrer destes
principais eventos. com o surgimento do primeiro navegador Netscape que se tornou um
dos navegadores mais popular do início dos anos 90, de mesmo nome, criou o Livescript,
uma linguagem simples que permitia a execução de scripts contidos nas páginas dentro
do próprio navegador.
Em 1993 - o Centro Nacional de Aplicações de Supercomputação (NCSA), uma unidade
da Universidade de Illinois lançou o NCSA Mosaic, o primeiro navegador gráfico popular
da Web.

Em 1994 Marc Andreessen que trabalhou no NCSA, se juntou com Jim Clark, fundador
da Silicon Graphics, criaram a empresa Mosaic Communications, logo foi rebatizada para
Netscape Communications. O sucesso foi imediato e a empresa recém-fundada passou
a dominar o mercado de navegadores.

Em 1995, a Netscape recrutou Brendan Eich com objectivo de criar uma linguagem
capaz de dar mais funcionalidade ao HTML. Eich criou a linguagem JavaScript,
originalmente desenvolvido sob o nome Mocha, a linguagem foi oficialmente chamada
de LiveScript quando foi lançada em versões beta do navegador da Netscape 2.0 em
setembro de 1995, mas foi renomeada para JavaScript.

OBS: JavaScript e Java não são mesma linguagem, Apesar de possuírem nome
parecido, não são a mesma coisa. Devido o sucesso e a popularidade da linguagem
java, desenvolvida pela Sun Microsystem, a Netscape decidiu renomear a sua
linguagem LiveScript para JavaScript, como uma jogada de Marketing.
Em 1996, a Microsoft criou uma linguagem idêntica para ser usada no Internet Explorer.
(Jscript).

Em 1997 a Netscape então regularizou a linguagem através da organização internacional

ECMA (European Computer Manufacturer’s Association) devido a questões relacionadas
à marca registrada, a versão padronizada chama – se ECMAScript.
 Versões

JavaScript surgiu há 28 anos e já teve várias versões que são:

Versão Data da publicação Descrição e Funcionalidade
1.0 Março de 1996 Primeira Versão
1.3 Outubro de 1998 Primeira versão na forma padronizada
ECMA
ES2005 2005 array.map (), reduce () JSON e string;
ES2006 2006 variáveis constantes pela palavra const
ES2007 2007 Array.includes () e operador exponencial: ‘**
ES2007 2008 Object, String. e assíncrona
ES2020 2020 Importação dinâmica, BigInt e Promise
ES2021 2021 Melhoria nos recursos anteriores como
promise
ES2022 2022 última versão

Características da linguagem

• Simplicidade ‒ tem uma estrutura simples que o torna fácil de aprender e implementar,
além de rodar mais rápido do que algumas outras linguagens. Os erros também são
fáceis de detectar e corrigir.
• Velocidade ‒ executa scripts diretamente no navegador da web sem se conectar a um
servidor primeiro ou precisar de um compilador. Além disso, a maioria dos principais
navegadores permite que o JavaScript compile códigos durante a execução do
programa.
• Versatilidade – é compatível com outras linguagens como PHP, Perl e Java.
• Popularidade ‒ muitos recursos e fóruns estão disponíveis para ajudar iniciantes com
habilidades técnicas limitadas.
• Carga do servidor ‒ reduz as solicitações enviadas ao servidor. A validação de dados
pode ser feita através do navegador da web e as atualizações se aplicam apenas a
determinadas seções da página da web.

Inserir código JavaScript no HTML

Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três
primeiras,

por ser mais comum:

• Entre as tags <script></script> dentro do código HTML.

• A partir de um arquivo externo.
• Em atributos de tratamento de eventos HTML.
• Em uma URL que use o protocolo especial JavaScript
 Figura 1 - Inserir JavaScript em HTML

• Na linha 6 a 9, delimitam a tag <script>, que está dentro da tag head neste caso
o JavaScript é executado antes da página ser exibida.
• Na linha 14 a 18, delimitam a tag <script>, que está dentro da tag body neste
caso o JavaScript é executado durante a exibição, na ordem em que aparecer
dentro do arquivo
• Na linha 20 a 23, delimitam a tag <script>, que também está dentro da tag body
na tag de abertura na linha 20 contém o atributo src = "assets/js/script.js" que
especifica a URL de um arquivo contendo código JavaScript com extensão.js

Script em arquivo externo

A marcação <script> suporta um atributo src (source), que especifica a URL de um
arquivo contendo código JavaScript. Por convecção, os arquivos JavaScript têm nomes
que terminam com a extensão .js.
 A sintaxe é:

<script src="nome e caminho do arquivo "></script>

No editor de código, no nosso caso o vscode, por pratica de organização de arquivos do
site, todos os arquivos JavaScript colocamos dentro da pasta JS.

Saída no console

Para ver o resultado deve-se abrir o console do navegador, com um clique na tecla
F12.

Comando de entrada e saída

O método alert() exibe uma caixa de alerta com uma mensagem e um botão OK. É usado
quando você deseja que as informações cheguem ao usuário
O método confirm() exibe uma caixa de diálogo com uma mensagem, um botão OK e
um botão Cancelar. Retorna true se o usuário clicou em “OK”, caso contrário false.

O método prompt() exibe uma caixa de diálogo que solicita entrada do usuário. Retorna
o valor de entrada se o usuário clicar em “OK”, caso contrário retorna null.

Figura 2 - Alert resultado

Figura 3 - confirm Resultado

 Figura 4- prompt Resultado

O método write() escreve um texto diretamente na pagina do site. O texto e incorporado

no fluxo do HTML.

Comentários
JavaScript aceita dois tipos de comentários o de linha e de bloco

VARIÁVEIS EM JAVASCRIPT

Variável é um espaço na memória do computador que serve para guardar dados.

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, a palavra
nome é diferente da palavra Nome ou NOME, ou seja, maiúscula e minúscula fazem
diferença.
Manipulação

Quando você declara uma variável fora de qualquer função, ela é chamada de variável
global, porque está disponível para qualquer outro código no documento atual.

Quando você declara uma variável dentro de uma função, é chamada de variável local,
pois ela está disponível somente dentro dessa função.

Forma de Declarações

Existem três tipos de declarações de variáveis em JavaScript que são:

var - declara uma variável, inicializada com um valor. Exemplo:

let - declara uma variável local de escopo do bloco, inicializada com um valor.
Exemplo:

const - declara uma constante de escopo de bloco, apenas de leitura. Exemplo:

Diferença na forma de declarações

A declaração de var tem escopo global ou de função, enquanto as declarações de let e de

const têm escopo de bloco.
Variáveis de var podem ser atualizadas e declaradas novamente dentro de seu escopo.

As variáveis do tipo let podem ser atualizadas, mas não podem ser declaradas novamente.
As variáveis do tipo const não podem ser atualizadas nem declaradas novamente.
As variáveis do tipo var e let podem ser declaradas sem ser inicializadas, já o const
precisa da inicialização durante a declaração.
Tipos de dados
JavaScript possui tipos dinâmicos. Isso significa que a mesma variável pode ser usada
para armazenar diferentes tipos de dados: Exemplo

• Na linha número 1 a variável nome é atribuída valor entre aspas duplas “Ana”,
é considerada uma variável do tipo String.
• Na linha número 2 a variável idade é atribuída o valor número 23, é
considerada uma variável do tipo numérico.
 • Na linha número 3 a variável estudante é atribuída o valor true, é considerada
como uma variável do tipo Boolean.

JavaScript tem os principais tipos primitivos de dados

• String – qualquer valor dentro das aspas duplas ou simples.

• Numérico – qualquer tipo de número inteiro 42 ou decimal 3.14159.
• Booleano – recebe valor verdadeiro(true) ou falso(false)
• Indefinido - uma propriedade superior cujo valor é indefinido.
• Nulo - uma palavra-chave (null) que indica valor nulo.
• Objeto - O construtor Object
• Array - é uma variável especial que pode conter mais de um valor

Podemos saber o tipo das nossas variáveis declaradas utilizando o operador typeof,
que retorna uma string indicando o tipo da variável

Utilizando o console.log podemos ver o resultado:

 Operadores
Os operadores vão nos permitir fazer operações matemáticas, de comparação e lógicas.
Tem os seguintes operadores

Operador de Atribuição
O Operador de Atribuição = atribui um valor a uma variável.

Operadores Aritméticos
Para as operações matemáticas básicas são utilizados os seguintes, adição (+), subtração
(-), multiplicação (*), divisão (/) resto (%) e potencia (**).

Operador Nome Exemplo

+ Adição 6 + 4 = 10
- Subtração 6–2=4
/ Divisão 6/2=3
* Multiplicação 6 * 2 = 12
% Resto ou Módulo 7%2=1
** Potencia 3 ** 2 = 9
Podemos fazer as operações desta forma.

Para ver o resultado das operações realizadas, por meio do console.

Auto - atribuição de variável

Podemos fazer autoatribuição de seguinte forma.

Operador Exemplo
Auto -atribuição Forma simplificada
+ n = n +1 n +=1
- n=n–3 n–=3
/ n=n/2 n /= 2
* n=n*2 n*=2
% n=n%2 n %= 2
** n= n ** 2 n ** = 2

Incremento e Decremento

O operador de incremento (++) incrementa um número.

O operador de decremento (--) diminui um número.

Operador Exemplo
Auto - atribuição Forma Incremento Decremento
simplificada
+ n = n +1 n +=1 n ++
- n=n–1 n–=1 n--

Operadores Relacionais

Operadores de comparação são usados em declarações lógicas para determinar igualdade

ou diferença entre variáveis ou valores. Operadores de comparação são usados para
testar se a operação e true ou false

Operador Nome Exemplo Resultado

== Igual 10 == 10 true
> Maior que 10 > 6 true
< Menor que 10 < 4 false
>= Maior ou igual 3 >= 3 true
<= Menor ou igual 5 <= 6 true
!= Diferente 3!= 2 true Exemplo:
O resultado de um operador relacionais é um valor booleano.

Operadores logico
Operadores lógicos são usados para determinar a lógica entre variáveis, valores, conjunto
de variáveis ou conjunto de valores. As operações retornam valores booleano.

Os operadores lógicos são:

• && (“e”)
• || (“ou”)
• ! (negação)
O “e” vai retornar o valor booleano true quando ambas as proposições, ambas forem
verdadeiras. Se pelo menos uma delas for falsa, o resultado é false.

A principal diferença para o “e” é que, no “ou” basta uma das proposições estar
verdadeira que o resultado impresso é true.
A negação vai simplesmente inverter o valor booleano da proposição. Ou seja, se a
proposição tem o valor true, a negação vai inverter para false, e vice-versa.

Operador Condicional (Ternário)

Atribui um valor a uma variável com base em alguma condição.
Sintaxe
variavelname = (condição) ? value1:value2
Exemplo:

• Na linha 3 – declaramos um variável resultado que pode receber dois valores

"aprovado" ou "reprovado" com base na condição feita no valor da variável nota
declarada na linha 2.

• Na linha 4 mostra o resultado no console do navegador tecla F12 para abrir o

console no navegador
ESTRUTURAS DE CONDIÇÃO
As estruturas condição permitem avaliar uma condição e, a partir dela, executar diferentes
linhas de código e alteram o fluxo de execução do programa.
Em JavaScript temos as seguintes declarações condicionais:

• if - para especificar um bloco de código a ser executado, se uma condição

especificada for verdadeira
• else - para especificar um bloco de código a ser executado, se a mesma condição
for falsa
• else if - para especificar uma nova condição a ser testada, se a primeira condição
for falsa
• switch - para especificar muitos blocos alternativos de código a serem executados

Nota: if está em letras minúsculas. Letras maiúsculas (If ou IF) gerarão um erro de
JavaScript.
Estrutura condição simples
As condições simples são aquelas em que é preciso declarar apenas o que será executado
caso a condição definida seja satisfeita, ou seja se o retorno da condição for falso, sua
execução é apenas encerrada e executada se uma condição for verdadeira.
A sintaxe da condição simples é apresentada da seguinte forma:

if (condição) {
bloco para condição 'true';
}
Se a idade for superior ou igual a 18, e executada a linha numero 11 “Maior de idade ”,
caso for inferior a execução e apenas encerada
Estrutura condição composta
As condições compostas são aquelas que permitem executar duas possibilidades caso a
condição testada verdadeira e falso. Essa segunda possibilidade é representada pelo
comando ‘else’, que é declarado após o fechamento do primeiro caso.

A sintaxe da condição composta é apresentada da seguinte forma:

if (condição) {
bloco para condição 'true';
} else {
bloco para condição 'false';
}
Se a idade for inferior a 18, e executada a linha numero 6 “Menor de idade ”, caso
contrário e executada a linha numero 4 , “Maior de idade”:

switch – múltiplas escolhas

Switch é a instrução usada para executar diferentes ações com base em diferentes
condições. A sintaxe da condição composta é apresentada da seguinte forma:

switch(var) {
case valor1:
comandos
break;
case valor 2:
comandos
break;
default
comandos
}
Este exemplo usa a simulação de clique de teclado a mensagem e apresentada caso o
valor da variável for correspondente a cada case

ESTRUTURAS DE REPETIÇÃO
As estruturas de repetição permitem executar mais de uma vez um mesmo trecho de
código. Trata-se de uma forma de executar blocos de comandos somente sob
determinadas condições, mas com a opção de repetir o mesmo bloco quantas vezes for
necessário.
JavaScript oferece suporte a diferentes tipos de estrutura de repetição:

• while- percorre um bloco de código enquanto uma condição especificada é

verdadeira
• do/while- também percorre um bloco de código enquanto uma condição
especificada é verdadeira
• for- percorre um bloco de código várias vezes
• for/of- percorre os valores de um objeto iterável
• for/in- percorre as propriedades de um objeto

OBS: no JavaScript tem mais de três tipos de instruções de repetição, falaremos

apenas dos três tipos citados que possuem uso genérico.

while
A instrução while é uma estrutura de repetição que utiliza uma estrutura condicional
para verificar se a repetição deve ou não continuar enquanto a condição de teste
for avaliada como verdadeira
Para executar uma instrução while, o interpretador primeiramente avalia a condição. Se
o valor da expressão é falso, o interpretador pula a instrução que serve de corpo do laço
e vai para a instrução seguinte no programa. Se, por outro lado, a expressão é verdadeira,
o interpretador executa a instrução
A sintaxe da instrução while é apresentada da seguinte forma:

while(condição) {
instrução
}

Ex: Repetiçao

Na linha número 2 primeiro inicializamos uma variável i = 0 como contador, na linha 3 a

7 é declarada o bloco de repetição enquanto a variável contador for menor ou igual a 3 a
instrução vai ser executada.
Saída do resultado código:

Do while
O laço do/while é como um laço while, exceto que a expressão do laço é testada no final
e não no início do laço. Isso significa que o corpo do laço sempre é executado pelo menos
uma vez. A sintaxe é:

do {
instrução

} while(condição)

Ex: Estrutura de repetição do while

For
A instrução for fornece uma construção da estrutura de repetição frequentemente mais
conveniente do que a instrução while. A instrução for simplifica os laços que seguem um
padrão comum. A maioria dos laços tem uma variável contadora de algum tipo. Essa
variável é inicializada antes que o laço comece e é testada antes de cada iteração do bloco
de repetição. A variável contadora é incrementada ou atualizada no final do corpo da
estrutura de repetição.

for (inicialização; condição; incremento) {

instrução

Saída do resultado código:

Array
Um array é uma variável especial que pode conter mais de um valor. A sua sintaxe será:

var array_nome = [elemento1, elemento2, elemento3 . . .]

Ex:

Porque usar array?

Se você tiver uma lista de elemento (uma lista de nomes de pessoas, por exemplo), podes
armazenar os nomes em variáveis únicas, poderia ser assim:
E se você não tivesse 4 pessoas, mas 500? A solução seria criar A solução um array que
pode conter muitos valores sob um único nome e você pode acessar os valores referindo-
se a um número de índice.

Forma de criar um array

Pode-se criar um array em JavaScript de duas formas que são: da forma literal e da forma
construtora.
Forma literal
Esta é maneira mais fácil de criar um array, que é simplesmente uma lista de elementos
de array separados com vírgulas dentro de colchetes [ ]. Por exemplo:

OBS: a sintaxe de array literal permite uma vírgula opcional à direita; portanto, [ ,
, ] tem apenas dois elementos, não três.
Forma construtora
Esta forma utiliza-se o operador new na forma de objecto.

Ler e adicionar elemento

Um elemento de um array pode ser acessado com o operador [ ] e deve-se passar o
número do índice que representa a posição do elemento dentro do array. Os elemenros de
um array são contados a partir do número 0 (zero), portanto, o índice 0 representa o
primeiro elemento do array. Essa sintaxe pode ser usada tanto para ler como para
adicionar o valor de um elemento de um array. Exemplo:

Propriedade length
A propriedade length de um array retorna o comprimento de um array, ou seja, o número
de elementos do array
O resultado e igual a 4 que corresponde ao número total de elemento dentro do nosso
array.

Iteração em arrays
A maneira mais comum de iterar através dos elementos de um array é com uma estrutura
de repetição for.

Na linha número 2 é criada o nosso array que contem um conjunto de nomes. Na linha
seguinte a 5 linha delimitam a estrutura de repetição for, na condição da estrutura da
obtém-se o comprimento do array pele instrução nomes.length com ela é possível
percorrer e mostrar os nomes pela console repetidamente a linha número 4.

For/of
Outra forma de percorre os valores do array é pela instrução for/of que pode ser feita da
seguinte forma.

O for/of é uma estrutura de repetição que permiti que possibilita percorrer um array de
forma mais simples e de mostrar os valores.
 For/in

A ordem do índice depende da implementação e dos valores da matriz. É recomendável

utilizar esta estrutura apenas no caso de se obter os o índice ou posição dos valores do
array.

Métodos de localização e pesquisa de array

Existem diferentes métodos que facilitam localizar e pesquisar um elemento dentro de
um array. Os mais utilizados são: indexOf(), lastIndexOf() e includes()

• indexOf e lastIndexOf

O método indexOf ele procura um valor de elemento em um array e retorna sua posição.
Exemplo:

No exemplo acima na linha número 2 foi criada o array lista de nomes, na linha seguinte
é criada uma variável posicao que recebe o valor da posição a partir do retorno do método
indexOf pós verificar se existe dentro do array o nome “Bela”. Neste caso o método
retorna o valor 2 a posição do nome “Bela” como mostra o resultado da imagem seguinte:

Caso o valor (elementos) não for encontrado o método retorna -1

O método lastIndexOf é igual ao método indexOf(), mas retorna à posição da última
ocorrência do elemento especificado. Exemplo:
A última ocorrência do elemento especificado “Maria “dentro do nosso array esta na
quarta posição, ou seja, o valor da variável declarada na linha número 3 é igual a 4.

• includes

Este método permite verificar se um elemento está presente em um array (incluindo NaN,
ao contrário de indexOf), o método sempre retorna um valor booleano. Exemplo:

No exemplo acima verificou-se o nome “Maria” dentro do array e o método retornou true
(verdadeiro), caso contrário o valor e false (falso).

Métodos
JavaScript tem ainda diferentes tipos de métodos que facilitam a manipulação de array

Métodos Descrição
pop() remove o último elemento de um array
push() adiciona um novo elemento a um array (no final):
filter() Cria um novo array com elementos de array que passam teste de condição
find() Retorna o valor do primeiro elemento da matriz que passa em uma função
de teste.
findLast() Retorna o valor do primeiro elemento que satisfaça uma condição, faz o
percurso do array do último ao primeiro elemento.
toString() converte um array em uma string de valores de array (separados por
vírgula).
concat() método cria um novo array mesclando (concatenando) arrays existentes
FUNÇÕES

Uma função JavaScript é um bloco de código projetado para executar uma tarefa
específica. A função pode ser invocada ou chamada de qualquer número de locais no
programa. Os valores que são passados para a função são os argumentos, cujos tipos
devem ser compatíveis com os tipos de parâmetro na definição de função.
sintaxe da função JavaScript

A sintaxe da função JavaScript é feita de seguinte forma:

function nome(parametro1, parametro2){

//código a ser executado
}

Uma função JavaScript é definida com a function palavra-chave, seguida por um nome,
seguido por parênteses () Os nomes das funções podem conter letras, dígitos, sublinhados
e cifrões (mesmas regras aplicadas aos usos variáveis). Os parênteses podem incluir
nomes de parâmetros separados por vírgulas: (parâmetro1, parâmetro2). O código a ser
executado, pela função, é colocado entre chaves: {}.
Exemplo:

Na linha número 2 a 4 e definida a função soma com dois parâmetros x e y, e a função

retorna a soma das variáveis. Na linha número 5 é criada há variável resultado e também
e invocada a função soma com os valores do parâmetro “6 e 4”, e na linha seguintes
número 6 é mostrado pelo console o valor da variável resultado obtida pela função soma.

Tipos de funções
As funções em JavaScript desempenham um papel fundamental na organização e
reutilização de código. Elas oferecem vantagens como modularidade, legibilidade e
manutenção facilitada. Existem diferentes tipos de funções JS que atendem a diferentes
necessidades.
 Funções Anônimas
São uma definição de função que não está vinculada a um identificador ou seja que não
possuem nome. Exemplo:

A função anonima geral são atribuídas a uma variável como é feita na linha 2 do código,
para posteriormente serem invocada como mostra na linha 5.

Também podem ser usadas em lugares específicos, como argumentos de outras funções.
Por exemplo.

Arrow functions
É uma forma de definir função quando há apenas uma instrução, a sintaxe pode ficar mais
curta. Por exemplo:

Na forma tradicional com chaves Na forma Arrow functions

As duas formas fazem a mesma coisa que é somar dois números, a diferença esta que é
necessário atribuir a função a uma variável para o caso de haver necessidade de ser
invocada.
OBJETOS EM JAVASCRIPT
O tipo fundamental de dados de JavaScript é o objeto. Um objeto é um valor composto:
ele agrega diversos valores (valores primitivos ou outros objetos) e permite armazenar e
recuperar esses valores pelo nome.

Um objeto em JavaScript é um conjunto não ordenado de propriedades, cada uma das

quais tendo um nome e um valor. O conceito de objetos em JavaScript pode ser entendido
com objetos tangíveis da vida real, com propriedades e ações

Exemplo: um carro pode ser considerado um objecto que tem propriedades (marca,
modelo, cor, peso etc.) e ações (andar, travar, buzinar e etc.)
Podemos criar um objecto carro na forma literal da seguinte maneira:
Da linha número 1 a 7 delimitam o objecto carro, que recebe as cincos propriedades que
caracteriza um carro no mundo real. Na linha número 8 mostra a construção do objecto
no console.

A sintaxe de um objectos em JavaScript é da seguinte forma:

var nomeObjetos = {
propriedade: valores,
propriedade: valores,
}

OBS. No JavaScript os elementos do array são criados entre os parentes retos [ ], já os

objectos são criadas entre chaves { }, feita na forma literal. Exemplo:

Manipulação de objectos
Para ler os valores de um objecto da seguinte forma:
O resultado apresenta a cor vermelha que foi altera e a marca do carro Kia criada na linha
número 2

Podemos adicionar como elemento dentro de um objecto uma função

Na linha número 7 dentro do objecto foi criada um método (função), e na linha 13 este
método e invocada e retorna a’’ mensagem carro em movimento’’

MODELO DE DOCUMENTO POR OBJETOS - DOM

O DOM é um padrão W3C (World Wide Web Consortium) define que:

"O Document Object Model (DOM) é uma plataforma e interface de linguagem

neutra que permite que programas e scripts acessem e atualizem dinamicamente
o conteúdo, a estrutura e o estilo de um documento."

O padrão DOM W3C é separado em 3 partes diferentes:

• Core DOM – modelo padrão para todos os tipos de documentos

• XML DOM - modelo padrão para documentos XML
• HTML DOM - modelo padrão para documentos HTML
 HTML DOM
O HTML DOM é um padrão de como obter, alterar, adicionar ou excluir elementos
HTML.
O HTML DOM é um modelo de objeto padrão e interface de programação para
HTML. que é possível definir o seguinte na página HTML.

• Os elementos HTML como objetos

• As propriedades de todos os elementos HTML
• Os métodos para acessar todos os elementos HTML
• Os eventos para todos os elementos HTML
Arvore DOM
O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que
antecede o document é o window, que nada mais é que a janela do navegador. Em sua
estrutura, o document está no topo como objeto global e tem como elemento raiz a tag
html e todas as outras descendem dela através das suas ramificações (branchs).

A tag html, objeto pai, apresenta dois objetos filhos: o head e o body (o cabeçalho e o
corpo). Os objetos que seguem nas ramificações de baixo são denominados como child,
e os de cima, parent. A tag head é parent da tag title, e a body é parent das tags p e u1,
e assim sucessivamente, de acordo com a hierarquia. Das tags, derivam os atributos, e
destes, seus valores.
Exemplo código fonte da página.
 Esta é a árvore HTML DOM do código HTML acima.

Document -quando um documento HTML é carregado no navegador da Web, torna-se

um objeto de documento. O objeto de documento é o nó raiz do documento HTML e o de
todos os outros nós.

Element - o objeto de elemento representa todas as tags que estão em arquivos HTML ou
XML. O objeto de elemento pode ter nós filhos de nós de texto, além de atributos.
Exemplo: tag ul
Texto -texto que vai entre os elementos, o conteúdo das tags. Exemplo: <li>Java</li>.

Attribute -o objeto atributo representa um atributo que pertence sempre a um elemento

HTML. Exemplo: id="lista".
Acesso dos elementos DOM
Nós em HTML DOM são acessados com os métodos javascript. Existem muitos
métodos de acesso DOM com os quais você pode acessar elementos HTML, como
por exemplo getElementById("id1").
Com o modelo de objeto, o JavaScript obtém todo o poder necessário para criar HTML
dinâmico:

• JavaScript pode alterar todos os elementos HTML da página

• JavaScript pode alterar todos os atributos HTML da página
• JavaScript pode alterar todos os estilos CSS da página
• JavaScript pode remover elementos e atributos HTML existentes
• JavaScript pode adicionar novos elementos e atributos HTML
• JavaScript pode reagir a todos os eventos HTML existentes na página
 • JavaScript pode criar novos eventos HTML na página

Document JavaScript DOM

O Document é uma interface que representa as páginas da web. Ele serve como um ponto
de entrada para o conteúdo das páginas da web, ou seja, a árvore DOM
Para acessar qualquer informação relacionada ao documento você terá que começar a
acessar através do document. que pode ser acessada por alguns métodos e propriedades
fornecidos pelo document. Como exemplo:

Resultado mostra o título da página que neste caso é dom e mostra a URL da página, esta
propriedade apresenta o local exato da página.

O document objecto possui diversas propriedades que podem ser acessadas por meio do
document objecto. Algumas das propriedades úteis do documento objecto são:

Propriedade Descrição

Document.body Representa o <body> nó do documento atual

Document.domain Representa o nome de domínio do documento atual

Document.forms Representa a coleção de todos os formulários do documento atual

Documento.doctype Ele retorna à definição de tipo de documento (DTD) do

documento atual

Documento.doctypeURI Retorna a localização (URL) do documento atual

Document.head Retorna <head> elemento do documento atual

Document.title Usando-o você pode obter/definir o título do documento

Document.links Retorna uma lista de todos os hiperlinks no documento atual

Propriedade Descrição

Document.images Ele retorna uma lista de todas as imagens do documento atual

Documento.cookie Ele retorna uma lista separada por ponto e vírgula dos cookies do
documento

Document.activeElement Ele retorna o elemento que o cursor está focando no documento

Document.baseURI Ele retorna o URI base do documento

Métodos de acesso DOM

Os métodos HTML DOM são ações que você pode executar (em elementos HTML),
para realizar estas ações, deve - se primeiro selecionar os elementos. Existem
várias maneiras para selecionar os elementos HTML que são

• selecionar elementos HTML por id

• selecionar elementos HTML por nome de tag
• selecionar elementos HTML por nome de classe
• selecionar elementos HTML por seletores CSS
• selecionar elementos HTML por coleções de objetos HTML

Método getElementById
Serve para selecionar elemento HTML partir do id. Exemplo:

Este exemplo seleciona o elemento com id="titulo" do código HTML. Primeiro é criada
uma variável de nome paragrafo que recebe o elemento objecto (no DOM, todos os
elementos HTML são definidos como objetos), o id do elemento selecionado é passado
como parâmetro string do método getElementById('titulo')

Podemos ver o elemento HTML (objecto) selecionado pelo console e as suas propriedade
e métodos.

Feita a seleção podemos fazer alteração de conteúdo e estilo e diversa coisas.

innerText e é uma propriedade utilizada para obter ou substituir o conteúdo de elementos
HTML.

Antes Depois

Método getElementsByTagName
Serve para selecionar elemento HTML partir da tag. Exemplo:

Neste exemplo retorna no console todos as tags li presente no site em uma coleção de
objectos.
Ou seja, é criada um objectos numerado com três elementos o número total de todos os
elementos li do código do site.

Para selecionar um elemento por nome da tag caso existem mais de um presente utiliza-
se parentes retos [ ] com o número da posição que se pretende selecionar. Exemplo:

Depois do parâmetro usou-se [0] para selecionar a primeira tag li do código.

Método getElementsByClassName
Serve para selecionar elemento HTML partir da classe. Exemplo:

Caso exista mais classe de mesmo nome e seja necessário passar a posição do elemento
na arvore DOM o número da posição do elemento entre parentes retos. Exemplo [0].

Método querySelector
Este método retorna o primeiro elemento no documento HTML que corresponde ao
seletor ou grupo de seletores especificado. Se nenhuma correspondência for encontrada,
null será retornado. Podemos selecionar por id, nomes de classes, atributos, valores de
atributos, etc. Por exemplo:
Na linha 1 foi realizada a seleção de elemento a partir do id, é necessário passar o hashtag
junto com o selector (#titulo). Na linha número 2 foi feita a partir da tag do elemento. A
linha seguinte a seleção é realizada a partir de uma classe, é necessário passar-se um ponto
junto ao selector (.lista) como parâmetro na linha 3.
querySelectorAll

Retorna uma lista (array) de todos os elementos presentes no documento HTML. que
corresponde ao seletor ou grupo de seletores especificado. Por exemplo:

Eventos
Eventos são reações a ações do usuário ou da própria página. Todo evento envolve uma
ação e um objeto (ou trecho da página) que sofre esta ação. Por exemplo, quando o usuário
pressiona o botão do mouse e o cursor está sobre uma imagem, dizemos que esta imagem
sofreu o evento de “click “do mouse. Exemplo:

Neste exemplo adicionou-se um evento de click no elemento button, quando é clicado

apresenta uma mensagem no console.
Forma de atribuir eventos

Existem duas maneiras de atribuir eventos com JavaScript em um documento HTML

que são: atributos de eventos e HTML DOM

• Atributos de eventos – é adicionado um atributo nos elementos HTML que

permitir executar código JavaScript a partir de um evento por exemplo: onclick,
onMouseOver etc.

Na linha 8 é adicionado um atributo na tag <button> onclick que reage ação do

usuário e altera o texto do botão “click aqui” para “apertaste o botão” através do
atributo innerHTML.

• HTML DOM – podemos atribuir eventos a elementos HTML DOM, com

JavaScript.
 Na linha 11 a 16 delimitam a declaração da tag <script>. Na linha 12 é selecionado o
botão com o método querySelector por classe. Depois é adicionado um método
addEventListener com dois parâmetros o tipo de evento(click) e a função que executa
ação do evento. Como mostra na linha 12.

Tipos de eventos
Existem diversos eventos que podem ser utilizados em diversos elementos para que a
interação do usuário dispare alguma função:

Eventos de mouse (Mouse Event)

Eventos Descrição
atributos HTML
DOM
onclick click O evento ocorre quando o usuário clica em um elemento.
onmousemove mousemove Sempre que o cursor do mouse se move. enquanto está sobre
um elemento.
onmouseenter mouseenter O evento ocorre quando o cursor é movido para um
elemento.
onmouseout mouseout O evento ocorre quando o cursor do mouse se move para
fora dos limites de um elemento.
ondblclick dblclick O evento ocorre quando o usuário clica duas vezes em um
elemento.
onmouseup mouseup O evento ocorre quando o usuário solta o botão do mouse
sobre um elemento
Há diversos tipos de eventos do mouse, mais falaremos dos eventos citados na tabela por
exemplo:
Na linha 6 a 16 delimitam a tag <style> que serve para adicionar código CSS no HTML.
É selecionada por id #box visto na linha 7.
Na linha 20 a 22 delimitam o elemento de uma <div> com atributo id = “box”, que foi
atribuído os eventos citado na tabela.
Na linha 23 a tag <script> que serve para adicionar um arquivo JavaScript externo.
O método addEventListener tem dois parâmetros o tipo de evento e a função anonima
que executa ações como na linha 6 e alterada a cor da div em azul e na linha 7 é modificada
o conteúdo da div, o mesmo acontece em todos os métodos.
As ações são feitas partir dos eventos do métodos que acontece alteração da cor do fundo
e texto da div. Podemos ver os resultados abaixo.
Podemos realizar o evento do mouse da seguinte forma:

Na linha 26 a variável x é atribuída a posição do mouse no eixo x. E na linha 27 com

atributo innerText é concatenação da posição do cursor sobre a div.

Existem também outros 4 tipos de categoria de eventos alem do mouse event que são:
 Tipos de categorias de eventos
Categorias Descrição Eventos
eventos de toque O evento ocorre nas telas touchstart, touchmove,
(TouchEvent) sensíveis ao toque ou trackpads. touchend, touchcancel
eventos de teclado O evento ocorre com ação do keydown, keypress,
(KeyboardEvent) usuário ao teclado, quando keyup
aperta uma tecla especifica

eventos de formulário O evento ocorre com a interação focus, blur, change,

do usuário com o formulário do submit.
site.
eventos de janela O evento ocorre com ação da scroll, resize, unload,
página ou da janela do load e hashchange,
navegador.

Criar e Remover Elementos

Com o HTML DOM é possível obter, alterar, adicionar ou excluir elementos

HTML.com diferentes formas.
Código HTML: Mostra uma lista de pais Podemos adicionar um novo elemento ou
remover um elemento na lista.

O método createElement é um dos métodos mais básicos e versáteis para criar elementos
com JavaScript. Ele permite que você crie um novo elemento especificando o nome da
tag HTML desejada. Por exemplo:
Neste exemplo é adicionado uma tag <li> com o conteúdo “ Portugal”. Este método
adiciona um novo elemento na última posição, e com o innerText adicionamos conteúdo
tag é Portugal, como indica na linha 4, já na linha 6 a nova tag <li> torna-se filho da tag
<body> como mostra o resultado da página:

Podemos escolher a posição exata da nova tag <li> selecionar a tag pai, onde vamos criar
a nova tag (elemento) por exemplo:

Remover elementos

O método remove serve para remover um elemento do documento HTM. Por

exemplo:
 Adicionar e remover classe
Podemos adicionar um atributo de classe com a propriedade classList junto com o método
add(), exemplo:

Podemos também usar a propriedade classList junto com o método remove(),

exemplo:

Alternar classe do elemento

Podemos Alterne entre adicionar e remover um nome de classe de um elemento com
JavaScript com o método toggle(), exemplo:

Adicionar e remover Atributos

No JavaScript é possível adicionar ou remover um atributo de um elemento selecionado.

Com o método setAttribute é possível adicionar atributos num elemento, caso o valor do
atributo não existir, se já existe apenas atualiza o valor, por exemplo:

Podemos adicionar vários tipos de atributos como id, style, href etc.

Com o método removeAttribute é possível remover qualquer tipo atributo de um elemento

Obter valores dos atributos

O getAttribute é um método que retorna o valor do atributo de um elemento selecionado.