SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quotes or No Quotes

    Hi,
    I'm in the process of learning javascript and I've noticed that for some properties, when you set them equal to something, sometimes you need to put that something in quotes and sometimes you dont. A couple examples:

    checkBoxObject.tabIndex=4;
    window.location.href="www.sitepoint.com";
    frameObject.frameBorder="1";
    buttonObject.disabled=true;
    passwordObject.maxLength=8;

    Is there any kind of intuitive way to know whether there should be quotes or not? I noticed that most of the time, numbers and the "true or false" ones dont get quotes, but sometimes numbers get quotes too as in the frameBorder above. Or do I just need to memorize which ones get quotes and which dont? Thanks.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The attributes you mention are all html so I assume that you mean html element attributes,
    and not javascript defined variables or properties of objects.

    It depends- some browsers will sometimes accept unquoted attributes,
    but all html attributes should be quoted.
    All of your examples should be quoted, but one you didn't mention is

    buttonObject.disabled=false;
    In this case you are not setting disabled to a string 'false'-
    you are removing the attribute, so the quotes would not work.

    If you examined the innerHTML there would no longer be a disabled attribute
    in the element's opening tag.
    Or you could use buttonObject.removeAttribute('disabled') to avoid the complication.
    Last edited by mrhoo; Jan 12, 2007 at 17:49. Reason: Clarification

  3. #3
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mrhoo,

    I appreciate your comments, but you'll have to forgive me if I guess I don't quite get a lot of what you are saying as I started learning JS less than a week ago. I think I get the buttonObject.disabled=false; part, because you are effectively removing the disabled="disabled" out of the button tag, but would you quote it if you are setting it to true because you are adding disabled="disabled" to the <button> tag? Or would you still not quote it because you are not adding the string "true", but instead adding the attribute of "disabled"?

    But as far as the quotes for each line of code I gave, I'm obviously in no place to say you are wrong, but I have a book called the JavaScript Bible and here are a couple of direct examples of lines of code from it:

    document.forms[0].input.maxLength = 3;
    document.myIMG.width = 400;

    Are these different examples that what you were talking about? I dont know, I'm pretty confused right now...any more help you or anyone else could give would be greatly appreciated. Thanks again.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    In Javascript you place quotes around text strings and don't place quotes around numbers (if you place quotes around numbers then you make them into text strings.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but would you quote it if you are setting it to true because you are adding disabled="disabled" to the <button> tag?
    No.

    In most programming language there are different types:

    a) strings (e.g. "hello world", "red")
    b) numbers (e.g. 1, 4.5);
    c) boolean (e.g. true, false)

    If you are doing a mathematical calculation, it should be intuitive that you need to use numbers. For other things, it's not so intuitive, and you just have to learn when to use numbers and when to use strings and when to use booleans(booleans are never quoted).

    It's all complicated by the fact that js will try to figure out what you meant and make automatic conversions to different types. For instance, try this:

    var number = "3";
    alert(2 + number);

    In that instance, js assumes that you want to add two strings together, so it converts the first number to a string to produce:

    alert("2" + "3");

    with the result being the string "23"(not 5 as you may have intended).

  6. #6
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, this clears things up pretty well.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a nasty one to watch out for:

    anHtmlElment.style.left = 300;

    IE can handle that, but FF can't. FF demands that you specify the units of measurement(px, em, pt, etc.) when specifying the position of the left edge of the element, and FF demands that the value be a string. IE defaults to "px" if you don't specify the units and automatically converts the value to a string.

    Usually, if you calculate the position of the left edge of an html element, you will try to write:

    anHtmlElment.style.left = theResultOfSomeCalculation;

    Afterwards, you'll tear your hair out trying to figure out why that doesn't work in FF. In FF, you have to write:

    anHtmlElment.style.left = theResultOfSomeCalculation + "px"; (or some other unit of measurment)

    and because js converts the whole value to a string when you add a string to something, you end up assigning a string to the left property. Since the string specifies the units, that will work in FF.
    Edit:

    This applies if you have a DOCTYPE declaration on your page. If you don't, then both IE6 and FF1.0.7 will default to "px" units. You can test that with this code:
    Code:
    window.onload=function()
    {
    	var myDiv = document.getElementById("d1");
    	myDiv.style.left = 300;
    	alert(myDiv.style.left);
    };
    and running it without a DOCTYPE declaration in both IE6 and FF1.0.7, and then running it with this at the top of the file:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    Last edited by 7stud; Jan 13, 2007 at 01:40.

  8. #8
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So then would you do:

    if (navigator.appName==Microsoft Internet Explorer)
    {
    anHtmlElment.style.left = 300;
    }
    else
    {
    anHtmlElment.style.left = theResult + "px";
    }
    ???

    How do other browsers like Opera and Safari handle this as well?

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Generally, you would never use:
    Code:
    if (navigator.appName==Microsoft Internet Explorer)
    That's called browser sniffing, and it's major hallmark is to mark the programmer who writes it with a big red 'I' on their forehead, which stands for ignoramous.

    2)
    So then would you do:
    You would simply write:

    anHtmlElment.style.left = theResult + "cm"; (or whatever unit you want to use)

    IE6 only defaults to "px" if you don't specify the units.

    How do other browsers like Opera and Safari handle this as well?
    Specify the unit of measurement and then you don't have to worry about it.

  10. #10
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see...When you said that IE converts the whole thing to a string when you add a number plus a string, I thought you were saying that it wouldnt work b/c I was thinking that IE was looking for a number to calculate the "left". But I'm pretty sure I get what you were saying now.

    On a side note, I am new to this and will absolutely take your word for it, but I am curious as to why "browser sniffing" is bad. Is it b/c a good programmer should be able to find code that just works in all browsers without doing it?

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because browser sniffing doesn't really work. Every browser vendor tries to masquerade as another browser in order to be accepted by browser sniffing scripts when they believe their browser has the same level of support as the other browser.

    Do you know that IE calls itself Mozilla, which is its number one competitor? Use an IE browser and then alert(navigator.userAgent).

    Is it b/c a good programmer should be able to find code that just works in all browsers without doing it?
    All browsers behave differently, so a good programmer determines whether the properties and functions she wants to use are present, if not then she uses other functions and properties that will get the task done. You shouldn't care what a browser calls itself(they all lie anyway), you should only care whether the browser supports the functions you want to use. This is the way that is done:
    Code:
    if(attachEvent)  //if this function exists
    {
    	attachEvent("onclick", someFunction);  //call the function
    }
    else if(addEventListener) //else if this function exists
    {
    	addEventListener("click", someFunction, false); //call the function
    }
    Should some browser be excluded from running your script if it supports one of those functions, but isn't named Internet Explorer or Firefox or Opera or Safari?

    Suppose all your scripts browser sniff, and tomorrow someone introduces a browser named GeckFoxer that grabs 60&#37; of the market share, and it supports all the js that current browsers support, and therefore it can run any script currently in use. Guess what? None of your scripts will run on GeckFoxer since none of your scripts were written to sniff for it. However, since GeckFoxer doesn't want people to think its browser sucks because it can't run scripts that other browsers can, it will identify itself as Mozilla so that browser sniffing scripts will allow the js to execute in GeckFoxer.


    But I'm pretty sure I get what you were saying now.
    The general rule is when you do this:

    someElement.style.left = <something here>

    what's on the right side needs to be a string that specifies a size and the units of measurement, e.g.:

    someElement.style.left = "300px";

    If you do this,

    someElement.style.left = 300;

    what's on the right side will automatically get converted to a string(because js knows that what's on the left requires a string), but it still doesn't specify a unit of measurement. So how would a browser know how far to move the element's left edge? 300 inches? 300 miles? 300px? If you only specify 300, there is no way for the browser to know where you want to locate the element. IE6 takes matters into its own hand and assumes you meant "px". FF just gives you an error.
    Edit:

    Wrong. FF1.0.7 fails silently and will not have a value for style.left.


    So the easy solution is to always specify the units of measurement. But, sometime in the future, you will forget to add the "px", and you will be on the verge of smashing your screen with your keyboard in frustration when you can't figure out what is wrong.
    Last edited by 7stud; Jan 13, 2007 at 01:43.

  12. #12
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    Do you know that IE calls itself Mozilla, which is its number one competitor? Use an IE browser and then alert(navigator.userAgent).
    Wow, talk about just blatantly admitting that you suck.

    Yeah, I was just reading about using object detection instead. Anyways, thanks for all your help.


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
  •