Архивы javascript

Javascript: удаление элемента массива

12.07.2025 Павел Грибов WEB, Из жизни

В JavaScript как мне кажется не очень удобная реализация работы с массива. Наверное слишком низкоуровневая по сравнению с другими интерпретируемыми языками программирования. Возможно это даёт большую гибкость, но лично мне не удобно, что для простое удаление элемента массива по виду:

mass=[1,2,3,4];
delete mass[2];

1 2	mass=[1,2,3,4]; delete mass[2];

Приводит на самом деле не к удалению элемента массива, а пометке, что элемент пустой. Многие пользуются командой splice:

mass=[1,2,3,4];
mass.splice(2,1)

1 2	mass=[1,2,3,4]; mass.splice(2,1)

Или даже filter:

brisks_mass=[1,2,3,4];
brisks_mass=brisks_mass.filter((number)=>number!==3)

1 2	brisks_mass=[1,2,3,4]; brisks_mass=brisks_mass.filter((number)=>number!==3)

Но как говорится «Мне не зашло» (c), ибо есть с чем сравнивать удобство (Python, PHP и т.д.)

Оставить комментарий javascript, удаление элемента массива

JavaScript: декодирование строки в Base64

09.07.2025 Павел Грибов WEB

Вообще штатно есть функции для кодирования/декодирования: atob / btoa. Но один нюанс: если строчку вида «Hello world!» они кодирую-декодируют легко, то с бинарными файлами выйдет ой. Не, они конечно тоже что-то сделают, но с «тихой ошибкой» — т.е. результат будет, но не верен. Попался так, когда с сервера передавал файл в base64 на клиент javascript, декодировал его примерно так:

let a = document.createElement("a");
let file = new Blob([atob(data.result)], {type: 'application/xlsx'});
a.href = URL.createObjectURL(file);
a.download = "template_0.xlsx";
a.click();

let a = document.createElement("a");

let file = new Blob([atob(data.result)], {type: 'application/xlsx'});

a.href = URL.createObjectURL(file);

a.download = "template_0.xlsx";

a.click();

А в результате, с виду вроде бы валидный файл, экселем открываться отказался. А всё потому, что atob не работает со строками в Uicode. Потому обычно используют следующие обертки для кодирования-декодирования:

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}
function bytesToBase64(bytes) {
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

function base64ToBytes(base64) {

const binString = atob(base64);

return Uint8Array.from(binString, (m) => m.codePointAt(0));

}

function bytesToBase64(bytes) {

const binString = String.fromCodePoint(...bytes);

return btoa(binString);

}

Оставить комментарий base64, javascript, unicode, utf8, деокдирование, юникод

JavaScript: Еще один вариант загрузки файла по клику на кнопку

26.11.2024 Павел Грибов WEB

Общая идея следующая: по клику на кнопку вызываем AJAX запрос на сервер с определенными параметрами передаваемыми в POST, затем получив в результат запроса файл — формируем в DOM на файл в формате blob, и тут-же её нажимаем. В результате браузер показывает диалоговое окно сохранения файла.

Таким необычным способом мы убиваем несколько зайцев сразу:

Получаем возможность показать ошибку, если вдруг файл на сервере сформировать не удалось. Это полезно если например файл формируется на сервере «на лету» — например файл XLSX с отчётом
Мы можем передать серверу какие-то условия для формирования файла в POST запросе
На странице мы не размещаем заранее данные в тегах <form></form>, как практикуется в подобных решениях
Пользователю достаточно нажать на кнопку один раз для получения результата.

В результате скрипт формирования файла может выглядеть примерно следующим образом:

На клиенте:

/**
 * Формирование отчета
 * @param {type} filename - имя файла на сервере для формирования отчета
 * @param {type} ext - выходное расширение (например xlsx,csv)
 * @returns {Number}
 */
function get_report(filename,ext){
        $("#global").addClass("loading");    
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '?r=reports/'+filename, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.responseType = 'blob';     
        xhr.onload = function(e) {
            $("#global").removeClass("loading");    
            if (this.status == 200) {
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(this.response);                
                console.log("Расширение:"+ext);
                link.download="report."+ext;
                link.click();
            }
            else {
                console.log(e);
                ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");
            }
        };     
        var form_data = new Map();
        form_data.period_from = period_from.value;
        form_data.period_to = period_to.value;
        form_data.area = area_select.value;
        form_data.division_check=division_check.checked;
        form_data.period_check=period_check.checked;
        xhr.send(mapToQueryString(form_data));                                          
};

/**

* Формирование отчета

* @param {type} filename - имя файла на сервере для формирования отчета

* @param {type} ext - выходное расширение (например xlsx,csv)

* @returns {Number}

function get_report(filename,ext){

$("#global").addClass("loading");

var xhr = new XMLHttpRequest();

xhr.open('POST', '?r=reports/'+filename, true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.responseType = 'blob';

xhr.onload = function(e) {

$("#global").removeClass("loading");

if (this.status == 200) {

var link=document.createElement('a');

link.href=window.URL.createObjectURL(this.response);

console.log("Расширение:"+ext);

link.download="report."+ext;

link.click();

}

else {

console.log(e);

ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");

}

};

var form_data = new Map();

form_data.period_from = period_from.value;

form_data.period_to = period_to.value;

form_data.area = area_select.value;

form_data.division_check=division_check.checked;

form_data.period_check=period_check.checked;

xhr.send(mapToQueryString(form_data));

};

На сервере:

    public function actionGet_report_by_settlers(){               
       $request = Yii::$app->request;      
       $area= $request->post("area");
       $dir=Yii::$app->basePath."/web/templates";
        
      $oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");
      ...
      формируем файл эксель
      ...
      $oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');
      $oWriter->save('php://output');      
    };

public function actionGet_report_by_settlers(){

$request = Yii::$app->request;

$area= $request->post("area");

$dir=Yii::$app->basePath."/web/templates";

$oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");

...

формируем файл эксель

...

$oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');

$oWriter->save('php://output');

};

Оставить комментарий javascript, сохранение файла

Yandex map: динамическая загрузка содержимого балуна

12.12.2023 Павел Грибов WEB

Задача: динамически загружать контент по клику на метку, в т.ч. и при кластеризации

Решение:

Добавим события открытия балуна по клике на метку из карты и кластера:

                objectManager.objects.events.add('balloonopen', function (e) {
                    console.log("Открыт балун вне кластера");
                    var id = e.get('objectId'),
                    geoObject = objectManager.objects.getById(id);
                    downloadContent([geoObject], id);
                });          

                objectManager.clusters.events.add('balloonopen', function (e) {
                    var id = e.get('objectId'),
                        cluster = objectManager.clusters.getById(id),
                        geoObjects = cluster.properties.geoObjects;
                        console.log("Открыт балун из кластера..");
                        downloadContent(geoObjects, id, true);
                });   
....
function downloadContent(obj,id,isCluster){    
    console.log("Загружаем объект:");
    aids = obj.map(function (geoObject) {return geoObject.id;});
    if ((obj.length)<200) {
        $("#global").addClass("loading");   
            $.post("?r=inications/get_points_content", {  
            ids:aids,
        }).done(function(data) {            
            obj.forEach(function (geoObject) {
              //console.log("--присваиваем новое тело балуна");                
              if (geoObject.properties.balloonContentBody.includes("<l></l>")){
                //console.log("-подменяю содержимое балуна!");  
                //console.log(geoObject);
                geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);      
                if (isCluster!==true){
                    objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());
                } else {
                    objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());
                };
                //setNewData();
              }            
            });                   
            $("#global").removeClass("loading");                    
        });
    } else {
     ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);   
    };
}

objectManager.objects.events.add('balloonopen', function (e) {

console.log("Открыт балун вне кластера");

var id = e.get('objectId'),

geoObject = objectManager.objects.getById(id);

downloadContent([geoObject], id);

});

objectManager.clusters.events.add('balloonopen', function (e) {

var id = e.get('objectId'),

cluster = objectManager.clusters.getById(id),

geoObjects = cluster.properties.geoObjects;

console.log("Открыт балун из кластера..");

downloadContent(geoObjects, id, true);

});

....

function downloadContent(obj,id,isCluster){

console.log("Загружаем объект:");

aids = obj.map(function (geoObject) {return geoObject.id;});

if ((obj.length)<200) {

$("#global").addClass("loading");

$.post("?r=inications/get_points_content", {

ids:aids,

}).done(function(data) {

obj.forEach(function (geoObject) {

//console.log("--присваиваем новое тело балуна");

if (geoObject.properties.balloonContentBody.includes("<l></l>")){

//console.log("-подменяю содержимое балуна!");

//console.log(geoObject);

geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);

if (isCluster!==true){

objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());

} else {

objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());

};

//setNewData();

}

});

$("#global").removeClass("loading");

});

} else {

ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);

};

}

К сожалению, если в кластере собрано очень много меток (более 200), то обновление идёт довольно долго, потому пришлось немножко ограничить загрузку. В хорошем варианте, нужно бы отслеживать клик по заголовку списка в кластере, но это пока не удалось

Оставить комментарий javascript, maps, yandex, динамическая загрузка

Синхронный запрос через fetch

06.09.2023 Павел Грибов WEB

Да, знаю, плохо, отвратительно и всё такое. Но иногда нужно. Например мне понадобилось при написании Service Worker, для возможности подмены запрашиваемого для загрузки url.. Реализовал так:

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    (async () => {
        res=await postData("woodpecker.php", { "url": event.request.url});
    })();
    console.log("--получили ответ");
    if (res.error===false){
        console.log("Отдаём URL");
        if ( event.request.url.endsWith( '.png' ) ) {
           return event.respondWith(
             fetch( 'm.jpg' )
           );
         }        
    } else {
        return event;
    };
            
});

async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), 
  });
  return await response.json();
}

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

(async () => {

res=await postData("woodpecker.php", { "url": event.request.url});

})();

console.log("--получили ответ");

if (res.error===false){

console.log("Отдаём URL");

if ( event.request.url.endsWith( '.png' ) ) {

return event.respondWith(

fetch( 'm.jpg' )

);

}

} else {

return event;

};

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data),

});

return await response.json();

}

Оставить комментарий javascript, ServiceWorker, sync fetch

1 2 3 … 11 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31