Tag: JQuery

Publicado em

Live sobre Front-end JS e APEX

Olá pessoal, hoje é mainha primeira live solo apresentando sobre programação Front-end com o Oracle APEX. Nele estarei falando de diversas funcionalidades nas ações dinâmicas (event listeners) e como usar expressões javascript para estender as funcionalidades do código.

Onde?

A live será hoje, dia 21/06/22 as 20:00 no youtube pelo link:

Link da Live

Quais serão os tópicos?

Estarei falando de Oracle APEX, Ações Dinâmicas, JavaScript e jQuery

Isso ai, quem tiver interesse pode dar um pulo lá ou assistir depois.

Publicado em

Bootstrap 5 – Mudanças

Olá pessoal, neste artigo mostraremos as novidades do Bootstrap 5. A versão alfa já está disponível e há muitas diferenças entre as versões 4 e 5. Mas quais serão as mudanças?

jQuery

O Bootstrap 5 não depende mais do jQuery. Isso mesmo! O jQuery não é mais uma dependência no Bootstrap 5. Ele mudou para a utilização do próprio JavaScript (Vanilla) e isso é mérito do próprio jQuery. Ele foi uma peça fundamental no desenvolvimento Front-End, impulsionando mudanças nas tecnologias de desenvolvimento de interfaces web na última década. Os projetos construídos em Bootstrap 5 serão significativamente mais leves em tamanho e no carregamento de páginas.

Uma das alterações possíveis foi trocar a abordagem do plugin de botão em HTML e CSS para alternar estados. Você pode visualizar a lista de alterações relacionadas ao JavaScript na versão alfa do Bootstrap 5 aqui.

Novos visuais e sensações

O site e documentação agora não possuem mais largura total da página, melhorando a visibilidade e legibilidade, tornando o site mais semelhante à página de conteúdo, e não a um aplicativo. A barra lateral de seções expansíveis foi atualizada para uma navegação mais rápida. O Bootstrap também possui um novo logotipo que foi inspirado no CSS.

Fim do suporte ao Internet Explorer

O suporte para o Internet Explorer foi abandonado na versão 5. O foco da atualização é a construção de ferramentas mais amigáveis para o futuro.

Propriedades personalizadas no CSS

Graças ao fim do suporte ao Internet Explorer, foi possível começar a utilizar propriedades personalizadas ao CSS. A equipe de atualização do Bootstrap está trabalhando para utilizar os poderes das propriedades personalizadas Sass e CSS para um sistema mais flexível.

Personalização da documentação

A documentação foi aprimorada em diversos lugares, aumentando as explicações, removendo ambiguidades e fornecendo mais suporte para entender o Bootstrap. A documentação personalizada expande a página Theming da v4 com mais conteúdo e fragmentos de código para construir sobre arquivos Sass de origem Bootstrap. A paleta de cores também foi expandida na v5. Você pode personalizar a aparência da sua aplicação sem sair da base de código. Isso ajudará a tornar os sites baseados em Bootstrap mais acessíveis para todos.

Formulários

A documentação e componentes dos formulários foi revisada e foram consolidados todos os estilos de formulários na nova seção Formulários. Cada caixa de seleção, rádio, arquivo, entre outros, inclui uma aparência personalizada para unificar o estilo e comportamento dos controles de formulário no S.O. e navegador.

Você pode verificar mais atualizações no seguinte link: https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

Gostou deste artigo? Comente abaixo!

Referências:

Publicado em

Promoção Pacote Profissional JavaScript + jQuery

Com pressa?
Acesse direto o curso clicando aqui

Olá pessoal!

Durante o mês de Setembro estamos com uma promoção para o curso Pacote Profissional JavaScript, ES2020 e jQuery (+ jQuery UI).

Neste curso, abordamos o desenvolvimento web com JavaScript e jQuery.

Você vai utilizar as tecnologias:

  • JavaScript;

  • jQuery e jQuery UI;

  • ES2019;

  • ES2020;

  • Conceitos modernos de desenvolvimento web.

E você vai aprender:

  • Fundamentos do JavaScript;

  • Estruturas básicas de programação;

  • Aprofundamento das estruturas ensinadas;

  • Atualizações que o JavaScript vem recebendo;

  • Conceitos essenciais de JQuery.

Tudo isso resolvendo projetos que lhe auxiliarão no desenvolvimento dos seus sites e aplicações web!

Mostramos no curso as novas atualizações do ECMAScript 2020, que auxiliam o desenvolvedor a otimizar os seus códigos.

O curso está com desconto de 75% pelos próximos 31 dias e pode ser adquirido diretamente por este link:

Use nosso cupom : 1E2D3E957FADED9578A2  ou acesse direto pelo link abaixo

Acessar curso

Compartilhe com seus amigos!

 

Publicado em

jQuery: Utilizando o plugin Mask

Neste artigo, aprenderemos a importar e utilizar o Mask, criado por Igor Escobar e usa como base o jQuery.

O Mask permite que você crie máscaras personalizadas para os seus campos de input. Isso auxilia no formato dos seus dados. Por exemplo, se você quiser criar uma máscara para o seu input que captura a data, você consegue personalizar criando algo no formato (’00/00/0000′).

Download do plugin:

Você pode realizar o download do Mask no site:

http://igorescobar.github.io/jQuery-Mask-Plugin/

Após o download, você deve inserir a biblioteca no seu HTML utilizando a tag <script>.

Você também pode utilizar diretamente o CDN para importar sua biblioteca ao seu projeto, utilizando o seguinte comando:

<script src="hhttps://cdnjs.com/libraries/jquery.mask"></script>

É importante salientar que você precisa importar o jQuery no seu <head> do seu projeto. Você pode importar o jQuery do seu projeto utilizando o CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Como é a sintaxe?

É uma sintaxe simples, onde primeiramente é passado o seletor, seguido do .mask e o parâmetro que será utilizado. Por exemplo, no seu arquivo HTML você tem um campo de input para receber uma data:

<label>DATA</label>
<input type="text" class="date">

No seu arquivo de scripts, tudo o que você precisará para fazer a máscara funcionar é:

$(document).ready(function(){
    $('.date').mask('00/00/0000')
});

E com isso, já obtemos todas as vantagens do plugin. Essa seria a sua saída:

Mas o plugin não se aplica somente a datas. Com a utilização do Mask, podemos criar máscaras de input para CEP, CPF, Telefones e tantas outras possibilidades. Tudo que precisamos fazer é criar uma classe para cada tipo de input que utilizaremos na nossa página e utilizar essa classe no nosso script jQuery, como fizemos no exemplo anterior. Veja:

HTML:

<label>DATA</label>
<input type="text" class="date">
<label>HORAS</label>
<input type="text" class="time">
<label>CEP</label>
<input type="text" class="cep">
<label>TELEFONE</label>
<input type="text" class="phone">
<label>CPF</label>
<input type="text" class="cpf">
<label>DINHEIRO</label>
<input type="text" class="money">

E o nosso código jQuery:

$(document).ready(function(){
    $('.date').mask('00/00/0000');
    $('.time').mask('00:00:00');
    $('.cep').mask('00000-000');
    $('.phone').mask('(00) 00000-0000');
    $('.cpf').mask('000.000.000-00');
    $('.money').mask('000.000.000.000,00');
});

E teremos nossa saída:

Gostou deste artigo? Comente abaixo!

Referências: http://www.igorescobar.com/blog/2012/03/13/mascaras-com-jquery-mask-plugin/

Publicado em

Conheça o Semantic UI

O Semantic UI é um framework de desenvolvimento web que auxilia o desenvolvedor a criar sites e sistemas web bonitos e responsivos de maneira rápida e intuitiva.

Ele trata palavras e classes como conceitos permutáveis. As classes utilizam a sintaxe de idiomas naturais, com relações substantivo/modificador, ordem de palavras e pluralidade para vincular conceitos intuitivamente.

O Semantic utiliza o JavaScript de forma simples, utilizando chamadas simples que acionam as funcionalidades. Qualquer decisão arbitrária em um componente é incluída como configuração que pode ser modificada pelos desenvolvedores.

Semantic UI também possui uma depuração simplificada, pois o registro de desempenho permite rastrear os gargalos sem procurar nos rastreamentos da stack.

Ele vem equipado com um sistema de herança intuitivo e variáveis temáticas de ato nível que permitem ao desenvolvedor possuir uma total liberdade de projeto, desenvolvendo uma interface de usuário uma vez e implantando com o mesmo código em qualquer lugar.

É projetado para ser dimensionado responsivamente, pois as variações de design que são incorporadas aos elementos permitem que você escolha como o conteúdo será ajustado, tanto para tablet como para celular.

Também possui integrações com as bibliotecas mais utilizadas na atualidade: React, Angular, Meteor e Ember, entre muitas outra que ajudam a organizar a UI ao lado da lógica do app.

INSTALAÇÃO:

Você pode utilizar o Gulp para instalar o Semantic UI no seu projeto com Node.js:

npm install -g gulp
npm install semantic-ui --save
cd semantic/
gulp build

Ou pode adicioná-lo diretamente no seu arquivo HTML:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

Alguns elementos importantes do Semantic UI são:

Buttons:

Podemos facilmente criar buttons estilizados com apenas uma linha de HTML:

<button class="ui button active">Button</button>

Ou botões animados:

<div class="ui animated button" tabindex="0">
  <div class="visible content">Próximo</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>

Ícones:

Podemos adicionar ícones facilmente ao projeto:

<i class="american sign language interpreting icon"></i>
<i class="assistive listening systems icon"></i>
<i class="audio description icon"></i>
<i class="blind icon"></i>
<i class="braille icon"></i>

Listas:

<div class="ui list">
  <div class="item">Maçã</div>
  <div class="item">Peras</div>
  <div class="item">Laranjas</div>
</div>

Você pode verificar mais elementos diretamente no site: https://semantic-ui.com/

Gostou deste artigo? Comente abaixo!

Referências: https://semantic-ui.com/introduction/getting-started.html

Publicado em

Como criar eventos ao pressionar CTRL, ALT e SHIFT

Neste post rápido será visto como criar eventos para capturar quando o usuário pressiona CTRL, ALT ou SHIFT na tela do navegador. Aproveitando que isso já está sendo visto, também vamos testar algumas combinações de teclas.

A primeira parte que você precisa fazer é o evento. Você precisa dizer onde que deverá estar o foco na hora que foi apertado o botão, no nosso exemplo usaremos o document pois mais amplo que isso não tem como. Você pode usar o body ou até uma “zona” menor caso prefira.

 

JavaScript

document.addEventListener("keydown", function(event){});

 

JQuery

$(document).bind('keydown', function(event){ });

Note que estamos usando o evento “keydown”, isso é importante pois keypress e keyup não captura as teclas que queremos.

 

Agora vejamos sobre como saber o que foi clicado, você já deve ter tentado o key, keycode e which, mas nada aconteceu. Isso acontece pois precisamos acessar outras propriedades para saber se o CTRL, ALT ou SHIFT foram pressionados. Veja abaixo:

event.ctrlKey // CTRL

event.altKey // ALT

event.shiftKey // SHIFT

Simples assim? Sim, simples assim….

Então se quisermos saber quem foi pressionado, podemos fazer o seguinte:

 

JavaScript

document.addEventListener("keydown", function(event){

    if(event.ctrlKey) {
        console.log('ctrl');
    }

    if(event.altKey) {
        console.log('alt');
    }

    if(event.shiftKey) {
        console.log('shift');
    }
});

 

Para JQuery basta alterar a primeira linha por 

$(document).bind('keydown', function(event){

 

Por último, você pode estar querendo uma combinação, como por exemplo um CTRL + A. Agora que sabemos como pegar o CTRL, ficou fácil

document.addEventListener("keydown", function(event){

    if(event.ctrlKey && event.key == "a") {
        console.log('ctrl + a');
    }

});

 

É isso ai, espero que com esse post eu tenha ajudado outros que tiveram o mesmo problema para descobrir como criar estes eventos que combinam pressionar várias teclas. Até a próxima

Publicado em

O que o programador JavaScript deve saber

JavaScript é uma das principais linguagens de programação mais requisitadas no mercado de trabalho atual. No entanto, os empregadores geralmente procuram uma combinação de habilidades. Descubra o que mais você deve adicionar ao seu currículo para conseguir o seu próximo trabalho JavaScript.

A pesquisa vem do CV Compiler, uma empresa que, como o próprio nome sugere, ajuda a criar um currículo convincente para desenvolvedores e outros no setor de software. Para fornecer esta orientação, mantém-se continuamente atualizado com as demandas dos empregadores. Para esta pesquisa dos desenvolvedores de habilidades em JavaScript, a equipe do Compilador de CV precisou de 300 especificações de trabalho para desenvolvedores de JavaScript de AngelList, StackOverflow, LinkedIn e páginas de carreira de empresas de tecnologia em rápido crescimento em todo o mundo. Em seguida, usando sua própria ferramenta de análise de texto, eles identificaram os termos que foram mencionados com mais frequência e criaram este gráfico:

linguagens de programação, metodologias de programação e assim por diante. Na verdade, isso pode não ter sido a primeira coisa que você percebeu – você pode ter sido atingido pelo domínio do React. Mesmo se você permitir que qualquer abertura de trabalho para o React exija JavaScript, a demanda por essa estrutura parece ser esmagadora. Como existem apenas 300 listagens de empregos e o principal concorrente da React, Angular também tem uma alta proporção de menções, algumas aberturas precisam exigir múltiplas estruturas ou uma ou mais alternativas. Mesmo assim, o recorde de 267 da React é excelente, o Angular tem 195 pontos de crédito, enquanto o Vue apenas recebe 44 menções.

Comentando sobre isso no blog Game of Frameworks, Andrew Stetsenko escreve:

“Como você deve ter notado, o Vue.js não era tão alto em nossa classificação de habilidades. Eu acho que pode haver várias razões para isso. Primeiro de tudo, nem toda empresa está pronta para transferir seus projetos para o Vue.js e descartar soluções de front-end mais estáveis ​​e comuns. Em segundo lugar, os empregadores podem querer que os desenvolvedores aprendam o Vue.js enquanto trabalham, por isso eles não mencionam nas especificações iniciais do trabalho.”

Continue lendo “O que o programador JavaScript deve saber”

Publicado em

Efeito de scroll com Jquery

Este será um post bem rápido para mostrar um snippet de código que me ajudou a reduzir 1 biblioteca e manteve um efeito legal de scroll nos sites de uma página (as conhecidas landing pages).

Segue o snippet abaixo

$('html, body').animate({
    scrollTop: ($("objetoParaOndeIr").offset().top)
},500);

Como você pode ver não precisa fazer muito.

Para uma página Html que possui um menu com varios links apontando para sessoes especificas do site, você teria algo similar ao exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>teste</title>
</head>
<body>
    <section style="min-height: 75vh;">
        <a href="#sessao1">sessao1</a>
        <a href="#sessao2">sessao2</a>
        <a href="#sessao3">sessao3</a>
        <a href="#sessao4">sessao4</a>
    </section>
    <section id="sessao1" style="min-height: 75vh; background-color: aqua;"><h1>sessao1</h1></section>
    <section id="sessao2" style="min-height: 75vh; background-color: burlywood;"><h1>sessao2</h1></section>
    <section id="sessao3" style="min-height: 75vh; background-color: darkgray;"><h1>sessao3</h1></section>
    <section id="sessao4" style="min-height: 75vh; background-color: goldenrod;"><h1>sessao4</h1></section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("a").click(function () {
            console.log(this);
            $('html, body').animate({
                scrollTop: ($(this.hash).offset().top)
            }, 500)
        })

    </script>
</body>
</html>

 

Publicado em

Stack Overflow Survey: JavaScript ganha linguagem mais popular

Para aqueles que acompanham as pesquisas do Stack Overflow, saiu recentemente os resultados da pesquisa de 2019. Está é a maior e mais abrangente pesquisa do mundo para envolver programadores e suas preferências. A edição de 2019 desta pesquisa tocou cerca de 90.000 desenvolvedores.

Do que toca o JavaScript, a linguagem ficou em 1º lugar em popularidade entre todos os tipos de linguagem (programação, marcação, query, etc…). Este é o 7º ano seguido!!

Para uma listagem completa acesse: https://insights.stackoverflow.com/survey/2019#technology-_-programming-scripting-and-markup-languages

Outros resultados interessantes para o mundo JavaScript são os resultados sobre os frameworks web e é possível ver através da imagem abaixo que os frameworks para JS estão muito fortes:

Acesse: https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks

Por último, na categoria outros frameworks, bibliotecas e ferramentas, temos mais um representate de peso em 1º lugar e diversos com um bom posicionamento:

Para a listagem completa da imagem acima, acesse: https://insights.stackoverflow.com/survey/2019#technology-_-other-frameworks-libraries-and-tools

Os resultados da pesquisa são bem mais abrangentes que os 3 itens mostrados acima, vale apenas acessar o link oficial do Stack Overflow e conferir todos os detalhes, como linguagens que maid adoradas/odiadas, IDEs e outras pesquisas que eles fizeram para você saber melhor como estão as opiniões dos profissionais da area em relação as tecnologias atuais.