Home / user-3440

Arnau Castellví's questions

Martin Hope
Arnau Castellví
Asked: 2020-08-08 20:17:36 +0800 CST
  • 0

As you know, in javascript when a variable is assigned another ( a=b), in case the source contains an object, a copy is not made, but a reference (a pointer), so that modifying the value is reflected in both.
For example:

var matriz = ["a1","a2"];
var copiaMatriz = matriz;
matriz[0]="x";
copiaMatriz[1]="y";
console.log(matriz,copiaMatriz);

The system that I currently use to solve this problem is by going through the array recursively and assigning the values ​​as they are not other arrays (if the values ​​are other types of objects that are not Array(for example functions), they will continue to be references, which no problem for me).
Example with a 3-dimensional array:

var matriz =["a0" , "a1" , [
    "b0", "b1", [
      "c0", "c1"]
  ]
];

function copiaMatriz(matriz){
  var copia=[];
  matriz.forEach(function(valor){
        if (Array.isArray(valor)) copia.push(copiaMatriz(valor));
        else copia.push(valor);
    });
    return copia;
};

var matrizCopia = copiaMatriz(matriz);

matriz[2][2][0]="X";
matrizCopia[2][2][1]="Y";

console.log(matriz[2][2][0],matriz[2][2][1]);
console.log(matrizCopia[2][2][0],matrizCopia[2][2][1]);

I am quite surprised that in JavaScript the object Arraydoes not already have a method to make a copy of the array, or another faster system, I have the feeling that it should be simpler and that I am complicating my life.

My question is: Is there a method to make a copy of a multidimensional array that is faster than my current function? (ie run one level down using some object method Arrayor "trick" that you don't know about).

P.S. Obviously I'm looking for a system that works on any matrix of any dimension.

EDIT
I ​​have found that using methods of the objectJSONcan make a copy of a multidimensional array, but testing turns out to be almost the same or slower than the recursive copy. (Depends on the browser and the state of the cache, sometimes it is faster, but not much.)
Example copying a 100x100x100 matrix 10 times.

var valores=100; // Array de valores x valores x valores
    var matriz =[];
    for (let i=0; i<valores; i++){
        matriz[i]=[];
        for (let j=0; j<valores; j++){
            matriz[i][j]=[];
            for (k=0; k<valores; k++){
                matriz[i][j][k]=Math.floor(Math.random()*100);
            }
        }
    }

    var copias=10;

    var matrizCopia=[];
    
    var inicio=Date.now();
    for (i=0; i<copias; i++){
        matrizCopia=copiaMatriz(matriz);
    }
    console.log("Funcion matrizCopiar: "+(Date.now()-inicio)+"ms.");

    var matrizCopia2=[];
    
    var inicio=Date.now();
    for (i=0; i<copias; i++){
        matrizCopia2=copiaMatriz2(matriz);
    }
    console.log("Funcion matrizCopiar2: "+(Date.now()-inicio)+"ms.");
    
    console.log("Comprobando que realiza copias y no referencias");
    matriz[0][0][0]="a";
    matrizCopia[0][0][1]="b";
    matrizCopia2[0][0][2]="c";
    console.log(matriz[0][0][0],matrizCopia[0][0][0],matrizCopia2[0][0][0]);
    console.log(matriz[0][0][1],matrizCopia[0][0][1],matrizCopia2[0][0][1]);
    console.log(matriz[0][0][2],matrizCopia[0][0][2],matrizCopia2[0][0][2]);

    
    function copiaMatriz(matriz){
        var copia=[];
        matriz.forEach(function(valor){
            if (Array.isArray(valor)) copia.push(copiaMatriz(valor));
            else copia.push(valor);
        });
        return copia;
    };
    
    function copiaMatriz2(matriz){
        return JSON.parse(JSON.stringify(matriz));
    }

javascript
Martin Hope
Arnau Castellví
Asked: 2020-12-23 16:45:37 +0800 CST
  • 4

I have a simple recursive function to calculate the nFibonacci number, if for example, I call the function to find the number 40 this is called 331160281 times, and I guess it will consume a high volume of RAM (at least stack).

At the time of entering the memory inspector I do not see a remarkable consumption of RAM in the browsers.

My question is:

How do I know the amount of RAM memory (stack) that a script consumes javascript?

If I'm wrong and it doesn't consume much RAM, then:

How can I see the battery consumed in time?

Example code:

function fibonacci(num){
  count++;
  if (num < 2) return num;
  else return(fibonacci(num - 1) + fibonacci(num - 2));
}

var count=0;
document.write("El 40 número de Fibonacci es: "+fibonacci(40)+"<br>");
document.write("La funcion de Fibonacci se ha llamado "+count+" veces.<br>");

javascript
Martin Hope
Arnau Castellví
Asked: 2020-10-14 18:21:24 +0800 CST
  • 2

I am making a webAPP, and using safari (on an iPAD) it happens that using the touchpad on BODY, where there are no other elements, the browser "reacts", it seems to "select" all the elements or something similar. In addition, by holding down the touchpad, the contextual menu appears (In Android it does not appear but the phone reacts by vibrating.
I would like to avoid these two things, without using libraries or frameworks.
Here is a video where I show my problem: Link
And here is a code example (the one seen in the video), with the solutions I've tried, capturing events and with CSS properties, but it doesn't seem to work.

document.ontouchmove = function(event){event.preventDefault();}
document.onmousedown = function(event){event.preventDefault();}
document.onclick = function(event){event.preventDefault();}
document.ondblclick = function(event){event.preventDefault();}
document.oncontextmenu = function(event){event.preventDefault();}
document.ondrag = function(event){event.preventDefault();}
	
function colorRandom(){
  var color=["red","green","blue","yellow","orange","cyan"];
  IDpantalla.style.backgroundColor=color[Math.floor(Math.random()*color.length)];
}
IDpantalla.ontouchmove=function(){colorRandom();};
IDpantalla.onclick=function(){colorRandom();};
BODY {
	background-color:silver;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-drag: none;
}
#IDpantalla {
	position:fixed;
	width:300px;
	height:300px;
	background-color:salmon;
}
<HEAD>
	<META name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> 
	<META name="apple-mobile-web-app-capable" content="yes">
	<META name="mobile-web-app-capable" content="yes">
	<META name="apple-mobile-web-app-status-bar-style" content="black">
</HEAD>
<BODY>
  <DIV id="IDpantalla"></DIV>
</BODY>

javascript
Martin Hope
Arnau Castellví
Asked: 2020-09-17 14:43:15 +0800 CST
  • 1

I would like to know if there is any way to know when the browser has finished processing an image after loading it, let me explain:
When you enter an image, you can know when it has finished loading it with the property completeor the method onloadof the object, but between the loads and displays it, it takes some time, since it must process it (for example, resize it), so that in "very" large images, even if the browser claims to have finished loading the image, it may not be displayed immediately . Here I leave an example of what I mean, by log it shows a message when it loads, but it takes a while for the image to appear.
Example using the method onload:

	var imagen;
	ponImagenTocha();
	function ponImagenTocha(){
		imagen=document.createElement("IMG");
		imagen.height=200;
		imagen.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
		imagen.onload=function(){esperarImagen();};
	}
	function esperarImagen(){
			console.log("Completo.");
			document.body.appendChild(imagen);
	}

Example with the property complete:

	var imagen;
	ponImagenTocha();
	function ponImagenTocha(){
		imagen=document.createElement("IMG");
		imagen.height=200;
		imagen.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
		esperarImagen();
	}
	function esperarImagen(){
		if (!imagen.complete){
			console.log("Cargando...");
			setTimeout(function(){
				esperarImagen();
			},16);
		} else {
			console.log("Completo.");
			document.body.appendChild(imagen);
		}
	}

javascript
Martin Hope
Arnau Castellví
Asked: 2020-03-20 07:08:26 +0800 CST
  • 4

Suppose I have two transformations in the transform property , Ex:

transform: scale(.5,.5) rotate(10deg);

I know that it is possible to set the origin point of the transformations using the property transform-origin, eg:

transform-origin: 0 0;

But that origin point will apply for all transformations of the object.

Is there a way to indicate a different origin point for each transformation?

Example using the method that indicates rnd

* {
  margin:0px;
  padding:0px;
}
#a{
  background-color:green;
  width:100px;
  height:100px;
  display: block;
  transition:1s;
  transition-timing-function: linear;
  transform-origin: left top 0;
}
#a:hover{
  transform:scale(.5);
}
#b {
  width:100px;
  height:100px;
  transition:1s;
  transition-timing-function: linear;
  background-color:red;
  transform-origin: right top 0;
}
#b:hover {
  transform: rotate(-90deg);
}
<div id="a"><div id="b"></div></div>

css3
Martin Hope
Arnau Castellví
Asked: 2020-03-02 14:49:47 +0800 CST
  • -1

I am developing offline HTML5 applications (without frameworks), currently I use Intel XDK to package but I could switch to another if necessary. The doubt I have is that since they are applications that work from the browser, the installation asks for permissions to use the internet/wifi, but since they are offline, these permissions are not necessary. How can I specify that I do not require these permissions so that it does not ask for them when installing the apps?

javascript
Martin Hope
Arnau Castellví
Asked: 2020-02-15 10:20:02 +0800 CST
  • 2

I am developing an HTML5 APP with " Intel® XDK " and when I upload it to the " Windows Dev Denter " it indicates that the language is " en-US ".

Neither in the XDK options nor in the " Dev Center " I see where to edit the languages. How can I indicate in which languages ​​the application is available?

Edit: Another way of looking at it, XDK generates the AppxManifest.xml automatically, can I specify parameters of the AppxManifest.xml from XDK by hand?

javascript