Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    278
    Thanks
    63
    Thanked 8 Times in 8 Posts

    Can't figure out Javascript syntax ...

    I am trying to embed a twitter follow button on my page using code created by twitter here: https://twitter.com/goodies/buttons#follow. The problem I have is that when I place twitter's code on a test webpage that contains nothing in the body except for twitter's code, then it works fine (i.e. as expected).

    When I place it on my live web page, all I see is an ordinary anchor (i.e. unaltered by the javascript to look like a twitter button) and the error console shows ... nothing.

    I then thought to look at twitter's code to determine what it was actually doing, but because I am not very familiar with javascript, I couldn't completely figure it out!

    The code provided by twitter is as follows (I have re-arranged it to make it more readable, but the functionality is unaffected):

    Code:
     <a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false" data-lang="en-gb">Follow @username</a>
    
    <script>
    !function(d,s,id)
    {
      var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https';
      
      if(!d.getElementById(id))
        {
          js=d.createElement(s);
          js.id=id;
          js.src=p+'://platform.twitter.com/widgets.js';
          fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document, 'script', 'twitter-wjs');
    </script>
    What I don't understand is:

    What does !function mean? Coming from C, C++ and PHP, it looks to me like it means "not function". Which is nonsense ...

    I understand what the rest of the script does even if I'm not familiar with it, but I don't get the "not function" ... what is it actually doing?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    http://stackoverflow.com/questions/3...e-the-function

    It makes the JavaScript parser parse it as an expression, which is necessary to execute it.

    Code:
    alert(function(){}());   // undefined
    alert(!function(){}());  // true
    See also http://blog.dreasgrech.com/2012/09/i...ions-with.html

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 09-09-2013 at 10:57 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    XmisterIS (09-10-2013)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by XmisterIS View Post
    I then thought to look at twitter's code to determine what it was actually doing, but because I am not very familiar with javascript, I couldn't completely figure it out!
    Itís relatively irrelevant what the Twitter code itself is doing if itís working on any empty page. Obviously something on the non-empty page is interfering, but itís not the Twitter code thatís wrong.

    Do you per chance have a third-party script blocker active for the domain of the live site? What happens if you replicate the live page on your local environment? And have you tried removing/adding parts of the content of the live page step-by-step to see where stuff goes wrong?

    That would be my approach at debugging.

  • Users who have thanked VIPStephan for this post:

    XmisterIS (09-10-2013)

  • #4
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Have you tried removing the JS link within the if statement and linking to it separately.

    Code:
    <script src="http://platform.twitter.com/widgets.js"></script>
    <script>
    !function(d,s,id)
    {
      var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https';
      
      if(!d.getElementById(id))
        {
          js=d.createElement(s);
          js.id=id;
          
          fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document, 'script', 'twitter-wjs');
    </script>

  • #5
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by seanmarkham View Post
    Have you tried removing the JS link within the if statement and linking to it separately.

    Code:
    <script src="http://platform.twitter.com/widgets.js"></script>
    <script>
    !function(d,s,id)
    {
      var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https';
      
      if(!d.getElementById(id))
        {
          js=d.createElement(s);
          js.id=id;
          
          fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document, 'script', 'twitter-wjs');
    </script>
    if you put the js manually, that expression becomes worthless.

  • #6
    Regular Coder
    Join Date
    Jun 2010
    Posts
    278
    Thanks
    63
    Thanked 8 Times in 8 Posts
    I fixed it - it was another script (which I had written) that buggered it up. Removed the offending script, works fine. I'm learning a lot of javascript! I would even go so far as to say I am halfway competent in it now. Perhaps ...

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by XmisterIS View Post
    I fixed it - it was another script (which I had written) that buggered it up.
    If you wrap each script completely inside its own function then the only potential for interference with other scripts is if they both try to interact with the same HTML in different ways at the same time.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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