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.

«‹›2 »

Kekekela: Oct 28, 2004

JSLint gives me a "Bad escapement" message on the following line, I'm guessing its something with that which follows the backslash but I suck at regex and can't get it cleaned up, halp:

code:

var regex = new RegExp("(?=\.(xls|xlsx))");

# ¿ Apr 9, 2009 20:37

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 05:38

Kekekela: Oct 28, 2004

sonic bed head posted:

Why on earth are you using the RegExp constructor? Why not...
code:
var regex = /(?=\.(xls|xlsx))/;
?

Umm, I don't know, but I'm doing it your way now. :downs:

# ¿ Apr 9, 2009 20:43

Kekekela: Oct 28, 2004

Divinorum posted:

do my homework for me

Start by resolving your javascript errors. For one, I don't think document.LottoFrm.txtcount will work, you can give the text box an id and call document.getElementById('txtcount') instead. (The latest version of firefox requires you to go to Tools>ErrorConsole to see the errors, not sure about IE et al)

Then once the syntax is correct start looking at your logic. It may be doing what you want already, I just glanced pretty quickly, but from what you're describing you want to be reading the count value and displaying it in the txtcount field after you've processed the main loop, instead of reading it in from the txtcount field before the loop (should there even be anything in that field at this point? seems like this is where your answer goes, not where you get user input)

Kekekela fucked around with this message at 18:10 on Apr 22, 2009

# ¿ Apr 22, 2009 17:47

Kekekela: Oct 28, 2004

I haven't used any of the IE tools since IE Dev Toolbar or whatever for IE7, which I thought was really buggy compared to Firebug. Is there something better out there for IE now?

# ¿ Apr 22, 2009 20:46

Kekekela: Oct 28, 2004

Just curious:

Will it work if you change this:

code:

button.addEventListener('click', function (){doStuff();}, false);

To this:

code:

button.addEventListener('click', doStuff, false);

# ¿ Apr 26, 2009 14:55

Kekekela: Oct 28, 2004

Sointenly posted:

so now i need to have the same button that checks the username, also check the emails as well... I understand the code that was given above, but now i'm stuck on how to link that code to the same check button as the username validation.

If you're asking how to get both javascript functions to fire from your button input, you can:

Add another statement to your onclick like:

code:

 onclick="checkInput('username');whatevertheEmailFunctionIsCalled();"

Or wrap them in one function that calls both:

code:

onclick="wrapperfunction('username')"

code:

function wrapperfunction(usernameId){
  checkInput(usernameId);
  whatevertheEmailFunctionIsCalled();
}

Or you can change the input type to 'submit' (instead of 'button') and move the wrapper call from the input's onclick event to the form's onsubmit event like in golgo13sf's example. If you do this make sure you have it return false when a validation failure occurs, like he does in his example, to keep the page from posting. (you could also just leave the call in the onclick event, the false return will cancel the submit, but its better practice to handle it at the form level since this keeps you from having to add the same validation calls to every submit on the page if you have more than one)

Kekekela fucked around with this message at 09:12 on Oct 12, 2009

# ¿ Oct 12, 2009 08:38

Kekekela: Oct 28, 2004

Sointenly posted:

acht! can you spot where I'm loving up here

HTML

code:

Please enter username and Email.
<br />
  User name: 
  <input type="text" id="username" maxlength="12"/><br />
  Passowrd: 
  <input type="text" id="Email1" maxlength="24"/><br />
  Verify password: 
  <input type="text" id="Email2" /><br />
  <input type="button" value ="checkIt" onclick="wrapperfunction('username')"; />
</form>
</body>
</html>

JavaScript

code:


function wrapperfunction(usernameId){
  checkInput(usernameId);
  checkemail();
    var usernameValue = document.getElementById(usernameId).value;
     var email1 = document.getElementById('email1').value;
     var email2 = document.getElementById('email2').value;

  
    if (usernameValue.length < 4) {
        alert("the username is too short");
    } else {
        alert("the username is ok");
    }

    if(email1 != email2) {
          alert('The two emails do not match!');
          return false;
     }
     else {
          return true;
     }
}

maybe best to mention this now, but when all requirements of the form are met, I need to alert a message that states something like "Username and Password accepted"

1. All that stuff under the "checkemail();" line should be in a function called checkemail.

2. Modify the checkInput function to return a boolean indicating success/failure.

3. Check the return values of checkInput and checkemail from within the wrapper function to determine whether or not to display the success message.

4. (optional for consistency) You don't really need to pass the name of the username textbox in as a parameter, you can just hardcode it like you're doing in the email example.

# ¿ Oct 13, 2009 02:19

Kekekela: Oct 28, 2004

Sointenly posted:

Just for clarification sake...

In the code you posted above, what is it that links those functions to the submit/verification button? Im used to VB where you just code everything individually using common names. I cant seem to find the connection here.

When the submit button is clicked it will trigger the form's onsubmit, which is where he's calling your validate function:

form id="myform" onsubmit="return validateForm();" method="POST" action="submitpage.html"

# ¿ Oct 13, 2009 03:59

Kekekela: Oct 28, 2004

Elected by Dogs posted:

any ideas what's wrong?

Wrap the javascript in a document ready handler as shown below to get the click function working. Also the test condition in your if-statement evaluates to false so you wouldn't get to the confirm dialog anyway, I added an alert in an else-block that illustrates this. There might be some other problems (I didn't really get into the logic of what you were trying to do, just why the click function wasn't firing, and then why the confirm statement wasn't being reached once the click function was fixed). This should get you going:

code:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var r = /google\.com|youtube\.com|/i;
  $("a").click(function() 
  {if (!r.test(this.href)) 
    {return confirm("You are now leaving this site to go to: \n"+this.href+"\n")}
   else 
    {alert('test condition is false');return false;}
  });
});
</script>

</head>
<body>
<a href="http://go.at.se" rel="nofollow" class="outbound extlink">bad link</a>
</body>

Kekekela fucked around with this message at 22:29 on Dec 3, 2009

# ¿ Dec 3, 2009 21:43

Kekekela: Oct 28, 2004

usingpond posted:

I was considering a new thread for this, but it doesn't really deserve one on second thought. Anyway, I do a bit of Javascript, and I currently use Prototype, with scriptaculous for UI effects.

However, when I look for jobs, and discuss Javascript libraries with other developers, most people seem to prefer jQuery. Looking at the UI effects built-in (I don't think you even need a special external file like with scriptaculous), they seem to be just as good.

So the question here is, is it worth transitioning over to jQuery? Will I get confused since the syntax is similar but not quite the same? Will I be missing anything?

It gained steam with the Alt.Net crowd then with MSFT itself, so its being used a lot more in the corporate world (from what I can see, anyway). I was using Prototype when we decided to switch over to jQuery at the shop where I was working once we saw the way the wind was blowing as far as the Alt.Net'er/MVP crowd loving on jQuery over Prototype, and I do like it a lot better now. That said, the only thing I've used Prototype for since then was for a UI widgit that Scriptaculous did better (in my opinion) than jQuery UI.

# ¿ Dec 31, 2009 09:04

Kekekela: Oct 28, 2004

dancavallaro posted:

What is an example of a use case where it makes sense to use == over ===?

parseInt(x) == parseInt(y)

e: alternatively...
aFunctionReturningAnIntThatDoesntGiveAFuckAboutBases(x) == aFunctionReturningAnIntThatDoesntGiveAFuckAboutBases(y)

Kekekela fucked around with this message at 15:49 on Sep 2, 2010

# ¿ Sep 1, 2010 18:39

Kekekela: Oct 28, 2004

Munkeymon posted:

Do you find that it matters in most situations? Serious question.

The code I deal with at work is terrible in many ways and depends on the ambiguity that type coercion provides to not fall over constantly, but I still find that, even when I think about it, I almost never see the point in putting the extra restriction on the conditional. I mean, do I really care that the answer was a string '2' instead of a Number 2 when either one can and will work? I know that's a trivial example, but I'm having a hard time thinking of an instance where it mattered.

The most common place where it matters is (as with most everything) when dealing with 0's, empty strings etc since you'll get some things you might not be expecting, like 0 == '' being true.

# ¿ Sep 1, 2010 20:11

Kekekela: Oct 28, 2004

Tivac posted:

You probably want bases on those calls to parseInt or else if the input is something like "08" you aren't going to get the answer you want.

Always specify a base for calls to parseInt, seriously.

Thanks for this. Just substitute in "function call returning a specific type == same function called with different params" if you're really not understanding what that post was trying to convey. (I realize you probably couldn't and won't be bothered to read what I was replying to, but just in case)

Kekekela fucked around with this message at 15:48 on Sep 2, 2010

# ¿ Sep 2, 2010 15:33

Kekekela: Oct 28, 2004

Canine Blues Arooo posted:

I'm pretty bad with the Javascripts. I want to a different image to load depending on the URL of the site. I've attempted this:
code:
<html>
<head>
<script type="text/javascript">

if(location.href=="www.mysite.com/index.html")
{
document.getElementById('image').src = "someimage1.jpg";
}
else if (location.href="www.mysite.com")
{
document.getElementById('image').src = "tsomeimage2.jpg";

</script>
</head>
<body>
<img src="blank.jpg" id="image">
</body>
</html>
And it doesn't load anything. I write Javascript pretty much never, so I'm sure it's some simply syntax error, but I've been crawling the Internet for an example of something similiar for the last 20 mintues with nothing to show for it.

Just off the top of my head you're missing a closing bracket from the else if, and also doing an assignment instead of a comparison there (single = sign instead of double or triple)...this is also something that probably needs to be occurring after the page loads which I'd typically put in a jQuery ready handler, I guess the non-jQuery way is doing page onLoad or something but I don't know if that works in every browser.

I think location.href also returns the http:// prefix which could be causing your comparison to fail.

# ¿ Dec 20, 2011 21:53

Kekekela: Oct 28, 2004

Poop Delicatessen posted:

Boise is just raping ASU.

That's pretty interesting but not really javascript related. :downs:

# ¿ Dec 23, 2011 04:43

Kekekela: Oct 28, 2004

ashgromnies posted:

Would anyone be interested in learning more about this?

Yeah definitely. backbone.js and document db's are both things I'm interested in hearing more about.

# ¿ Jan 8, 2012 21:13

Kekekela: Oct 28, 2004

DimpledChad posted:

The black box is pretty simple, at least the basic architecture. If you want to understand how the JS event loop works internally, this presentation is a great introduction:
https://www.youtube.com/watch?v=8aGhZQkoFbQ

Wow, very helpful. I didn't realize how much of that I didn't know. :downs:

# ¿ Apr 14, 2015 14:48

Kekekela: Oct 28, 2004

Boz0r posted:

If I have a type inheriting from another type, how do I find out which properties are defined on the parent or the child?

If I'm understanding you correctly you want hasOwnProperty.

...or If you don't care whether its inherited or not you can just do
if ('someprop' in myObj)

# ¿ May 24, 2015 13:38

Kekekela: Oct 28, 2004

Boz0r posted:

I'll check it out. I'm looking to get a list of the properties defined in the parent, and a list of the properties defined in the child.

Oh sorry, try Object.keys

# ¿ May 24, 2015 14:32

Kekekela: Oct 28, 2004

Subjunctive posted:

AFAIK he's still active.

I'm actually just listening to an Eich presentation where he says that Crockford doesn't attend anymore.

https://www.youtube.com/watch?v=u56b_HUj47E

e: for some reason the time cue got messed up when SA converted the video link, it should be at 12m30s for the relevant bits

# ¿ May 26, 2015 12:14

Kekekela: Oct 28, 2004

v1nce posted:

regex101 is a great tool for explaining what's going on. I suggest you combine it with the above tutorials:
https://regex101.com/

I know I've already thanked you once, but after having spent the last 12 years buying into the "you've got a problem, you use regex, now you've got 2 problems" mantra, this has actually turned regexes into an amazing productivity booster for me. I'm pretty much using the site daily.

# ¿ Jun 5, 2015 11:19

Kekekela: Oct 28, 2004

Thermopyle posted:

What's the plan on module support in the browser? How's that going to work?

I mean, I know how to do it right now with something like webpack or browserify, but I assume eventually browsers will support doing something with the import keyword.

This is the eventual syntax (sorry if that's not what you were asking) :

http://www.2ality.com/2014/09/es6-modules-final.html

e: oh you wanted browser implementation details, um, uh, erm...

Kekekela fucked around with this message at 10:39 on Jul 24, 2015

# ¿ Jul 23, 2015 20:19

Kekekela: Oct 28, 2004

disclaimer: I'm a novice with promises but I work in some pretty promise heavy code-bases so it was vital to my sanity that I comprehend them somewhat

Knifegrab posted:

It seems like the pg's query function is blocking, so can I just not use promises with it?

When you say its blocking, do you mean from a logical standpoint the program can't continue until the query is complete?
If so then then I think the "You're Missing the Point of Promises" section here will probably be useful. I know you said you've read all the resources, but this may be extremely on point I think. It really helped me reframe promises in my head as "callback aggregator thinger..." to providing the correspondence between synch and async functions he describes in that gist:

Domenic Denicola posted:

The thing is, promises are not about callback aggregation. That's a simple utility. Promises are about something much deeper, namely providing a direct correspondence between synchronous functions and asynchronous functions.

What does this mean? Well, there are two very important aspects of synchronous functions:

* They return values
* They throw exceptions
Both of these are essentially about composition. That is, you can feed the return value of one function straight into another, and keep doing this indefinitely. More importantly, if at any point that process fails, one function in the composition chain can throw an exception, which then bypasses all further compositional layers until it comes into the hands of someone who can handle it with a catch.

Now, in an asynchronous world, you can no longer return values: they simply aren't ready in time. Similarly, you can't throw exceptions, because nobody's there to catch them. So we descend into the so-called "callback hell," where composition of return values involves nested callbacks, and composition of errors involves passing them up the chain manually, and oh by the way you'd better never throw an exception or else you'll need to introduce something crazy like domains.

The point of promises is to give us back functional composition and error bubbling in the async world.

# ¿ Aug 8, 2015 11:47

Kekekela: Oct 28, 2004

Knifegrab posted:

What the gently caress is a virtualized DOM and how is it different from a normal DOM?

Its like a copy of the DOM that react maintains internally. When you are rendering components etc the operations are taking place on the virtualized DOM, which can then be compared to the real DOM so that only the necessary changes need to be applied.

Also as far as the other stuff, I'm liking babel since it lets me get used to new ES2015 module syntax etc. I've been using this boilerplate for my current meanderings: https://github.com/vasanthk/react-es6-webpack-boilerplate

# ¿ Aug 22, 2015 01:54

Kekekela: Oct 28, 2004

Some of the poo poo in that waterline article, dear god.

# ¿ Sep 8, 2015 19:30

Kekekela: Oct 28, 2004

"and I'm pretty sure most of us still have jobs paying us to work with it that we go along with"
Oddly enough I write C#/ASP.NET stuff for a living and honestly just find the whole node.js ecosystem fun to gently caress around with (especially since all I really need is sublime and a command prompt), in addition to getting warm and fuzzies from contributing to open source projects which its kind of enabled for me. I'm also pretty sure its contributed in weird and good ways to the msft stuff I write.

# ¿ Sep 9, 2015 04:10

Kekekela: Oct 28, 2004

code:

$('#minutes').text(workTime)

This works ok for me.
https://jsfiddle.net/63ajurLg/3/ ~~Maybe workTime was null?~~ e: what Clark said VV

code:

document.getElementById("seconds").innerHTML= String(workTime)

Should work fine but you don't need the string ctor. https://jsfiddle.net/v5qujmwd/3/

I'm guessing you realize this, but with your current html, "workTime" will need to be parsed into minutes and seconds so that their respective span's text can be set separately. (trying to just set the parent "clock" div html is going to replace everything it contains as you already ran into, if that's what you want to do you could do away with the spans https://jsfiddle.net/v5qujmwd/2/)

Kekekela fucked around with this message at 21:52 on Dec 20, 2015

# ¿ Dec 20, 2015 11:20

Kekekela: Oct 28, 2004

Raskolnikov2089 posted:

Help, React is trying to kill me

For some reason, my default pageload sets these weird data-reactid's. Switching to other routes gives me normal looking reactids, but the components that should persist (header/footer) keep reloading with the rest, getting new page id's.

After hours of googling Im at a complete loss. I'm using a rendering engine (swig) on the server for these views but Im thinking it must be somethign with the app itself

other relevant code:
code:
//app.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
          {this.props.children}
        <Footer />
      </div>
    );
  }
}

export default App;
code:
//header.js
import React from 'react'

class Header extends React.Component{
  render() {
    return(
      <div className='header'>
        <div>Header stuff</div>
      </div>
    )
  }
}

export default Header
code:
//header.js  -- footer is the same
import React from 'react'

class Header extends React.Component{
  render() {
    return(
      <div className='header'>
        <div>Header stuff</div>
      </div>
    )
  }
}

export default Header
Has anyone ever seen reactids like that?

Could swig be using a different version of react? react-id's got axed recently is one reason I'm thinking that

# ¿ Mar 8, 2016 11:11

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

Kekekela: Oct 28, 2004

Strong Sauce posted:

https://twitter.com/etiene_d/status/745218992319639552

A Chrome-only bug tied to let. Pretty funny.

Optimizer related I guess?

# ¿ Jun 23, 2016 10:05

Kekekela: Oct 28, 2004

BobFossil posted:

I just want to show the current date minus 12 months and 3 months then strip out the time and GMT info - why are the dates wrong?
code:
   var now = new Date();
   var threemonthsago = new Date(now.getFullYear(), now.getMonth() - 3, now.getDay());
   var twelvemonthsago = new Date(now.getFullYear() - 1, now.getMonth(), now.getDay());

   document.getElementById('3monthsago').innerText = threemonthsago;
   document.getElementById('12monthsago').innerText = twelvemonthsago;
   
https://jsfiddle.net/2jktgxjo/

You want getDate (which returns the day part of the date) not getDay, which returns 1 for Monday, 2 for Tuesday, 3 for Wednesday etc

# ¿ Sep 28, 2016 22:11

Kekekela: Oct 28, 2004

I use Powershell/Sublime for npm projects on Windows. I used to use an Ubuntu vm or try to do more stuff on my mac instead but no longer feel the need. The only place I've run into problems is weird file locking stuff when I used to run multiple Powershell windows with webpack-dev-server, but restricting myself to a single console window fixed that. I guess that does kind of suck, but the server is WebAPI so having Visual Studio running that in the same environment is pretty convenient.

# ¿ Oct 10, 2016 00:00

Kekekela: Oct 28, 2004

I think he means because you use npm by default to install Yarn.

# ¿ Oct 11, 2016 22:03

Kekekela: Oct 28, 2004

Strong Sauce posted:

npm install is not the "default" it's literally just the easiest way if you're already using npm.

Ok thank you for clarifying. I was just thinking of what you would call the way everyone's going to do it, what's the word for that?

Kekekela fucked around with this message at 03:23 on Oct 12, 2016

# ¿ Oct 12, 2016 03:21

Kekekela: Oct 28, 2004

e: killing my own derail

Kekekela fucked around with this message at 19:33 on Oct 12, 2016

# ¿ Oct 12, 2016 18:35

Kekekela: Oct 28, 2004

Knifegrab posted:

I have some NPM packages that I forgot to init and do proper saving etc on. After I had a bunch of node_modules I did an npm init which threw everythign into the dependency category. Unfortunately a lot of these are devDependencies. Is there a command to change a dependency to be a devDependency, google has failed me.

I'd edit package.json to get your dependencies correct then delete node_modules and do a fresh npm install.

# ¿ Jan 16, 2017 19:36

Kekekela: Oct 28, 2004

Curly braces mean you're importing a non-default member.

export default butts
import butts

export butts
export dongs
import {butts, dongs}

# ¿ Mar 21, 2017 22:21

Kekekela: Oct 28, 2004

Newf posted:

Another ES6 / React question.

I'm following this Lynda.com React.js Essential Training course, which I'm generally finding informative and good, but I'm often thrown for a loop at some of the author's js conventions. I'm new to ES6 and bad at js in general, but I'm really stuck for rationale at some of the code she writes.

The current example is a function for adding an item to a component's array of data:
JavaScript code:
// author's code
addDay(newDay){
    this.setState({
        allSkiDays: [
            ...this.state.allSkiDays,
            newDay
        ]
    })
}

// why not this?
addDay(newDay){
	this.state.allSkiDays.push(newDay)
}
It feels like a lot of modern language features are being shoehorned in for their own sake, but I don't feel very qualified to be making these judgements.

spread gives you immutability which can be an important consideration. Its what you'll find being used in reducers in redux for example (this is actually where I started using them because it was necessary which lead to me using them all over the place because it was convenient)

# ¿ Mar 25, 2017 10:38

Kekekela: Oct 28, 2004

Newf posted:

That said, I'm still lost as to how to debug this ES6 code, since all of it ends up bundled

If you're in chrome dev tools in the sources tab go down to the bottom of the treeview and select your source files from the webpack node. Might need to enable sourcemaps in your webpack config for that to work. And webpack-dev-server is doing the hot reloading, not babel.

# ¿ Mar 27, 2017 22:29

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 05:38

Kekekela: Oct 28, 2004

Sab669 posted:

I'm going to say no, but I wasn't sure if this is 'encouraged' to prevent any issues across browsers.

I'm guessing his thought was that if there was an error rendering someVar, you'd be left with a blank div instead of the previous content.

# ¿ Apr 17, 2017 13:31

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

«‹›2 »