I'm taking some information from some variables I have already defined outside this function to create a html svg text box.
Here is the function which is causing me trouble:
RenderTextBox:function()
{
alert('this.x: ' + this.x);
alert('this.y: ' + this.y);
this.textBox = paper.text(this.x, this.y, this.htmlTextBox);
}
The alerts works prefectly, and prompt me with the values expected. However, the final line which is supposed to create the text box puts them nowhere to be seen. Does anybody know why?
If I replace 'this.x, this.y..' with numerical values in the final line of the function, the text box is placed correctly. It's only when I use the 'this.x' and 'this.y' that I have issues.
Sometimes numerical values are converted in strings. That's one of the very bad point about javascript : variables are not needed to be typed.
You should try to parse them as int in order to make them react as integers again : http://www.w3schools.com/jsref/jsref_parseInt.asp
Wild Guess: an you try putting this.x and this.y into variables and then passing these variables to the function call in the last line?
Something like:
var tx = this.x;
var ty = this.y;
this.textBox = paper.text(tx, ty, this.htmlTextBox);
Related
space and/or perfomance wise, what would be a more efficient way to add strings, in the case of having many string literals concatenated together, in Javascript?
x += y;
OR
x + y;
I've been pondering about this for a while. Of course for a case where there are only two strings being concatenated together there would be virtually no difference, but what about cases where a CSS or html document is being structured inside the JS, or a huge XML, for whatever reason?
string += " classA {}";
...
.....
string += "classX {}";
VS
string + "classA {}" +
...
.....
+ "classX {}";
Sorry if this sounds like a basic question, but I had a similar problem when I had to code an XML parser in Java and realized the usage of StringBuilder. Not sure how this translates to JavaSript.
Do you want to modify x? More specifically, does it matter if x gets modified?
x + y on its own doesn't do anything unless used as an argument or captured to a variable. let z = x + y does, as does f(x + y).
x += y is equivalent to x = x + y and so modifies x, which may or may not be what you want.
Normally if your intent is to "append to x" and save the result then you'd say x += y.
If your intent is to use the combined x and y in some other place, such as f(x + y), then that's appropriate. Here f(x += y) sends mixed messages, as it's not clear why you'd be appending and calling.
It's purely your own choice. How you're comfortable doing. Doesn't have any specific standard to it. I could argue that when using x += y when you have to use multiple statements between the string declaration & modification. However, again it still comes down to your own choice.
I have written the following JavaScript, a personal challenge in this case to write a sine function without the use of any native methods...
f=n=>n<2?1:n*f(n-1)
p=(x,y)=>y--?x*p(x,y):1
w=(c,a)=>c()&&a()&w(c,a)
n=100;z=0; x=Math.PI/4
w(()=>n>-1,()=>{z+=p(-1,n)/f(2*n+1)*p(x,2*n+1),n--})
So when I output the value of z, I get the sine of x (i.e. the sine of Pi/4 radians)
I'd like to wrap this last line into a fat arrow function (i.e. s=x=>...Whatever it is... ) and have it spit out the value of z but my last few attempts have been fraught with failure... That way I can enter any value of X and have the sine of X spat out...
I'd like to keep the f, p and w functions separate in this case... I intend to use them later for other things...
Anyone have any clue as to how to achieve this given what I've got?
Thanks...
Make z a local variable in the s function, and then return it from the function.
f=n=>n<2?1:n*f(n-1);
p=(x,y)=>y--?x*p(x,y):1;
w=(c,a)=>c()&&a()&w(c,a);
s = x => {
let z = 0, n = 100;
w(()=>n>-1,()=>{z+=p(-1,n)/f(2*n+1)*p(x,2*n+1),n--});
return z;
};
console.log(s(Math.PI/4));
I have a question which is about when I trying to add color to my draw rectangle:
ctx.fillStyle = "rgba(0,102,153,1)";
ctx.fillRect(100,100,100,100);
the color in my draw rect is light blue but when I am trying to make some modification on my opacity value to make its half-transperrant:
var opacityVar = 1;
ctx.fillStyle = "rgba(0,102,153,opacityVar/2)";
ctx.fillRect(100,100,100,100);
this is not working at all untill i trying:
var opacityVar = 1;
ctx.fillStyle = "rgba(0,102,153,"+opacityVar/2+")";
ctx.fillRect(100,100,100,100);
this just works fine, my question is why would I need to add double "marks and +between my opacityVar/2variable?
I am trying to search this around but seems does not have a detailed information about rgba()arguments expression.Would anyone please help me with this?
ctx.fillStyle is a string. You are trying to execute javascript as part of your string. In order to do so, you have to execute that javascript outside of the string and then concatenate it into your string.
this is a string -> "rgba(0,102,153,"
this is javascript -> opacityVar/2
this is a string -> ")"
the + concatenates your strings and your javascript result into one string. The " tells the engine where your string starts and where it ends.
You can also use template literals in javascript now.
"opacityVar/2"
isnt a valid value for the rgba color. You want a String, that can be converted to a float. So you can test that like this:
parseFloat("opacityVar/2") // NaN => not a number
Your second code does work:
parseFloat( ""+(opacityVar/2));// 0.5 => a valid number
Because it evaluates to a valid Number.
i have some doubts about Set and clone on Three js, im trying to render a scene where a sphere moves trought x axis and the camera follow the move with the lookAt, i tryed to do by myself the example on the book learning three js, but i didnt used the clone and my scene did the same but i couldnt see the sphere, with the clone i could see the sphere can someone explain me why that happen??
here is the 2 different codes:
sphere.position.copy(new THREE.Vector3(x,10,0));
sphere.position.set(new THREE.Vector3(x,10,0));
the first shows the sphere the second not :S
To elaborate on what Derte said already - set basically works like
function set(_x,_y,_z){
this.x = _x;
this.y = _y;
this.z = _z;
}
whereas copy works like:
function copy(v3){
this.x = v3.x;
this.y = v3.y;
this.z = v3.z;
}
you're passing innapropriate parameters to the set function, so it is throwing an error internally in all likelyhood. hit ctrl+shift+i in chrome to check the console, and you'll probably see that after it executes the first line fine with copy, it's throwing an error when you try to do set with (THREE.Vector3) as arguments instead of (float,float,float)
position is THREE.Vector3
look at reference
and implementation
Vector3.set takes 3 values : numbers x,y and z
Vector3.copy takes Vector3
I'm working with Javascript, and when I type something like "Math.", I don't get any suggestions, like "PI" or "random()".
I tried installing a plugging called Aptana but it didn't solve my problem.
The same problem happens when I try to initialize an object by a constructor function:
function Box(x, y) {
this.x = x;
this.y = y;
}
var box = new Box(1, 2);
box. // nothing happens, even when I force it with CTRL + SPACE