Tipos de dados JavaScript (Data Types)


Os softwares lidam frequentemente com uma grande quantidade de dados, os quais podem assumir uma variedade de formas e propósitos. Cada tipo de dado possui suas características específicas como o uso e implementações subjacentes. Possuem também conceitos abstratos que permitem organizar e classificar os dados com base em seus valores e nas operações que podem ser realizadas sobre eles.

Por exemplo, considere o tipo de dado int, amplamente utilizado em diversas linguagens de programação. Matematicamente, sabemos que os números inteiros variam de infinito negativo até o infinito positivo, incluindo todos os números inteiros entre esses extremos. No entanto, no contexto das máquinas, os números inteiros são finitos, limitados a uma faixa específica.

Existem situações em que um tipo de dado representa um único valor sem possibilidade de realizar operações sobre ele. Em outros casos, um tipo de dado pode representar um conjunto quase infinito de valores (limitado pela memória disponível), com suporte a uma ampla gama de operações.

Dinamismo

JavaScript é reconhecido por ser uma linguagem dinâmica, apresentando tipos também dinâmicos. Ao contrário de algumas linguagens, as variáveis em JavaScript não estão rigidamente vinculadas a um tipo específico de valor. Na verdade, uma variável pode receber e, posteriormente, reatribuir valores de qualquer tipo:

let x = 42; // x Agora é um número
x = "Ola"; // x Agora é uma string
x = true; // x Agora é um booleano

Embora as coerções implícitas sejam convenientes em muitos casos, elas podem ocasionalmente gerar bugs sutis, especialmente quando as conversões ocorrem em momentos inesperados ou na direção contrária à esperada (por exemplo, de string para número, em vez de número para string). Para symbol e BigInts, o JavaScript proibiu intencionalmente certas conversões implícitas de tipo.

Tipos Primitivos

Os tipos primitivos em JavaScript são fundamentais para o funcionamento da linguagem. Entre eles, temos os objetos de wrapper, que são objetos que fornecem funcionalidades adicionais e métodos em torno dos tipos primitivos correspondentes. Por exemplo, o objeto String fornece métodos como toUpperCase() e substring(), que são úteis para manipulação de strings.

Quando tentamos acessar propriedades em valores primitivos, o JavaScript automaticamente converte o valor primitivo em um objeto wrapper correspondente, permitindo o acesso à propriedade desejada. No entanto, é importante notar que acessar propriedades em valores null ou undefined resulta em uma exceção TypeError, que pode ser tratada usando o operador de encadeamento opcional (?.).

Esses objetos de wrapper são úteis para fornecer funcionalidades adicionais aos tipos primitivos, tornando mais fácil e conveniente trabalhar com eles em JavaScript.

typetypeof return valueobject wrapper
null“object”N/A
undefined“undefined”N/A
boolean“boolean”boolean
Number“Number”Number
bigInt“bigInt”bigInt
string“string”string
symbol“symbol”symbol
Primitive Types

Na maioria das vezes, um valor primitivo é representado diretamente no nível mais baixo da implementação da linguagem.

Null

Em JavaScript, null não é uma referência a um objeto inexistente ou um endereço de memória nulo que não aponta para nenhum local válido na memória do sistema como em algumas outras linguagens. Ele é apenas um valor especial que representa “nada”, “vazio” ou “valor desconhecido”.

let age = null;

Undefined

O valor undefined cria um tipo próprio assim como null e tem como significado “valor não atribuído”, ou seja, se uma variável for declarada, mas não atribuída, então seu valor será undefined:

let age;

alert(age); // exibe "undefined"

É possível também atribuir explicitamente undefined a uma variável:

let age = 100;

// change the value to undefined
age = undefined;

alert(age); // "undefined"

Mas não é recomendado o seu uso. O comum é a utilização do null para atribuir um valor “vazio” ou “desconhecido a uma variável, enquanto undefined é reservado como valor padrão para coisas não atribuídas.

Boolean

O tipo booleano possui apenas dois valores: verdadeiro e falso. Este tipo é comumente usado para armazenar valores sim/não: verdadeiro significa “sim, correto” e falso significa “não, incorreto”.

let verificaNome = true; // sim, nome verificado
let verificaIdade= false; // não, idade não verificada

Os valores booleanos também se aplicam a comparações:

let ehMaior = 4 > 1;

alert( ehMaior ); // sim, o resultado afirma que 4 é maior que 1.

Number

O tipo de dado Number representa números, tanto inteiros quanto de ponto flutuante. Esses números podem ser usados em uma variedade de operações matemáticas, como adição, subtração, multiplicação e divisão, entre outras.

let n = 123;
n = 12.345;

Além dos números regulares, o tipo “number” também inclui valores especiais:

  • Infinity: O infinito na matemática representa um valor especial maior que qualquer número. Podemos obtê-lo como resultado da divisão por zero:

Obtendo pelo resultado com a divisão por “0”:

alert( 1 / 0 ); 

Referenciando diretamente:

alert( Infinity ); 
  • Infinity: Similar ao “Infinity”, mas negativo.
  • NaN (Not-a-Number): Representa um erro computacional e é retornado quando uma operação matemática é indefinida ou incorreta.

Por exemplo:

alert( "sou string" / 2 ); // NaN, tal divisão é incorreta pois não se pode dividir string por number

Se um valor NaN estiver envolvido em qualquer parte de uma expressão matemática, ele propagará o resultado como NaN. No entanto, uma exceção é a operação "NaN ** 0", que retorna 1.

BigInt

O tipo “Number” tem limitações em relação à representação segura de números inteiros. Embora seja capaz de armazenar números inteiros consideravelmente grandes, como até 1,7976931348623157 * 10^308, há um ponto onde a precisão é comprometida. Especificamente, números inteiros maiores que (2^53-1) ou menores que -(2^53-1) não podem ser representados com precisão dentro do tipo number.

Em termos práticos, isso significa que valores inteiros ímpares além do limite de (2^53-1) não podem ser armazenados como “number”. Embora para muitos casos de uso, o intervalo entre -(2^53-1) e (2^53-1) seja suficiente, certas aplicações como criptografia demandam a capacidade de lidar com números inteiros realmente grandes.

Para atender a essa necessidade, o JavaScript introduziu o tipo BigInt, que permite representar números inteiros de comprimento arbitrário. Um valor BigInt é criado anexando o sufixo “n” ao final de um número inteiro:

// o "n" no final significa que é um BigInt
const bigInt = 1234567890123456789012345678901234567890n;

Sendo assim, podemos trabalhar com números inteiros muito grandes sem perder a precisão necessária para aplicações críticas.

String

São sequências de caracteres, que podem incluir letras, números, símbolos e espaços. Podendo ser definidas utilizando aspas simples (”), aspas duplas (“”) ou acento grave (“).

// Aspas simples
alert('hello');

// Aspas duplas
alert("hello");

// Backticks
alert(`hello`);

Não há alguma diferença em usar aspas duplas ou simples no JavaScript, porém o uso de Backticks é marcado com uma “funcionalidade estendida”. Eles nos permitem incorporar variáveis ​​e expressões em uma string envolvendo-as em ${…}.

let nome = "John";

// incorporando uma variável
alert( `Olá, ${nome}!` ); // Olá, John!

// incorporando uma expressão
alert( `O resultado é: ${1 + 2}` ); // O resultado é 3

A expressão dentro de ${…} é avaliada e o resultado é incorporado à string. Dentro desses delimitadores, você pode colocar qualquer coisa: desde variáveis como nome, expressões aritméticas ou algo mais complexo. É importante notar que essa funcionalidade de incorporação só está disponível dentro de crases (“); outras formas de citação sendo aspas simples ou duplas, não possuem essa capacidade, como abordado anteriormente.

Symbol


É um tipo de dado especial utilizado para criar identificadores únicos para objetos. Enquanto os tipos primitivos como strings e números, podem conter apenas uma única entidade, os objetos são usados para armazenar coleções de dados e entidades mais complexas.

Quando se trata de Symbol, sua principal característica é sua unicidade. Cada elemento criado é único, o que significa que dois elementos nunca serão iguais, mesmo que tenham a mesma descrição. Isso os torna úteis para criar propriedades de objetos que devem ser exclusivas e não entrar em conflito com outras propriedades.

No entanto, os detalhes sobre o tipo de dado em questão geralmente são discutidos após uma compreensão completa de objetos, pois ambos são frequentemente utilizados em conjunto para criar propriedades especiais. Essas propriedades podem ser acessadas e manipuladas de forma distinta das propriedades tradicionais de objetos.

O operador typeof é útil para determinar o tipo de dado de uma variável ou expressão. Quando aplicado, o typeof retornará 'symbol', o que permite identificar facilmente se um valor é ou não um symbol. Isso é útil em situações em que é necessário processar valores de diferentes tipos de maneira distinta ou realizar verificações rápidas de tipo.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

O resultado de typeof null ser um “object” é oficialmente reconhecido como um erro a muito tempo do typeof.

Mas seu uso não ocasionará problemas com o código por si só, apenas quando houver divergência na verificação de tipos. Isso porque, “computacionalmente” falando, null não deveria ser um object mas sim um tipo primitivo próprio. Este é um dos bugs mais famosos do JavaScript, que não teve como ser consertado em versões posteriores pela particularidade do JavaScript de ser uma linguagem interpretada no lado “cliente” da requisição.

Portanto, concluímos “Tipos de dados” imaginando uma caixa de ferramentas. Cada ferramenta na caixa tem um propósito específico e é armazenada de uma maneira particular.

Para cada tipo podemos dizer que:

  1. Number: São como chaves inglesas e parafusos. Por exemplo, você tem a chave inglesa número 10 e o parafuso número 8.
  2. Strings: São como etiquetas ou rótulos em suas ferramentas e usados para identificar ou descrever algo. Por exemplo, você pode ter uma etiqueta com o nome da marca ou algum tipo de rótulo fornecendo informações sobre a ferramenta.
  3. Booleanos: Imagine que você tem um interruptor em cada ferramenta que pode estar ligado (true) ou desligado (false). Por exemplo, você pode ter um interruptor na sua parafusadeira que, quando ativado, permanece em true, e quando desativado, permanece em false.
  4. Null e Undefined: Às vezes, em sua caixa de ferramentas, você pode ter espaços vazios onde deveria haver uma ferramenta, mas ainda não está lá (undefined). Ou você pode ter uma gaveta que está totalmente vazia (null), sem ferramentas dentro dela.
READ MORE

O que é jQuery? Um Tok em umas das bibliotecas JavaScript mais usada da Web

Quer dominar jQuery, mas ainda não está familiarizado com JavaScript? Não se preocupe! Comece sua jornada agora mesmo clicando aqui e descubra como fazer a web ganhar vida!

jQuery – Write Less, Do More

A biblioteca é um projeto da Fundação JavaScript, surgiu como resposta à necessidade de simplificar os scripts interpretados no client-side. Seu objetivo principal é capacitar os desenvolvedores a alcançarem mais com menos esforço, adotando o lema “Write Less, Do More” (Escreva menos, faça mais) como mantra da comunidade.

Com o jQuery, tarefas que normalmente exigiriam longos e complexos blocos de código podem ser simplificadas para uma única linha. Desde a implementação de efeitos visuais dinâmicos até a manipulação de eventos interativos, essa biblioteca possibilita que os desenvolvedores atinjam seus objetivos de forma rápida e eficiente, ao mesmo tempo que promove a escrita de código mais limpo, legível e conciso. Isso resulta em uma compreensão aprimorada do código para todos os envolvidos no projeto.

Demostração

// Em JavaScript puro
var botaoOcultar = document.getElementById('ocultarConteudo');
var conteudoDiv = document.querySelector('.conteudo');

botaoOcultar.addEventListener('click', function() {
  if (conteudoDiv.style.display === 'none') {
    conteudoDiv.style.display = 'block';
  } else {
    conteudoDiv.style.display = 'none';
  }

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

// Em jQuery 
$("#ocultarConteudo").click(function() {
  $(".conteudo").toggle();
});

Demostração

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Suas principais Funcionalidades

  • Resolução da incompatibilidade entre os navegadores.
  • Redução de código para otimização e desempenho.
  • Reutilização do código através de plugins.
  • Integração com uma vasta quantidade de plugins criados por outros desenvolvedores.
  • Facilidade para acessar e manipular o DOM de forma simplificada.
  • Compatibilidade com AJAX (Asynchronous JavaScript And XML) para comunicação assíncrona com o servidor.
  • Implementação segura de recursos do CSS1, CSS2 e CSS3 para garantir consistência visual e comportamento.
  • Adoção de programação encadeada, em que cada método retorna um objeto, para melhor legibilidade e manutenção do código.

Seletores

No jQuery, os filtros são métodos que permitem selecionar elementos específicos de um conjunto de elementos correspondentes a um seletor. Eles são úteis para refinar a seleção de elementos, permitindo escolher elementos com base em diferentes critérios, como classe, ID, atributos, etc.

$(“*”)Seleciona todos os elementos da página.
$(this)Seleciona o elemento atual que será manipulado dentro de uma função.
$(“p”)Seleciona todas as instâncias da tag < p >.
$(“.example”)Seleciona todos os elementos com a classe “example” aplicada.
$(“[type=’text’]”)Seleciona qualquer elemento com o atributo type aplicado como “text”.
$(“p:first-of-type”)Seleciona o primeiro elemento < p > encontrado na página.

Verifica se pelo menos um dos elementos selecionados possui a classe especificada.

var hasMenuClass = $("#m2").hasClass("menu");

Remove elementos indesejados com base em uma função que retorna true para os elementos desejados e false para os indesejados.

$("p").filter(function(i) {
  return i === 3;
});

Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro.


var ids = $("div").map(function() {
  return $(this).attr("id");
});

Esses são apenas alguns exemplos de filtros que você pode usar no jQuery para interagir com os elementos da página de forma mais simples.


Veja na documentação oficial do jQuery mais exemplos

READ MORE

Enviar dados de formulário do Elementor Pro para função PhP e responder

A tempos venho trabalhando com Elementor Pro e tem ajudado muito nas entregas que temos feito aqui na agência em termos de agilidade no desenvolvimento. Nos últimos anos entregamos alguns sistemas de gestão e utilizamos Elementor Pro para construir as interfaces gráficas desses sistemas e o ponto alto desse processo se deu essa semana, quando conseguimos pela primeira vez receber os dados de um formulário em uma função PhP e retornar para o Java Script a resposta da nossa função, e não apenas “success”.

Nosso grande dilema até então era o fato de não termos controle sobre o que acontecia no back-end, apenas sabíamos que os dados haviam sido enviados com sucesso, se a função havia armazenado ou se algum dado estava com problemas era sempre uma incógnita.

Vamos a prática!

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) { } );
?>

Essa é a action que trata os dados enviados por todos os formulários do site, ou seja, dentro da função pode-se identificar qual formulário enviou os dados e executar um script ou até mesmo funções com os dados enviados pelo formulário. Até aqui tudo certo, já era uma prática nossa, sua não? Então vou mostrar um pouco mais dessa action.

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
        $form_name = $record->get_form_settings( 'form_name' );
        $raw_fields = $record->get( 'fields' );
        if( 'nome-do-formulario' == $form_name ) {
            $return = function_trata_dados( $raw_fields );
	    $handler->data['customer_mail'] = $return;
        }
    }, 10, 2 );
?>

A função executada na action usa dois parâmetros, o $record trás os dados do dormulário, então nele consigo identificar o nome do formulário (linha 2) e um array com os campos dele (linha 3), faça o que quiser com essas informações, acima estou mostrando um exemplo de uso.

O segundo parâmetro “$handler” foi o grande sucesso da semana, ele devolve ao front-end resposta sobre o envio, na posição “customer_mail” pode-se passar uma String que será tratada no JS a seguir:

<script>
    $(document).on('submit_success', '#id-formulario', function( event, response ) {
        if ( response.data.customer_mail ) {
            console.log( response.data.customer_mail );
        }
    });
</script>

E esse é o JS que trata a resposta da action “’elementor_pro/forms/new_record’”. Simples assim! (Depois de sabermos da existência disso hehehe).

Dúvidas, fica a vontade para comentar…

READ MORE

JavaScript – Manipulação de Elementos no DOM

A manipulação do DOM (Document Object Model) com JavaScript é um aspecto fundamental do desenvolvimento web. O DOM é uma representação da estrutura hierárquica de elementos HTML em uma página da web, e JavaScript permite que você acesse, modifique e manipule esses elementos dinamicamente. Neste artigo veremos alguns conceitos e técnicas básicas para a manipulação do DOM com JavaScript:

Selecionar elementos do DOM:

Podemos selecionar elementos HTML usando os métodos:

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.querySelector()

document.querySelectorAll()

Selecionando um elemento pelo ID

const element = document.getElementById(‘meuElemento’);

Selecionando elementos por classe

const elements = document.getElementsByClassName(‘minhaClasse’);

Seleciona elementos por tag

const elementos = document.getElementsByTagName(‘p’);

Seleciona o primeiro elemento que corresponde a um seletor CSS

const elemento = document.querySelector(‘.minhaClasse’);

Seleciona todos os elementos que correspondem a um seletor CSS

const elementos = document.querySelectorAll(‘p.minhaClasse’);

Modificar o conteúdo e os atributos:

Podemos alterar o conteúdo de elementos e atributos usando propriedades como:

innerHTML,  textContent, e setAttribute()

Por exemplo:

const element = document.getElementById(‘meuElemento’);

element.innerHTML = ‘Novo conteúdo’;

element.textContent = ‘Texto de conteúdo’;

element.setAttribute(‘id’, ‘novoID’);

Adicionar e remover elementos

Você pode adicionar novos elementos ou remover elementos existentes do DOM. Por exemplo:

Criar um novo elemento

const novoElemento = document.createElement(‘div’);

Adicionar o novo elemento como filho de outro elemento

const container = document.getElementById(‘container’);

container.appendChild(novoElemento);

Remover um elemento

const elementoParaRemover = document.getElementById(‘elementoParaRemover’);

elementoParaRemover.parentNode.removeChild(elementoParaRemover);

Eventos

O JavaScript permite que a atribuição de eventos a elementos HTML para responder a ações do    usuário, como cliques, mouseovers, etc.

Por exemplo:

const botao = document.getElementById(‘meuBotao’);

botao.addEventListener(‘click’, function() {

alert(‘Botão clicado’);

});

Manipulação de classes CSS:

Podemos adicionar, remover ou alternar classes CSS em elementos para controlar sua aparência e comportamento.

Por exemplo:

const elemento = document.getElementById(‘meuElemento’);

elemento.classList.add(‘minhaClasse’);

elemento.classList.remove(‘outraClasse’);

elemento.classList.toggle(‘classeAlternada’);

Essas são apenas algumas das muitas maneiras de manipular o DOM com JavaScript. A manipulação do DOM é uma habilidade essencial para criar aplicativos web interativos e dinâmicos.

READ MORE

Operadores CSS

Os operadores CSS são símbolos especiais que são utilizados para combinar seletores e aplicar regras a elementos específicos em uma página da web.

Os operadores mais comuns são:

Operador de seleção universal (*)

Este operador seleciona todos os elementos dentro de um documento HTML.

Operador de Classe (.)

É utilizado para selecionar elementos que possuem um atributo de classe específico. Por exemplo, p.minha-classe seleciona todos os elementos p que possuem a classe minha-classe.

No exemplo abaixo, todos os elementos HTML que possuem uma classe “botão” terão um estilo específico aplicado a eles.

.button {

  background-color: blue;

  color: white;

  padding: 10px 20px;

  text-align: center;

}

Podemos aplicar essa classe a botões, links ou qualquer outro elemento que desejar. Por exemplo, no HTML:

<button class=”button”>Clique aqui</button>

<a href=”#” class=”button”>Link de Exemplo</a>

Ambos os botões e o link herdarão os estilos definidos para a classe “button” no CSS.

O uso de classes é uma técnica muito importante no CSS, pois permite que você aplique estilos a elementos específicos, independentemente de seu tipo ou posição no documento HTML.

Operador de ID (#)

É utilizado para selecionar elementos HTML que têm um atributo “id” específico. Diferentemente do operador de classe (.) que pode ser usado para aplicar estilos a vários elementos com a mesma classe, o operador de ID seleciona um elemento exclusivo em toda a página, pois o valor do atributo “id” deve ser único na página HTML.

Podemos usar o operador de ID da seguinte forma:

#header {

  background-color: #333;

  color: white;

  padding: 10px;

  text-align: center;

}

Neste exemplo, qualquer elemento HTML com o atributo “id” definido como “header” terá o estilo especificado aplicado a ele. Por exemplo, no HTML, podemos utilizar assim:

<div id=”header”>

  <h1>Título do Site</h1>

 </div>

O elemento <div> com o atributo “id” definido como “header” será estilizado de acordo com as regras CSS definidas.

O uso de IDs deve ser único em uma página HTML, um mesmo “id” não deve ser aplicado a múltiplos elementos.

Operador de Pseudo-classe (:)

As pseudo-classes são usadas para selecionar elementos HTML com base em estados específicos ou interações do usuário. Elas são identificadas pelo uso de dois pontos (:) e são adicionadas aos seletores CSS para aplicar estilos a elementos com base em seu estado.

Pseudo-classe :hover:

Seleciona um elemento quando o cursor do mouse está sobre ele.

Exemplo:

                a:hover {color: blue;}

Altera a cor do texto de links quando o mouse passa sobre eles.

Pseudo-classe :active:

Seleciona um elemento quando ele está ativo (por exemplo, quando o botão do mouse é pressionado).

Exemplo:

button:active {background-color: red;}

Altera a cor de fundo de um botão quando ele está sendo clicado.

Pseudo-classe :focus:

Seleciona um elemento quando ele recebe foco, geralmente por meio de teclado ou interações com o navegador.

Exemplo:  

                input:focus {border: 2px solid green;}

 Adiciona uma borda verde a um campo de entrada quando ele está em foco.

As pseudo-classes são importantes pois permitem aplicar estilos com base em interações do usuário e na posição dos elementos. Elas são frequentemente usadas em combinação com seletores de elementos para controlar o comportamento de diferentes partes de uma página da web.

Operador de Atributo: ([atributo=valor])

O operador de atributo em CSS permite selecionar elementos HTML com base em os valores de seus atributos. Ele é usado para aplicar estilos a elementos que possuam um atributo específico com um determinado valor. A sintaxe básica do operador de atributo é a seguinte:

seletor[atributo=valor] {

    propriedade: valor;

}

seletor: É o que você deseja selecionar no documento HTML, como uma tag HTML, uma classe, uma ID.

[atributo=valor]: É o operador de atributo. Ele seleciona elementos que possuem um atributo específico com um valor correspondente.

propriedade: valor: Aqui, você define as propriedades CSS e os valores que deseja aplicar aos elementos selecionados.

Operador de Agrupamento (,)

O operador de agrupamento (`,`) em CSS é usado para agrupar múltiplos seletores e aplicar as mesmas regras de estilo a todos eles. Isso permite que você defina um conjunto comum de estilos para vários elementos sem ter que repetir as regras de estilo em várias regras CSS separadas.

Exemplo:

h1, h2, h3 {

  font-family: Arial, sans-serif;

  color: #333;

}

As regras de estilo se aplicam a todos os elementos <h1>, <h2> e <h3>. Podemos listar quantos seletores quiser, separando-os por vírgulas.

Operador de Negação (:not())

O operador de negação :not() em CSS é uma pseudo-classe que permite selecionar elementos que não correspondem a um determinado seletor. Essa pseudo-classe é útil quando você deseja aplicar estilos a elementos específicos, excluindo outros que correspondem a um seletor geral. O formato básico da pseudo-classe :not() é o seguinte:

:not(seletor) {estilos a serem aplicados a elementos que NÃO correspondem ao seletor}

Alguns exemplos de como podemos utilizar:

Excluir um elemento com uma classe específica:

p:not(.special) {color: blue;}

Aplicará a cor azul a todos os elementos `<p>` que não têm a classe “special”.

Excluir um elemento com uma ID específica:

div:not(#exemplo) {background-color: yellow;}

Aplicará um fundo amarelo a todos os elementos `<div>` que não têm o ID “exemplo”.

A pseudo-classe :not() é uma maneira eficaz de aplicar estilos de forma seletiva a elementos específicos, excluindo outros com base em critérios de seleção.

Operadores de Combinação

Operadores de Combinação (>,  + e  ~) são utilizados para combinar e selecionar elementos de forma específica. Aqui estão alguns exemplos de operadores de combinação em CSS:

Espaço ( ) – Combinador descendente:

Seleciona elementos que são descendentes de outro elemento.

 Exemplo:

                div p {color: blue;}

Isso seleciona todos os elementos p que são descendentes de um elemento <di>v.

Maior que (>) – Combinador de filho direto:

Seleciona elementos que são filhos diretos de outro elemento.

Exemplo:

                ul > li {list-style-type: square;}

Seleciona todos os elementos <li> que são filhos diretos de uma lista não ordenada <ul>.

Sinal de adição (+) – Combinador adjacente:

Seleciona um elemento que é imediatamente precedido por outro elemento.

Exemplo:

                h2 + p { font-weight: bold;}

Seleciona todos os elementos <p> que são precedidos diretamente por um elemento <h2>.

(~) – Combinador de irmãos gerais:

Seleciona elementos que são irmãos de outro elemento, não necessariamente adjacentes.

Exemplo:

                h3 ~ p {font-style: italic;}

Seleciona todos os elementos <p> que são irmãos do elemento <h3>, independentemente de sua proximidade no documento.

Os operadores de combinação em CSS permitem que você selecione elementos de maneira mais precisa e específica, com base em sua relação com outros elementos no documento HTML. Isso é útil para aplicar estilos de forma seletiva a partes específicas de uma página da web.

Esses são alguns dos operadores mais comuns em CSS que permitem selecionar e aplicar estilos a elementos específicos em uma página da web.

READ MORE

Pontuação, Hierarquia e Sequência dos Seletores CSS

Pontuação entre ID, classe e tag

No CSS, a pontuação entre o ID, a classe e a tag é usada para especificar a especificidade de um seletor. A qual determina qual estilo será aplicado a um elemento quando há conflito entre regras CSS. A regra geral é que seletores mais específicos têm prioridade sobre os seletos menos específicos. Aqui está como a pontuação funciona:

Tag: Um seletor de tag, como “p” para parágrafos ou “div” para divisões, tem a menor especificidade e, portanto, a menor pontuação. Ele é representado como “0,0,0,1” na contagem de especificidade.

Classe: Um seletor de classe, como “.classe”, tem uma especificidade maior do que um seletor de tag e é representado como “0,0,1,0”. A diferença é que agora temos “1” na segunda posição.

ID: Um seletor de ID, como “#id”, tem a maior especificidade e é representado como “0,1,0,0”. Neste caso, temos “1” na terceira posição.

A contagem de especificidade é representada por quatro números, que indicam a importância dos seletores na seguinte ordem: IDs, classes e atributos, seletores de elementos e seletores universais.

Aqui está um exemplo para ilustrar como a especificidade funciona:

#minhaId { /* Especificidade: 0,1,0,0 */
  color: red;
}
.classe { /* Especificidade: 0,0,1,0 */
  color: blue;
}
p { /* Especificidade: 0,0,0,1 */
  color: green;
}

Se você tiver um elemento com a classe “.classe” e um ID “#minhaId”, a cor será vermelha, porque o seletor de ID tem uma especificidade maior do que o seletor de classe.

Em casos de conflito, o seletor com a maior especificidade terá prioridade. É importante ter em mente a especificidade ao escrever regras CSS para garantir que os estilos sejam aplicados conforme desejado.

Hierarquia dos Seletores

A hierarquia dos seletores CSS, também conhecida como cascata, é o princípio pelo qual o navegador decide quais estilos aplicar a um elemento quando vários seletores se aplicam a ele. A hierarquia é baseada na especificidade e na ordem de declaração das regras CSS. Aqui está a hierarquia dos seletores em ordem de prioridade:

Importância do Estilo: A regra de importância mais alta é a que tem maior precedência. Isso pode ser definido usando a propriedade “!important”. Quando uma regra tem “!important”, ela sempre prevalecerá, independentemente da especificidade ou da ordem de declaração.

.exemplo {
  color: red !important;
}

.exemplo {

  color: red !important;

}

Especificidade: A especificidade dos seletores é a próxima consideração. Seletor com maior especificidade terá prioridade sobre os seletores com menor especificidade. A hierarquia de especificidade é geralmente representada como “a,b,c,d”, onde “a” é o número de IDs, “b” é o número de classes, atributos e pseudo-classes, “c” é o número de seletores de elementos e “d” é o número de seletores universais.

#meuId {

  color: blue; /* Maior especificidade (0,1,0,0) */

}

.classe {

  color: green; /* Menor especificidade (0,0,1,0) */

}

p {

  color: red;

}

Ordem de Declaração: Se dois seletores têm a mesma especificidade, o último declarado no arquivo CSS terá precedência. A ordem de declaração segue a regra do último seletor encontrado.

.exemplo {

  color: red;

}

.exemplo {

  color: blue; /* Este estilo será aplicado, pois é o último */

}

Herança: Se nenhum dos fatores acima decidir o estilo de um elemento, o navegador recorre à herança. Isso significa que o elemento herdará o estilo de seu pai, a menos que haja uma regra mais específica para ele.

Seletores de Descendência e Filhos: Seletores de descendência (espaço em branco) e seletores de filho direto (“>”) também têm uma hierarquia. Por exemplo, um seletor mais específico dentro de uma hierarquia terá prioridade sobre um mais genérico.

div p { /* Estilos aplicados aos parágrafos dentro de divs */

  color: purple;

}

Em resumo, a hierarquia dos seletores CSS é uma maneira de determinar quais estilos serão aplicados a um elemento com base na especificidade, na ordem de declaração e em outras regras de cascata. Entender essa hierarquia é fundamental para o desenvolvimento web eficaz e o controle dos estilos em uma página.

Sequência de seletores

Em CSS, você pode criar seletores de várias maneiras para especificar quais elementos HTML receberão um estilo. Os seletores podem ser combinados para criar sequências mais complexas e específicas. Aqui estão alguns exemplos de sequências de seletores comuns:

Seletor de Tag: Isso seleciona todos os elementos com a tag especificada.

   p {

     /* Estilos aplicados a todos os parágrafos */

   }

Seletor de Classe: Isso seleciona todos os elementos que possuem uma classe correspondente.

   .classe {

     /* Estilos aplicados a todos os elementos com a classe “classe” */

   }

Seletor de ID: Isso seleciona um elemento específico com o ID correspondente.

   #id {

     /* Estilos aplicados ao elemento com o ID “id” */

   }

Seletor de Descendência: Isso seleciona elementos que estão aninhados dentro de outros elementos.

   div p {

     /* Estilos aplicados aos parágrafos dentro de divs */

   }

Seletor de Filho Direto: Isso seleciona elementos que são filhos diretos de um elemento específico.

ul > li {

  /* Estilos aplicados apenas às listas que são filhas diretas de elementos <ul> */

}

Seletor de Atributo: Isso seleciona elementos com um atributo específico.

[type=”text”] {

  /* Estilos aplicados a elementos com o atributo “type” definido como “text” */

}

Seletor de Pseudo-Classe: Isso seleciona elementos com base em estados ou interações específicas do usuário.

 a:hover {

     /* Estilos aplicados a links quando o cursor paira sobre eles */

   }

Combinando Seletores: Você também pode combinar vários seletores para criar sequências mais complexas. Por exemplo, “tag.class” selecionará elementos que têm a classe dentro de elementos com a tag correspondente.

   p.destaque {

     /* Estilos aplicados a parágrafos com a classe “destaque” */

   }

Estas são apenas algumas das muitas possibilidades de sequências de seletores em CSS. A combinação de seletores permite que você aplique estilos de forma seletiva e específica aos elementos HTML em suas páginas da web.

Em resumo, a compreensão da pontuação, hierarquia e sequência dos seletores CSS é essencial para controlar como os estilos são aplicados a elementos em uma página da web. A especificidade dos seletores, a relação hierárquica entre elementos e a ordem das regras definidas desempenham um papel crucial na resolução de conflitos de estilo e na criação de layouts e designs consistentes e desejados. É importante equilibrar a especificidade com a facilidade de manutenção para criar folhas de estilo CSS eficazes e de fácil gerenciamento.

READ MORE

O que é uma Position CSS?

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação e o Layout de elementos HTML em uma página web. O posicionamento é uma parte importante do CSS, pois determina como os elementos são dispostos na página em relação a outros elementos e ao próprio fluxo do documento.

Para a propriedade position, podemos atribuir 5 valores, que são: static, fixed, sticky, relative, absolute.

Vamos entender como funciona cada uma delas:

Position Static (Estático):

É um comportamento padrão do HTML, onde os elementos são posicionados em ordem, de cima para baixo e da esquerda para a direita.

Elementos em fluxo normal não aceitam propriedades CSS especiais para o seu posicionamento.

Position Fixed (Fixo):

O posicionamento fixo, faz com que o elemento que recebeu esta propriedade não se mova na tela. Mesmo que a página possua rolamento (scroll), tanto rolando para a esquerda e direita, quanto para cima e para baixo. Um exemplo seria usar uma barra de navegação lateral onde a mesma ficaria fixa, a navegação fica sempre visível durante o uso da página.

Exemplo:

.teste {

      position: fixed;

      height: 1000px;

}


Position Sticky (Colado/pegajoso):

Este posicionamento precisa de um posicionamento de referência, por tanto é sempre em conjunto das propriedades auxiliares. Parecido com o fixed, mas sua diferença, é que em vez de ficar fixo em relação a tela, fica fixo em relação a rolagem da página.

Exemplo:

.teste {

       position: sticky;

        top: 0px;

}

Position Relative (Relativo):

O posicionamento relativo serve para posicionar o elemento da página de acordo com as indicações que você definir.

A posição é definida através de quatro outras propriedades: top, bottom, left, right, que indicam a distância com relação ao topo, base, esquerda e direita, respectivamente, tomando como referência o posicionamento do elemento pai.

Exemplo:

.teste {

      position: relative;

      left: 150px;

}

Position Absolute (Absoluto):

A posição será definida em relação ao próximo elemento pai que esteja posicionado relativamente ou absolutamente.

Se não houver um elemento pai definido, por padrão ele irá definir o próprio documento HTML como sua raiz, significa que a posição será definida em relação à própria página web.

Exemplo:

.teste {

      position: absolute;

      top: 50px;

       left: 50px;

}

A diferença entre o position relative e o position absolute é basicamente qual elemento será usado como referência para realizar o posicionamento. O relative leva em consideração sua própria posição ao se deslocar. E o absolute leva em consideração a posição do elemento pai que possua um position relative, ou então será relativo ao próprio navegador. 

Em resumo, o posicionamento CSS é uma ferramenta poderosa para controlar o layout e o design de páginas da web. É essencial entender as propriedades de posicionamento e usá-las de forma adequada para criar layouts desejados e funcionais. Além disso, ao projetar para a web, é importante levar em consideração a responsividade e a adaptabilidade a diferentes dispositivos e tamanhos de tela.

READ MORE

Semana começa com queda de 3 dos maiores aplicativos: WhatsApp, Facebook e Instagram

Se você desconectou a sua internet pensando que o problema era com o seu Wi-fi, calma, foram o WhatsApp, Facebook e Instagram no mesmo dia!

De acordo com o site Down Detector, conhecido por apontar falhas em serviços na internet, o problema não aconteceu somente no Brasil:  houve relatos de instabilidade em diversas regiões do planeta, incluindo América Latina e Europa. 

Sim, isto mesmo! Parece que nesta segunda-feira dia 04 de outubro a dor de cabeça foi maior para Marck Zuckerberg e seus desenvolvedores. 

As falhas começaram por volta das 12h20 (horário de Brasília) e acabou prejudicando social midias, e o setor de atendimento de diversas empresas.

Já não é a primeira vez que acontece e muito menos a última, mas 3 plataformas no mesmo dia, pode pedir música, não é mesmo tio Zuck?

Quem utiliza o Twitter pode se atualizar e também se divertir com memes e brincadeiras sobre a produção nesta segunda -feira.

O fato é que empresas investem alto nestes canais de comunicação, e dependem deles para lucrarem, mas a pergunta que fica é: como foi o dia destes players com as plataformas fora do ar? 

Bom, a semana já começa nos mostrando que no marketing digital, precisamos diversificar nossos processos e sempre que possível, canalizar a nossa comunicação de forma mais inteligente, seja através de sites otimizados, processos interno, ou até mesmo e-mails marketing.

Desta forma, reduzimos o dano com a queda destes aplicativos em nosso dia a dia.

READ MORE

O que é WordPress e como funciona sua estrutura de dados

WordPress é um “Sistema de gerenciamento de conteúdo” de código aberto e livre com o objetivo de facilitar a criação de sites e blogs, sem a necessidade de ter um conhecimento prévio em programação.
O código do WordPress utiliza o PHP como linguagem back-end, e MySQL (ou MariaDB), como gerenciador do banco de dados.
Pode-se usá-lo para o desenvolvimento de sites de e-commerce, portfólios profissionais, publicação de eventos, divulgação científica ou qualquer tipo de conteúdo de forma textual e gráfica.
E esse é só o começo do porque usar wordpress.

Páginas e Posts, qual a diferença?

Páginas

• São atemporais;
• organização hierárquica (pai/filho);
• Não tem autor nem data de publicação.

Posts

• São oportunos;
• Organizados por taxonomias;
• Precisam de um autor e uma data.

Embora eles sejam diferentes, o armazenamento desses posts acontece no mesmo lugar, na tabela wp_post. Oque vai diferenciar essas duas coisas dentro da tabela é a coluna “post_type”, tipo de post, onde vai estar armazenado se o post é do tipo página, post, attachment etc…
Por Exemplo:

Tabela wp_post

O que é Post meta?

Também chamados de “custom field”, são os campos do post que não fazem parte dos campos padrões, como o título, o conteúdo, ou o autor do post.
Por exemplo:

Nesse projeto criamos um post do tipo “despachante”, e precisamos também criar muitos post meta para armazenar as informações sobre esses despachantes. E é assim que vai aparecer no ambiente administrativo.

Já no banco de dados as informações ficam armazenadas desta forma:

Todos os posts meta de todos os tipos de post vão ficar armazenados nessa tabela chamada wp_post_meta.

O que é Taxonomia?

É uma forma fácil e prática de agrupar posts, garantindo que seja fácil pro usuário achar dentro do site conteúdos relacionados. Por padrão o Post já vem com as taxonomias categoria e tags, mas o wordPress disponibiliza uma função para que possamos criar nossas taxonomias personalizadas.
Por exemplo:

Usando o mesmo exemplo do projeto citado acima, criamos três taxonomias para agrupar os despachantes.

Já no banco de dados as taxonomias e seus termos são armazenados desta forma:

Essa é a tabela wp_term_taxonomy, onde ficam armazenados todas as taxonomias e seus termos.

Essa é a tabela wp_terms, onde ficam armazenados todos os termos.

Essa é a tabela wp_term_relationships, onde fizam armezados os termos e os posts aos quais este termo está relacionado.

Espero que tenha conseguido clarear um pouco mais na sua cabeça como funciona a estrutura de dados do nosso queridinho WordPress.
O que você achou desse artigo? Deixa um comentário vai, nunca te pedi nada <3

READ MORE
Como ativar a Webcam usando javscript

Como ativar a Webcam usando javscript

Estava desenvolvendo um projeto de cadastro de despachantes utilizando meu queridinho WordPress, e uma das informações necessárias para a realização do cadastro era uma foto 3X4 que seria tirada na hora do cadastro, ou seja, teria que usar uma Webcam. Sem mais delongas, abaixo mostrarei a função que usei para ativar a Webcam.

HTML

Você pode usar as classes e Ids que quiser. A webcam irá reproduzir na tag <video>, a <img> eu usei para mostrar um preview da imagem que será gerada pela captura da webcam, e o input é onde eu vou colocar o base64 que vou usar para gerar uma imagem no PHP quando eu der submit no <form>.

 <div class=”content-photo”>

                <label>Foto 3×4</label>

                <video autoplay=”true” id=”webCamera”></video>  

                <img id=”imagemConvertida”/>

                <input  type=”hidden” id=”base_img” name=”agent_base_img”/>

            </div>

            <button type=”button” class=”cameratools”><i class=”fas fa-camera”></i>Abrir câmera</button>

JAVASCRIPT
Eu usei o mesmo botão para ativar a webcam e para capturar a imagem, então eu primeiro verifico se o botão está ativo ou não. Se estiver ativo o botão irá capturar a imagem, se não irá abrir a webcam.

 $(‘.cameratools’).on(‘click’, function(){

        if($(this).hasClass(‘active’)){//Captura a imagem

            $(this).removeClass(‘active’);     

             var video = document.querySelector(“#webCamera”);

            //Criando um canvas que vai guardar a imagem temporariamente

            var canvas = document.createElement(‘canvas’);

            canvas.width = video.videoWidth;

            canvas.height = video.videoHeight;

            var ctx = canvas.getContext(‘2d’);

            //Desenhando e convertendo as dimensões

            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            //Criando o JPG

            var dataURI = canvas.toDataURL(‘image/jpeg’); //O resultado é um BASE64 de uma imagem.

            document.querySelector(“#base_img”).value = dataURI;

            document.querySelector(“#imagemConvertida”).src = dataURI;

            $(‘#imagemConvertida’).show();

            $(‘#webCamera’).hide();

            $(this).html(‘<i class=”fas fa-camera”></i>Abrir câmera’);

        }else{//Abre a webcan

            $(this).addClass(‘active’);

            //Captura elemento de vídeo

            var video = document.querySelector(“#webCamera”);

            $(‘#webCamera’).show();

            $(‘#imagemConvertida’).hide();

            $(‘#imagemConvertida’).attr(‘src’,”);

            $(‘#base_img’).val(”);

            //As opções abaixo são necessárias para o funcionamento correto no iOS

            video.setAttribute(‘autoplay’, ”);

            video.setAttribute(‘muted’, ”);

            video.setAttribute(‘playsinline’, ”);

            //Verifica se o navegador pode capturar mídia

            if (navigator.mediaDevices.getUserMedia) {

                navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: ‘user’, height: 227, width: 227}})

                .then( function(stream){

                    //Definir o elemento vídeo a carregar o capturado pela webcam

                    video.srcObject = stream;

                })

                .catch(function(error) {

                    alert(“Você precisa ter uma câmera instalada no seu computador.”);

                });

            };

            $(this).html(‘<i class=”fas fa-camera”></i>Tirar foto’);

        }

    });

PHP

Aqui é onde eu gero a imagem através do base64 e salvo ela na pasta uploads.

if($_POST[‘agent_base_img’] != ”){
        $data = str_replace(” “,”+”,$_POST[‘agent_base_img’]); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir. 

        $name = md5(time().uniqid()); //Dou um nome aleatório para o arquivo
        $dir = wp_upload_dir();//Pego as urls dos diretórios do wordpress

        $path = $dir[‘path’].”/{$name}.jpg”;//Url wordpess

        $fileurl = $dir[‘url’].”/{$name}.jpg”;//Url da imagem no site

        $data = explode(‘,’, $data);

        //Save data

     $result = file_put_contents($path, base64_decode(trim($data[1])));//Cria a imagem

        if($result != ”){ //Se criou salva a URL da imagem num campo personalizado

update_post_meta($post_id,’imagem’,$fileurl);

        }    

    }

Agora você já sabe como executar a webcam, capturar uma imagem com ela e salvar ela no seu banco de dados. Espero ter ajudado e até a próxima.

READ MORE