Iniciando com Javascript. A tag <script>, script interno, os
comandos alert e prompt, criação de variáveis com
var, atribuição de valores em variáveis com '=' e
concatenação com '+'.
Tipos de variáveis: texto, numero, booleano,
array, objeto, null, undefined e
NaN.
Identificando o tipo dos valores com typeof, utilizando o comando parseInt() e parseFloat() para converter string para numero.
Aula 166 - Exercício proposto
Exercício.
Aula 167 - Resolução do exercício.
Solução do exercício. Explica como utilizar a concatenação entre string e uma operação matemática. No meu exercício eu criei variáveis para fazer a operação, na solução ele fez os cálculos diretamente na saída do alert.
Aula 168 - Operadores aritméticos.
Operadores aritméticos, precedencia de operações.
Aula 169 - Mais operadores aritméticos.
Operadores aritméticos, '%' (módulo), '**' (exponenciação), '++' (incremento) e '--' (decremento). Lembre que a posição do operador de incremento e decremento em relação a variável influencia no resultado.
Aula 170 - Exercício proposto.
Exercício
Aula 171 - Resolução do exercício proposto.
Solução do exercício. Praticando os operadores e entendendo melhor a concatenação.
Aula 172 - Operadores de comparação.
Operadores de comparação, '==' (igualdade valor), '!=' (diferença valor), '===' (igualdade valor e tipo), '!==' (diferença valor e tipo), '>' (maior), '<' (menor), '>=' (maior ou igual), '<=' (menor ou igual).
Aula 173 - Operadores de comparação - parte 2.
Solução do exercício proposto na aula anterior.
Aula 174 - Controle de decisões.
Utilização de if else.
Aula 175 - Exercício proposto.
Utilização da função Math.random() para gerar números aleatórios entre 0 e 1. Explicação do enunciado do exercício.
Aula 176 - Resolução do Exercício.
Resolução do exercício anterior. Meu programa ficou igual ao do professor com a diferença da forma de seleção.
Aula 177 - Operadores lógicos.
Operadores lógicos '!' (not), '&&' (and) e '||' (or).
Aula 178 / Aula 179 - Exercício proposto. / Resolução do execrcício.
Exercício com operadores lógicos.
Aula 180 / Aula 181 - Exercício proposto. / Resolução do execrcício.
Exercício com operadores lógicos.
Aula 182 - Switch...case
Utilizando o operador switch...case. (Não esquecer o break
Aula 183 - Repetindo ações
Criando laços de repetição com while. Aqui foi utilizada a função document.write() para imprimir os dados na tela.
Aula 184 - Tipos de loops
Laços do tipo do...while e for.
Aula 185 / Aula 186 - Exercício Proposto / Resolução do Exercício
Laços do tipo do...while e for.
Aula 187 / Aula 188 - Exercício Proposto / Resolução do Exercício
Exercícios com laços.
Aula 189 / Aula 190 - Exercício Proposto / Resolução do Exercício
Exercícios com laços.
Aula 191 - Breve introdução à inserção de conteúdo HTML
Para selecionarmos elementos em HTML através do Javascript devemos atribuir a uma variável a função document.querySelector('elemento_selecionado') onde elemento_selecionado pode ser qualquer elemento HTML (tag, id, class). Com essa variável atribuida podemos inserir os dados utilizando o comando nome_da_variável.innerHTML = 'valor_a_ser_inserido'.
Aula 192 - Atrelando funções à eventos disparados por elementos no HTML
Utilizando o evento onclick na tag <button> para chamar
uma função.
Criando funções com o comando function. A sintaxe é
function nomeDaFuncao(){ código a ser executado }.
Podemos chamar a função a qualquer momento do código invocando seu
nome ou através do evento onclick='nomeDaFuncao()'.
Implementando as funções dos botões para executar uma tabuada e para
limpar os resultados apresentados.
Rever essa aula.
Criar uma calculadora de operações básicas utilizando funções e manipulação HTML.
Aula 195 - Resolução do Exercício
Resolução do exercício calculadora. Nesse exercício foi criada uma função para exibir os resultados, que eu não fiz na minha solução. No mais tudo igual.
Aula 196 - Funções que recebem parâmetros
Passando parametros em funções para realizar operações.
Aula 197 / Aula 198 - Exercício proposto / Resolução do exercício proposto
Para a execução deste exercício foi utilizado o switch para interpretar a string do operador matemático e executar a operação matemática.
Aula 199 - Funções que retornam valores
Criação de uma rotina para cálculo de área. Aqui passamos as variáveis para dentro da função dos botões, assim passa a ser necessário passar os valores na função de cálculo da área pois as veriáveis passam a ser locais e não mais globais.
Aula 200 - Exemplo: melhorando a nossa mini calculadora
Mudança das variáveis no script da calculadora.
Aula 202 - Bloco try...catch (erro)
Utilizando a função isNaN(). Criando um lógica para
verificar os dados inseridos.
Aplicando a fução
throw new Error('mensagem') retorna uma mensagem no console e
para a execução da função..
Já com o código try...catch podemos fazer uma verificação
(try) diretamente na função, retornando em erro (catch) caso a
função não possa ser executatda. Podemos aplicar um
return no bloco catch para retornar a execução do
script sem fazer nada (apenas mostrar o erro caso ele seja tratado).
Exercício proposto
Aula 204 - Resolução do exercício proposto
Resolução do exercício proposto. Na resolução foi feito o tratamento
em caso de não ser digitado nenhum valor (valores undefined).
Outra coisa é que o retorno da função deve ficar fora do bloco
try...catch. Foi atribuido o valor de 'e' (variável de erro)
para o resultado da operação (variável 'area'), assim a mensagem de
erro aparece no resultado da função.
Criando conjunto de variáveis com var nomeDaArray = new Array(). Para inserir dados na array podemos utilizar o indice da Array atravé de nomeDaArray[i] = valor a ser incluido ou com o método nomeDaArray.push('valor a ser incluido').
Aula 206 - Iterar sobre arrays
Criando uma array com var nomeDaArray = new Array(), adicionando itens na array com nomeDaArray.push() e mostrando os itens da array na tela com strings separadas utilizando um laço for, a propriedade nomeDaArray.length para saber o tamanho da array e concatenando os dados para apresentação no loop utilizando nomeDaArray[i].
Aula 207 / Aula 208 - Exercício Proposto / Resolução do exercício proposto
Usando a função var nomeDaVariavel = new Date() para receber a data atual e o método nomaDaVariavel.getDay() para receber o numero do dia da semana (de 0 - domingo a 6 - sábado).
Aula 209 - Exercício Proposto
Exercício proposto, fazer a soma dos números pares de um array.
Aula 210 - Resolução do exercício proposto
Resolução do exercício do modo normal. Depois foi convertida a resolução através de função.
Aula 211 - Objetos e propriedades de objetos
Utilizando objetos com a sintaxe literal. Criamos primeiro o objeto,
depois atribuimos as propriedades do objeto. da seguinte forma:
var nomeDoObjeto = new Object(). depois atribuimos as
propriedades nomeDoObjeto.nomeDaPropriedade=valor.
Criando um objeto com tres propriedades (nome, preco e estoque).
Em seguida foi criada um método com uma função produto que apresenta
no console a mensagem 'comprou caneta'. Em seguida utilizou-se a
palavra chave this.propriedade para se referir ao objeto.
Para criar arrays em Javascript podemos utilizar duas formas:
var nomeDoArray = new Array(); ou:
var nomeDoArray = ['primeiroItem', 'segundoItem'].
Para objetos da mesma forma podemos utilizar:
var nomeDoObjeto = {'propriedade1': 'valorDaPropriedade1',
'propriedade2': 'valorDaPropriedade2'}.
Podemos chamar os itens do objeto da seguinte forma:
nomeDoObjeto.propriedade1. Podemos por fim criar uma array
de objetos da seguinte forma:
var nomeDaArray = [{'propriedade1': 'valorDaPropriedade1',
'propriedade2': 'valorDaPropriedade2'},{'propriedade1':
'valorDaPropriedade1', 'propriedade2': 'valorDaPropriedade2'}]
Nesse caso chamamos os objetos pelo indice do array da seguinte
forma:
nomeDaArray[i] para chamar o objeto inteiro ou
nomeDaArray[i].propriedade1 para mostrar apenas o valor da
propriedade no indice selecionado.
Exercício sobre arrays
Aula 215 - Resolução do Exercício proposto.
Na resolução do exercício foi utilizada a criação das arrays de modo formal. O loop foi feito com while e não com for.
Aula 217 / 225 - Javascript
Introdução ao javascript, história; sintaxe; case-sensitive; tipos
de variáveis (var, let, const); arrays, objetos; declaração de
variáveis e atribuição de valores; tipos de valores primitivos
(string, número, boolean, Null, NaN, undefined, Infinity (valores
entre -ne308 e ne308)); escape (utilizar a '\' para
utilizar caracteres reservados); objeto 'global' (window, global) e
this.
Ferramentas para debug de código: console.log(). Utilizando
break point no developer tools do chrome (Sources). A palavra
reservada debugger (para a execução do código no browser).
Orientação a objetos: método = funções; propriedade = variáveis
Criando funções literais, utilizando funções como objeto de primeira
classe (atribuindo propriedade como se fosse um método), criando
funções anonimas e chamndo a função através do nome da variável.
Podemos passar uma função como parametro de outra função. Podemos
utilizar o parametro nomeDaFuncao.name para saber o nome da
função.
Entendendo a variável dentro e fora do escopo da função. Se atribuimos uma variável global (fora do escopo da função) e atribuirmos um valor para ela dentro da função com o valor precedido pela palavra var o valor atribuido tem escopo local (apenas na função) não repercutindo fora dela. Já se simplesmente atribuirmos o valor diretamente na variável, seu valor passa a ser considerado globalmente. Já se criarmos uma variável dentro de uma função sem ser precedida pela palavra var essa variável e seu valor ficam com escopo global.
Aula 228 - Funções autoexecutáveis e propriedade arguments
Devemos evitar utilizar variáveis no escopo global. Podemos criar
funções autoexecutáveis com a seguinte sintaxe:
(function(){
var isValid = false;
})();
As funções autoexecutáveis tem como propósito "encapsular" as
variáveis de modo que elas não sejam declaradas no escopo
global.
Quando queremos restringir o uso incorreto de variáveis dentro de
funções podemos utilizar a string 'use strict'. Com essa
string a função não vai aceitar variáveis sem declaração de tipo.
Não devemos usar o 'use strict' fora da função pois ele var
ser aplicado em todas as variáveis, inclusive de códigos de
terceiros.
Podemos passar vários parametro para uma função através de um array,
mas podemos utilizar também propriedade arguments. A
propriedade arguments funciona como se fosse uma variável
do tipo array, sem precisarmos declarar como array.
Texto explicando a necessidade de utilizar as funções
auto-invocáveis. Segundo o texto elas só são ncessárias quando
desenvolvemos o Javascript para ser executado diretamente no browser
diretamente no objeto window, Se desenvolvemos para NodeJS ela não é
necessária.
Aqui está minha resolução do exercício calcular média.
Resolução do exercício Calcular média pelo professor. Nesta resolução foi utilizado o loop while e não o for como eu utilizei. Aqui utilizando o loop while ocorreu um problema. Como o while faz o teste diretamente no valo do argument, quando este valor é '0' ele retorna 'false' para o while, parando a execução do loop. Foi utilizado um type of arguments[x] === 'number' para forçar o while a interpretar o '0' como número e não como 'false'.
Aula 231 - Resolução do desafio.
Minha resolução para o exercício está correta, entretanto foi feita
uma resolução de outro modo.
Na solução do professor foi criada uma função de 'callback' para
chamar a função que retorna a string de classificação do imc.
Para este exemplo ver o código resolvido e se necessário
reassistir a aula a partir de 11:23
Introdução ao DOM (Document Object Model) e elementos que o compõe.
Aula 233 / Aula 234 - DOM - parte 2 / DOM - parte 3
Todas essas propriedades foram trabalhadas diretamente no
navegador com o DevTools.
Todos os elementos do HTML estão contidos em um objeto chamado
document. Podemos acessar os elementos através desse
objeto, por exemplo:
document.getElementById('nomeDaId') (seleciona o elemento
pelo id)
document.getElementById('nomeDaId').textContent = 'novo
texto'
(altera o conteúdo do elemento selecionado)
document.getElementsByClassName('nomeDaClasse) (seleciona o
elemento pela classe mas nesse caso em uma "array" de elementos,
portanto deve ser chamado cada elemento pelo indice independente de
ter apenas um elemento)
document.getElementsByClassName('nomeDaClasse)[i].textContent =
'novo texto'
(altera o conteudo do elemento selecionado no indice selecionado).
document.getElementsByTagName('nomeDaTag') (funciona da
mesma forma que o getElementsByClassName).
querySelector e querySelectorAll utilizam a mesma
sintaxe de seletores e seletores avançados do CSS. O
querySelector seleciona apenas 1 elemento mesmo que tenha
mais elementos iguais. Já o querySelectorAll se comporta
como o getElementsByClass e necessita do valor de
indice.
Aqui demonstra-se por que não devemos utilizar o <script> no início do HTML. Como a leitura do documento HTML é feita de forma sequencial caso utilizemos o script antes da execução do HTML se manipularmos algum elemento do DOM antes dele ser interpretado o resultado será null.
Aula 236 - DOM - problema 1
Problema para exibir uma mensagem na tela. Atenção para as sintaxes (utilização de parenteses, aspas, pontuação e concatenação).
Aula 237 - DOM - problema 2
Quando utilizamos a propriedade textContent inserimos no
documento texto puro, dessa forma se inserirmos uma tag dentro do
valor a ser apresentado teremos a tag escrita na tela.
Para renderizarmos código HTML na saída devemos utilizar a
propriedade innerHTML.
Não devemos utilizar nomes de variáveis iguais ao nome de id quando
estamos trabalhando com o DOM pois os consoles podem considerar a id
e não a variável.
Algumas considerações sobre declaração de variáveis:
Quando declaramos uma variável dentro de uma função (no caso um
IFFE) esta variável não pode ser acessada fora da função. Para que
ela possa ser acessasda fora podemos utilizar três maneiras. Uma
delas é declarando a variável diretamente fora da função, tornando a
variável de escopo global. A segunda forma é não declarar com var
mas sim com window.nomeDaVariável. A terceira forma é
declarar a variável fora da função sem atribuir nenhum valor e
posteriormente atribuir o valor dentro da função utilizando a
propriedade 'use strict' dentro da função para o valor
ficar restrito a função.
Utilização do atributo value das variáveis. Neste exemplo
retiramos a função IFFE para simplificar o código. Atenção para o
posicionamento correto das variáveis nas funções, de acordo com o
momento que precisamos utilizar os valores.
É uma boa prática quando se manipula o DOM atribuir variáveis para
as referencias aos objetos. Quando fazemos esse tipo de referencia
podemos utilizar o caractere '$' no início do nome da variável.
A propriedade value recupera e insere novo valor em campos
de formulário.
Portanto as propriedades textContent, innerHTML e
value podem tanto coletar como inserir informações nos
campos. Para isso basta no caso de recuperar a informação utilizar a
sintaxe:
var nomeDaVariável =
document.querySelector('#idSelecionada').textContent
(ou value ) Para setar o valor utilizamos:
document.querySelector('#idSelecionada').querySelector =
novoValor
(ou value).
Na parte II deste exercício foi utilizada a propriedade
disabled atribuida pelo código Javascript. Para isso a
sintaxe é:
document.querySelector('#idSelecionada').disabled = true /
false
Podemos também utilizar a propriedade readOnly da seguinte
forma:
document.querySelector('#idSelecionada').readOnly = true /
false
Ver texto da Aula 242 para informações sobre a diferença de
sintaxe nas propriedades HTML / Javascript.
Criação da tabela utilizando o Bootstrap. Para a estilização da
tabela foi utilizada apenas a classe class=table na div
<table>.
Parte do Javascript:
Aqui o negócio começa a pegar!!!
Consegui entender a execução do código, mas preciso como pensar
nessa lógica.
Foi reutilizada a função de média da Aula 229, aproveitada em um
arquivo .js externo chamado 'beluga.js'.
Na lógica foi primeiramente criada uma variável chamada 'trs' que
recebe os dados selecionados pela classe '.js-table tbody .aluno'.
Esse seletor pega com a propriedade querySelectorAll todos
os dados da tabela(classe '.js-table') dentro da div <tboby>
(não pega os dados da div <thead>) na classe '.aluno' (podia ser
a div <tr>) e armazena na variável trs. Após isso
percorremos cada linha da tabela com um loop for(no exemplo
o professor utilizou o while).
Com isso temos isoladas cada linha da tabela no 'array' de dados da
variável 'trs'. Essas linhas são atribuidas a variável
'linhaAluno'
. Em seguida foram criadas as variáveis de notas
('n1', 'n2', 'n3' e 'n4') e de média ('media').
Criamos então uma variável 'tds' que vai isolar cada item de
'linhaAluno' em uma 'array' de dados indexada para cada item da
linha.
Cada variável de nota (n1 a n4) vai receber o valor através de uma
função que converte (string em número) os valores obtidos na
variável 'tds' nos indices correspondentes a cada nota (indice 1 até
4 pois no indice 0 fica o nome do aluno).
Por fim armazenamos na variável 'media' o valor retornado pela
função calculaMedia() (que está no arquivo beluga.js) que
recebe como parametro os valores das variáveis n1 a n4. Esse valor é
enviado para a tabela através de
linhaAluno.querySelector('.aluno-media').textContent = media.
Nesta aula foi feita uma otimização do código para que a recuperação
dos dados de notas ficasse dinamico, ou seja, recupera as notas
independente da quantidade de valores que estejam nas tabelas.
Foram apresentados aqui as propriedades push (para inserir
dados em uma array), this (referencia um objeto),
call (chama uma função), apply (chama uma função
passando uma array como parâmetro).
Desafio de alteração de texto no DOM. Não esquecer de utilizar a função auto-invocável.
Aula 249 - Objetos Nativos
Demonstra alguns dos objetos nativos (ou primitivos) do Javascript como: String(), Number(), Boolean(), Object(), Array(). Todos eles podem ser instanciados com o comando new.
Aula 250 - Sintaxe literal, sintaxe formal e de ambientes de hospedagem
Objetos do ambiente são os objetos relativos ao meio de execução, no caso window ou document, onde podem ser invocados métodos como o alert.
Aula 251 - Construtores, o operador new e objetos passados por referência
Podemos instanciar os ojetos nativos do Javascript. Para instaciarmos objetos utilizamos o operador new. Quando instanciamos um objeto em uma variável, estamos gravando uma cópia deste objeto na variável. Uma vez que o objeto esteja instanciado podemos chamar seus métodos a partir do nome da variável.
Aula 252 - Objetos customizados, propriedades e métodos.
Não entendi essa aula. Preciso rever para tentar entender aonde ele quis chegar.
Aula 253 / Aula 254 - Criar um objeto customizado utilizando uma função construtora / O problema de não utilizar o operador new e como impedir que ele ocorra
Funções que criam instancias de objetos (construtoras) por convenção
começam com letra maiuscula.
Criando objetos construtores com propriedades privadas utilizando
var e com propriedades e métodos públicos (acessíveis) com
o this.
Quando criamos uma instancia de um objeto sem utilizar a palavra
reservada new passamos as propriedades do objeto
diretamente para o window pois o this não fará
referencia ao objeto utilizado mas sim ao objeto pricipal do meio.
Para evitarmos que a referencia principal dos elementos sejam a
window podemos utilizar a função auto-invocável e o
'use-strict'. Dessa forma o que estiver dentro dessa função
não fará referencia direta ao objeto principal. Entretanto os
objetos ficarão restritos ao escopo da função. Para corrigir isso
devemos atribuir o window para o objeto da função construtora e
passa-lo como parametro para a função auto-invocável. Com isso não
podemos instanciar novos objetos sem o new mas poderemos
acessar o objeto no escopo global.
Criando objetos de forma literal e apresentando os objetos no console. Referenciando o objeto utilizando a window[nomeDoObjeto] através da atribuição do nome do objeto a uma variável.
Aula 256 - Desafio
Criando um array com os objetos do problema e apresentando os nomes no console.
Aula 257 - DOM Level 0
Eventos Javascript podem ser acessados pelo usuário ou pelo navegador. Podem ocorrer de maneira padrão ou executados através de um Event Handler que é a função que é executada quando ocorre determinado evento. Temos dois tipos de event hadler de acordo com o DOM. Os events no DOM Level 0 e no DOM Level 2. As pricipais diferenças são na sintaxe. Na sintaxe no DOM level 0 os enventos iniciam com o prefixo 'on' (ex: onclick). Eventos no DOM Level 0 tem alguns problemas. Quando utilizamos o DOM level 0 não podemos chamar a função diretamente no código pois a função será executada antes da ação conforme se ve no exemplo.
Aula 258 - DOM Level 2
Quando utilizamos o DOM level 2 a sintaxe passa a utilizar o addEventListener('evento', função). Este handler pode ser utilizado mais de uma vez para o mesmo evento. Quando utilizamos o DOM level 0 isso não é possível.
Aula 259 - Propagação de eventos
Propagação de eventos é a capacidade de um evento de percorrer todos os elementos do body do documento. Quando criamos um addEventListener o evento será replicado, por padrão, para todos os elementos pais em ordem ascendente. No exemplo, ao clicarmos na span que está dentro de uma div que está no document, ela irá executar a função da span, a função da div e a função do document. Podemos mudar a ordem dessa propagação inserindo um último parametro true no addEventListener. Quando selecionado true a ordem de propagação será invertida.
Aula 260 - Objeto Event
Quando inserimos um objeto dentro da função do evento este objeto passa a ter varias propriedades e alguns métodos do evento que foi executado. Alguns exemplos de propriedades que podem ser acessadas podem ser vistas no exemplo. Entre os métodos que podem ser acessados está o stopPropagation() que para a propagação do evento estudada acima.
Aula 261 - Delegação de eventos
Ao criarmos uma variável para selecionar vários elementos iguais com
querySelectorAll criamos uma NodeList de elementos
desta forma não podemos acessar os elementos individuais com o
addEventListener. Para resolver esse problema, podemos
criar um loop para percorrer todos os elementos do NodeList.
Podemos também aplicar o addEventListener na variável que
referencia a <ul> e nesse caso utilizar a propriedade
target. No exemplo vemos que as propriedades
this e currentTarget retornam a <ul> inteira
com toadas as <li> contidas nela. Já a propriedade
target retorna só o elemento clicado.
Podemos utilizar a propriedade target.nodeName para pegar o
nome do elemento HTML que foi clicado. Assim podemos fazer a lógica
necessária para o problema.
Criar um formulário para entrada de usuário e senha e um botão para
validar a entrada de dados. O botão vai ser ativado através de um
addEventListener que vai executar uma função com um
if que irá testar se as variáveis atribuidas aos campos de
entrada de dados estão vazias (nada foi digitado nos inputs). Esse
teste deve ser feito na propriedade value das duas
variáveis e não apenas na variável.
Aqui uma coisa interessante: Quando
criamos a expressão $txtUser.value === '' estamos dizendo que
se o valor da string for vazio deve retornar um valor booleano
true ou false. Acontece que qualquer valor de string
que não seja vazio retorna true. Portanto podemos fazer uma
negação do valor da variável como teste para o if. Caso seja
negativo (não haja valor) o resultado será falso.
Aqui fizemos a alteração do <button type="button"> para
<button type="submit">.
Quando utilizamos o type='submit' ao invés do
type='button' o código faz o envio dos dados do formulário
(lembrando, podemos ver as informações na barra de endereço).
No exemplo o que se tenta mostrar é que o evento está vinculado ao
click do botão e não ao evento de enviar o formulário. O problema é
que alguns browsers podedm não interpretar, por exemplo a tecla
ENTER pressionada. Para evitar esse tipo de problema ao
invés de monitorarmos com o addEventListener o botão,
monitoramos o evento submit no formulário (variável que
recebe o querySelector('form')).
Como no type='submit' as informações são enviadas na URL,
mesmo que tenhamos false na verificação de um dos campos as
informações serão enviadas por default após a mensagem de alerta.
Para evitar o comportamento padrão devemos informar um evento na
função e utilizar o método preventDefault(). Com isso caso
a verificação seja false nenhuma informação será passada por padrão.
Lembrando mais uma coisa. Para evitar que as informações sejam
passadas na URL quando utilizamos o submit devemos incluir no
<form method='POST'>.
Neste exemplo faremos a contagem de caracteres utilizando eventos de
teclado utilizando keypress, keyup e
keydown. Note que neste exemplo não utilizamos a função
anonima no addEventListener mas sim funções nominais
separadass. O resultado é o mesmo.
As diferenças entre esses eventos é: O keypress só é
verificado quando pressionamos caracteres, ou seja não monitora
teclas como shift, ctrl, alt, etc.
O problema de utilizar esses eventos para contar caracteres é que
ele só funciona se o texto for digitado. Se copiarmos e colarmos um
texto no <textarea> não serão contados os caracteres
(quando selecionamos o texto colado e apertamos a tecla
Delete o retorno do keydown é o texto
deletado). .
Para contornar esse problema podemos utilizar o evento
input que irá retornar o conteúdo do <textarea>
independente da forma que foi inserido no campo. (retorna uma
string do que foi digitado ou inserido).
Limpeza do código anterior utilizando o evento input para
aquisição dos dados. Criação das variáveis e da função para contagem
dos caracteres utilizando as propriedades value e
length.
Para limitar a quantidade de caracteres no valor do indicado na
variável máxima pensei em criar uma rotina if, mas foi
utilizado apenas a propriedade HTML maxlength diretamente
na tag <textarea>. Em seguida para automatizar o processo foi
alterado valor da variável maxima de um valor fixo para a
propriedade maxlenght utilizada no HTML. Atribuimos o valor
dessa variável utilizando
var maxima = nomeDaVariavelAtribuidaAoElemento.maxLength
lembrando que a propriedade em HTML é toda em minuscula e no
Javascript é em 'camel case'.
A seguir temos o conceito de 'Progressive Enhancement', que é
garantir um código funcional (primeiramente em HTML puro) para
depois incluir pouco a pouco as outras melhorias, evitando que o
código quebre caso não rode o CSS ou o Javascript. Para isso
primeiro ocultamos o contador com o
style = "display: none;". Em seguida criamos a variável de
referencia no documento para a id do elemento que foi
ocultado e reexibimos o elemento via Javascript utilizando a
propriedade style.display com o comando
nomeDaVariavelAtribuidaAoElemento.style.display = 'block';.
Algumas otimizações no código. Criação de uma função para substituir a apresentação e cálculo de caracteres. Conversão dos valores recebidos nas variáveis maxima e numeroLetrasDigitadas para inteiros com parseInt(), pois apesar de o Javascript fazer a conversão e o cálculo, por padrão os dados adquiridos vem como string. Por fim criada uma função para mostrar o texto de resta caracteres.
Aula 269 - Problema - impedir o envio de formulário sem aceitar os termos do contrato
Para resolver esse problema, primeiramente fizemos uma lógica com
if. Entretanto conforme pode ser visto nos comentários do
código podemos resumir esse procedimento utilizando apenas a lógica
e objetos.
O segundo problema levantado é que a lógica só funciona depois da
mudança (change) pois o botão estava setado para estar
'disabled' por padrão. Resolvemos isso vinculando o estado do
botão ao estado do checkbox.
Por fim criada uma função para fazer o teste do checkbox e
habilitação do botão. Essa função foi criada de duas formas.
Retornando o estado do checkbox e fazendo a atribuição no código ou
sem retorno fazendo a atribuição dentro da função.
Criar uma coleção de botões, fazer uma nodeList com os botões através do getElementByTagName e recuperar o conteudo das tags <button> com um loop e a propriedade addEventListener e uma função que mostra o textContent do objeto 'this'.
Aula 271 - Problema - Lista de tarefas - parte 1
Neste exemplo criamos uma lista fixa com três elementos e queremos ter a opção de adicionar elementos em um input após clicar um botão. Fizemos um addEventListener no botão para receber o valor digitado no <input>. Esse valor foi atribuido a uma variável que concatena a seguinte string ' "<li>" + variávelDoInput.value + "</li>" '. Essa string é adicionada a <ul> com o método innerHTML entretanto se for atribiudo o valor diretamente ele sobreescreve a lista inicial. Podemos solucionar isso somando a variável que recebe o valor da string com o conteudo do innerHTML que já está na <ul>. Feito isso atribuimos um valor vazio para a variável de input para limpar seu conteúdo após o evento e colocamos o foco novamente nele com o método focus().
Aula 272 - Problema - Lista de tarefas - parte 2
Retirando a função de adicionar tarefas na lista de dentro
addEventListener. Em seguida vamos monitorar com o
addEventListener o evento keyup do <input>. Para
isso criamos uma função para verificar que tecla foi pressionada e
vamos monitorar a propriedade keyCode.
A propriedade keyCode, retorna o código da tecla
pressionada.
Com isso fazemos um teste para monitorar o valor da tecla
pressionada. Se o valor for igual ao valor de ENTER (13),
chamamos a função de adicionar tarefas.
Criando uma função para monitorar o clique nos itens das <li>.
Para inserir o atributo de checked nos itens vamos cirar uma classe
para quando o item for clicado. Para isso utilizaremos o método
classList. Esse método pode ter as propriedades
add, remove e toggle. A propriedade
toggle alterna o estado do método (add / remove). Sempre
verificar a compatibilidade dos navegadores com esse método.
Utilizando esse método, são adicionadas classes em cada item que
passa a ser manipulado através de um estilo CSS.
O problema de utilizarmos o innerHTML é que quando ele atua
no DOM ele faz com que se percam os 'listeners' ou seja, quando ele
adiciona um elemento no HTML ele o está reescrevendo, perdendo a
referencia. Desse modo o innerHTML não é mais usado.
Outra forma de adicionar elementos no HTML é com os métodos
createElement('nomeDoElemento') que cria novas tags no DOM
e com createTextNode(origemDoTextoASerInserido). Estes
métodos criam os novos elementos na memória. Para inclui-los no DOM
utilizamos o método appendChild(elementoCriado), onde o
elementoCriado são os elementos criados com os métodos
createTextNode e createElement.
Criada um nova função para adicionar as <li> no
addEventListener. Essa função substitui também a instrução
que cria a nodeList no loop for.
O problema agora fica com a performance, pois para cada item
adicionado criamos um novo 'listener' que ficará na memória.
Para resolver o problema acima utilizaremos a delegação de eventos.
Não vamos mais utilizar os 'listeners' nas <li> mas sim na
<ul>.
Criamos então o listener na variável que aponta para a <ul> e
fazemos um teste para verificar se o elemento clicado foi realmente
uma <&ligt.
Aqui foi criada uma nova função para excluir o valor da <li> ao invés de riscar o item. Assim não precisamos mais incluir uma classe ao evento. Para excluir o valor da <li> devemos seleciona-la no elemento pai com a propriedade parentNode. Feito isso, removemos o item com o método removeChild().
Aula 278 / Aula 279 - Desafio - Explicação / Resolução
Esse desafio possui os arquivos html e css prontos. O objetivo é
apenas criar um pequeno código Javascript para mostrar o menu
hamburgger quando seu icone for apresentado (através da media query
já definida). Não consegui nem começar. Fiquei focado no html e css
e a solução é mais simples. Para resolver esse desafio basta criar
as variáveis para o querySelector da tag <html> e da
classe .header-nav__hamburgger (classe definida para o
elemento button).
Feito isso fazemos a leitura do 'click' no
button com o addEventListener e passamos uma função
para adicionar a classe menu-opened na tag <html> com o
classList.toggle.
Por fim o desafio era apenas incluir a classe na tag html.
Explicação extra: Na tag <html> do
exercício tem uma classe chamada js. Essa classe na verdade
era para ser no-js que é feita para ser utilizada quando o
arquivo Javascript não for carregado pela página. Quando isso ocorre
o menu aparece de forma automática e sem maipulação. Quando o
arquivo Javascript é carregado normalmente essa classe é alterada
para js e ativa através das classes todas as propriedades
css relacionadas. Essa parte eu acertei sozinho.
Nesta aula fizemos o set de uma propriedade chamada
aria-expanded através do aria-controls (as duas
propriedades estão contidas na documentação da W3C nesse link
W3C Web Accessibility Initiative - Accessible Rich Internet
Aplications
e pelo visto tem relação com padrões para acessibilidade para
pessoas com defeciencia).
A propriedade foi acessada com o método getAttribute e foi
inserida nas tags/ids com o método setAttribute.
As strings podem ser atribuidas de modo literal (diretamente com a
sintaxe var nomeDaString = 'string'; ou pelo modo formal
(como um objeto pela sintaxe
var nomeDaString = new String('String');.
As string possuem métodos e propriedades: length,
replace(), indexOf(), lastIndexOf(),
slice(), substring(), split(),
toLowerCase(), toUpperCase(), valueOf().
Separar nomes compostos e reescrever no padrão 'Sobrenome, Pre-Nome' utilizando os métodos e propriedades de string. Exixtem outra maneiras mais fáceis de fazer isso (talves utilizando o split().
Aula 283 - Strings - Desafio - resolução
Na minha resolução utilizei o innerText o correto seria utilizar o innerHTML pois o primeiro ignora as tags internas do parágrafo caso existam.
Aula 284 - Number - Métodos e propriedades
Os numeros podem ser atribuidos de modo literal (diretamente com a
sintaxe var meuNum = 123; ou pelo modo formal (como um
objeto pela sintaxe var meuNum = new Number('123');.
Os numbers possuem métodos e propriedades: MAX_VALUE,
MIN_VALUE, toFixed(), toPrecision(),
toString() e toExponential(). MAX_VALUE e
MIN_VALUE são propriedades estáticas e apresentam os
números máximo e mínimo que o Javascript consegue manipular. Não
pode ser utilizada com variáveis, apenas com o objeto 'Number'.
Utilizando o método toFixed() para fazer o arredondamento do cálculo de média.
Aula 286 - Math - Métodos e propriedades
Utilizando o objeto Math. Alguns métodos são: min(), max(), round(), floor(), ceil(), pow(), sqrt() e random(), além de outros.
Aula 287 - Math - Problema - Função sortear
Nesse problema eu utilizei a propriedade Math.random() e .toFixed() para fazer o arredondamento. Na solução do problema foi utilizado o método Math.floor() para fazer o arredondamento para baixo.
Aula 288 - Math - Problema - Função sortear
No desafio utilizei a mesma lógica, porém apliquei a imagem em uma
<div> dentro da página como uma <img>. Na solução do desafio
foi utilizado o estilo background para colocar a imagem no
fundo da tela. Uma das soluções propostas para quando tivermos
numeros variáveis de imagens é criar um array com os nomes das
imagens e consultar o lenght desse array para passar como parametro
para a função.
Lembrete sobre style em Javascript. Quando utilizamos estilos CSS no Javascript devemos alterar o
nome da propriedade para camel-case por exemplo: CSS =
background-image; JS = backgroundImage / CSS = margin-top; JS =
marginTop.
Métodos de arrays:
Nesta aula: length, every(), some(),
filter(), forEach(), indexOf(),
lastIndexOf().
Próximas aulas:
map(), concat(), join(), pop(),
push(), reduce() e reduceRight(),
reverse(), shift(), slice(),
splice(), unshift(), toString()
Métodos de arrays:
Aula anterior: length, every(),
some(), filter(), forEach(),
indexOf(), lastIndexOf().
Nesta aula: map(), concat(), join(),
toString().
Próximas aulas: pop(), push(),
reduce() e reduceRight(), reverse(),
shift(), slice(), splice(),
unshift()
Métodos de arrays:
Aulas anteriores: length, every(),
some(), filter(), forEach(),
indexOf(), lastIndexOf(), map(),
concat(), join(), toString().
Nesta aula: pop(), push(), shift(),
unshift().
Próximas aulas:
reduce() e reduceRight(), reverse(),
slice(), splice()
Métodos de arrays:
Aulas anteriores: length, every(),
some(), filter(), forEach(),
indexOf(), lastIndexOf(), map(),
concat(), join(), toString(),
pop(), push(), shift(),
unshift().
Nesta aula: reduce() e reduceRight(),
reverse().
Próximas aulas:
slice(), splice()
Métodos de arrays:
Aulas anteriores: length, every(),
some(), filter(), forEach(),
indexOf(), lastIndexOf(), map(),
concat(), join(), toString(),
pop(), push(), shift(),
unshift(), reduce() e reduceRight(),
reverse().
Nesta aula: slice(), splice().
Foi utilizado o programa de médias da aula 246 para aplicar a
resolução do problema.
Fizemos o teste das notas utilizando o método some() na
array de notas de cada aluno e retornando true quando nota === 0.
Feito essa verificação primeiro utilizamos um if/else para incluir a
string reprovado em caso de nota 0 ou calcular a média caso não
tenham notas 0. Em seguida refatoramos algumas expressões do código
e por fim substituimos tudo por um código ternário.
Para lembrar:
Código ternário faz o teste utilizando a seguinte sintaxe:
variavel = expressão ? bloco verdade : bloco mentira
Utilizando o spread operator para passar os valores de um array com parametros para a função. Sem o spread operator precisamos utilizar o métodoapply() para poder passar o array.
Aula 296 - Spoiler 2 - Arrow function
Podemos reduzir a sintaxe da função retirando o nome function, as chaves e o return utilizando uma arrow function ' => '.
Aula 297 - Desafio - Mostrar somente 10 palavras
Minha resolução do desafio.
Aula 298 - Desafio - Resolução
Importante. Aqui o professor fala que precisa colocar o
addEventListener quando o script está no
<head> do HTML, não é necessário quando está no final.
Importante. Quando utilizamos o innerHTML com o
Prettier temos problema na aquisição dos espaçamentos
aplicados na formatação do código. Preciso verificar como resolver
isso.
Apesar de eu ter utilizado a propriedade className na minha
resolução, aqui ele apresenta essa propriedade. A propriedade
className substitui a classe que já está no HTML ou caso
seja utilizado com o operador '+=' concatena a string digitada com o
nome da classe já existente.
Na resolução ele utiliza o método indexOf diretamente no
laço que cria a array. Para fazer o teste é utilizado o operador
ternário (tinha penasdo nisso na minha resolução) e utiliza o método
toLowerCase para universalizar o filtro (também ia fazer
isso).
Métodos de Date:
getDay(), getFullYear(), getHours(),
getMilliseconds(), getMinutes(),
getMonth, getSeconds, getTime(),
setDate(), setDay().
Os valores apresentados com os métodos de Date são considerados
quando o objeto Date é instanciado. Assim se instanciarmos o Date e
não recarregarmos o objeto os valores apresentados podem estar
atrasados.
Neste problema fiz de um jeito um pouco diferente sem muitos detalhes como a resolução final, mas a idéia ficou bem parecida.
Aula 302 / Aula 303 - Date - Desafio / Resolução
Resolução do desafio.
Aula 304 - Temporizadores - Adiando execução e entendendo a natureza single thread do Javascript
Métodos de temporizadores:
setTimeout(fn, ms), clearTimeout(id),
setInterval(fn, ms), clearInterval(id).
Importante: esses métodos só funcionam na execução no browser.
Eles não funcionam em nodeJS.
Podemos utilizar o setTimeout e o
setInterval diretamente no código. Entretanto se
atribuirmos esse métodos a variáveis essas variáveis vão receber um
valor identificador. Esse identificador pode ser utilizado como
parametro dos métodos clearTimeout() e
clearInterval().
Em seguida é feito um loop para travar a execução do Javascript para
mostrar que ele é single tread, ou seja, ele executa um processo por
vez.
Foi criado um banner simples com position: absolute e
utilizando um box-shadow para encobrir a tela.
A apresentação do banner é feita alterando a propriedade
display: none para display: block chamado na
função mostraBanner. Foram utilizados dois
setTimeout uma para a função mostraBanner e outro
para a função escondeBanner. O setTimeout da função
escondeBanner foi incluido na função mostraBanner para
evitar que a fila de execução anterior a esta função atrapalhe o
tempo de execução.
O ponto que eu não consegui pensar nesse desafio foi que a função que devemos utilizar no setTimeout() é uma função anonima que, esta sim, vai chamar a função que mostra a hora. Desse modo a cada 1000ms a função anonima definida em setInterval() chama a função mostraHora() que atualiza o valor de tempo.
Aula 307 - Temporizadores - Desafio 2
Neste exemplo o setInterval sozinho poderia fazer a
contagem de tempo do cronometro, entretanto o single thread do
Javascript pode gerar falhas na contagem de tempo, portanto devemos
utilizar o objeto Date().
Minha resolução (falta refatorar).
Criação da função de iniciar o cronometro e formatação dos valores para o padrão mm:ss:ccc.
Aula 310 a 312 - Temporizadores - Desafio 2 - Parte 3 a 5
Criação das funções dos botões pausar e limpar(parar). Ajustes nas funções de parar, iniciar e limpar para funcionarem de forma correta.
Aula 313 - Temporizadores - Desafio 2 - Parte 6 - Refatoração
Aqui criamos novas variáveis para a função de formatação do tempo.
Utilizamos também uma função recursiva, ou seja, uma função que
chama ela mesma para simplificar a formatação de minutos e segundos.
Aula 315 - BOM - parte 1
O BOM são propriedades e métodos relativos ao Browser(Browser Object
Model), diferente do DOM (Document Object Model). Não está descrito
na ECMA Script
Métodos BOM:
innerWidth / innerHeight: Demonstra o valor
disponível para visualização do documento na tela no momento
(alterando conforme o dimensionamento do browser).
outerWidth / outerHeight: Demonstra o tamanho
total da janela do browser (somando por exemplo a área utilizada
pelo DevTools se ativado).
opener
pageXOffset / pageYOffset: Mostra a posição da
tela quando temos barras de rolagem.
screenX / screenY: Mostra a posição do navegador
em relação a tela total do computador.
Objeto history:
history.lenght: Mostra quantas páginas foram visitadas no
histórico.
history.go(): Avança ou volta páginas do histórico (quando
colocamos (-1) volta uma página).
history.back() / history.forward(): Retorna ou
avança uma página do histórico.
Objeto location: Mostra diversas propriedades da
localização da página.
location.href: mostra o endereço da página.
Temos também outras propriedades como location.protocol,
location.hash (verificar as propriedades no console do
objeto).
Métodos do objeto location:
location.reload(): recarrega a página.
location.assign(endereço_da_página): Abre uma nova página
alterando o length do histórico.
location.replace(endereço_da_página): Abre uma nova página
sem alterar o length do histórico.
Objeto navigator: Mostra diversas informações sobre o
navegador que está acessando a página.
navigator.userAgent: mostra os dados do navegador do
usuário.
navigator.cookieEnabled: mostra se os cookies estão
habilitados.
Objeto screen: Mostra o tamanho da tela (varia conforme a
resolução. Apresenta o valor real, ou seja se a propriedade de vídeo
estiver configurada para texto com zoom vai apresentar a resolução
alterada).
Métodos:
alert(), confirm(), prompt.
open(): Abre uma nova aba com o site selecionado. Nesse
caso quando utilizamos o método opener() ele mostra qual
objeto chamou o método open(). Podemos passar como
parametros 'nome_da_janela',
'width=XXX, height=XXX'.
close(): fecha a janela (apenas quando utilizamos o método
open() para abrir a janela).
scrollTo(X, Y): move até o ponto (x, y) e
scrollBy(X, Y): move o valor (X, Y).
print(): imprime a página selecionada.
Eventos:
load e DOMContentLoaded: ocorre quando carregamos
a página.
resize: ocorre quando redimensionamos a janela.
scroll: ocorre quando rolamos a página.
unload e beforeunload: ocorrem quando fechamos ou
descarregamos a página.
Minha resolução do desafio.
Aula 319 - BOM - Desafio - Resolução
Resolução do desafio. Foram utilizadas funções específicas para cada
operação (uma para atribuir a classe no menu e outra para receber o
pageYOffset).
Para melhorar as manipulações no DOM foi criada uma outra função
para verificar se tem ou não a classe atribuida. Assim não
precisamos acessar o DOM a cada scroll da tela.
Para isso foi utilizado o operador !! que
transforma 'qualquer?' valor em booleano.
Com isso o retorno de document.querySelector('.fx') deixa
de ser null caso não exista a classe e passa a ser
false e no caso oposto true. Com esse resultado
podemos utilizar o operador && no comparador que verifica se
o valor do scroll é ou não maior que o valor definido,
manipulando-se o DOM apenas quando não for atendida a comparação.
Quando tentamos acessar estilos através da propriedade
style em Javascript não conseguimos acessar os estilos
passados a menos que eles estejam declarados de forma 'inline'.
Para manipular os estilos atribuidos externamente devemos utilizar a
propriedade
getComputedStyle(variável_atribuida_ao_elemento).propriedade_a_ser_manipulada.
Para localizarmos um elemento em relação ao documento utilizamos o
nome atribuido no elemento na variável do Javascript seguido de uma
das seguintes propriedades: var.offsetHeight /
var.offsetWidth (largura e altura),
var.offsetTop / var.offsetLeft (posição relativa
ao topo / esquerda).
Para verificar a posição de um elemento em relação a
viewport utilizamos o método
getBoundingClientRect(). Com esse método obtemos a posição
do elemento de acordo com a posição que ele está na viewport,
alterando-se este valor conforme a sua posição no momento.
Problema para selecionar os links conforme for rolando a tela. Foi
utilizado aqui os métodos getBoundingClientRect().top para
selecionar apenas o valor da posição de cima do elemento em relação
a viewport. Obtendo essa posição podemos definir qual a <li> que
está ativa no momento.
Fiz o código CSS de qualquer jeito apenas para fazer o JS funcionar.
Não utilizei o código fornecido pelo professor pois ele não foi
mostrado na aula, apenas disponibilizado para download.
Utilização em funções do return, break e
continue.
Quando utilizamos return temos o fim da execução da função
e o retorno do valor informado, saindo da função.
Já o break para a execução do comando mas continua a
execução da função.
Quando utilizamos o continue apenas saltamos a opção no
loop, continuando a execução de onde parou.
Um exemplo da utilização do break é no seletor
switch.
Explicação da base do projeto final. Explicando as metatags,
explicando a utilização do Font Awesome, Google Fonts,
fontes escolhidas para o projeto e tamanhos de fontes incluidas no
link.
Fazendo alguns ajustes no código HTML. Algumas palavras do projeto
estavam escritas em maiúsculas. Ocorre que leitores de conteúdo
podem ler palavras em maiúsculas como se fossem siglas, portanto
devemos escrever as palavras no HTML sempre com o case correto e se
necessário ajustar no CSS.
Explicação da semântica utilizada no HTML e da sequencia de
elementos.
Aplicando a tag <abbr> na sigla WP(Wordpress).
Inserção do link para o CSS no HTML.
Aplicação da fonte principal no <body> e ocultar o botão de menu
com display: none (aplicado inline) para tratamento
posterior.
Criação de uma classe no-js na tag <body> para trabalhar
sem Javascript no código. Quando o Javascript estiver habilitado
mudamos essa classe para js.
Criação das classes do <header> e aplicando os estilos nas
classes header, logo-text e header__nav.
Utilizamos inicialmente um display: inline-block no logo e
no nav, entretanto alteramos para display: block com
float: left para manter o logotipo a esquerda. Após isso
limpamos o fluxo a esquerda com clear: left para posicionar
o menu abaixo do logo. Essa formatação foi utilizada para, em caso
de não estar habilitado o Javascript o menu ser apresentado de forma
fixa na tela, na mesma posição em que será apresentado com o menu
hamburguer só que fixo.
Aqui aplicamos o hover nos links <a> do menu. Entretanto como esta a área abrangida pelo efeito será apenas a parte em que está o texto. Para aumentarmos a área do efeito para toda a área do elemento mudamos o display dos links <a> para display: block. Em seguida tranferimos o padding para a classe do link <a> para que toda a área do item no menu seja clicável. Por fim foi aplicado um transition para suavizar o efeito.
Aula 329 - CSS - hero
Criação das classes da primeira <section>. Para evitar que as
imagens fiquem maiores que a tela de trabalho (fiquem responsivas)
colocamos um estilo nas tags <img> de
max-width: 100% garantindo que as imagens não excedam o
viewport.
Em seguida, para alinharmos o texto no centro da tela no sentido
vertical, aplicamos o display: flex. Como o
display: flex ordena por padrão os elementos em linha
precisamos alterar a direção utilizando o
flex-direction: column. Por fim, aplicamos o
justify-content: center para que os elementos fiquem
alinhados ao centro do elemento na vertical. Em seguida foi feita a
estilização dos elementos da seção com especial atenção para o
botão. Para o botão precisamos aplicar um
display: inline-block para que o elemento <a> que faz
referencia ao botão não ficasse ocupando toda a linha. Entretanto a
formatação só funcionou depois que aplicamos a propriedade
align-items: center na classe que contém o
display: flex.
Fazer uma seta na página utilizando CSS.
Para fazer a seta utilizamos a propriedade
liner-gradient para criar o efeito na tela junto com o
background (background-image) Aplicamos à propriedade
a cor desejada (no caso white e transparent) e fazemos a
configuração para criar dois triangulos (utilizando 45deg e -45deg).
Em seguida fazemos o posicionamento no bottom e
center. O posicionamento em center não coloca o efeito
na posição correta, desse modo alteramos a posição para
left e utilizamos a propriedade calc(50% + 20px) para
posicionar o line-gradient em 50% (center) + e - 20px. O
tamanho das imagens ficará
background-size: 40px 40px, 40px 40px, cover (40 x 40 nas
duas setas e cover para a imagem de fundo).
Criando as classes e os estilos dos cards.
Para ajustar a imagem dos avatares que são duplicadas utilizamos o
overflow: hidden e definimos o width e o
height em 88px (o tamanho da imagem original é 88px x 176px).
Foi criada uma <div> com a classe container com
definições de margin-left/right: auto e
padding-left/right: 1em para a <section> dos cards que
define um padding afastado para o conteudo. Essa classe será
utilizada em outras partes da página.
Neste projeto quando passamos o mouse sobre os cards inserimos uma
borda no card e na imagem do avatar. A borda do avatar utiliza a
metade de baixo da imagem.
Se utilizarmos a propriedade border cada vez que
aplicarmmos o hover teremos o redimensionamento do card. Para
resolver esse problema utilizamos a propriedade outline do
mesmo modo que o border. Neste caso para manter a imagem fixa
e apenas a borda com o outline móvel aplicamos a propriedade
outline-offset: -5px (onde o valor é o tamanho da linha da
borda).
Para aplicar a borda na imagem do avatar utilizamos a propriedade
transform: translateY(-50%) de modo a trocar para a imagem
de baixo do avatar (pre configurada na imagem original e oculta com
o overflow: hidden). Podiamos utilizar como valor para o
translateY o tamanho da metade da imagem em pixels (-88px)
porém caso mudassemos o tamanho da imagem teríamos também que mudar
o translateY.
Aqui incialmente aplicamos a <div class="container"> para
ajustar as laterais da <section>.
Aplicadas as classes e feitos os ajustes de cores, utilizamos a
propriedade word-spacing para aumentar a distancia entre as
palavras.
Por fim foi feita a formatação dos botões e aplicado o
hover e a transition.
Foram criadas duas <div> para isolar o título dessa seção e
aplicar as formatações. Entre as classes utilizadas está a
class= "container".
Em seguida foi feita a formatação do texto do título.
Para as imagens utilizamos o display: grid para a <div>
principal e o display: block para as imagens.
Com as imagens definidas em display: grid formatamos o
grid utilizando
grid-template-columns: repeat(auto-fill, minmax(25px, 1fr))
para definir o tamanho das imagens,
grid-auto-columns: auto e grid-gap: 0 para que as
linhas sejam definidas automaticamente de acordo com a quantidade de
imagens.
Para ajustar os espaços entre as imagens definimos o
width delas em 100%.
Para a seção do carousel primeiramente trabalhamos o conteúdo sem o
Javascript. Para isso, como o conteúdo não será dinamico retiramos
os ícones das setas (anterior e próximo) aplicando um
style="display: none" nas <span> que contém as setas.
Essa propriedade display será alterada pelo Javascript,
assim caso ele estaja disponível ele será o responsável por
habilitar a exibição das setas.
Em seguida criamos as classes das <div> da seção. Para as
imagens não ficarem em bloco alteramos a propriedade
display para inline-block. Com isso as imagens irão
se ajustar uma ao lado da outra e abaixo conforme o tamanho da
viewport. Para que as imagens fiquem necessariamente em apenas uma
liinha utilizamos a propriedade white-space: nowrap. Essa
propriedade não deixa que o conteúdo mude de linha criando uma barra
de rolagem inferior no browser. Para que a barra de rolagem fique
apenas na seção que está na linha aplicamos a propriedade
overflow: auto. Com isso a barra de rolagem ficará apenas
nas imagens do carosel.
Primeiramente aplicamos o estilo inline
"display: none;" para ocultar as setas(botões) de next e
previous caso o Javascript esteja desabilitado.
Criação das classes e definição de estilos de fonte e background.
Aqui foi criado um margin-top para ser aplicado com duas
condições:
Primeira: apenas quando o Javascript estiver desabilitado. Para isso
utilizamos no seletor a classe no-js que foi criada na tag
<body> para ser desabilitada quando o Javascript estiver
habilitado.
Segunda: a propriedade margin-top só deve ser aplicada a
partir do segundo elemento (no caso do segundo <figure>). Para
isso utilizamos o operador '+' que indica que a propriedade só deve
ser aplicada na tag que aparace após a tag indicada. No caso
utilizamos figure + figure ou seja apenas o figure que
esteja após outro figure.
Criação das classes e inclusão da <div> container.
Aplicadas as formatações de estilo do rodapé. Neste ponto
finaliza-se a aboradagem mobile first. A seguir iniciaremos
os ajustes para telas maiores, utilizando as media-queries e
reajustando as dimensões e posicionamentos.
Criação da primeira media-querie para o menu inicial. Essa
media-querie transforma o menu superior em
position: fixed para que ele fique fixo no topo da página,
redimensiona o logo no menu para 25% e aplica um novo display none
no elemento <button> do menu que só deverá ser apresentado
quando for habilitado o menu hamburguer. Até esse momento aplicamos
o display: none inline na tag do botão pois consideramos o
Javascript desabilitado (classe no-js). Entretanto se o
Javascript estiver habilitado a propriedade inline será removida,
desse modo devemos aplicar o display na media-querie.
Em seguida aplicamos ao <nav> o width de 75% para complementar o
espaço do logo e a propriedade float: left, além de limpar o
clear: left que havia sido utilizado com clear: none.
Até esse momento não conseguimos posicionar o menu a esquerda.
O problema com o posicionamento do menu a esquerda foi porque
aplicamos um padding no logo de 20px. Esse padding adicionava 20 px
a direita e a esquerda do logo fazendo com que ao
width: 25% fosse somado 40px. Dessa forma os 25% mais os 75%
mais os 40px excediam 100%. Para evitar esse problema se ter que
alterar as porcentagens do width utilizamos a propriedade
box-sizing: border-box que soma o padding ao tamanho do
logo mantendo-o dentro dos 25%.
Para a <ul> foi aplicada propriedade display: flex com
o alinhamento justify-content: space-around, foi removida a
borda inferior e aplicado o flex-grow: 1 para que toda a
área de cada item da <li> seja clicável. Isso foi aplicado pois
o space-around distribuiu as <li> no espaço determinado
mas sem ocupar esses espaços com todo o conteúdo.
Foi incluido ainda um max-width: 800px na <nav> para que
o menu não fique justificado até o limite da tela, restringindo a
lagura máxima do space-around.
Para formatar os cards utilizamos a propriedade
display: grid no elemento principal. Apenas com essa
alteração e definindo o
grid-template-columns: repeat (4, 1fr) (quatro colunas) e o
grid-gap que é o espaçamento entre os frames.
Para ajustar os espaçamentos/posição dos cards em relação as margens
esquerda e direita aplicamos na classe container um
max-width: 980px. Dessa forma os elementos que utilizam
essa classe ficam centralizados com tamanho máximo de 980px. Lembre
que estamos fazendo esse projeto em mobile first assim tudo
foi feito inicialmente pensando em tela pequenas, sendo necesário
esse tipo de ajuste nesse momento.
Ajuste do alinhamento do texto do logo a direita.
Para o content também utilizamos o display: grid, dessa vez
selecionando as classes content e container.
Ajustar o posicionamento das imgens da seção last-articles.
Como esta seção já estava com a propriedade
display: grid mesmo na versão mobile apenas ajustamos o
numero de colunas quando tivermos mais tamanho na tela com a
propriedade grid-template-columns.
Aplicado no footer a propriedade display: flex e ajustada a margem de todo os objetos filhos através do seletor > * . Fizemos também um ajuste no texto do logo para uppercase através da criação de uma classe no elemento <h2>.
Aula 343 - Javascript - menu - parte 1
Criação e inclusão dos arquivos de script main.js e
menu.js
Criação da função auto-executável em main.js.
No arquivo main.js declaramos a variável para o <body>
com o document.querySelector, e fizemos a alteração da classe
de no-js para js com as instruções
classList.remove e classsList.add.
Com a inclusão da classe js podemos começar a programar o
menu.
No 'CSS' incluimos o seletor .js .header para fixar o menu
com o position: fixed tanto para o modo mobile quanto para o
desktop (no query-selector já estava com a posição fixed).
Nesse ponto criamos uma variável para o botão e fizemos a sua
atribuição através da classe.
Em seguida removemos o atributo de style (no caso o estilo
inline aplicado na tag fica limpo).
Foram criados os estilos no CSS na classe
.header__btnMenu posicionando o botão a direita com
float: right e aplicando as demais formatações. O botão
nesse ponto (onde se ve o nome 'menu') será visível apenas para os
screen readers. Para ocultar o botão criamos um <span> no label
do botão com a classe sr-only (screen reader only). Essa
classe é baseada no Bootstrap e remove o texto do botão. Não
consegui entender por que a classe remove o texto pois não estamos
utilizando o Bootstrap e não definimos essa classe em lugar nenhum.
Na verdade essa classe está presente também no Font Awesome.
Para redimenisonar o botão adicionamos a classe fa-2x no
html nas classes do Font Awesome.
Nesta aula iniciamos a criação do código do menu. Para isso foi
criado um objeto com as seguintes características:
var menu = new Menu({
container: '.header__nav',
toggleBtn: '.header__btnMenu',
widthEnabled: 1024 })
Esse objeto tem como função definir os elementos que serão
alterados. No arquivo menu.js criamos a função Menu().
Inicialmente foram feitas operações ternárias para verificar se os
conteudos de nav e btn são strings e então configurar
os seletores.
Todo esse procedimento ficou bastante confuso.
Preciso rever essa aula para tentar entender todo esse
processo.
Ajustando o menu. Quando aumentamos o tamanho da tela após utilizar
o menu e atualizamos a página o menu desaparece. Isso ocorre porque
aplicamos um estilo inline na tag %ltnav$gt que transforma o
max-height para 0px.
Foi criado um laço que monitora o tamanho da tela e quando ela é
redimensionada, caso o max-width for maior que o definido
(no caso 1024) o estilo inline é removido.
O segundo problema é que quando aumentamos a tela, quando diminuimos
o menu é acionado automaticamente. Para corrigir isso foi incluido
no loop uma opção que verifica o resize da tela. Caso a tela
não for maior que o maxWidth ele chama a função
closeMenu().
Um novo bug foi encontrado aqui. Quando a tela esta em modo desktop
ao apertar F5 ou atualizar a página o menu superior
desaparece. Isso acontece porque o código Javascript está chamando a
função closeMenu()
Para resolver esse problema retiramos o closeMenu() da função
principal e colocamos um condicional para que a função seja chamada
apenas quando o tamanho da janela for menor ou igual ao maxWidth.
Foi localizado outro problema. Quando a janela era dimensionada para
exatos 1024px o menu desaparecia e não aparecia nem no modo inline
nem no modo hamburguer. Para corrigir isso alteramos o valor da
media querry para 1025px no arquivo CSS.
Para o carousel novamente criamos um objeto de configuração. Aqui
utilizamos como propriedades do objeto o 'container' representado
pela classe .laptop-slider .slideshow, o 'itens' que utiliza
as tags figure e os botões 'btnPrev' e 'btnNext' ccom as
classes .prev e .next.
Criamos um arquivo carousel.js que irá conter o Javascript do
elemento.
Nesse arquivo criamos a função carousel() e indicamos seus
elementos com o this. referenciando o container, o
itens, o btnPrev e o btnNext.
Em seguida foi criada uma função init() que fará a
manipulação das figuras do carousel. Foi criado um Array com os
itens e uma função de listener para verificar o click nos
botões btnPrev e btnNext. Os botões invocam funções
para mostrar os slides utilizando incremento e decremento de 1. A
função de mostrar o slide trabalha com o operador '%' (módulo da
divisão).
Para evitar numeros negativos utilizamos a função
Math.abs que converte o numero em positivo.
Em seguida removemos a classe show dos elementos e incluimos
a classe show no elemento do array cujo valor está na
variável slide.
Nesta aula iniciamos a configuração do CSS para o carousel.
Primeiramente alteramos o overflow dos elementos quando a
classe no body estiver em js. Em seguida definimos as
posições do slideshow para relative e das
figure para absolute posicionando ao centro e com o
tamanho de 100%. Todas as figure ficarão com
opacity: 0 menos a que tiver a classe definida com
show (atribuido pelo JS).
Foi feito também o posicionamento dos botões e alterado seu
z-index para que ele tenha prioridade no posicionamento.
Com essa mudança precisamos aumentar o z-index do header
que tem a position: fixed.
Para centralizar os elementos do slideshow atribuimos um
max-width: 900px. O position: absolute ficou
definido para todos os elementos com opacity: 0 e no
elemento com a classe show que tem o opacity: 1 o
position fica definido como static para evitar
pequenos saltos na troca das imagens.
O slideshow utilizado para os depoimentos irá aproveitar o mesmo
código Javascript utilizado no carousel. O que devemos fazer é no
arquivo main.js criar uma nova variável com o mesmo objeto
mas referenciando as classes do elemento dos depoimentos.
No projeto inicial os botões 'prev' e 'next' estavam fora da
<div> container, portanto devemos coloca-los na dentro da
<div>.
Por fim o ajuste do CSS deve ser feito.
Explica algumas formas de hospedagem de sites:
Tecnologia
Estático: Quando não depende de consultas a sistemas além
do HTML/CSS/JS
Dinâmico: Quando precisamos realizar acessos a aplicações
externas.
Tipo de serviço
Compartilhado: modo mais comum para sites estáticos.
VPS (Virtual Private Server): Similar ao compartilhado
porém com mais opções de personalização.
Dedicado: máquina dedicada totalmente configurável.
Cloud: sistemas de armazenamento em nuvem (AWS, Azure,
Google).
Upload de arquivos
FTP, terminal (SSH) ou CPanel.
Outros serviços:
github:pages, heroku, netlify,
DigitalOcean.
Sites de hospedagem gratuita
github:pages
ir para o site
Heroku
ir para o site
DigitalOcean
ir para o site
Netlify
ir para o site
Domínio
meudominio.com nome principal do domínio.
www.meudominio.com, blog.meudominio.com,
app.meudominio.com - nome secundário do domínio.
Para registrar os domínios:
Registro.br
ir para o site
GoDaddy
ir para o site
Para configurar o site devemos utilizar o IP fornecido pela empresa
de hospedagem no gerenciador do domínio. Devemos cadastrar também o
domínio secundário (no caso www. para página web).
No registro.br podemos redirecionar o nome do domínio utilizando a
opção EDITAR ZONA.