O truncamento de texto é uma técnica usada para lidar com conteúdo que transborda seu contêiner, escondendo a parte extra e substituindo-a por reticências (...). Aqui estão as maneiras de implementar isso em CSS, JavaScript e PHP.
let paragrafo = "Este é um exemplo de texto que será truncado se for muito longo.";
if (paragrafo.length > 45) {
let textoTruncado = paragrafo.substring(0, 45 - 3) + '...'; // Subtrai 3 para adicionar as reticências
console.log(textoTruncado); // Exibe o texto truncado
}
Truncamento de Texto com PHP
$string = "Este é um exemplo de texto que será truncado.";
$textoTruncado = mb_strimwidth($string, 0, 15, "...");
echo $textoTruncado; // Exibe: "Este é um e..."
Caso você se depare em um momento na qual precise retornar ao cliente um feedback (Uma orientação sobre o que foi recebido) utilizando o Elementor Pro como fiel escudeiro. Um alert box é uma das melhores opções para uma interação performática.
Primeiramente para que seja feito o Alert box, é necessário a criação de um modelo de Popup;
Após criar o modelo, estilize da forma que achar melhor e preencha os seguintes campos (Requisitos para que o Alert Box funcione);
Configurações do Popup – Avançado
Agora com o popup estilizado e com as devidas configurações, daremos início ao lado negro da força… A programação!
Com o código fonte da sua aplicação em mãos, criaremos um arquivo chamado alert-box.php, que fará o chamado do seletor imposto anteriormente.
<?php
defined( 'ABSPATH' ) || exit;
add_action('wp_head', 'print_function_query');
// Define a função print_function_query
function print_function_query() {
// Adiciona a classe 'alert-box' ao html
echo '<a class="alert-box" href="#"></a>';
}
add_action('wp_footer', 'print_function_query');
return;
add_action('wp_head', 'print_function_query'): Esta linha adiciona a função print_function_query ao gancho (hook) wp_head. Isso significa que quando o WordPress estiver construindo a seção <head> da página, essa função será executada.
A função print_function_query(): Esta função é definida logo em seguida. Ela simplesmente imprime um link com a classe CSS alert-box. Esse link será imprimido na página permitindo o chamado do seletor no qual declaramos no modelo de popup em sua configuração avançada.
add_action('wp_footer', 'print_function_query'): Similar ao wp_head, esta linha adiciona a função print_function_query ao gancho wp_footer, que é colocado no final do documento HTML. Isso garante que o código HTML gerado pela função seja exibido no final da página.
É importante que você não esqueça de incluir o arquivo alert-box.php ao seu arquivo functions caso esteja separado.
No JavaScript utilizaremos o método “trigger” que ira simular um evento de click no que foi passado no PHP;
alert-box.php
echo '<a class="alert-box" href="#"></a>';
main.js
const AccessError = () => {
$('.alert-box').trigger('click'); // Evento de click na classe alert-box
$('.alert-box-container').addClass('error'); // Adicionando classe error
}
Em jQuery, o método .trigger() é usado para acionar manualmente um evento em um elemento selecionado.
Classe “error” irá colorir o popup de vermelho caso fracasso.
O exemplo acima é executado em um cenário no qual o formulário foi submetido com algum tipo de falha. Portanto, em um dado momento de fracasso, a constante AcessError é acionada para chamar o alert-box.
É recomendado verificar se a classe existe afim de prevenir um chamado inexistente do alert-box.
Type Conversion, ou Typecasting, refere-se à mudança de um tipo de dado para outro. A conversão implícita ocorre quando o compilador ou o tempo de execução automaticamente transformam os tipos de dados. Além disso, o código fonte pode explicitamente demandar uma conversão para acontecer.
Conversão de uma String para Number
O método global Number() converte uma variável (ou um valor) em um número.
Uma string numérica (como “3.14”) é convertida em um número (como 3.14).
Uma string vazia (como “”) é convertida em 0.
Uma string não numérica (como “John”) se converte em NaN.
Analisa uma string e retorna um número de ponto flutuante
parseInt()
Analisa uma string e retorna um número inteiro
Conversão de Números em Strings
O método toString() é o método interno de um objeto Number que permite a mudança de qualquer valor do tipo Number para um tipo String.
Para utilizar é fácil, basta chamar o método em um valor do tipo Number.
let num = 15;
var str = num.toString();
console.log(num); // 15
console.log(str); // "15"
Sistema que são válidos para a conversão:
Sistema binário (de base 2), que têm dois algarismos – 0 e 1
Sistema ternário (de base 3), que têm três algarismos – 0, 1 e 2
Sistema quaternário (de base 4), que têm quatro algarismos – 0, 1, 2 e 3
E assim por diante até o sistema Hexatridecimal (de base 36), que tem a combinação dos números arábicos (de 0 a 9) com as letras latinas de A até Z
Utilizando o método toString(), podemos fazer também a conversão de um número decimal para obter um valor em binário.
Da seguinte maneira:
var str = (5).toString(2);
console.log(str); // "101"
Assim como podemos fazer a utilização de parâmetros radix:
Number.toString(radix);
O parâmetro “radix” refere-se à base númerica utilizada na interpretação de uma string como um número inteiro.
Por padrão, o método toString() converte um número para sua representação em base 10. No entanto, você pode usar o parâmetro para converter o número em uma base diferente.
let numero = 10; console.log(numero.toString()); // Saída: "10" (em base 10) console.log(numero.toString(2)); // Saída: "1010" (em base 2, binária) console.log(numero.toString(8)); // Saída: "12" (em base 8, octal) console.log(numero.toString(16)); // Saída: "a" (em base 16, hexadecimal)
Também podemos converter uma Array para uma String utilizando o método:
let arr = [ "Tok", "Digital" ];
let str = arr.toString();
console.log(str); // "Tok,Digital"
Tal como booleanos:
let bool = true;
let str = bool.toString();
console.log(str); // "true"
O Operador Unary
Um operador unário trabalha em um operando e são eles:
Unário Mais + que converte um operando em um número.
let a = 10; a = +a; // 10
Unário Menos - que converte um operando em um número e nega o valor depois dele.
let a = 10;
a = -a; // -10
Se o valor é um número, o operador unário plus não causa efeito algum, no entanto o operador unário minus torna o valor negativo.
Caso você aplique os operadores unários plus ou o minus em um valor não numérico, ele realiza a mesma conversão que a função Number().
let s = "10"; console.log(+s); // 10
Nesse exemplo, s é uma string. Entretanto, quando colocamos o operador unário plus na frente dele, a strings é convertida em um número.
A seguir podemos ver que o operador unário converte valores booleanos em números, false em 0 e true em 1.
let verdadeiro = true; let falso = false; console.log(+verdadeiro); // 1 console.log(+falso); // 0
Operadores de incremento e decremento
Inspirado na linguagem de programação C, o conceito de incremento possui um significado sugestivo: aumentar um valor existente em 1 unidade. Da mesma forma, o decremento realiza o oposto, diminuindo o valor em 1 unidade. Esses operadores podem ser aplicados como prefixos ou sufixos, e sua escolha afeta o momento em que a operação é realizada em relação à avaliação da expressão.
Incremento prefixo e sufixo ++ que adiciona um ao seu operando.
let inc = 9; ++inc; console.log(inc); // 10
No exemplo acima o operador de incremento como prefixo adiciona sobre o valor de inc, 1 unidade a mais.
Decremento prefixo e sufixo -- que subtrai um do seu operando.
let dec = 10; --dec; console.log(dec); // 9
O incremento e decremento agora atuando como sufixo funciona da mesma maneira que utilizado como prefixo. A única diferença é que ao invés da operação ser executada depois da resolução, utilizando o sufixo, a operação é executada antes mesmo da resolução.
Prefixo:
let i = 10, j = 20;
let op = i-- + j;
console.log(op); // 30
console.log(op); // 9
Sufixo:
i = 10; let op = --i + j; console.log(op); // 29 console.log(i); // 9
Quando você usa o operador de incremento ou decremento como sufixo (i-- ou i++), a operação é realizada após a resolução da expressão. Isso significa que, no caso de i--, o valor de i é usado na expressão, e então i é decrementado.
console.log(op); // 30
console.log(op); // 9
Por outro lado, quando você usa o operador como prefixo (--i ou ++i), a operação é realizada antes da resolução da expressão. Portanto, no caso de --i, i é primeiro decrementado e, em seguida, o valor de i decrementado é usado na expressão.
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.
type
typeof return value
object 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:
É 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.
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.
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 (“).
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.
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:
Number: São como chaves inglesas e parafusos. Por exemplo, você tem a chave inglesa número 10 e o parafuso número 8.
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.
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.
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.
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.
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.
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.
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:
Comentários