SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top Javascript Tips

    I figure a lot of people want to use Javascript but scared off... it really isn't that hard a language, just takes a bit of time to understand the syntax. But the biggest problem I think is *knowing* the various functions/tags available.

    For example, browsing the forums made me aware of

    getElementByTagName and getElementByID

    which is pretty handy.

    So I have created this thread for all Javascript guru's to add to it -- add anything you feel that is invaluable to Javascript coding (a bit like a 101). Try and make it as informed as possible, give example uses where possible.

    Mine: Simple Image Swapper

    Code:
    <SCRIPT LANGUAGE="Javascript">
    
    <!-- this script written by Matt Thornton (matt@thornworx.com) -->
    <!-- copyright Thornworx.com 2002. Use it, but leave this message in tact and send me an email to let me know (with a link) -->
    
    <!--
    
    function doSwap(image) {
    
    var image_name=eval("window.document.images." + image); 
    image_name.src=image+"_over.gif";
    
    }
    
    function doSwapBack(image) {
    
    var image_name=eval("window.document.images." + image); 
    image_name.src=image+".gif";
    
    }
    
    //-->
    </SCRIPT>
    and:

    Code:
    <IMG SRC="add.gif" NAME="add" onMouseover="doSwap(this.name);" onMouseOut="doSwapBack(this.name);">
    The code assumes that the name of the file is the same as the NAME of the image, that it has a .gif extension and that the name of the image to swap it with is the same but with _over tacked onto the end... [BTW I have only tried it in IE...]. This helps show the organisation of the DOM.

    I look forward to seeing your "Handy Hints" or whatever you wish to call them.
    Last edited by weirdbeardmt; Apr 16, 2002 at 03:44.
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dont repeat unnecessary content

    eg

    PHP Code:

    document
    .write ('');

    intstead use

    with (document)
    {

    write('');

    }

    or

    document

    x
    .write (''); 
    always close lines with ; although its not necessary to close statments with it, it is good syntax.

    also comment your code out for browsers that don't support javascript.

    PHP Code:

    <script type="text/javascript">
    <!--

    //-->
    </script> 

  3. #3
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey weird,

    It's kind of ironic, but there is no function called getElementByTag . I think you're referring to:

    document.getElementsByTagName
    or:
    document.getElementById

    Big tips. I'd reccomend buying John Pollock's JS Begginner book: http://www.amazon.com/exec/obidos/AS...401692-1784148

    Then, I'd fool around with JS and read various articles. Two I've written are for DHTML (where you can learn more about document.getElementsByTagName and the like) http://www.pageresource.com/dhtml/ryan/ and my object-oriented article here on sitepoint (two parts of JS OOP).

    That should give you a strong foundation in JS as well as visiting, asking, and answering questions on the forums.

    aDog

  4. #4
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Arielladog
    Hey weird,

    It's kind of ironic, but there is no function called getElementByTag . I think you're referring to:

    document.getElementsByTagName
    or:
    document.getElementById

    Lol, yeh I know. I was actually meant TagName but was thinking of ID when I wrote it and kind of got a cross between the two.

    The point of this thread was to find out from the "guru's" what the other functions/tags etc are that you might miss.

    (and my tip is read the beginner and advanced JS tutorials at WebMonkey, they are awesome).
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  5. #5
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Containers for information. - innerHTML

    This isn't cross browser but it is effective for rollovers. I tend to use <div> to contain any information I require posted and then use innerHTML.

    [warning]
    This is not very cross browser compatible
    [/warning]
    Here is the base function.

    PHP Code:

        
    function changeState(objId)
        {
            eval(
    "document.getElementById('showcontainer').innerHTML=document.getElementById('"+objId+"').innerHTML");        
        } 
    This will take the object you pass in the function and change the innerHTML to the container you have the information stored in.

    Code:
    <table border="1">
    	<tr>
    		<td>Menu Selection</td>
    		<td>
    			<span id="showcontainer">
    			Basecontainer
    			</span>
    		</td>
    	</tr>
    	<tr>
    		<td onmouseover="changeState('container1')" onmouseout="changeState('basecontainer')"><a href="test.htm">Test link 1</a></td>
    	</tr>
    	
    </table>
    The basic HTML of the table to demonstate one area you could use this trick

    Code:
    <div id="basecontainer" class="test">
    Basecontainer
    </div>
    <div id="container1" class="test">
    This is container #1
    </div>
    <div id="container2" class="test">
    this is container #2
    </div>
    And lastly the containers where the information is kept. For css I use display instead of visibility. This is because display removed the physical area the object takes up. Where visibility simply masks it
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'm not feeling all there right now, but then again, I usually aren't. However,....

    1) don't use eval(), if you don't have to. It takes up processing time -- the language (and computer by extension) has to figure out what you mean before it can evaluate what you mean).

    2) there is a document.images array -- so why use eval to begin with?


    As I said, I'm not all here, but... I'm missing the point of your tip.

    Vinny

    ps: yo, Dog
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, using eval() is bad JS practice - so I wouldn't call it a "tip" as such....!

    Here are a couple of basic tips that are often overlooked, and should really be standard practice for any JS programmer:

    1) Use switch() rather than multiple if...else statements - neater code, and faster to execute

    2) When referencing an object in a hierarchy more than once, alias a variable to the object first, and then use the reference, e.g:

    don't do:
    Code:
    tmpStyle = document.all.myimage.style;
    document.all.myimage.src = "test.jpg";
    document.all.myimage.height = 10;
    instead, do:
    Code:
    tmpImage = document.all.myimage;
    tmpStyle = tmpImage.style;
    tmpImage.src = "test.jpg";
    tmpImage.height = 10;
    Not only does this look neater, it is MUCH faster to execute since the hierarchy does not have to be traversed each and every time - it is done once. This is particularly important if you are doing a sequence of operations like this to multiple items in a loop, in which case you should resolve the object that you wish to manipulate once per loop in the same way.

    3) Make use of the incrementors and decrementors (i.e. use "n++" rather than "n = n + 1") as well as the shorthand assignment operators (e.g. "n+=5"). See here for more info.

    4) Get to know regular expressions - they are your friend and will come in very handy for validating form fields and extracting values from strings. Read up here and here

    That's all for now.... more when I get time!
    Happy coding!


    M@rco


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •