Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

bobua posted:

Speaking of AJAX(which I've never used)... Let's say you wanted a little message box on a page, and you wanted the server to be able to send messages to that box at any time, not just when the user clicks a button or something on the page. Would AJAX be the right avenue for that sort of thing? I went through the w3c's AJAX tutorial and it seemed close, but all of the examples were more about the page setting up a request and waiting for a response.

Yes and no;

Yes in that you can just set ajax requests on a timeout loop and keep polling the server every 5 seconds or so with ajax requests.

No in that websockets might be a better way of doing it.

# ? Nov 4, 2013 23:10

Adbot: ADBOT LOVES YOU

# ? May 28, 2024 02:43

excidium: Oct 24, 2004; Tambahawk Soars

Maluco Marinero posted:

Your object keys are really janky for working with angulars filters, so this may not work, but try escaping the inner key:

"orderBy:'[\'RiskOutput.Description\'].value'"

If that fails I think you should remove the dots in your keys so you can access the attributes without the square bracket notation. ie riskOutputDescription or something similar. That way you could use

order by: riskOutputDescription.value

Alternatively you can create a getter function in scope that will take your object and return the description value for sorting. Give that function to orderBy.

No dice on the escaped key. The reason it's set up that way is because this is getting translated from XML to JSON so the data format is pretty rigid. I don't have enough of an understanding to know if I'm running into issues with the actual structure in regards to the array/objects and the orderBy's ability to index these and actually order them. I have read something about that potentially being an issue - in that case is there a way to change the grouping of my JSON data in regards to the array/objects and get that to work?

# ? Nov 4, 2013 23:16

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

excidium posted:

No dice on the escaped key. The reason it's set up that way is because this is getting translated from XML to JSON so the data format is pretty rigid. I don't have enough of an understanding to know if I'm running into issues with the actual structure in regards to the array/objects and the orderBy's ability to index these and actually order them. I have read something about that potentially being an issue - in that case is there a way to change the grouping of my JSON data in regards to the array/objects and get that to work?

They haven't really made their JSON in a Javascript Object friendly manner, but I guess beggars and choosers.

OrderBy can't figure it out because it's expecting a different expression, and probably doesn't like inlining keys like that. Just use a getter function in your controller's scope:

JavaScript code:

// In your controller

$scope.getRiskDescriptionValue = function(risk) { return risk['RiskOutput.Description'].value };

And then change the predicate to:

orderBy:getRiskDescriptionValue

# ? Nov 4, 2013 23:41

Xarb: Nov 26, 2000; Not happy.

bobua posted:

Speaking of AJAX(which I've never used)... Let's say you wanted a little message box on a page, and you wanted the server to be able to send messages to that box at any time, not just when the user clicks a button or something on the page. Would AJAX be the right avenue for that sort of thing? I went through the w3c's AJAX tutorial and it seemed close, but all of the examples were more about the page setting up a request and waiting for a response.

What you are thinking of is Ajax long polling.

Basically the browser makes a long duration ajax request that doesn't complete until the server sends back some data. When the data is sent back from the server the ajax call is completed and a new long-duration request is sent.

I believe it is used by Gmail, and is often used for browser based chats.
http://en.wikipedia.org/wiki/Comet_(programming)#Ajax_with_long_polling

# ? Nov 4, 2013 23:45

bobua: Mar 23, 2003; I'd trade it all for just a little more.

The longer version of what I was actually working on was a node.js account creation page. You clicked the submit button and the form data was posted, the backend then tried to do stuff like check if the account already existed, or create it. If it got created, I wanted to log them in and redirect them to a page, which was no problem. If there was a problem(account already existed\database error\anything I couldn't easily catch on the front end) I didn't want to reload the page, I just wanted a message to show up with the result(Account already exists, etc).

I gave up and just did res.render(/page, msgresult: "Account already exists."); and included msgresult in the page template

# ? Nov 5, 2013 01:02

pr0metheus: Dec 5, 2010

why does this generate an error: TypeError: Cannot set property 'y' of undefined ?

code:

"use strict";

function foo(x)
{
	this.y = x;
	return this;
}

var a = foo(1);

# ? Nov 5, 2013 03:48

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Because you're in global scope there, and when you have "use strict" it won't let you use the window object as the global or something. If you want to treat your function as a class thing, try `var a = new foo(1);`

# ? Nov 5, 2013 03:52

pr0metheus: Dec 5, 2010

A MIRACLE posted:

Because you're in global scope there, and when you have "use strict" it won't let you use the window object as the global or something. If you want to treat your function as a class thing, try `var a = new foo(1);`

I am not sure I understand. There is no window object here because this is in node. I am just trying to understand how object instantiation works in JavaScript and why this is undefined if I just call the function.

# ? Nov 5, 2013 03:57

pr0metheus: Dec 5, 2010

Following code works:

code:

function foo(x)
{
	this.y = x;
	return this;
}

var a = foo.call(new Object(), 1);

I suppose when you just call a function in JavaScript it does not pass any object for prototype and is equivalent to: foo(1) <-> foo.call(undefined,1);

# ? Nov 5, 2013 03:59

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Well in node I'm not sure what the global object binds to. But use strict stops you from attaching variables to it. Basically scope isn't bound by function, it's at the object level.

# ? Nov 5, 2013 04:01

pr0metheus: Dec 5, 2010

A MIRACLE posted:

Well in node I'm not sure what the global object binds to. But use strict stops you from attaching variables to it. Basically scope isn't bound by function, it's at the object level.

This article seems to be saying what you are saying: http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

# ? Nov 5, 2013 04:07

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Given that "constructors" in JavaScript are just regular functions, what were you expecting the value of this to be?

# ? Nov 5, 2013 04:40

pr0metheus: Dec 5, 2010

Jabor posted:

Given that "constructors" in JavaScript are just regular functions, what were you expecting the value of this to be?

a new instance of currently executing function?

# ? Nov 5, 2013 05:11

Strong Sauce: Jul 2, 2003; You know I am not really your father.

The correct way to write that in strict mode is:

code:

"use strict";

function foo(x) {
  this.y = x;
  return this;
}

var a = foo.bind(this, 1);

Because in strict mode, functions are no longer allowed to access global scope implicitly like you did. This is to prevent the inherent insecurity of allowing any function access to this space so when it gets called in this way, strict javascript will return undefined for "this".

Read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode#.22Securing.22_JavaScript

# ? Nov 5, 2013 06:16

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

I think you want .call, not .bind, Strong Sauce.

But yes, this is passed based on syntax. To quote myself earlier in the thread:

Suspicious Dish posted:

JS does not have lexical closures, it's based on the syntax of how you called the object.

If you do o.f();, this is o.

If you do var f = o.f; f();, this is the global object.

If you do new f(); or new o.f();, this is an object constructed from the constructor's prototype property. Imagine var this = Object.create(Thing.prototype); at the top of your constructor function.

# ? Nov 5, 2013 06:22

Strong Sauce: Jul 2, 2003; You know I am not really your father.

Yeah wasn't sure if he was trying to return the function that he was trying to instantiate. Just trying to point out that _this_ in this case doesn't exist in strict mode.

# ? Nov 5, 2013 06:31

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

pr0metheus posted:

a new instance of currently executing function?

You want this to happen on every single function call?

# ? Nov 5, 2013 07:40

pr0metheus: Dec 5, 2010

Jabor posted:

You want this to happen on every single function call?

Yea. Like a real constructor.

# ? Nov 5, 2013 07:46

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

pr0metheus posted:

Yea. Like a real constructor.

Constructors are just regular functions in JavaScript. Literally the only distinction is whether or not you use "new" when you call it.

Do you seriously want the runtime to try to guess whether you're loving up, and completely change the meaning of perfectly valid code when it thinks you are?

E: I mean, that "the user might be an incompetent buffoon so let's completely change what the code does if we think they made a mistake" idea is responsible for quite literally the worst anti-feature that JavaScript has.

Jabor fucked around with this message at 07:58 on Nov 5, 2013

# ? Nov 5, 2013 07:54

pr0metheus: Dec 5, 2010

Jabor posted:

Constructors are just regular functions in JavaScript. Literally the only distinction is whether or not you use "new" when you call it.

Do you seriously want the runtime to try to guess whether you're loving up, and completely change the meaning of perfectly valid code when it thinks you are?

E: I mean, that "the user might be an incompetent buffoon so let's completely change what the code does if we think they made a mistake" idea is responsible for quite literally the worst anti-feature that JavaScript has.

I am just trying to understand how constructors work in JavaScript. I thought that this keyword refers to a new instance of an object that is created whenever that function gets called. That is when a function gets called, a new object is automatically created and is accessible using this keyword from that function. But I suppose that is not the case.

I also wanted to avoid new operator as its just a bunch of syntactic sugar. I suppose I should really use Object.create or constructor.call(new instance of whatever, args).

# ? Nov 5, 2013 08:46

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

The "create a new object and use it as the value of this" is entirely a property of the new operator - new f() is fundamentally equivalent to

code:

var o = Object.create(f.prototype);
f.call(o)

I guess it is syntactic sugar of sorts. JavaScript is kind of weird in that it has prototypal inheritance, but then it made a bunch of compromises (such as the new operator) to make it more appealing to people who were used to class-based systems. It's only relatively recently that things like Object.create have been added to let you do prototypal stuff properly.

# ? Nov 5, 2013 09:08

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

This discussion is why I'm a fan of this style of object creation in java script:

JavaScript code:

var MyClass = {
  new: function(x) {
    this.val = x;
    return this;
  }
};

var myInstance = MyClass.new(1);

# ? Nov 5, 2013 11:22

OddObserver: Apr 3, 2009

Err, doesn't this set myInstance === MyClass?
(assuming it even parses)

# ? Nov 5, 2013 14:26

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

OddObserver posted:

Err, doesn't this set myInstance === MyClass?
(assuming it even parses)

Yes. And why wouldn't it parse?

# ? Nov 5, 2013 14:56

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Yeah I guess it's a singleton. never mind :doh:

# ? Nov 5, 2013 17:57

stoops: Jun 11, 2001

I'm currently using this code (from here: http://bl.ocks.org/mbostock/1624660) to grab data from a cvs file and outputting a histogram.

code:

d3.csv("values.csv", function(bins) {


  // Coerce types.
  bins.forEach(function(bin) {
    bin.Income = +bin.Income;
    bin.People = +bin.People;
  });

  // Normalize each bin to so that height = quantity/width;
  // see [url]http://en.wikipedia.org/wiki/Histogram#Examples[/url]
  for (var i = 1, n = bins.length, bin; i < n; i++) {
    bin = bins[i];
    bin.offset = bins[i - 1].Income;
    bin.width = bin.Income - bin.offset;
    bin.height = bin.People / bin.width;
  }

  // Drop the first bin, since it's incorporated into the next.
  bins.shift();

  // Set the scale domain.
  x.domain([0, d3.max(bins.map(function(d) { return d.offset + d.width; }))]);
  y.domain([0, d3.max(bins.map(function(d) { return d.height; }))]);


  // Add the bins.
  svg.selectAll(".bin")
      .data(bins)
    .enter().append("rect")
      .attr("class", "bin")
      .attr("x", function(d) { return x(d.offset); })
      .attr("width", function(d) { return x(d.width) - 1; })
      .attr("y", function(d) { return y(d.height); })
      .attr("height", function(d) { return height - y(d.height); });

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis()
      .scale(x)
      .orient("bottom"));

  svg.append("g")
      .attr("class", "y axis")
      .call(d3.svg.axis()
      .scale(y)
      .orient("left"));

});

That works, but my problem is, besides being new to D3 and javascript, is I don't know how to use this code to grab my data values from an array, instead of the text file.

my array is

code:

var dataset = [ [446393.75,0],[583192.19,0],[589837.73,0],[590388.53,3460] ];

Instead of grabbing the values from the text file, I want it to grab it from my dataset array.

If anyone has an experience with D3 and histograms, I'd appreciate any input, tips, etc.

# ? Nov 5, 2013 23:13

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

Does anyone know if it is possible to get pixel data for rendered html on a page using javascript? I know that pixel data can be grabbed out of a canvas element, but anything beyond that?

I don't suppose a transparent canvas on top of the html would actually grab background pixel data or anything?

# ? Nov 6, 2013 02:16

TURTLE SLUT: Dec 12, 2005

peepsalot posted:

Does anyone know if it is possible to get pixel data for rendered html on a page using javascript? I know that pixel data can be grabbed out of a canvas element, but anything beyond that?

I don't suppose a transparent canvas on top of the html would actually grab background pixel data or anything?

Pretty certain this isn't possible.

# ? Nov 6, 2013 04:32

rotor: Jun 11, 2001; classic case of pineapple derangement syndrome

Google does it for their feedback tool.

http://www.elliottsprehn.com/preso/fluentconf/#/

also this: http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6678156#6678156

rotor fucked around with this message at 04:57 on Nov 6, 2013

# ? Nov 6, 2013 04:52

Jam2: Jan 15, 2008; With Energy For Mayhem

Has anyone here used Google closure library to develop javascript web apps? Anyone have experience using closure in concert with javascript frameworks like ember or angular?

# ? Nov 6, 2013 09:31

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Jam2 posted:

Has anyone here used...

It's probably best to just assume "yes" and if you have any questions, ask them.

# ? Nov 6, 2013 11:43

The Insect Court: Nov 22, 2012; by FactsAreUseless

pr0metheus posted:

I suppose when you just call a function in JavaScript it does not pass any object for prototype and is equivalent to: foo(1) <-> foo.call(undefined,1);

In a regular function call, this is just a reference to the enclosing object. For a function outside of any object, that's the global object, for a method it's the object the method is being called in the context of. Strict mode changes this a little bit, if this would have been bound to the global object you get 'null' instead to let you know you're hosed up.

All the new keyword does is the following:
a) It binds the value of this inside the function to a new empty object, not to window or the object the function is defined on.
b) That object is implicitly returned at the end of the function, unless you explicitly return something else.

# ? Nov 6, 2013 11:44

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

stoops posted:

I'm currently using this code (from here: http://bl.ocks.org/mbostock/1624660) to grab data from a cvs file and outputting a histogram.
code:
d3.csv("values.csv", function(bins) {

... CODE! ...

});
That works, but my problem is, besides being new to D3 and javascript, is I don't know how to use this code to grab my data values from an array, instead of the text file.

my array is
code:
var dataset = [ [446393.75,0],[583192.19,0],[589837.73,0],[590388.53,3460] ];
Instead of grabbing the values from the text file, I want it to grab it from my dataset array.

If anyone has an experience with D3 and histograms, I'd appreciate any input, tips, etc.

I do not have any experience with d3, but I read their docs quick and it looks like when you parse a CSV file with d3, it creates a set of objects based off the header. So the CSV file:

code:

Blah, Gloop
1,2
4,3

is turned into:

code:

[ {"Blah": 1, "Gloop": 2}, {"Blah": 4, "Gloop": 3} ]

and that is what's being passed into the 'bins' parameter. So what you need to do is turn your array of arrays into an array of objects, and then pull out the callback in the 'csv' function into it's own function, and pass your data into it.

So:

code:

d3.csv("values.csv", function(bins) {

... CODE! ...

});

becomes

code:

var my_fine_function = function (bins) {

... all that same code! ...
};

Your array becomes an array of objects:

code:

var dataset = [ 
    {Income: 446393.75, People: 0},
    {Income: 583192.19, People: 0},
    {Income: 589837.73, People: 0},
    {Income: 590388.53, People: 3460} 
];

And then you'd call your function with your dataset: my_fine_function(dataset) and that *should* work. The "income" and "people" parameters are hard-coded into the existing code, so if you want to rename them in your dataset, you'll have to change the code to handle that.

Again, I have never used d3 before, so I could be lying to you, but that should work in theory.

# ? Nov 6, 2013 15:31

stoops: Jun 11, 2001

Lumpy posted:

Again, I have never used d3 before, so I could be lying to you, but that should work in theory.

Thanks, Lumpy. It worked and your explanation was clear, so I appreciate that. (Now, I just gotta figure out the scaling.)

# ? Nov 6, 2013 17:47

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

peepsalot posted:

Does anyone know if it is possible to get pixel data for rendered html on a page using javascript? I know that pixel data can be grabbed out of a canvas element, but anything beyond that?

I don't suppose a transparent canvas on top of the html would actually grab background pixel data or anything?

There's this thing https://developer.mozilla.org/en-US/docs/Web/CSS/element that FF supports that might let you do it on there and maybe everywhere else some time in the 2030s.

# ? Nov 6, 2013 21:40

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Munkeymon posted:

There's this thing https://developer.mozilla.org/en-US/docs/Web/CSS/element that FF supports that might let you do it on there and maybe everywhere else some time in the 2030s.

I'm going to assume this doesn't actually give you access to the pixels of the element, only allows you to use it in some other contexts that expect an image.

# ? Nov 7, 2013 00:39

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

The only way to do it is probably as a browser extension, like ColorZilla does.

# ? Nov 7, 2013 00:51

pr0metheus: Dec 5, 2010

The Insect Court posted:

In a regular function call, this is just a reference to the enclosing object. For a function outside of any object, that's the global object, for a method it's the object the method is being called in the context of. Strict mode changes this a little bit, if this would have been bound to the global object you get 'null' instead to let you know you're hosed up.

All the new keyword does is the following:
a) It binds the value of this inside the function to a new empty object, not to window or the object the function is defined on.
b) That object is implicitly returned at the end of the function, unless you explicitly return something else.

Thank you for a succinct explanation! Just what I was looking for!

# ? Nov 7, 2013 07:13

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Jabor posted:

I'm going to assume this doesn't actually give you access to the pixels of the element, only allows you to use it in some other contexts that expect an image.

Could be - I didn't dig too far into it beyond seeing it in MDN and thinking it'd be pretty neat to have. Certainly would solve a problem I ran into recently.

# ? Nov 7, 2013 17:44

Adbot: ADBOT LOVES YOU

# ? May 28, 2024 02:43

mmachine: Jan 5, 2006

I could use a sanity check. Is there an elegant way to close an element after it's already been drawn to the DOM? Let's say I have a div like so:

pre:

<div class="wrapper">
</div>

That's 960px wide and auto margin. Inside lets say we have a bunch of <p> tags. What I need to do is insert some content dynamically somewhere within the .wrapper content that would bust outside that wrapper. So, for example, I'd want to place somewhere inside my existing div:

pre:

</div><!-- .wrapper -->
<div class="my-wrapper-breaking-thing">
</div>
<div class="wrapper">

..and then have the content flow continue. Most times errant close tags are stripped out though -- with good reason -- so the methods I've tried already have failed using JS. This in general feels broken to me for multiple reasons (if all this could get drawn on DOM load for instance we'd have no issue), though this what the design spec requires and it's a cool execution so I'd like to do my best to satisfy it. Before I push back though I wondered how I might be overlooking a much simpler way of going about this.

mmachine fucked around with this message at 22:10 on Nov 7, 2013

# ? Nov 7, 2013 22:06

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »