Javascript



  • I've got a project at work where I have to do some javascript.

    Thing is, I don't really know any javascript and when I try and find resources online I just find sites with code to copy paste onto your myspace page or whatever.

     I thought this would be a good place to ask for any links to websites that can either teach me some javascript, or that have worthwhile examples (good coding).

     If it's any help I need to do such things as:

    React when a certain option from a pulldown menu is chosen.
    Make a popup which has 3 options.

    I don't even know if these things are possible. Forgive me if this thread sounds like I'm  just being lazy with google, but everything I get seems either out of date or "bad" 



  • The things you want are possible, and actually very basic. Javascript's explicit purpose is to influence the page and enrich it with more interactivity than basic tag behaviours like links and buttons.

    The SELECT element fires an "onchange" event when you pick a different option, and you can pick up on that in JS to do all kinds of wonderful things.

    A great place to start is over at Quirksmode.org. My very first javascript, many moons ago, was the well-known selectbox-based navigator (pick an option; link to there), and I got it from him. It's very complete. Start reading.



  • Thanks dhromed, this looks like what I was after.

    Funny thing is, I already had the css section of the site bookmarked, just missed the other part xD

     

    If anyone has any more though links or advice though, I'd be happy to listen. 



  • QuirksMode is a fairly high-level website so it's a good programming resource but not so good as a learning resource. I'd say the best online JS course/tutorial I know of is [url=http://www.howtocreate.co.uk/tutorials/javascript/important]HowToCreate's Javascript Tutorial[/url]: it's simple, it's clear and it's quite complete. a good start



  • A few more good resources are:

    http://www.crockford.com/javascript/: A few very good in-depths explanations of the less obvious and often misunderstood features of javascript. (Helps you to avoid the errors many of the afromentioned myspace snippets propably have)

    http://de.selfhtml.org/ / http://fr.selfhtml.org/: Another good resource for starters. Unfortunately currently not available in english, but at least in french...

    http://www.w3schools.com/js/: The classic. Apparently they have some rather questionable philosophic views on the future of the web (as discovered in a few topics here) but their tutorials nevertheless stay good.



  • "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.



  • @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    I disagree. If you want to be serious in javascript, the best investment you'll ever make is to go see a psychologist, because there's something wrong with you.



  • good one.



  • @asuffield said:

    @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    I disagree. If you want to be serious in javascript, the best investment you'll ever make is to go see a psychologist, because there's something wrong with you.

     

    If you're a speed freak or a shell sniper, JavaScript is not for you. If you work on web applications, your users will sooner rather than later ask for interaction and then JavaScript is the only viable alternative. You can either look for another line of work, or stumble on until you're featured on WTF, or spend a day to learn the language.

    When I started using JS six or seven years ago I was not impressed. Just another script caddy - no need to RTFM. After working with it for a while, I got confused. Syntactically it looks like a language from the C family, in which I include Java, C#, C++ and Objective C, other languages I frequently use (or used at the time). How come that apparently straightforward statements did something so unexpected? That's when I decided to RTFM and found out that JS is real language, just different.

    One of its strangest features is that JS does not have a stack. Because of that, functions and function calls are fundamentally different beasts than languages from the C family. That, plus the fact in JS "everything is a function" in a similar way that "everything is an object" in other languages, can drive you nuts. At this point, most people give up. Once you've understood the concept, however, it unleashes the power to do complex things in very concise and elegant statements.

    True, that elegance comes at the expense of memory and clock cycles. As long as you realize that and don't abuse, that's not a problem.

    JavaScript and Perl have something in common. They're both languages that lie outside the comfort zone of the masses and therefore both have many more haters than lovers. They also lie on different ends of the spectrum of application domains, so Perl lovers are usually JS haters and vice versa. Both are difficult to learn, and both are abused by people who shouldn't be coding anyways. By the way, I'm not a Perl hater - I appreciate and use it in the scope of its
    domain. In fact, I don't hate any language, I only hate lousy coders.
     



  • @JvdL said:

    @asuffield said:

    @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    I disagree. If you want to be serious in javascript, the best investment you'll ever make is to go see a psychologist, because there's something wrong with you.

     

    If you're a speed freak or a shell sniper, JavaScript is not for you. If you work on web applications, your users will sooner rather than later ask for interaction and then JavaScript is the only viable alternative. You can either look for another line of work, or stumble on until you're featured on WTF, or spend a day to learn the language.

    When I started using JS six or seven years ago I was not impressed. Just another script caddy - no need to RTFM. After working with it for a while, I got confused. Syntactically it looks like a language from the C family, in which I include Java, C#, C++ and Objective C, other languages I frequently use (or used at the time). How come that apparently straightforward statements did something so unexpected? That's when I decided to RTFM and found out that JS is real language, just different.

    One of its strangest features is that JS does not have a stack. Because of that, functions and function calls are fundamentally different beasts than languages from the C family. That, plus the fact in JS "everything is a function" in a similar way that "everything is an object" in other languages, can drive you nuts. At this point, most people give up. Once you've understood the concept, however, it unleashes the power to do complex things in very concise and elegant statements.

    True, that elegance comes at the expense of memory and clock cycles. As long as you realize that and don't abuse, that's not a problem.

    JavaScript and Perl have something in common. They're both languages that lie outside the comfort zone of the masses and therefore both have many more haters than lovers. They also lie on different ends of the spectrum of application domains, so Perl lovers are usually JS haters and vice versa. Both are difficult to learn, and both are abused by people who shouldn't be coding anyways. By the way, I'm not a Perl hater - I appreciate and use it in the scope of its domain. In fact, I don't hate any language, I only hate lousy coders.
     

    In javascript, not only is everything an object, everything is also an array...  Check this out:

    function discover(ob)
    {
      var str;

      for (a in ob)
        str += a + ": " + ob[a] + "\r\n";

      return str;
    }
    alert(discover(window)); /* substitute any object for window */



  • @RaspenJho said:

    In javascript, not only is everything an object, everything is also an array...  Check this out:

    function discover(ob)
    {
      var str;

      for (a in ob)
        str += a + ": " + ob[a] + "\r\n";

      return str;
    }
    alert(discover(window)); /* substitute any object for window */

    Quite simply, no. Like JvdL explained, JS is in many aspects just "different" than other languages. The [] operator is one of those cases. It has been designed so it can be used as an array acessor if used with arrays, but that's just a side effect. Gernerally, just means something different than in other languages. But that doesn't mean that everything is an array. In fact, this assumption leads to horrible code.



  • @PSWorx said:

    @RaspenJho said:
    In javascript, not only is everything an object, everything is also an array...  Check this out:

    function discover(ob)
    {
      var str;

      for (a in ob)
        str += a + ": " + ob[a] + "\r\n";

      return str;
    }
    alert(discover(window)); /* substitute any object for window */

    Quite simply, no. Like JvdL explained, JS is in many aspects just "different" than other languages. The [] operator is one of those cases. It has been designed so it can be used as an array acessor if used with arrays, but that's just a side effect. Gernerally, just means something different than in other languages. But that doesn't mean that everything is an array. In fact, this assumption leads to horrible code.

    Quite simply, yes.  If I can iterate over the elements of an object using a for-loop.  It's an array.  The [] comment has no significance in regards to the looping construct.



  • @RaspenJho said:

    Quite simply, yes.  If I can iterate over the elements of an object using a for-loop.  It's an array.  The [] comment has no significance in regards to the looping construct.

    These things are generally referred to as associative arrays, which are featured in other languages under the name of Hashtable, Map or Dictionary. The fact that you can iterate over something means it's a collection, of which a "classic" array is just one special case.

    JS also has a "classic" array type, but that's just a syntactic sugar over a map. The statement { foo=[]; foo[100000000] = bar;} will not allocate 100000000*ptrsize bytes, its just a single entry in the foo map.



  • @JvdL said:

    @RaspenJho said:

    Quite simply, yes.  If I can iterate over the elements of an object using a for-loop.  It's an array.  The [] comment has no significance in regards to the looping construct.

    These things are generally referred to as associative arrays, which are featured in other languages under the name of Hashtable, Map or Dictionary. The fact that you can iterate over something means it's a collection, of which a "classic" array is just one special case.

    JS also has a "classic" array type, but that's just a syntactic sugar over a map. The statement { foo=[]; foo[100000000] = bar;} will not allocate 100000000*ptrsize bytes, its just a single entry in the foo map.

    So I get all my mojo back if I replace all instances of "array" with "associative array"?



  • @RaspenJho said:

    So I get all my mojo back if I replace all instances of "array" with "associative array"?

     

    Yes you get your mojo back. Just make sure you don't confuse it with the things commonly referred to as "array" in  languages like C, Java, ... .

    While you're at it, also make sure to understand that the keywords "this" and "new" in JavaScript have an entirely different meaning than in most other languages. 



  • @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    It's a very good investment, but definitely a book for beginner.

    Still the best book on JS ever.
    @asuffield said:

    @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    I disagree. If you want to be serious in javascript, the best investment you'll ever make is to go see a psychologist, because there's something wrong with you.


    You don't know javascript so that's probably OK, but there's nothing wrong with liking javascript, even with all its flaws it's still a very good language.
    @RaspenJho said:

    In javascript, not only is everything an object, everything is also an array...  Check this out:

    function discover(ob)
    {
      var str;

      for (a in ob)
        str += a + ": " + ob[a] + "\r\n";

      return str;
    }
    alert(discover(window)); /* substitute any object for window */

    Wrong, that's an associative array or map in javaspeak, and yes in JS objects and associative arrays are pretty much the same thing, that's one of its characteristics and it's actually a good thing (from a practical PoV) for that language.

    @RaspenJho said:

    Quite simply, yes.  If I can iterate over the elements of an object using a for-loop.  It's an array.  The [] comment has no significance in regards to the looping construct.

    Except iterating over a JS array (the foo = [] + foo = new Array() kind) with the foreach syntax is suicidal for various reasons, not the least of which being that some browsers don't allow foreach to iterate over numerical indexes, and that if you store any metadata in your array (for memo purposes for example) you will iterate over them too.

    @JvdL said:

    While you're at it, also make sure to understand that the keywords "this" and "new" in JavaScript have an entirely different meaning than in most other languages. 

    This definitely does (well it's not that it does, it's that the scoping of this is completely fucked up so its pointee is unpredictable in many situations), new on the other hand doesn't, it creates an instance from a prototype object much like class-based languages create instances from classes.



  • @masklinn said:

    @asuffield said:

    @JvdL said:

    "JavaScript, The Definitive Guide" by David Flanagan from O'Reilly is the best investement you'll ever make if you want to be serious in JavaScript.

    I disagree. If you want to be serious in javascript, the best investment you'll ever make is to go see a psychologist, because there's something wrong with you.


    You don't know javascript

    Gosh, don't I? Thanks so much for telling me that, I never knew. 


    even with all its flaws it's still a very good language.

    Funny story: just the other week somebody said that to me about COBOL.



  • @asuffield said:

    Gosh, don't I? Thanks so much for telling me that, I never knew.

    My pleasure

    @asuffield said:

    Funny story: just the other week somebody said that to me about COBOL.

    And of course you can use it on pretty much any language, but javascript-the-language is a good language (not "very good", but few languages are "very good" even over their domain of predilection) (the opposite can be said of javascript-the-platform which is objectively beyond shitty, in large parts because of the DOM itself and the implementation inconsistencies between implementations).

    Javascript itself is a simple and compact multiparadigm language which works very well for both OO-style and Functional-style programs (with a few caveats on both, but I'd argue that it actually lends itself better to the functional style than to the OO style), and I've never actually seen javascript forbid me to try/use something.



  • I agree with masklinn. Besides, what's up with bashing languages you don't know and then being proud of that? My opinion is clear, don't confuse me with facts, eh?



  • @masklinn said:

    @JvdL said:

    While you're at it, also make sure to understand that the keywords "this" and "new" in JavaScript have an entirely different meaning than in most other languages. 

    new [...] creates an instance from a prototype object much like class-based languages create instances from classes.

    Someone new to javascript would probably expect that the statement new function(){}() creates a new function, but it doesn't.



  • @JvdL said:

    @masklinn said:
    @JvdL said:

    While you're at it, also make sure to understand that the keywords "this" and "new" in JavaScript have an entirely different meaning than in most other languages. 

    new [...] creates an instance from a prototype object much like class-based languages create instances from classes.

    Someone new to javascript would probably expect that the statement new function(){}() creates a new function, but it doesn't.

    ... then they fiddle around a little more with this snippet and that snippend and finally discover that - hey! - new Function()  does "exactly" what they want... and a new WTF is born...



  • @RaspenJho said:

    In javascript, not only is everything an object, everything is also an array...  Check this out:

    function discover(ob)
    {
      var str;

      for (a in ob)
        str += a + ": " + ob[a] + "\r\n";

      return str;
    }
    alert(discover(window)); /* substitute any object for window */

    It's a tidbit more subtle than that. The fact that you can loop over something with for..in does not make it an Array.

    Arrays are Objects, with a couple methods and poperties added to make it behave like a numerical, ordered list. Arrays inherit all things you can do with Objects, such as creating properties on the fly, and looping over the indices via for..in. typeof [ ]; returns "object". To test for arrays, use (flurp instanceof Array).

    for..in should never be used for Arrays. Any array instance with added keys will also show those keys in a for..in. Always use a manual counter to loop over Arrays.

    Object properties have a dual syntax, namely:

    foo.something

    and

    foo["something"]

    I personally consider it bad form to give these maps the hollow name "associative array", as the term "array" is reserved for instances of Array, and one would do well to strictly separate the two concepts.



  • @dhromed said:

    Always use a manual counter to loop over Arrays

    I prefer using the so-called "array extras" from JS 1.6 (and yes, I do have to get their conditional reimplementation in the source for some browsers)



  • @dhromed said:

    Always use a manual counter to loop over Arrays.

    You can tuck it away pretty conveniently though.

    Array.prototype.each = function(f){
        for (var i = 0; i < this.length; i++) {
           if (!f(this[i])) return;
        }
    }
     



  • I haven't seen it posted yet, but the specification for JavaScript is readily available and can be quite useful.  It's best used as a reference into just how things work.  You'd be hard pressed to learn directly from it, but it makes a good bookmark.



  • I found www.codingforums.com to be most excellent for answering many of my questions when I was a Javascript beginner.


    Diligently search for a javascript book that appeals to your learning style. For me, I found that after struggling with "how do you do this?", "how to do that?" over and over that I was really getting no where. I just needed to sit down and read through the good portion of a decent javascript book. That helped immensely. 

     IMHO: Some books are for learning some are for reference. Stay away from those that try to be both. And stay away from those that are essentially; "here's something. Oh, here's something else..." I don't get the feeling I'm building up a basic knowledge base for my own programming.  For me, that means anything published by Wrox. Perhaps Internet and World Wide Web How to Program by Deitel & Deitel will be very helpful. And don't go into sticker shock over the price. D&D's books have skyrocketed in price over the years because they're so darn popular - especially as school textbooks.

    Don't lose focus by getting into the esoteric technical areas. At this point, you absolutely do not have to care if all JS functions are whatever they are. You just have learn basically how to code in javascript.
     


Log in to reply