Henrique: JavaScript

Mostrando postagens com marcador JavaScript. Mostrar todas as postagens

14/09/2024

Caixas de diálogo no google sheets

Objetivo: Divulgar diferentes formas de gerar caixas de diálogo no google sheets

1. Caixa de diálogo para Alerta

Alerta

Código em JavaScript:

function Alerta() {
  var ui = SpreadsheetApp.getUi();  // Obtém a interface do usuário para o Google Sheets.
  
  // Mostra um alerta simples
  ui.alert('Aviso!', 'Esta é uma caixa de alerta simples.', ui.ButtonSet.OK);
}

2, Caixa de diálogo para Confirmação

Confirmação

function Confirmation() {
  var ui = SpreadsheetApp.getUi();
  
  // Mostra uma caixa de confirmação
  var response = ui.alert('Confirmação', 'Você deseja continuar?', 
    ui.ButtonSet.YES_NO);
  
  // Verifica a resposta
  if (response == ui.Button.YES) {
    ui.alert('Você escolheu "Sim".');
  } else {
    ui.alert('Você escolheu "Não".');
  }
}

3. Caixa de prompt para senha

Entrada

Saída gerada

function showPrompt() {

  var ui = SpreadsheetApp.getUi();
  
  // Mostra um prompt para o usuário inserir algo
  var response = ui.prompt('Entrada do usuário', 'Digite seu nome:', 
    ui.ButtonSet.OK_CANCEL);
  
  // Verifica se o usuário clicou em "OK"
  if (response.getSelectedButton() == ui.Button.OK) {
    var nome = response.getResponseText();
    ui.alert('Olá, ' + nome + '!');
  } else {
    ui.alert('Ação cancelada.');
  }
}

Vá em Extensões > Apps Script e crie um novo arquivo HTML chamado dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h3>Caixa de Diálogo Personalizada</h3>
    <p>Esta é uma caixa de diálogo personalizada criada com HTML.</p>
    <button onclick="google.script.host.close()">Fechar</button>
  </body>
</html>

Com html

function CustomDialog() {
  var html = HtmlService.createHtmlOutputFromFile('dialog')
      .setWidth(300)
      .setHeight(200);
  
  SpreadsheetApp.getUi().showModalDialog(html, 'Minha Caixa de Diálogo');
}

5. Caixa de diálogo Não Modal ( Flutuante )

Flutuante

function NonModalDialog() {
  var html = HtmlService.createHtmlOutputFromFile('dialog')
      .setWidth(500)
      .setHeight(100);
  
  SpreadsheetApp.getUi().showSidebar(html);//Abre a caixa de diálogo como uma barra lateral
}

Palavras chave:

Dialog boxes in google sheets

Dialoglodziņi google lopuos .

Диалогон æвæрæнтæ google sheets-ы

Blychau deialog mewn dalennau google

תיבות דו-שיח ב-google sheets

Dialogová okna v google listech

Диалоговые окна в таблицах Google

Dialogfelder in Google Sheets

Ekkewe pworun poraus non ekkewe taropwen google

Casete de dialog în foi de calcul Google

02/06/2024

Animação com Hélice rotacional em HTML

Código feito em HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    border: 20px solid aqua;
    padding: 50px;
    border-radius: 50%;
    animation: fananim linear infinite;
}

button{
    cursor: pointer;
    width: 100px;
    height: 100px;
    padding: 20px 30px;
    margin: 0 20px;
    font-size: 25px;
    font-weight: 550;
    border: none;
    background-color: silver;
    border-radius: 50%;
    transition: 0.1s;
}

button:active{
    box-shadow: 0px 10px 10px black;
    transform: scale(0.95);
}

.main button:nth-last-child(5){
    background-color: rgb(0, 255, 0);
}

.main button:nth-last-child(4){
    background-color: red;
}
@keyframes fananim {
    100%
    {
        transform: rotate(360deg);
    }
}
</style>
<body>
  <div>
    <img id="img" src="Fan.png" alt="" srcset="">
    <button onclick="myfunon()">ON</button>
    <button onclick="myfunoff()">OFF</button>
    <button onclick="myfun1()">1</button>
    <button onclick="myfun2()">2</button>
    <button onclick="myfun3()">3</button>
  </div>  
  
</body>
  <script>
    let a=document.getElementById("img");
    function myfunon() 
    {a.style.animationDuration = 3+"s";}
    function myfunoff() 
    {a.style.animationDuration=0+"s";}
    function myfun1() 
    {a.style.animationDuration=1+"s";}
    function myfun2() 
    {a.style.animationDuration=0.5+"s";}
    function myfun3() 
    {a.style.animationDuration=0.1+"s";}
  </script>
</html>

Palavras chave:

Animation with Rotational Helix in HTML

Animación con Hélice Rotacional en HTML

Animasi karo Rotational Helix ing HTML

Animasjon med Rotational Helix i HTML

HTMLдеги Rotational Helix менен анимация

Анимация с использованием вращающейся спирали в HTML

אנימציה עם Rotational Helix ב-HTML

Animation leh Helix Rotational oo HTML ah

HTML의 회전 나선을 사용한 애니메이션

11/06/2023

Inserir linhas no Google Sheets com JavaScript

Objetivo : Inserir uma quantidade X de linhas por comando da Planilha_1 para a Planilha_2 de outra URL da web com JavaScript.

Código feito no Google Sheets

function myFunction() {
  var url2 = "Insira sua url aqui !";
  var QtdlinhasDesejada = 2;

  var spreadsheet = SpreadsheetApp.openByUrl(url2);
  //spreadsheet.getRange('1:1').activate();
  spreadsheet.getActiveSheet().insertRowsBefore(spreadsheet.getActiveRange().getRow(), 
QtdlinhasDesejada );
  //spreadsheet.getActiveRange().offset(0, 0, 1,
spreadsheet.getActiveRange().getNumColumns()).activate();//0 ,0, 1
  //spreadsheet.getRange('C9').activate();
  
};

Execução e saída gerada

05/08/2020

Async/Await 01 em JavaScript

function esperarPor(tempo = 2000) {
    return new Promise(function (resolve){
        setTimeout(() => resolve(), tempo )
    })
}

esperarPor(2000)
    .then(() => console.log('Excecutando promise 1...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 2...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 3...'))

    //Assíncrono
//Substitindo o código acima, método 1
async function executar() {
    esperarPor(1500)
    console.log('Async/Await 1...');

    esperarPor(1500)
    console.log('Async/Await 2...');

    esperarPor(1500)
    console.log('Async/Await 3...');
}

executar()
console.log();

//Método 2, código síncrono
async function executarNovamente(){
    await esperarPor(1500);
    console.log('Async/Await 1... método 2 ');

    await esperarPor(1500)
    console.log('Async/Await 2... método 2');

    await esperarPor(1500)
    console.log('Async/Await 3... método 2');
}

//executarNovamente()

Promise 05 em JavaScript

function funcionarOuNao(valor, chanceErro) {

    return new Promise ((resolve , PromiseRejectionEvent) =>{
        try{
            con.log('temp')
            if(Math.random() < chanceErro){
                reject('Ocorreu um ERRO !')
            }else{
                resolve(valor)
            }
        }catch(e){
            reject(e)
        }
    })
}

//gerando uma promessa que não foi tratada
funcionarOuNao('Testando...', 0.9)
    .then(v => console.log(`Valor: ${v}`),
        err => console.log(`Erro esp.: ${err}`))
    
    //depois do cath não tem mais informação
    .catch(err => console.log(`Erro: ${err}`))//caso ocorra erro
    .then(() => console.log('Fim !'))

03/08/2020

Desafio Promise 1 em JavaScript

Objetivo: Encapsule dentro de uma promise a chamada do File System

const fs = require('fs')
const path = require('path')
const { resolve } = require('path')

function lerArquivo(caminho) {
    return new Promise(resolve =>{
        fs.readFile(caminho, function(_, conteudo) {//caminho como parâmetro
            resolve(conteudo.toString())//converte o conteúdo no formato String
        })
        console.log('Depois de ler');
    })
}

const caminho = path.join(__dirname, 'dados.txt')

lerArquivo(caminho)
    .then(conteudo => console.log(conteudo))
    //.then(conteudo => conteudo.split('\n'))
    //.then(linhas => console.log(linhas[1]))
    //.then(linhas => console.log(linhas.length));
    

Arquivo: dados.txt

02/08/2020

Promise 03 em JavaScript

//Objetivo: gerar numeros entre
function gerarNumerosEnte(min, max) {
    if(min > max){
        [max, min] = [min, max]
        const [x, y] = a
    }

    //valor aleatório
    return new Promise(resolve => {
        const fator = max - min + 1
        const aleatorio = parseInt(Math.random() * fator) +min
        resolve(aleatorio)
    })
}

gerarNumerosEnte(5, 20).then(console.log)

gerarNumerosEnte(7, 40)
    //composição de função
    .then(num => num * 10)//número multiplicado por 10
    .then(numX10 => `O número gerado foi ${numX10}`)
    .then(console.log)//imprimindo o valor

31/07/2020

Promise 02 em JavaScript

setTimeout(function(){
    console.log('1- Executando callback ...');

    setTimeout(function() {
        console.log('2- Executando o callBack...');

        setTimeout(function(){
            console.log('3- Novamente Executando o callback...');
        },2000)
    },2000)

}, 2000)//executa o callback depois de 2 seg

30/07/2020

Promise 01 em JavaScript

//Método 1
let p = new Promise(function(cumprirPromesa) {
    cumprirPromesa({
        x: 3,
        y: 4
    })
})
p.then(function(valor) {
    console.log('MÉTODO 1');
    console.log(valor);
    console.log(valor.x);//pegando apenas o valor x
})

//com vetor método 2
let q = new Promise(function(exibirPromesa){
    exibirPromesa(['Ana Paula','Aline','Juliana','Karolayne'])
})

q.then(function (imprimir){
    console.log(imprimir);
    console.log(imprimir[2]);//imprimir a posição 2
})

//método 3, reaproveitando o método 2
q.then((teste) => console.log('\n',teste));
q.then(novo => console.log(novo[1]));

//Método 4
let t = new Promise(function(exibirArray){
    exibirArray(['Meiryele','Geisiane','Laiane','Loiane'])
})

function primeiroElemento(array) {
    return array[0]
}

function primeiraLetra(string) {
    return string[0]
}

t

    .then(primeiroElemento)
    .then(primeiraLetra)
    .then(caracter => caracter.toLowerCase())//convertendo para minuscula
    .then(letraM => console.log(letraM));

29/07/2020

Async / Await em JavaScript

// sem promise...
const http = require('http');
const { reject } = require('lodash');

const getTurma = (letra, callback) => {
    const url = `http://files.cod3r.com.br/curso-js/turma${letra}.json`
    return new Promise((resolve, reject) =>{
        http.get(url, res =>{
            let resultado = ''

            res.on('data', dados => {
                resultado += dados
            })

            res.on('end', () => {
                try{
                    resolve(JSON.parse(resultado))
                }catch(e){
                    console.log('Erro ao acessar !');
                    reject(e)
                }
            })
        })
    })
}

//Recurso em ES8
//Objetivo: simplificar o uso de promises ...
let obterAlunos = async() => {
    const ta = await getTurma('A')
    const tb = await getTurma('B')
    const tc = await getTurma('C')
    return [].concat(ta, tb, tc)
}

obterAlunos()
    .then(alunos => alunos.map(a => a.nome))
    .then(nomes => console.log(nomes))

Palavras chave:

Async / Attendre le JavaScript

Async / Čekejte na JavaScript

Async / המתן JavaScript

Async / wag op JavaScript

Async / Așteptați-i JavaScript

27/07/2020

Refatorando CallBacks para Promises em JavaScript

// sem promise...
const http = require('http');
const { reject } = require('lodash');

const getTurma = (letra, callback) => {
    const url = `http://files.cod3r.com.br/curso-js/turma${letra}.json`
    return new Promise((resolve, reject) =>{
        http.get(url, res =>{
            let resultado = ''

            res.on('data', dados => {
                resultado += dados
            })

            res.on('end', () => {
                try{
                    resolve(JSON.parse(resultado))
                }catch(e){
                    console.log('Erro ao acessar !');
                    reject(e)
                }
            })
        })
    })
}

//dispara paralelamente
let nomes = []
getTurma('A').then(alunos => {
    nomes = nomes.concat(alunos.map(a => `A: ${a.nome}`))
    getTurma('B').then(alunos => {
        nomes = nomes.concat(alunos.map(a => `B: ${a.nome}`))
        getTurma('C').then(alunos => {
            nomes = nomes.concat(alunos.map(a => `C: ${a.nome}`))
            console.log(nomes)
        })
    })
})

 //todos os elementos em 1 único array
console.log();
Promise.all([getTurma('A'), getTurma('B'), getTurma('C')])
    .then(turmas => [].concat(...turmas))
    .then(x => console.log(x))

console.log();
Promise.all([getTurma('A'), getTurma('B'), getTurma('C')])
    .then(turmas => [].concat(...turmas))
    .then(turmas => alunos.map(aluno => aluno.nome))
    .then(nomes => console.log(nomes))
    .catch(e => console.log(e.message))

//Mensagem de erro caso o arquivo não exista    
//getTurma('D'.catch(e => console.log(e.message)))

26/07/2020

CallBacks Aninhadas em JavaScript

// sem promise...
const http = require('http')

const getTurma = (letra, callback) => {
    const url = `http://files.cod3r.com.br/curso-js/turma${letra}.json`
    http.get(url, res => {
        let resultado = ''

        res.on('data', dados => {
            resultado += dados
        })

        res.on('end', () => {
            callback(JSON.parse(resultado))
        })
    })
}
let teste = []
getTurma('A', pessoas1 => {
    console.log(pessoas1);//todos os índices
    console.log('\n',pessoas1[0]);//1° índice
    console.log('\n',pessoas1[0].nome);// somente o nome do 1° índice
})


console.log();
let nomes = []
getTurma('A', alunos => {
    nomes = nomes.concat(alunos.map(a => `A: ${a.nome}`))
    getTurma('B', alunos => {
        nomes = nomes.concat(alunos.map(a => `B: ${a.nome}`))
        console.log(nomes);
        getTurma('C', alunos => {
            nomes = nomes.concat(alunos.map(a => `C: ${a.nome}`))
            console.log(nomes)
        })
    })
})

For of em JavaScript

const { map } = require("lodash");

for (let letra of "Blog "){
    console.log(letra);
}

const assutosEcma = ['Map', 'Set', 'Promise']
for (let i in assutosEcma){
    console.log(i);
}
console.log();

for (let assunto of assutosEcma) {
    console.log(assunto);    
}

const assuntosMap = new Map([
    ['Map', {abordado: true}],
    ['Set', {abordado: true}],
    ['Promise', {abordado: false}]
])
console.log();

//chaves e valores do array
for(let assunto of assuntosMap){
    console.log(assunto);
}
console.log();

for(let [chave, valor] of assuntosMap){
    console.log(chave);
}
console.log();

//percorrendo somente as chaves
for(let chave of assuntosMap.keys()){
    console.log(chave);
}
console.log();

//desestruturando 1 array com chave e  valor
for(let [ch, vl] of assuntosMap.entries()){
    console.log(ch, vl);
}
console.log();

const s = new Set(['a', 'b', 'c'])
for(let letra of s){
    console.log(letra);
}

Pesquisar neste blog