Here is the problem: I would like to have global variable X which takes value of alpha. With code below, value for X in console is always zero.
var X = 0;
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var alpha = Math.round(event.alpha);
X = alpha;
}
console.log(X);
EDIT:
I wanted to do something like
var X = 0;
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var alpha = Math.round(event.alpha);
X = alpha;
}
function f(x){ return x*x }
f(X);
Now I understand that I have to put f(X) within function handleOrientation. I guess there is not other way around?
You're using the value of X before it changes. Here's the order in which your code runs:
Create a function called handleOrientation. (Why first? Because creating the functions described by function declarations is one of the very first things done upon entry to a scope.)
Declare a variable called X. (First not only because it's at the top, but because creating variables declared with var is one of the very first things done upon entry to a scope, soon after processing function declarations.)
Assign 0 to X. (This is the first step-by-step code that runs.)
Call addEventListener on window.
Output X to the console.
(If and when the deviceorientation event is triggered on window) Update the value of X.
Instead, use the value after it changes:
var X = 0;
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var alpha = Math.round(event.alpha);
X = alpha;
console.log(X);
}
Or:
var X = 0;
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var alpha = Math.round(event.alpha);
X = alpha;
doSomethingWithX();
}
function doSomethingWithX() {
console.log(X);
}
Related
This is a thought exercise. I'm not doing anything with this code and the purpose is to better understand how closures work.
Thought Process:
x === 10 in global scope.
outer() function is called.
x === 20 in the global scope and local scope.
inner() function is called.
right side of 'var x' is expressed.
In x + 20, because x is not defined in local scope, it searches outer scope and finds x === 20.
var x = 20 + 20.
var x === 40.
return x.
result === 40.
However, the answer is 20. Why is this?
var x = 10;
function outer () {
x = 20;
function inner () {
var x = x + 20;
return x;
}
inner();
}
outer();
var result = x;
When the inner() function is called, the first thing that happens is var x.
This means the JavaScript interpreter first creates a variable named x to which it assigns undefined.
Then it runs the assignment expression x + 20, which is equivalent to undefined + 20 which is NaN.
Your variable result has nothing to do with your inner() function as you have a local variable (because of that var x) and you ignore the returned result.
In other words, your code is equivalent to just this:
var x = 10;
function outer () {
x = 20;
}
outer();
var result = x;
Because your inner function defined a local var x which will hide the global variable outside. And the outer function uses the global variable x and assign it to 20. Obviously, the global x is 20. Javascript will define every local variable before you call the function in the prototype chain.
var x = 10;
function outer () {
x = 20;
function inner () {
alert(x); // alert undefined
var x = x + 20;
return x;
}
inner();
}
outer();
var result = x;
This question already has answers here:
Javascript scoping of variables
(3 answers)
Closed 6 years ago.
i have this code in java script
var x = 5;
function f(y) { return (x + y) - 2 };
function g(h) { var x = 7; return h(x) };
{ var x = 10; z = g(f) };
z value is 15. why?
the expression (x+y)-2 is being evaluated as (10+7)-2.
why does x get the value of 10, and not the value of the previous
block, where x = 7?
thanks for the help
You can completely delete the first assignment. It gets overwritten before you call g(f).
Also, you can remove the parentheses of the last block as there is no block scope in JS (actually block scope got introduced with let, so you wanna use that instead).
var x = 5;
function f(y) {
// global variable x is 10 -> 10 + 7 - 2 = 15
return (x + y) - 2;
}
function g(h) {
// x gets declared locally - local value will be used
var x = 7;
return h(x); // f gets called with y = 7
}
x = 10; //global x gets changed
z = g(f);
... and always place your semicolons. Even though they maybe look optional but in some cases they are obligatory.
Value of variable x is 10 at global execution context.
When function f is finally called the value of the argument which is y, this y actually represent value of x at local execution context of function g, here x is 7.
var x = 5;
function f(y) {
return (x + y) - 2 ;
}; // value of global var x is 10, value of parameter passed is 7
// this value comes from the local var x of g function's execution context.
function g(h) {
var x = 7; return h(x); };
{ var x = 10; z = g(f); };
console.log(z);
So, I was trying to initialize variables and put a few global variables in my Unity script, but when I run the code, it says that x, y, and z are unknown identifiers. I've been trying to find the answer to this:
function Awake () {
x = 0; //Unity doesn't work with commas
y = 0;
z = 0;
}
function Update () {
if (Input.GetTouch) {
x = x-1;
}
Transform.position = Vector3(x,y,z);
}
The thing with putting the variables outside the function is that they will repeat and act as update.
I'm also new to Unity, and JavaScript.
It looks to me (granted with my limited exposure to unity) like you need to declare your variables at a global level. Try doing something like this:
// declare these variables in the global scope.
var x;
var y;
var z;
function Awake () {
x = 0;
y = 0;
z = 0;
}
function Update () {
if (Input.GetTouch) {
x = x-1;
}
Transform.position = Vector3(x,y,z);
}
I got two functions called on mouse events:
function menuBtnOver(e){
var b = e.data;
b.setPosition(b.x, b.y+5);
}
function menuBtnOut(e){
var b = e.data;
b.setPosition(b.x, b.y-5);
}
and:
setPosition:function(x, y) {
if(!x) x = 0;
if(!y) y = 0;
this.element.css("left", x);
this.element.css("top", y);
}
element property is a jQuery object.
It is working ok but i want to animate this. How can i do this with TweenLite?
I've tried following code:
function menuBtnOver(e){
TweenLite.to(e.data, 1, {top:500});
}
As well as this:
function menuBtnOver(e){
TweenLite.to(e.data.getElement(), 1, {top:500});
}
and many other combinations but none of them worked.
Only on method which partially work is this:
function menuBtnOver(e){
TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y]});
}
But it work only on fist button when I roll over and (after any time) roll out, it moves directly to given position (without tween) and then the tween goes forever giving me error each time(at least - I couldn't get any errors or anything with other attempts).
Uncaught TypeError: Cannot read property 'css' of undefined
at: this.element.css("left", x);
Update
I figured out what is going on.
I've changed code as so:
function menuBtnOver(e){
TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y], onUpdateScope:e.data});
}
But the problem with this is that arguments to update function which I set to e.data.y/x aren't dynamic references and always stay as those exact values from menuBtnOver state. So the tween works if i change setPosition function to:
setPosition:function(x, y) {
if(!x) x = 0;
if(!y) y = 0;
this.element.css("left", this.x);
this.element.css("top", this.y);
}
But obviously this is not what I want to do.
So I have option to make something like this:
MenuButton.prototype = {
setPosition:function(x, y) {
if(!x) x = 0;
if(!y) y = 0;
this.x = x; this.y = y;
this.element.css("left", x);
this.element.css("top", y);
},
updatePosition:function(){
this.element.css("left", this.x);
this.element.css("top", this.y);
}
}
function menuBtnOver(e){
TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.updatePosition, onUpdateScope:e.data});
}
Or define external update function in similar manner. The question still stays the same so is there a simple way to do this simpler. Does GS tween has any mechanic which automate this process?
Thanks to everyone for attention :)
this in setPosition is referring to that function and not the this of the onClick event.
you need to do pass this to setPosition. As in the example below, where I passed it as self in the function setPosition.
function menuBtnOver(e){
var b = e.data;
b.setPosition(this, b.x, b.y+5);
}
function menuBtnOut(e){
var b = e.data;
b.setPosition(this, b.x, b.y-5);
}
and:
setPosition:function(self, x, y) {
if(!x) x = 0;
if(!y) y = 0;
self.element.css("left", x);
self.element.css("top", y);
}
this always refernces the function in which is was called. as you can read about her. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
So you can pass this in a function as a variable.
How can I pass a variable from function x to function y and a varible from function y to function x without run the whole function. For Example below I want to sent the z variable from function two to function one and the y variable from function one to function two but without run the function two, just send the variable value.
function one(x) {
var y;
y = x+1;
}
function two(z) {
z = 9;
var k = y +9;
one(z)
}
Is a way to do that? Or it is not achievable with this way?
This is what you have:
function one(x) {
var y;
y = x+1;
}
function two(z) {
z = 9;
var k = y +9;
one(z)
}
From what I can understand you need to do this:
var z = 9;
function one(x) {
var y;
y = x+1;
}
function two() {
z = 9;
var k = y +9;
one()
}
However, it is extremely difficult to understand what you want to achieve. Can you give a scenario as to where you will use this kind of code?