Perguntas[javascript](coding)

Estou tentando aplicar um evento de mouseover para transformar uma imagem original em uma nova imagem e, em seguida, retornar à imagem original ao remover o mouse. No entanto, os arquivos de imagem originais são muito grandes, então estou usando uma classe de contêiner para exibi-los no tamanho desejado.

O problema é que quando passo o mouse sobre a imagem, ela exibe a nova imagem, mas ela está no tamanho original, em vez de estar dentro das restrições do contêiner.

const imageContainer = document.querySelector('.flex-container');
const image = document.getElementById('bookCover2');
const originalSrc = 'Book_2_Cover.png';
const newSrc = 'Book_2_Back.png';

imageContainer.addEventListener('mouseover', () => {
image.src = newSrc;
});

imageContainer.addEventListener('mouseout', () => {
image.src = originalSrc;
});

Em javascript, quero fazer uma cópia (superficial) de um Function, para que as propriedades do novo objeto não sejam afetadas pelo objeto original:

function func(...) { ... } // to say, function func(x, y) { return [x,y] }
func.a = 1
let func1 = func       // without copy, func1 and func IS the same object
let func2 = copy(func) // need to be implemented

func.a = 2
func1.a        // becomes 2
func2.a        // shall still be 1
func2("abc")   // shall return the same result as func("abc")

É possível?

A melhor maneira que encontrei no momento é definir uma função wrapper:

function f0(x, y) { return [x,y] }
f0.a = 1

function copy(fn){
  function wrapper(){
    return fn.apply(wrapper, arguments)
  }
  Object.assign(wrapper,fn)
  return wrapper
}

let f2 = copy(f0)

f0.a = 2
f2.a        // is still 1
f0.length   // gives 2
f2.length   // gives 0

Entretanto, há alguns problemas com esta solução:

1. A aplicação em cadeia de copylevará a vários níveis de wrapper. por exemplo, copy(copy(copy(fn)))retornará uma função com três wrappers.
2. a lengthfunção de origem é perdida, wrapper.lengthé sempre 0.

Estou trabalhando em um processo de importação em lote de dados de vários arquivos .csv do meu computador para o Planilhas Google sem fazer upload de todos eles para o Google Drive primeiro.

Atualmente tenho o seguinte:

index.html

<form>
  <input type="file" name="file" onchange="importCsv(this.parentNode)" accept=".csv,text/csv" multiple>
</form>
<p id="progress" style="display:none;">
  <label for="upload" style="font-family: sans-serif;">Uploadling...</label>
  <progress id="upload"></progress>
</p>
<script>
  function readFileAsBuffer(file){
    return new Promise(function(resolve,reject){
      let fr = new FileReader();

      fr.onload = function(){
          resolve(fr.result);
      };

      fr.onerror = function(){
          reject(fr);
      };

      fr.readAsArrayBuffer(file);
    });
  }
  async function importCsv(e) {
    document.getElementById("progress").style.display = "block";
    const files = e.file.files;
    let fileReaders = [];
    let fileValues = [];

    for(let i = 0;i < files.length;i++){ 
      fileReaders.push(readFileAsBuffer(files[i])); 
    }

    await Promise.all(fileReaders).then((values) => {
      fileValues.push(values);

    });

    for(let i=0; i < files.length; i++)
    {
      let file = files[i];
      await google.script.run.withSuccessHandler(google.script.host.close).importCsv([[...new Int8Array(fileValues[0][i])], file.type, file.name]);
    }    
  }
</script>

script.gs

function onOpen() {
  SpreadsheetApp.getUi().createMenu("Import").addItem("Import CSVs", "importCsv").addToUi();
}

function importCsv(e){
  if (!e) {
    SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("index"), "Import CSVs");
    return;
  }
  const lock = LockService.getScriptLock();
  lock.waitLock(30000);
  const csv = Utilities.parseCsv(Utilities.newBlob(...e).getDataAsString());
  const sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 3, 1, csv.length, csv[0].length).setValues(csv);
  lock.releaseLock();
}

Inicialmente, configurei sem usar promessas, mas percebi que todos os arquivos que eu tentava importar eram colocados na planilha fora de ordem. Pensei que usar promessas para esperar até que cada arquivo fosse lido e processado antes de passar para a planilha ajudaria, mas ainda estou com o mesmo problema. Além de usar o objeto LockService, como estou fazendo, alguém tem alguma ideia de como fazer o script esperar até que cada seção seja adicionada à planilha?

Estou fazendo um pequeno projeto para o meu portfólio. Sou um programador iniciante e estou com um problema ao importar a função js de outro arquivo. Esta função é necessária porque preciso usá-la em outra lógica do meu código. Esses dois arquivos estão na mesma pasta chamada scripts. Os scripts são adicionados a index.html antes da tag de fechamento do corpo com o atributo defer.

ProdutosDb.mjs:

import axios from "axios";

const productsDb = process.env.DB_BASE_URL;
let products;

export const fetchProducts = async () => {
  const productsDb = process.env.DB_BASE_URL;
  try {
    const res = await axios.get(productsDb);
    products = res.data;
    //console.log("value of products:", products);
    return products;
  } catch (err) {
    console.err("Error fetching products: ", err);
    throw err;
  }
};
const createProductCart = async () => {
  await fetchProducts();
  const shopList = document.querySelector(".shop-list");
  shopList.innerHTML = "";
  console.log(products);

  products.forEach((element) => {
    const shoppingCart = document.createElement("li");
    shoppingCart.classList.add("shop-list-item");

    let imgURL = `http://127.0.0.1:3000${element.image}`;
    shoppingCart.innerHTML = `
        <a href="#">
          <img class="item-image" height="320px" width="320px" src="${imgURL}" alt="${element.name}" />
          <div class="shop-list-info">
            <p>${element.category}</p>
            <h3>${element.name}</h3>
          </div>
        </a>
        <button class="openCartModal" data-id="${element.id}">Wybierz opcje</button>
      `;

    shopList.appendChild(shoppingCart);
  });
  return;
};

document.addEventListener("DOMContentLoaded", async () => {
  try {
    createProductCart();
  } catch (err) {
    console.error("Error", err);
  }
});

modal.mjs:

import { fetchProducts } from "./productsDb.mjs";

// Open quick shopping modal window
const shopList = document.querySelector(".shop-list");
shopList.addEventListener("click", function (ev) {
  const modal = document.querySelector("[modalOpen]");
  const modalClose = document.querySelector("[modalClose]");

  if (ev.target.closest(".openCartModal")) {
    openModal(modal, modalClose);
  }
});

function openModal(modal, modalClose) {
  modal.classList.toggle("isHidden");

  function close() {
    modal.classList.toggle("isHidden");
    document.removeEventListener("keydown", keyClose);
    modal.removeEventListener("click", clickOutClose);
    modalClose.removeEventListener("click", close);
  }

  function keyClose(ev) {
    if (ev.key === "Escape" && !modal.classList.contains("isHidden")) {
      close();
    }
  }

  function clickOutClose(ev) {
    if (ev.target === modal || ev.target.classList.contains("isHidden")) {
      close();
    }
  }
  document.addEventListener("keydown", keyClose);
  modal.addEventListener("click", clickOutClose);
  modalClose.addEventListener("click", close);
}

Preciso usar a função fetchProducts na lógica modal para passar valores do banco de dados para o modal de abertura. Estou tentando alterar o tipo do meu script para módulo, também no package.json, alterando o tipo para módulo, mas sem resultados positivos. Quando reinicio meu frontend, apenas o nome do módulo no console muda a cada vez.

Eu recebo algo assim:

Uncaught Error: Cannot find module '92Na4'
    at newRequire (kk-js.6bb1462e.js:74:19)
    at newRequire (kk-js.57740558.js:66:18)
    at newRequire (kk-js.8b89b8d5.js:66:18)
    at newRequire (kk-js.8b89b8d5.js:58:18)
    at localRequire (kk-js.8b89b8d5.js:97:35)
    at fsaaM../productsDb.mjs (modal.mjs:1:1)
    at newRequire (kk-js.8b89b8d5.js:84:24)
    at kk-js.8b89b8d5.js:144:5
    at kk-js.8b89b8d5.js:163:3

Qualquer ideia será muito útil para mim.

No meu projeto, utilizo a visualização resourceTimelineMonth com fullCalendar. A visualização começa no dia 1 e termina no final do mês. Mas preciso exibir a primeira semana completa e a última semana completa. Por exemplo, para abril de 2025, a primeira é uma quinta-feira, então preciso exibir a segunda-feira, 31, e o dia 30 de abril é uma quarta-feira, então preciso exibir a quinta, sexta, sábado e domingo desta semana.

Vi que podemos usar visualizações como esta:

views: {
            resourceTimelineMonthEdited: {
                type: 'resourceTimelineMonth',
                duration: {weeks: 5},
                dateAlignment: '2025-03-31'
            }
        },

Mas o início da visualização é o dia atual e não o 1º. E recebi este erro:

Cannot read properties of undefined (reading 'getUTCFullYear')

Eu também tentei usar visibleRange assim:

calendar.setOption('visibleRange', {
  start: '2025-03-31',
  end: '2025-05-04'
});

Mas nada acontece.

Alguém sabe como ativar um JavaScript de terceiros em um código HTML para carregar somente quando solicitado, sem envolvê-lo com uma função ou modificar o código existente?

A única coisa que consegui fazer foi esse exemplo abaixo.

Adicionando um código JavaScript com uma tag "estilo" como esta:

<div class="unit1">
  <style type="text/script">
    Some 3th-party script will be autoload here.
  </style>
</div>

E então renomeie a tag "style" na tag div (unit1) para "script" para carregar o JavaScript:

<div class="unit1">
  <script>
    Some 3th-party script will be autoload here.
  </script>
</div>

Eu tenho esses links:

<div class="linksblock">
<a link href="www.google.com/1">link 1</a>
<a link href="www.google.com/2">link 2</a>
<a link href="www.google.com/3">link 3</a>
<a link href="www.google.com/4">link 4</a>
<a link href="www.google.com/5">link 5</a>
</div>

Gostaria de abrir esses links em uma janela pop-up. É importante observar que não posso modificá-los, portanto, não posso adicionar "onclick" nem nada do tipo. Portanto, quero que todos os links em "linksblock" abram em uma janela pop-up.

Tentei esse código, mas não funciona:

$(".linksblock a").on("click", function() {
  var share_link = $(this).prop('href');
  console.log(share_link);
window.open(share_link, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

});

Estou enfrentando um problema com o código abaixo, pois se eu clicar em um acordeão, ele abrirá, mas o símbolo do ícone "+" não se transformará em "-" quando for aberto. O trecho de código abaixo não está sendo ativado.

Preciso de ajuda com meu código.

A função JsontoBase64 recebe um json (parâmetro chamado jsonobj) que contém um pdf codificado em base64 (campo chamado "BytesBoleto") entre muitos outros campos.

Para cada ocorrência de "BytesBoleto", tenho que salvar um arquivo PDF chamado boletoXXX.pdf (onde XXX é 1 para a primeira ocorrência, 2 para a segunda, etc.) na área de trabalho do usuário.

Aqui está meu código:

function Base64toPDFandSave (base64String, filename) {

    const fs = require('fs');
    const path = require('path');

    // Remove the prefix if it exists
    const base64Data = base64String.replace(/^data:application\/pdf;base64,/, "");

    // Define the path to save the PDF file on the user's desktop
    const desktopPath = path.join(require('os').homedir(), 'Desktop');
    const filePath = path.join(desktopPath, filename);

    // Write the PDF file
    fs.writeFile(filePath, base64Data, 'base64', (err) => {
    if (err) {
    console.error('Error saving the file:', err);
    } else {
    console.log('PDF file saved successfully at:', filePath);
    }
    });

}

function JsontoBase64 (jsonData, filename) {
    // Verifica se jsonData é um objeto
    if (typeof jsonData !== 'object' || jsonData === null) {
        throw new Error("Entrada inválida: deve ser um objeto JSON.");
    }

    // Função recursiva para percorrer o JSON e encontrar os campos "BytesBoleto"
    function procurarBytesBoleto(obj, fname, findex) {
        for (const key in obj) {
            console.log("......")
            console.log(key + "::" + findex.toString());
            if (obj.hasOwnProperty(key)) {
                if (key === 'BytesBoleto' && typeof obj[key] === 'string') {
                    findex= findex+1;
                    console.log("BytesBoleto:"+findex.toString());
                    Base64toPDFandSave(obj[key], fname+findex.toString()+'.pdf');
                } else if (typeof obj[key] === 'object') {
                    console.log("Recursiva:"+findex.toString());
                    procurarBytesBoleto(obj[key], fname, findex); // Chama a função recursivamente
                }
            }
        }
    }
    procurarBytesBoleto(jsonData, filename, 0);    
}

JsontoBase64 (jsonobj, 'boleto');

Meu problema é: após a execução, deveria ser salvo boleto1.pdf, boleto2.pdf, boleto3.pdf e assim por diante, mas os arquivos são todos salvos com os nomes boleto1.pdf (que está errado) - o índice não aumentou (incremento).

Você poderia me ajudar a encontrar o erro na minha função recorrente (recursão)?

Obrigado pela ajuda

CodePen: https://codepen.io/C3ISR-Everything-Cybersecurity/pen/azbeOEK

o que estou tentando fazer é ter um pouco de animação ou transição revelada quando o usuário clica no acordeão para exibir a tabela, código completo abaixo HTML CSS JS, quero animar a transição de abertura e fechamento das tabelas no acordeão.

Código completo:

HTML:

            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }

       body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: White;
            font-family: Sakkal Majalla;
            direction: rtl;
            position: relative;
            z-index: -2;
            -ms-overflow-style: none;
            
        }
        body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */


        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .main{    
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        table {
            border: 1px solid #dededf;  
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 1px;
            text-align: center;
        }

        th {
            border: 1px solid #dededf;
            background-color: #eceff1;
            color: #000000;
            padding: 5px;
        }

        td {
            border: 1px solid #dededf;
            background-color: #ffffff;
            color: #000000;
            padding: 5px;  
        }
        th:nth-child(1) {  
            width: 30.9rem;
        }

        th:nth-child(2) {  
            width: 10rem;
        }
        th:nth-child(3) {  
            width: 7rem;
        }

        .accordion {
            background-color: #ffffff;
            color: black;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            padding: 18px;
            border: none;
            text-align: right;
            outline: none;
            font-size: 20px;
            transition: 0.4s;
            width: 50rem;
            border: 1px solid rgb(219, 219, 219);
            border-radius: 8px;
            box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
        }

        .active, .accordion:hover {
            border-radius: 8px 8px 0px 0px;
            border-color:  rgb(0, 128, 255);
        }

        .accordion span{
            float: left;
            font-size: 15px;
            color: #116ce4;
        }

        .panel {
            display: none;
            overflow: hidden;  
        }

   <div class="main">
            <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                    <th>2025?</th>
                    <tr>
                        <td>COMPANY A</td>
                        <td>FINANCE</td>
                        <td>&#9989;</td>
                    </tr>
                    <tr>
                        <td>COMPANY Z</td>
                        <td>PMO</td>
                        <td>&#10060;</td>
                    </tr>
                </table>
            </div>
                 <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                    <th>2025?</th>
                    <tr>
                         <td>company A</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                    <tr>
                       <td>company B</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                    <tr>
                          <td>company C</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                </table>
            </div>
                 <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                     <th>2025?</th>
                    <tr>
                        <td>company A</td>
                        <td>HR</td>
                        <td>&#9989;</td>
                    </tr>
                </table>
            </div>       
    </div>