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 12 of 12
  1. #1
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    single and double quotes

    every reference to single and double quotes in js states that they're either interchangeable or redundant; in praxis i've found this isn't true at all. can't seem to find a simple answer anywhere, and despite several hundred experiments i'm unable to find a pattern.

    any insight?

    tyia.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They must also match, you can't open a quoted passage with a double-quote and end it with a single quote.

    If you still don't understand show some examples of what you're having trouble with.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    gotcha

    yeah i think i understood the match part - always in pairs, first in, last out (if i'm wrong lemme know) - and it's not actually creating a problem, but i'll put a couple examples of inconsistencies i've noticed...

    on some functions the arguements have single quotes
    Code:
    onmouseover="example('sample');"
    on others they won't work if single quotes are included, and prefer to be bare
    Code:
    onmouseover="example(sample1);"
    and using the setTimeout method, if used in the verbiage of the function included in the external script or in the head, it likes double quotes

    Code:
    function example(w, x, y, z){
    if (!document.all)
    return
      if (w!= "[w]"){ 
        setTimeout("example("+w+","+x+","+y+","+z+")",1000);
        return;
      }
    but if i use that same thing inline (calling the function with setTimeout), it fails:

    Code:
    onclick="setTimeout('example(1,2,3,4)',1000);"
    nor does
    Code:
    onclick="setTimeout("example(1,2,3,4)",1000);"
    or
    Code:
    onclick='setTimeout('example(1,2,3,4)',1000);'
    or
    Code:
    onclick='setTimeout("example(1,2,3,4)",1000);'
    but.... sometimes this will...
    Code:
    onclick="setTimeout(example(1,2,3,4),1000);"
    i'm assuming sometimes has to do with the quote use/syntax of the function being called, but i can't find a pattern so far...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I have never read of a difference between single and double quotes in JavaScript, but there is a difference in Perl.

    What browser are you using?

    Is it anything to do with putting a semi-colon ; inside the quotes? Surely the ; should be outside, thus:-

    onclick="setTimeout('example(1,2,3,4)',1000)";

  • #5
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmm

    i dont' think so... (but then again i'm not very good at this)

    the quotes are to end what happens onmouseover, the semi-colon is to separate the functions that occur onmouseover...

    Code:
    onmouseover="function();function2();function3();"
    as far as i knew, the semi-colon ended a line and the function is still within the line param of the event...

    im getting more confused :|

    What browser are you using?
    and i'm on xp using ie6,nn7.1,moz5.0

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your examples are different.

    This:
    Code:
    onmouseover="example(sample1);"
    passes a object-reference; but this:
    Code:
    onmouseover="example('sample1');"
    passes a string.

    Just like this:
    Code:
    onmouseover="example(true);"
    is a boolean argument; while this:
    Code:
    onmouseover="example('true');"
    is the word "true".


    Quotes are interchangeable, but generally only for strings.

    There are exceptions though, such as key values in an object-literal - either of these is okay:
    Code:
    var myObj = { foo : 'bar' };
    var myObj = { 'foo' : 'bar' };
    Last edited by brothercake; 04-25-2004 at 08:10 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    Your examples are different; this:
    Code:
    onmouseover="example(sample1);"
    Passes a object-reference; but this:
    Code:
    onmouseover="example('sample1');"
    Passes a string.
    Quotes are interchangeable, but only for strings.
    ok. i assume i understand object reference (... referencing an object, the target arguement of the function, the id of the element being affected)... and string means ... text only? no tags?

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe a primer on data types would help - have a look at this http://javascript.about.com/library/.../aa040102a.htm
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    brothercake,

    thanks for the link. but... knowing that, and referencing your assertion that single quotes only return a string (text) - what's going on here?: (this works, and don't work if the ommission/commission of the quotes is altered on the mouseover event for any of the 3 functions it calls).

    Code:
    <script>
    var timer=null;
    px = (document.getElementById) ? "px" : "";
    var offset = -50;
    var distance = 200
    var timerspeed =20;
    var steps = 40;
    var decrease = 0.09; 
    function getPos(id) { 
    if (document.getElementById) {
    		endPos = document.getElementById(id).offsetLeft;
    }
    else if (document.layers) {
    		endPos = document.layers[id].left;
    }
    }	
    function slide(obj) {
    	if (document.getElementById) {
    		el = document.getElementById(obj).style ;
    }
    	if (document.layers) {
    		el = document.layers[obj] ;
    }
    		el.xpos = parseInt(el.left);
    	if (el.xpos < endPos) {
    		clearTimeout(timer);
    }
    	else if (el.xpos >= endPos) {
    		clearTimeout(timer);
    }
    		distance = endPos - el.xpos + offset;
    		steps = distance*decrease; 
    		el.xpos += steps;
    		el.left = el.xpos+px ;
    		timer1= setTimeout("slide('" + obj + "')",timerspeed);
    }
    function grow(obj) {
      if (distance < 500) 
      {	
      obj.style.width = distance++;
      distance=distance+2; 
      setTimeout(function(){grow(obj)}, 10);
      }
      }
    </script>
    </head>
    <body>
    <a id="link" href="#" onmouseover="getPos('link');slide('layer');grow(layer);" style="position:absolute;top:0px;left:0px;width:100px;height:100px;background-color:navy;"></a>
    <div id="layer" style="position:absolute;left:100px;top:0px;width:100px;height:100px;background-color:silver;"></div>
    </body>
    </html>
    why is that? does it have to do with the id reference versus the ojb reference? (the motive function and the function to find position coords use getElementbyId(obj), while the resize function uses only (obj)...)

    thanks cake for the time, sorry if im being a bother...

    * (thanks and credit to glenngv for helping (basically re-writing) the resize function used in this example).

    edit: forgot to close code tag

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're confusing yourself by using the keyword "obj" for something which is not always an object.

    Your slide function has a string:
    Code:
    el = document.getElementById(obj).style ;
    The keyword "obj" refers to a string, which is the ID of the element. But in the grow function you use an object reference directly:
    Code:
    obj.style.width = distance++;
    See the difference? It would be less confusing if you use a keyword that made sense for what it is, like "id" that you use for the getPos function
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ah

    i finally get it. thx.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    IE's global scoping of ids in elements added to your confusion.

    <a id="link" href="#" onmouseover="getPos('link');slide('layer');grow(layer);" ...></a>
    <div id="layer" ...></div>
    </body>

    In IE, all ids are considered global variables. So the div with id="layer" can be referenced by the global variable layer. You should avoid that bad practice of referencing elements only by their id. Only IE allows that.
    The proper way to reference element via its id is:

    document.getElementById('layer')

    where layer is the id of the element.
    You can use single or double quotes to surround the string literal layer. The quotes are not needed IF you store the id in a variable.

    var theId = 'layer';
    document.getElementById(theId)

    This is similar to what you did in the slide() function. You only used a confusing variable name for the function parameter which brothercake earlier pointed out.

    Hope this enlightens you.


  •  

    Posting Permissions

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