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 »

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Osmosisch posted:

My impression is that scope.thing3 would be assigned a function that, when called, returns the value of 'z'. & bindings create a function wrapper according to the documentation.

I didn't talk about & binding because that would have just made things even more confusing, my example has thing3 bound with @. When using & binding, it is passing in a function that exists on the parent scope that can be called by the child. In this case, the function would have to be on the scope, called z(), and you'd have had to pass it as <dir thing3="z()"></dir>

# ? Mar 24, 2016 00:16

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 23:03

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Skandranon posted:

I didn't talk about & binding because that would have just made things even more confusing, my example has thing3 bound with @. When using & binding, it is passing in a function that exists on the parent scope that can be called by the child. In this case, the function would have to be on the scope, called z(), and you'd have had to pass it as <dir thing3="z()"></dir>

Ach! Somehow that @ turned into a & in my reading, sorry. The & thing confused us for a bit recently, so I must have been oversensitive to scope binding notation.

Carry on

# ? Mar 25, 2016 10:36

stoops: Jun 11, 2001

i have this code that gives me the month of a date

code:

var objDate = new Date("2015-9-01"),
locale = "en-us",
month = objDate.toLocaleString(locale, { month: "long" });
console.log(month);

The above gives me September.

If i change the 9 to a 10, it gives me September.

It works for 1-9, giving me the correct months, January to September, but not for 10-12

Any ideas what I'm doing wrong?

# ? Apr 12, 2016 16:25

Depressing Box: Jun 27, 2010; Half-price sideshow.

stoops posted:

i have this code that gives me the month of a date
code:
var objDate = new Date("2015-9-01"),
locale = "en-us",
month = objDate.toLocaleString(locale, { month: "long" });
console.log(month);
The above gives me September.

If i change the 9 to a 10, it gives me September.

It works for 1-9, giving me the correct months, January to September, but not for 10-12

Any ideas what I'm doing wrong?

Passing a string to a Date object interprets it like Date.parse(), which can only reliably parse dates in specific formats. Even then it can get wonky, though:

MDN posted:

It is not recommended to use Date.parse as until ES5, parsing of strings was entirely implementation dependent. There are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated).

If you're planning to do any significant amount of date parsing/formatting from strings I'd recommend using a date library like Moment.js.

Depressing Box fucked around with this message at 16:58 on Apr 12, 2016

# ? Apr 12, 2016 16:54

Kekekela: Oct 28, 2004

stoops posted:

i have this code that gives me the month of a date
code:
var objDate = new Date("2015-9-01"),
locale = "en-us",
month = objDate.toLocaleString(locale, { month: "long" });
console.log(month);
The above gives me September.

If i change the 9 to a 10, it gives me September.

It works for 1-9, giving me the correct months, January to September, but not for 10-12

Any ideas what I'm doing wrong?

Git rid of the leading 0 on the day.

# ? Apr 13, 2016 02:53

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

What am I missing here?

code:

containsNonWhiteSpaceRegex.test(value) //false
/[^\s]/g.test("  s") //true
/[^\s]/g.test(value) //true
containsNonWhiteSpaceRegex.test("  s") //true
value //"  s"
containsNonWhiteSpaceRegex ///[^\s]/g
containsNonWhiteSpaceRegex.test(value) //false
asd = /[^\s]/g ///[^\s]/g
asd.test(value) //true
qwe = containsNonWhiteSpaceRegex ///[^\s]/g
qwe.test(value) //true

Console screenshot:

E: oh neat it only happens in unit tests. fuuuuck it - just gonna use trim

Munkeymon fucked around with this message at 20:51 on Apr 13, 2016

# ? Apr 13, 2016 20:36

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

Munkeymon posted:

What am I missing here?

code:

containsNonWhiteSpaceRegex.test(value) //false
/[^\s]/g.test("  s") //true
/[^\s]/g.test(value) //true
containsNonWhiteSpaceRegex.test("  s") //true
value //"  s"
containsNonWhiteSpaceRegex ///[^\s]/g
containsNonWhiteSpaceRegex.test(value) //false
asd = /[^\s]/g ///[^\s]/g
asd.test(value) //true
qwe = containsNonWhiteSpaceRegex ///[^\s]/g
qwe.test(value) //true

Console screenshot:

E: oh neat it only happens in unit tests. fuuuuck it - just gonna use trim

might be not a thing, but you never show us how you define containsNonWhiteSpaceRegex

:iiam:

# ? Apr 13, 2016 23:12

Sedro: Dec 31, 2008

Lumpy posted:

might be not a thing, but you never show us how you define containsNonWhiteSpaceRegex

containsNonWhiteSpaceRegex = { test: () => Math.random() < .5 }

# ? Apr 13, 2016 23:58

obstipator: Nov 8, 2009; by FactsAreUseless

the g flag is a buttwhole sometimes. it probably didnt reset the lastIndex or whatever its called.

# ? Apr 14, 2016 00:55

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

Sedro posted:

containsNonWhiteSpaceRegex = { test: () => Math.random() < .5 }

Good, now let's take a look at the unit te... wait a minute...

# ? Apr 14, 2016 12:24

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

Lumpy posted:

might be not a thing, but you never show us how you define containsNonWhiteSpaceRegex

Looks kinda like

JavaScript code:

define(function(require){
   //some requires here
   var containsNonWhiteSpaceRegex = /[^\s]/g;
   Backbone.Model.extend({
      //other public stuff here
      utilityFunction: function (value) {
         return containsNonWhiteSpaceRegex.test(value);
      }
   });
});

So it wasn't exposed as a property anywhere and worked correctly as long as not all the whitespace was leading.

# ? Apr 14, 2016 16:14

obstipator: Nov 8, 2009; by FactsAreUseless

//g regexes will try to continue the .test() at the last matched index instead of starting over at the beginning of whatever string is passed in

you can edit containsNonWhiteSpaceRegex.lastIndex back to 0 each time it tries to run or get rid of the g flag for regex when passing to .test()

# ? Apr 14, 2016 21:21

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Why do you need /g there anyway?

# ? Apr 15, 2016 14:51

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

obstipator posted:

//g regexes will try to continue the .test() at the last matched index instead of starting over at the beginning of whatever string is passed in

you can edit containsNonWhiteSpaceRegex.lastIndex back to 0 each time it tries to run or get rid of the g flag for regex when passing to .test()

huh. Well now I know. E: Still doesn't make sense that making a new reference to containsNonWhiteSpaceRegex makes it work as expected again.

Subjunctive posted:

Why do you need /g there anyway?

I suppose I don't? I just got in the (apparently bad) habit of using it defensively a long time ago. May just be more IE brain damage.

Munkeymon fucked around with this message at 15:31 on Apr 15, 2016

# ? Apr 15, 2016 15:06

Bob Morales: Aug 18, 2006; ~~Just wear the fucking mask, Bob~~

I don't care how many people I probably infected with COVID-19 while refusing to wear a mask, my comfort is far more important than the health and safety of everyone around me!

Is there a 'faster' or more accurate way to get mouse input (for a game) than MouseEvents? I thought I remembered a different way to get them that took some lag out of it.

# ? Apr 17, 2016 17:51

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Browser mouse events are the only way to get new information about the mouse state, so no. If the "lag" you're talking about is the 300ms delay for a "click" event then you can use "mouse down" events instead or something like hammer.js.

# ? Apr 18, 2016 04:04

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

I dimly recall a proposal to have a pollable interface for mouse state, to reduce event dispatch overhead, but I can't find any mention of it now so never mind I guess.

# ? Apr 18, 2016 04:16

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

the best part of this decision is that there's no way to query mouse position on page load

# ? Apr 18, 2016 04:24

BobFossil: Jun 17, 2005; Note to self: I hate whites.

noob question I'm sure but I'm trying to put together a bit of jQuery that simply inserts some extra headings under an H3 that is generated by a wordpress plugin.

I need the selector to recognize the contents of the h3 so that I can adjust the extra headings accordingly

code:

jQuery("h3:contains('�6,279')").after("<h4>extra sub heading here</h4>");

While my code works for static content on the page it doesn't seem to apply itself to the h3 which appears later after the page load and after the user has put in their details into the wordpress plugin (which is a step by step quote form).

Here is my fiddle https://jsfiddle.net/zr3Lrjxx/17/

I'm using the jQuery 1.11.3 library

Can anyone provide any pointers?

# ? Apr 18, 2016 14:49

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

That code is an action to perform, and can only run against elements that are present when it runs. It's not a rule to be automatically applied whenever elements are added. You'll need to run that over newly-added elements yourself (but not all elements, or you'll get duplicate "after" content).

(This is one of those cases where React is more natural, because you don't have to transition what state a header is in, just render it correctly whenever it's rendered.)

# ? Apr 18, 2016 14:58

nielsm: Jun 1, 2009

I'm working on a userscript, no jQuery available.

I need to submit a bunch of forms through XHR, and can for the most part conveniently pull the submission URL through the "action" property of the HTML form element object.
However one of these forms has an input element named "action", which overrides the action property from the class, so form.action gets me that input element rather than the submission URL.

What's a reasonable way to work around this?
(Should I just use form.attributes.action and accept that it contains relative URLs? I don't even know if XHR handles those.)

E: Okay using form.getAttribute("action") for the XHR URL worked well enough.

nielsm fucked around with this message at 22:44 on Apr 18, 2016

# ? Apr 18, 2016 22:30

BobFossil: Jun 17, 2005; Note to self: I hate whites.

Subjunctive posted:

That code is an action to perform, and can only run against elements that are present when it runs. It's not a rule to be automatically applied whenever elements are added. You'll need to run that over newly-added elements yourself (but not all elements, or you'll get duplicate "after" content).

(This is one of those cases where React is more natural, because you don't have to transition what state a header is in, just render it correctly whenever it's rendered.)

https://jsfiddle.net/zr3Lrjxx/17/

Thanks for that. I've since found out that I can get it to work if I change

code:

$("h3:contains('�6,279')")

code:

$("h3")

So I guess the content is already loaded in the page, its just displayed later by the plugin via css or something. The issue seems to be with that more specific selector. The infuriating thing is the selector does work on the html outside of the plugin, so I'm still confused.

edit: oh right, h3 works because the plugin hasn't put in the cost value on the initial page load. I guess I'll look into 'react'.

tldr: need to manipulate a bit of html that is generated after page load

BobFossil fucked around with this message at 11:28 on Apr 20, 2016

# ? Apr 20, 2016 10:22

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

I'm messing around with ES6 (or ES2015 or whatever) features now that current Chrome's support is nearing 100% and, well, see my comment

JavaScript code:

class Game {
	constructor(canvas, height, width) {
		this.canvas = canvas;
		this.height = height;
		this.width = width;
		this.ctx = canvas.getContext("2d");

		//this sugar is not sweet enough :(
		requestAnimationFrame(this.render.bind(this));
	}

	render() {
		this.ctx.fillText(`${this.height} ${this.width} ${this.canvas.height} ${this.canvas.width}`, 20, 10);
	}
}

# ? Apr 26, 2016 21:02

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

Munkeymon posted:

I'm messing around with ES6 (or ES2015 or whatever) features now that current Chrome's support is nearing 100% and, well, see my comment

JavaScript code:

class Game {
	constructor(canvas, height, width) {
		this.canvas = canvas;
		this.height = height;
		this.width = width;
		this.ctx = canvas.getContext("2d");

		//this sugar is not sweet enough :(
		requestAnimationFrame(this.render.bind(this));
	}

	render() {
		this.ctx.fillText(`${this.height} ${this.width} ${this.canvas.height} ${this.canvas.width}`, 20, 10);
	}
}

I'm at work so this won't format well but you can make a lambda property on your class instead of a method and pass in the lambda instead of binding and passing the method.

# ? Apr 26, 2016 21:30

necrotic: Aug 2, 2005; I owe my brother big time for this!

That's because its not sugar; The sugar for binding is {object}::{method} and is supposed to come out with ES2017.

https://github.com/zenparsing/es-function-bind

# ? Apr 26, 2016 21:30

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

piratepilates posted:

I'm at work so this won't format well but you can make a lambda property on your class instead of a method and pass in the lambda instead of binding and passing the method.

That's a good idea. Also thank you for using the word lambda.

necrotic posted:

That's because its not sugar; The sugar for binding is {object}::{method} and is supposed to come out with ES2017.

https://github.com/zenparsing/es-function-bind

I mean all the class ceremony. Making the language look more familiar to people used to non-prototypal inheritance doesn't do a ton of good if they're just going to run headlong into the prototype complications as soon as they try to do anything remotely interesting with their 'class' but at least now I understand what the bind operator is coming in to fix.

# ? Apr 26, 2016 21:45

necrotic: Aug 2, 2005; I owe my brother big time for this!

Munkeymon posted:

I mean all the class ceremony. Making the language look more familiar to people used to non-prototypal inheritance doesn't do a ton of good if they're just going to run headlong into the prototype complications as soon as they try to do anything remotely interesting with their 'class' but at least now I understand what the bind operator is coming in to fix.

Ah, yeah. There's going to be a lot of fun issues that pop up because people assume its not a typical class system. its almost like people should learn the language they use, no matter how piss poor it is.

# ? Apr 26, 2016 23:23

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

Found another fun wrinkle in that I can't find a way to enumerate a class' methods in the constructor, so I can't simply do

JavaScript code:

//getOwnPropertyNames doesn't work and neither does the new Reflection stuff *sigh*
for (var member in this) {
	if (typeof this[member] === 'function') {
		this[member] = this[member].bind(this);
	}
}

in every constructor to fix all the bindings. So this.method = this.method.bind(this) works fine, but I get to explicitly do that for all of them or switch to lambdas.

# ? Apr 27, 2016 17:50

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Munkeymon posted:

I'm messing around with ES6 (or ES2015 or whatever) features now that current Chrome's support is nearing 100% and, well, see my comment

JavaScript code:

class Game {
	constructor(canvas, height, width) {
		this.canvas = canvas;
		this.height = height;
		this.width = width;
		this.ctx = canvas.getContext("2d");

		//this sugar is not sweet enough :(
		requestAnimationFrame(this.render.bind(this));
	}

	render() {
		this.ctx.fillText(`${this.height} ${this.width} ${this.canvas.height} ${this.canvas.width}`, 20, 10);
	}
}

I'm on my phone, but couldn't you just do

JavaScript code:

requestAnimationFrame(() => { this.render(); });

# ? Apr 27, 2016 17:59

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

Subjunctive posted:

I'm on my phone, but couldn't you just do
JavaScript code:
requestAnimationFrame(() => { this.render(); });

Yeah, I think that's what piratepilates was suggesting.

# ? Apr 27, 2016 18:07

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Munkeymon posted:

Yeah, I think that's what piratepilates was suggesting.

I wasn't sure what he meant by a lambda property exactly. Assigning a lambda to an object's property doesn't change how this is bound, even if you use the ES6 literal syntax.

# ? Apr 27, 2016 18:15

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

That works too but I meant instead of making the function you're passing in to request animation frame a method, you make a new property on the class, and that property is a lambda function (so it gets bound to this automatically) and you pass in that lambda.

I think the react tutorials do this in a few places.

# ? Apr 27, 2016 18:20

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

piratepilates posted:

That works too but I meant instead of making the function you're passing in to request animation frame a method, you make a new property on the class, and that property is a lambda function (so it gets bound to this automatically) and you pass in that lambda.

I think the react tutorials do this in a few places.

This is (sounds like) how TypeScript would handle it as well. Instead of "blah() { this.thing() }, you do "blah = () => { this.thing() }". The only real issue with this is that blah is no longer scoped as a function, so if you call it before it gets defined, it will crap out, but this rarely comes up if you start with your class constructor.

# ? Apr 27, 2016 18:23

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

piratepilates posted:

That works too but I meant instead of making the function you're passing in to request animation frame a method, you make a new property on the class, and that property is a lambda function (so it gets bound to this automatically) and you pass in that lambda.

What exactly do you mean by "is a lambda function"? I'm not au courant on ES2017, but "lambdas" (not a thing in JS, do you mean function expression?) only have lexical this if they're arrow functions.

# ? Apr 27, 2016 18:30

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

Subjunctive posted:

What exactly do you mean by "is a lambda function"? I'm not au courant on ES2017, but "lambdas" (not a thing in JS, do you mean function expression?) only have lexical this if they're arrow functions.

Exactly how Skanadron posted it.

Edit: oh hang on, is that only a typescript thing

Edit: I guess you'd do it in es6 by assigning your lambda arrow function to the object in the constructor, and typescript lets you do the same but as a property next to the method

piratepilates fucked around with this message at 18:44 on Apr 27, 2016

# ? Apr 27, 2016 18:38

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

I think the ability to do

JavaScript code:

class Butt {
    fart = () => {} //this right here is a syntax error in ES6
}

is coming in ES7, maybe? I saw it listed as an experimental feature somewhere but I didn't make note of how old the information was.

# ? Apr 27, 2016 19:15

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

piratepilates posted:

Exactly how Skanadron posted it.

Edit: oh hang on, is that only a typescript thing

Edit: I guess you'd do it in es6 by assigning your lambda arrow function to the object in the constructor, and typescript lets you do the same but as a property next to the method

Ah, yes, I see what you mean. I thought he was referring to some declarative way to get a class method to have lexical this, which would be a weird thing to do.

# ? Apr 27, 2016 19:19

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Munkeymon posted:

JavaScript code:

class Butt {
    fart = () => {} //this right here is a syntax error in ES6
}

The correct syntax is

JavaScript code:

class Butt {
    fart = ( )) =3 
}

# ? Apr 27, 2016 19:48

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

Wheany posted:

The correct syntax is
JavaScript code:
class Butt {
    fart = ( )) =3 
}

laughed out loud on a conf call, thanks

# ? Apr 27, 2016 19:59

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 23:03

Depressing Box: Jun 27, 2010; Half-price sideshow.

Munkeymon posted:

I think the ability to do
JavaScript code:
class Butt {
    fart = () => {} //this right here is a syntax error in ES6
}
is coming in ES7, maybe? I saw it listed as an experimental feature somewhere but I didn't make note of how old the information was.

That looks like class instance fields, which last I heard are in Stage 1. Babel supports them via transform-class-properties.

# ? Apr 27, 2016 20:38

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

«‹›277 »