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 »

almostkorean: Jul 9, 2001; eeeeeeeee

Lumpy posted:

People who don't know javascript and try to write it w/o learning it hate javascript. Film at 11.

Yea, pretty much this. I have no web programming experience at all so it's really frustrating.

But more importantly GWT does everything I need, saves me time, debugging in Eclipse woowoo, etc.

# ? Nov 16, 2010 03:29

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 18:01

spiritual bypass: Feb 19, 2008; Grimey Drawer

Netbeans has an excellent JS debugger :colbert:

# ? Nov 16, 2010 03:34

almostkorean: Jul 9, 2001; eeeeeeeee

rt4 posted:

Netbeans has an excellent JS debugger

Hmm that's good to know and I'll definitely keep that in mind if I have to go down that route again. Are there any down sides to using GWT, though?

# ? Nov 16, 2010 04:40

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

almostkorean posted:

Are there any down sides to using GWT, though?

People like me get all stuffy in the javascript questions thread. :ese:

# ? Nov 16, 2010 04:54

Tivac: Feb 18, 2003; No matter how things may seem to change, never forget who you are

Douglas Crockford posted:

Google wants their Java to run anywhere, so they translate it into javascript.

# ? Nov 16, 2010 06:42

dizzywhip: Dec 23, 2005

Munkeymon posted:

You mention Firefox in the article, but even the latest 3.x doesn't seem to support Object.create() so you might want to explicitly mention which browsers (or just which JS engines) it's going to work on if it's that badly supported.

Good catch! I didn't really think that through. I don't use Firefox and for some reason I thought the latest version supported Object.create.

# ? Nov 16, 2010 08:53

HFX: Nov 29, 2004

Lumpy posted:

People who don't know javascript and try to write it w/o learning it hate javascript. Film at 11.

There is always some people know Javascript quite well and still hate it based on past experiences.

# ? Nov 17, 2010 21:01

Foiltha: Jun 12, 2008

What's a good book to start with JavaScript? I was eyeing the Chrome Experiments site and got all giddy watching the neat little graphical experiments. I have a relatively strong programming background so I'd prefer if the book actually focused on the syntax and semantics of JavaScript instead of explaining programming from the ground up.

Someone recommended me JavaScript: The Good Parts. Is it any good?

# ? Nov 20, 2010 15:23

epswing: Nov 4, 2003; Soiled Meat

Foiltha posted:

Someone recommended me java script: The Good Parts. Is it any good?

Yes. Buy it, read it, love it.

# ? Nov 20, 2010 17:55

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

Foiltha posted:

Someone recommended me java script: The Good Parts. Is it any good?

It is absolutely the best book on js there is.

# ? Nov 20, 2010 23:06

DholmbladRU: May 4, 2006

I am trying to create a help feature for a user entered form. When a user mouses over a '?' icon next to a input box it will fill out the input box with example data. is this possible?

this is kind of how i did it in html for another page.

php:

<?
<input type="text" value="0.0" onblur="if (this.value=='') this.value='0.0';" 
onfocus="if (this.value==this.defaultValue) this.value='';" 
onkeyup="auto_currency('MonthIncome')" id="MonthIncome" name="MonthIncome" />

?>

DholmbladRU fucked around with this message at 20:43 on Nov 30, 2010

# ? Nov 30, 2010 17:57

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

DholmbladRU posted:

I am trying to create a help feature for a user entered form. When a user mouses over a '?' icon next to a input box it will fill out the input box with example data. is this possible?

this is kind of how i did it in html for another page.
php:
<?
<input type="text" value="0.0" 
onblur="if (this.value=='') this.value='0.0';" 
onfocus="if (this.value==this.defaultValue) this.value='';" 
onkeyup="auto_currency('MonthIncome')" 
id="MonthIncome" name="MonthIncome" />

?>

Yes, it is possible, but please please please don't put your event handlers inside your HTML. It makes baby programming jesus cry, and makes anyone who ever has to change your code unhappy. javascript goes in javascript files, not mixed in with your HTML.

code:

HTML
<input id="myInput" value="0.0" placeholder="0.0" />
<img src="icon.png" id="theIcon" />

JS
//(I'm using jQuery because you should be too)
jQuery(function () { //on page load
  jQuery('#theIcon').mouseover(function () { // on icon mouseover
    var myInput = jQuery('#myInput'); // get ref to input
    myInput.data('storeVal', myInput.val()); // store it's current value
    myInput.val('400.2'); // set input to some arbitrary value
  }).mouseout(function () { // on icon mouse out
    var myInput = jQuery('#myInput'); // get ref to input
    myInput.val(myInput.data('storeVal')); // set back to initial value
  }).onKeyup( // whatever it is you need to do on key up );
});

If you are going to have more than one of these pairs on a page, you could turn it into a jQuery plugin so you don't have to copy / paste the same code for multiple sets of elements.

Lumpy fucked around with this message at 19:56 on Nov 30, 2010

# ? Nov 30, 2010 19:53

DholmbladRU: May 4, 2006

thanks. i had to change the first line to ' $('#theIcon').mouseover(function ()' I assume thats correct.

I am going to have about 10 of these input mouse over things on onepage, however most of them will need to be auto-filled(on mouse over) with different things. For example, phone number, address etc. Can I still accomplish this through a plugin?

edit:nevermind figured out a solution.

DholmbladRU fucked around with this message at 08:07 on Dec 2, 2010

# ? Dec 2, 2010 03:42

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

DholmbladRU posted:

thanks. i had to change the first line to ' $('#theIcon').mouseover(function ()' I assume thats correct.

I am going to have about 10 of these input mouse over things on onepage, however most of them will need to be auto-filled(on mouse over) with different things. For example, phone number, address etc. Can I still accomplish this through a plugin?

edit:nevermind figured out a solution.

You know what's nice? SHARING your solutions so people can learn, or if next week somebody has the same question, they can see what you did instead of saying "Boy, I really wish that guy had actually told us what he did that worked instead of just saying 'nm, fixed it'".

# ? Dec 2, 2010 15:55

Horse Cock Johnson: Feb 11, 2005; Speed has everything to do with it. You see, the speed of the bottom informs the top how much pressure he's supposed to apply. Speed's the name of the game.

Really dumb question that I can't seem to find an answer for via Google. Why does the anonymous function in the href attribute cause a "syntax error" in Firefox?

code:

<a href="javascript:function() { return false; }">FOO</a>

The code I'm currently working with has this all over the place and I want to fully understand it before I go changing anything.

# ? Dec 2, 2010 22:30

Haystack: Jan 23, 2005

Horse Cock Johnson posted:

Really dumb question that I can't seem to find an answer for via Google. Why does the anonymous function in the href attribute cause a "syntax error" in Firefox?
code:
<a href="javascript:function() { return false; }">FOO</a>
The code I'm currently working with has this all over the place and I want to fully understand it before I go changing anything.

After a quick bit of research (I never, ever use javascript in attributes like that), I suspect that the issue is that providing an anonymous function like that shouldn't do anything. Think about it: if you used that code as part of a normal script, it would just create a useless, referenceless anonymous function:

code:

//This function never gets called, so nothing happens
//It doesn't even get assigned to variable, so it's not even accessible and probably gets immediately garbage collected
function(){
    return false;
}

If the snippet you posted works in other browsers, I would guess it's only because they're being 'helpful' and magically calling any bare functions provided like that.

You can probably get away with stripping off the anonymous function entirely:

code:

<a href="javascript:return false;">FOO</a>

# ? Dec 3, 2010 00:49

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

It doesn't actually "work" in any browser; it's just that trying to navigate to something that can't possibly be interpreted as a URL results in nothing happening, which is what the author presumably wanted anyway. The only difference is that Firefox complains more visibly about the error.

# ? Dec 3, 2010 01:10

Haystack: Jan 23, 2005

Plorkyeran posted:

It doesn't actually "work" in any browser; it's just that trying to navigate to something that can't possibly be interpreted as a URL results in nothing happening, which is what the author presumably wanted anyway. The only difference is that Firefox complains more visibly about the error.

Well, apparently the href="java script:some expression" syntax does in fact work (source)

Again, I have never have used this 'feature,' so what actually happens is just my best guess v :shobon:

# ? Dec 3, 2010 01:41

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

Yes, that's absolutely valid (if ill-advised); the expression just has to evaluate to a string (or thing that can be converted to a string), which function() { return false; } does not.

# ? Dec 3, 2010 01:57

NotShadowStar: Sep 20, 2000

Has someone made something like a (good) ecma5-shiv.js? Something that extends the base objects with the new ECMA5 functions if they don't exist? It feels silly doing things like if(!Array.prototype.filter) myself, and the best I could find Googling is Mozilla's definition of the new functions and they wrote a JS interpretation of each in a really :psyduck:

manner.

# ? Dec 11, 2010 04:18

Haystack: Jan 23, 2005

NotShadowStar posted:

Has someone made something like a (good) ecma5-shiv.js? Something that extends the base objects with the new ECMA5 functions if they don't exist? It feels silly doing things like if(!Array.prototype.filter) myself, and the best I could find Googling is Mozilla's definition of the new functions and they wrote a JS interpretation of each in a really manner.

A quick poke around google turned up this on github. Caveat emptor, etc.

# ? Dec 11, 2010 05:34

NotShadowStar: Sep 20, 2000

Good try, but they mostly just copy/pasted the Mozilla ones which are :wtf:

. Var declarations all over scopes, bit shift operations, other JS nastiness that you'd think the people at Mozilla would know not to do. I'll probably just use that as a basis on fixing up my own.

# ? Dec 11, 2010 09:11

There Will Be Penalty: May 18, 2002; Makes a great pet!

NotShadowStar posted:

Good try, but they mostly just copy/pasted the Mozilla ones which are . Var declarations all over scopes, bit shift operations,

The bit-shift operators are most likely being used as a form of type coercion, specifically into a numeric type. I would have just used "foo + 0" myself, but there might be something going on of which I know nothing.

Comments would have been nice.

They probably copied the MDC code for the reason below (emphasis mine) and simply didn't want to mess with code that worked:

Mozilla posted:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/Filter
filter is a JavaScript extension to the ECMA-262 standard; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of filter in ECMA-262 implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming Object and TypeError have their original values, that fun.call evaluates to the original value of Function.prototype.call, and that Array.prototype.push has its original value.

Above specifically refers to Array.prototype.filter, but the docs for other Array methods on MDC have similar statements.

# ? Dec 11, 2010 16:03

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

I'm not sure if this is possible, but maybe if it is, someone knows how to do it.

I'm writing a widget that geocodes an address and then passes that address via URI to a page with a map on it. The set up worked great when the map page stood by itself. Now, that page has to live in an iframe within a template page. I'd still like to be able to pass the address via URI to the map page, but I can't think of how to bypass the page with the iframe and pass the URI directly to the map page within the iframe.

I'd like to avoid making changes to the map page as it will have to go through a reasonably complex cert process if I do.

# ? Dec 13, 2010 20:54

NotShadowStar: Sep 20, 2000

There Will Be Penalty posted:

The bit-shift operators are most likely being used as a form of type coercion, specifically into a numeric type. I would have just used "foo + 0" myself, but there might be something going on of which I know nothing.

Comments would have been nice.

They probably copied the MDC code for the reason below (emphasis mine) and simply didn't want to mess with code that worked:

Above specifically refers to Array.prototype.filter, but the docs for other Array methods on MDC have similar statements.

I figured out why Mozilla uses >>> to ensure a number.

code:


[00:56][~/Documents]$ node
> "" >>> 0
0
> +""
0
> NaN >>> 0
0
> +NaN
NaN
>

The more you know!

Still doesn't excuse the use of 'var' all over the function though.

# ? Dec 13, 2010 21:37

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

Blinkz0rz posted:

I'm not sure if this is possible, but maybe if it is, someone knows how to do it.

I'm writing a widget that geocodes an address and then passes that address via URI to a page with a map on it. The set up worked great when the map page stood by itself. Now, that page has to live in an iframe within a template page. I'd still like to be able to pass the address via URI to the map page, but I can't think of how to bypass the page with the iframe and pass the URI directly to the map page within the iframe.

I'd like to avoid making changes to the map page as it will have to go through a reasonably complex cert process if I do.

make sure your iframe has a name attribute (and I wanna say you might need an id with the same value, but I'm not sure if that's necessary, it couldn't hurt though), then the window object of the iframe is accessible by name, specifically a property on it's parent frame.

<iframe name="iframeName" id="iframeName">...</iframe>

So set it's location or whatever you need to do:
top.iframeName.location = "http://foo.baz"

# ? Dec 14, 2010 01:00

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

peepsalot posted:

make sure your iframe has a name attribute (and I wanna say you might need an id with the same value, but I'm not sure if that's necessary, it couldn't hurt though), then the window object of the iframe is accessible by name, specifically a property on it's parent frame.

<iframe name="iframeName" id="iframeName">...</iframe>

So set it's location or whatever you need to do:
top.iframeName.location = "http://foo.baz"

Thanks for the advice, but I should make clear that the widget lives in a completely different page. Anyway, after posting my earlier question I realized that there's no way to do what I want because js just doesn't work that way.

# ? Dec 14, 2010 02:28

abraham linksys: Sep 6, 2010

I'm trying to use JavaScript to scrape a page (specifically, the unread list of articles for a logged-in user on instapaper.com), and I'm having an issue parsing the downloaded page. I used XMLHttpRequest to get it as a string. I've checked by outputting to the JavaScript console, and it does download the whole document. However, when I convert the string into XML, it stops parsing partway through the document.

The source for the page is here, and it stops parsing at line 58 (i.e. the last line parsed is 57). Is there a reason that would make it stop I'm missing?

edit: nevermind, just had to replace the &'s with "[ampersand]amp;"s (the forum automatically does that so I can't say it as usual but yeah :v:

)

abraham linksys fucked around with this message at 06:34 on Dec 19, 2010

# ? Dec 19, 2010 06:10

anotherone: Feb 8, 2001; Username taken, please choose another one

Anal Volcano posted:

I'm trying to use JavaScript to scrape a page (specifically, the unread list of articles for a logged-in user on instapaper.com),

You'll probably have a better time of it if you use the RSS feed instead of scraping the page.

# ? Dec 20, 2010 00:29

Tres Burritos: Sep 3, 2009

So I'm making my first ever webpage (yay!) and I've gotten to the point where I want to start adding some animations and stuff, the webdesign megathread recommended scriptaculous so I went with that.

So what I'm doing is when a user clicks on a link in the navigation bar, the 'CenterDoc' fades out and then fades back in with the relevant information. The solution that I have works, but not if you pound on one of the links, that breaks it. So what can I do to stop that? is there some sort of error checking or something I can do? I'm feeling like using setTimeout() is the wrong thing to do, but I'm at a loss.

code:

var centerDocVisible = true;
function centerDocSwitcher(switchTo)
{
	Effect.Fold('centerDoc');
	
	if(switchTo == "About")
	{
		setTimeout("setContent('<p>About</p>')",2500)
	}
	else if(switchTo == "Resume")
	{
		setTimeout("setContent('<p>Resume</p>')",2500)
	}
	else if(switchTo == "Projects")
	{
		setTimeout("setContent('<p>Projects</p>')",2500)
	}
	setTimeout("Effect.BlindDown('centerDoc')",2500)
}
function setContent(html)
{
	document.getElementById('centerDoc').innerHTML = html
}

# ? Jan 5, 2011 02:09

Tad Naff: Jul 8, 2004; _{I told you you'd be sorry buying an emoticon, but no, you were hung over. Well look at you now. It's not catching on at all!}

Scenario: I've been making a WYSIWYG web page editor/CMS for a rather narrow vertical. No, Drupal doesn't do what we want it to. Essentially the user can build up a page made of 'widgets', each of which can be one of a small number of types (plain HTML, RSS feed, Embedded object a la Youtube, a few others) and they can drag them around and make tabs and poo poo. The objective is to never let them use HTML, because if we do it's going to be flashing centered bold <FONT FACE> crap because they learned HTML from someone who learned HTML in 1998.

Anyhow. New bug report: user cannot make a Delicious tag cloud using the "Embed" widget. Turns out that the Delicious tag cloud does stuff like

code:

<script>
//blah
document.writeln('<scr'+'ipt type="text/javascript" src="http://delicious.com/foo.js"></scr'+'ipt>'); 
//further blah
</script>

in order to pull in a couple of other scripts. The problem is, in my WYSIWYG form, I pull in the embed code via AJAX and dump the result out into a <div> via $('#widget').html(data.html) and I'm pretty sure that that pulled-in script never runs, certainly I don't see any web traffic out to Delicious. Outside of the form, on the "display" or "preview" pages, everything's peachy since it runs at load time. So. Is there a way to actually run that stuff? Or am I basically boned since it's document.write()ing after the document is already loaded?

# ? Jan 5, 2011 03:43

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

Tres Burritos posted:

So I'm making my first ever webpage (yay!) and I've gotten to the point where I want to start adding some animations and stuff, the webdesign megathread recommended scriptaculous so I went with that.

So what I'm doing is when a user clicks on a link in the navigation bar, the 'CenterDoc' fades out and then fades back in with the relevant information. The solution that I have works, but not if you pound on one of the links, that breaks it. So what can I do to stop that? is there some sort of error checking or something I can do? I'm feeling like using setTimeout() is the wrong thing to do, but I'm at a loss.

I'd do something like this, to "lock" the function and make it non-reentrant while it has pending async callbacks in setTimeout:

code:

var centerDocVisible = true;

function centerDocSwitcher(switchTo) {
	if (centerDocSwitcher.locked) return;
	centerDocSwitcher.locked = true;
	
	Effect.Fold('centerDoc');
	
	setTimeout(function(){
		setContent('<p>' + switchTo + '</p>');
		Effect.BlindDown('centerDoc');
		centerDocSwitcher.locked = false;
	}, 2500);
};

function setContent(html) {
	document.getElementById('centerDoc').innerHTML = html;
};

Nigglypuff fucked around with this message at 03:51 on Jan 5, 2011

# ? Jan 5, 2011 03:46

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

Tres Burritos posted:

So I'm making my first ever webpage (yay!) and I've gotten to the point where I want to start adding some animations and stuff, the webdesign megathread recommended scriptaculous so I went with that.

That OP is outdated. Everyone uses jQuery now. You should too. The solution to your problem is to remove the event handler from the link when it's clicked on, then add it back when your animation is done, as Nigglypuff alluded to.

Also, your code is sloppy.. missing semi-colons, brace issues, etc. In most languages, it's not a big deal, but in JS it can cause crazy errors.

# ? Jan 5, 2011 04:17

Tres Burritos: Sep 3, 2009

Lumpy posted:

That OP is outdated. Everyone uses jQuery now. You should too. The solution to your problem is to remove the event handler from the link when it's clicked on, then add it back when your animation is done, as Nigglypuff alluded to.

Also, your code is sloppy.. missing semi-colons, brace issues, etc. In most languages, it's not a big deal, but in JS it can cause crazy errors.

Thanks for the jquery heads up. I was dawdling along with this javascript stuff, doing some code, seeing if it worked and I noticed the missing semi colons as well. My original "WTF?" was replaced by an almost immediate, "meh" I didn't realize that it would even work without the semicolons, but there you go. So I left it.
:effort:

# ? Jan 5, 2011 04:37

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

Tres Burritos posted:

Thanks for the jquery heads up. I was dawdling along with this javascript stuff, doing some code, seeing if it worked and I noticed the missing semi colons as well. My original "WTF?" was replaced by an almost immediate, "meh" I didn't realize that it would even work without the semicolons, but there you go. So I left it.

Javascript will add semi-colons for you. And that's a Bad Thing.

Example:

code:

function poop (arg) {
  var blah = arg;
  return
  {
     someThing: blah,
     otherThng: 13
  }
}

var gleep = poop(2);

What is gleep ? If you said UNDEFINED you are right! Javascript slapped a semi-colon after the return and the rest of the stuff is ignored.

# ? Jan 5, 2011 04:51

geeves: Sep 16, 2004

Lumpy posted:

Javascript will add semi-colons for you. And that's a Bad Thing.

Example:
code:
function poop (arg) {
  var blah = arg;
  return
  {
     someThing: blah,
     otherThng: 13
  }
}

var gleep = poop(2);
What is gleep ? If you said UNDEFINED you are right! Javascript slapped a semi-colon after the return and the rest of the stuff is ignored.

On the other hand, I'm not sure why anyone would define their object in the actual return value instead of prior to it.

# ? Jan 5, 2011 05:07

Xenogenesis: Nov 8, 2005

geeves posted:

On the other hand, I'm not sure why anyone would define their object in the actual return value instead of prior to it.

Why? If all you're doing with the object is defining it and returning it, defining the literal on the same line as the return is perfectly clear/reasonable.

# ? Jan 5, 2011 05:25

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

geeves posted:

On the other hand, I'm not sure why anyone would define their object in the actual return value instead of prior to it.

I do it constantly, and it's one of the "big three" patterns in JavaScript, the Module Pattern.

code:

APP.Thing = (function () {
  var privateVar = 'whee',
         privateMethod = function () {
             //stuff;
         };
   return {
      publicVar: "pants",
      publicMethod: function () {
        alert(privateVar);
      }
  }
}());

# ? Jan 5, 2011 05:35

geeves: Sep 16, 2004

Lumpy posted:

I do it constantly, and it's one of the "big three" patterns in JavaScript, the Module Pattern.

code:

APP.Thing = (function () {
  var privateVar = 'whee',
         privateMethod = function () {
             //stuff;
         };
   return {
      publicVar: "pants",
      publicMethod: function () {
        alert(privateVar);
      }
  }
}());

I admit I don't like the way it looks. Perhaps because I would never do that in Java. Especially if the returned object was more complex than just 3 lines. Is it interpreted differently than

code:

APP.Thing = (function () {
  var privateVar = 'whee',
         privateMethod = function () {
             //stuff;
         };
  var obj = {
      publicVar: "pants",
      publicMethod: function () {
        alert(privateVar);
  }
   return obj;
  }
}());

? Again, maybe this is more personal preference. But back to your original point - I kinda wish JavaScript would strictly enforce the semi-colon.

# ? Jan 5, 2011 06:15

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 18:01

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

geeves posted:

I admit I don't like the way it looks. Perhaps because I would never do that in Java.

Yes, but that's because the golden rule of Java is to never pass up a chance to be pointlessly verbose.

# ? Jan 5, 2011 06:48

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

«‹›277 »