Web Analytics Made Easy -
StatCounter Looking for a good way to organize Javascripts - CodingForum

Announcement

Collapse
No announcement yet.

Looking for a good way to organize Javascripts

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Looking for a good way to organize Javascripts

    I am new to javascripts, and I am not particularly crazy about putting scripts in my html page and using it right afterwards. I am somewhat @[email protected] in my desire to separate code from content from layout. What is the best way to separate all my javascript functions in a different file and then being able to call it whenever I want.

    I thought that I might be able to write
    <script language="javascript" src=".../javascripts/functions.js"></script>

    in the head of the document, but apparently I don't understand the syntax. I am trying to learn from the beginning so I am getting pieces of information here and there, I think I got that idea from an example, and I tried to copy it, like a good programmer, and I guess I wasn't copying it properly.

    Can somebody tell me there way of separating javascripts from the html, and being able to use it on command.

  • #2
    OK, I'll give it a shot, but don't anyone shoot me!

    You're on the right track with this:
    Code:
    <script language="javascript" src="/javascripts/functions.js"></script>
    Relative file paths
    The file path in the src='yourfilepath' is relative to the file which contains this reference. In other words you are saying "look in the subdirectory "javascripts", which is at the same "level" as ME (i.e. "javascripts" folder and ME are in the same folder/subdirectory), and get the file called "functions.js"

    The file "functions.js" should NOT have the <script> tag in it. You've provided it here already. You should name javascript files with a ".js" extension (and so you do).

    "Protecting Namespace"
    You should consider the impact of global variables when the file in imported. A global variable could be named the same as another global variable, maybe from another "include" file, and you'll never know.

    A variable is global if: (1) it is defined outside of a function or (2) it is not defined using the var keyword (even if inside a function).

    Write a good function(al) interface
    Using global variables is common in Javascript coding. The <form> objects are global for example; and of course we all create plenty of other global variables...

    Don't "hide the interface"
    But what you should do is pass variables in the function call parameter list - even global stuff. In this way someone who wants to use your functions can tell better whats going on.

    Don't make the functions do more than they should
    Also, only pass as much as you need. For example if you call a function that works on a checkbox, pass only that checkbox, not the entire form, to the function. In this way we make your functions more usable for other checkboxes - especially for use with other <form>s.

    Use Objects
    Not essential, but helpful. I find that when i design objects I get multiple benefits. The act of creating them forces me to organize my data and functions and they end up being easier to use. Creating the "grunt work" functions within an object "abstracts" that more complex code from the "bigger picture" code of the HTML page itself.

    Comment


    • #3
      Well <script language="javascript" src=".../javascripts/functions.js"></script>
      should work but the functions.js file itself cannot contain any html code, it must be pure javascript.

      Specifically, constructs like <!--- which you see in inline JS code must be removed.

      You should also change the declaration to <script type="text/javascript" src=".../javascripts/functions.js"></script>

      If you're serious about valid code and the like, the language property is deprecated while the type property is required.
      Check out the Forum Search. It's the short path to getting great results from this forum.

      Comment


      • #4
        Originally posted by Roy Sinclair
        Specifically, constructs like <!--- which you see in inline JS code must be removed.
        Why is this?

        Comment


        • #5
          Perhaps a little off-tangent, but I was wondering what people use to debug their javascripts. I don't mean an application, I just mean a technique. When you do a normal program, you would probably do a println() or something to see if you have the correct information. Sometimes when I am using javascripts and I am trying to get a handle on a certain object, like document.getElementById(), and I want to see if I actually got the right one, I can't tell. What do you guys suggest doing? In fact any programming tips would be helpful, and thanks for all the information already.

          Comment


          • #6
            Because those are part of the HTML, not of the JavaScript.
            liorean <[[email protected]]>
            Articles: RegEx evolt wsabstract , Named Arguments
            Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
            Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

            Comment


            • #7
              For debugging, I usually add "alert" statements at the key points I'm trying to watch. If an alert would interfere with the interaction I'm trying to test, my second choice is to update the status line.
              Check out the Forum Search. It's the short path to getting great results from this forum.

              Comment


              • #8
                Originally posted by deadseasquirrel
                Perhaps a little off-tangent, but I was wondering what people use to debug their javascripts. I don't mean an application, I just mean a technique. When you do a normal program, you would probably do a println() or something to see if you have the correct information. Sometimes when I am using javascripts and I am trying to get a handle on a certain object, like document.getElementById(), and I want to see if I actually got the right one, I can't tell. What do you guys suggest doing? In fact any programming tips would be helpful, and thanks for all the information already.
                code very little, test a lot. repeat.

                I use alert() all over the place.

                I keep putting myself in a hole because I'll write a bunch of code - like most of the functions/methods for an object I'm creating - before I test. If you have a good symbolic debugger then you can afford to write more code at once. But my JS coding environment being what it is, sometimes I have to cut out code so it's "not in the way" (given that it's not tested yet either). I always create a method (function) for my objects that prints out all the properties (variables). Code this first! Essential for debugging w/ all those alert()s I use, and once in place it's there when you need it.

                I "override" the toString() function for this "print me" method - that way it's much more consistant with JavaScript... so:
                Code:
                function anObject (one, two)( {
                   this.thing = one;
                   this.otherThing = two;
                
                   this.toString = function{
                      var output = new String("Here I am!\n");
                      output += "thing = " + this.thing;
                      output += "\notherThing = " + this.otherThing;
                      return output;
                   }
                }
                
                var myObject = new anObject ("ThingOne", "ThingTwo");
                
                // these produce the same results:
                alert (myObject);
                alert (myObject.toString());
                Last edited by RadarBob; Mar 1, 2004, 11:49 AM.

                Comment


                • #9
                  if I am indoubt if I got the rigth element usually alert outerHTML.

                  else I use the IE/Firefox warnings.

                  and above all code one functionality at a time, then test all previous functionalities and the new functionality to work 100% before moving on.

                  Comment


                  • #10
                    Oh yeah, you absolutely must turn on the reporting of javascript errors in IE.

                    If you don't get the annoying little popups with the errors, you're going to miss problems that you should be fixing. It also helps a lot to use a browser like Mozilla which has a nice javascript console built into it where you can find errors more easily.
                    Check out the Forum Search. It's the short path to getting great results from this forum.

                    Comment


                    • #11
                      I just created a JavaScript FAQ sticky. The first question adresses debugging.
                      liorean <[[email protected]]>
                      Articles: RegEx evolt wsabstract , Named Arguments
                      Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
                      Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

                      Comment

                      Working...
                      X