jshint gives the error:
Line 362: document.forms['upload_form'].submit();
['upload_form'] is better written in dot notation.
for this line
document.forms['upload_form'].submit();
What dot notation...are they talking about accessing the object memmber via the '.' operator?
Yes; what other dot notation is there?
As you continue to ask jshint-related questions, bear in mind that some of the checks it performs are preferential: it's more important to remain consistent, and you can configure it to better-conform to your own particular style.
Also, bear in mind that for forms with array-notation names (tag[] or whatever), you'd need to use array notation anyway--I'd rather see the use of a single means of accessing form properties.
This is an example of dot notation
document.upload_form.submit()
Here is some reference.
http://www.quirksmode.org/js/forms.html
In addition I guess its best explained that all everything in JavaScript is Object Based.
Consider the following
var myobject = {value1 : 1, value2: 2};
I can access value1 and value2 like this
myobject.value1;
myobject["value1"];
Related
I am using this script to make a style object of all the inherited, etc. styles.
var style = css($(this));
alert (style.width);
alert (style.text-align);
With the following, the first alert will work fine, but the second one doesn't... it's interpreting the - as a minus I assume. The debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?
Look at the comments. You will see that for CSS properties, the key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way:
obj.style-attr // would become
obj["styleAttr"]
Use key notation rather than dot
style["text-align"]
All arrays in JavaScript are objects and all objects are just associative arrays. This means you can refer to a place in an object just as you would refer to a key in an array.
arr[0]
or the object
obj["method"] == obj.method
A couple things to remember when accessing properties this way:
they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.
This means obj[method] would give you an undefined error while obj["method"] would not
You must use this notation if you are using characters that are not allowed in JavaScript variables.
This regex pretty much sums it up:
[a-zA-Z_$][0-9a-zA-Z_$]*
The answer to the original question is: place the property name in quotes and use array style indexing:
obj['property-with-hyphens'];
Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you must use the camel cased name like:
style.textAlign;
However this solution only works for CSS properties. For example,
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
CSS properties with a - are represented in camelCase in JavaScript objects. That would be:
alert( style.textAlign );
You could also use a bracket notation to use the string:
alert( style['text-align'] );
Property names may only contain characters, numbers, the well known $ sign and the _ (thanks to pimvdb).
Use brackets:
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
More information on objects: MDN
NOTE: If you are accessing the style object, CSSStyleDeclaration, you must use camelCase to access it from JavaScript. More information is here.
alert(style.textAlign)
or
alert(style["textAlign"]);
To directly answer the question: style['text-align'] is how you would reference a property with a hyphen in it. But style.textAlign (or style['textAlign']) is what should be used in this case.
Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.
To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.
To answer the question: Use square bracket notation: obj.prop is the same as obj["prop"] so you can access property names using strings and use characters that are forbidden in identifiers.
I think in the case of CSS styles they get changed to camelCase in JavaScript, so test-align becomes textAlign.
In the general case, where you want to access a property that contains non-standard characters, you use array-style: ['text-align']
The object property names are not one-to-one matches for the CSS names.
At first, I wondered why the solution didn't work on my end:
api['data-sitekey'] // Returns undefined
...later on I figured out that accessing data attributes was different:
It should be like this:
var api = document.getElementById("some-api");
api.dataset.sitekey
I am using this script to make a style object of all the inherited, etc. styles.
var style = css($(this));
alert (style.width);
alert (style.text-align);
With the following, the first alert will work fine, but the second one doesn't... it's interpreting the - as a minus I assume. The debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?
Look at the comments. You will see that for CSS properties, the key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way:
obj.style-attr // would become
obj["styleAttr"]
Use key notation rather than dot
style["text-align"]
All arrays in JavaScript are objects and all objects are just associative arrays. This means you can refer to a place in an object just as you would refer to a key in an array.
arr[0]
or the object
obj["method"] == obj.method
A couple things to remember when accessing properties this way:
they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.
This means obj[method] would give you an undefined error while obj["method"] would not
You must use this notation if you are using characters that are not allowed in JavaScript variables.
This regex pretty much sums it up:
[a-zA-Z_$][0-9a-zA-Z_$]*
The answer to the original question is: place the property name in quotes and use array style indexing:
obj['property-with-hyphens'];
Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you must use the camel cased name like:
style.textAlign;
However this solution only works for CSS properties. For example,
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
CSS properties with a - are represented in camelCase in JavaScript objects. That would be:
alert( style.textAlign );
You could also use a bracket notation to use the string:
alert( style['text-align'] );
Property names may only contain characters, numbers, the well known $ sign and the _ (thanks to pimvdb).
Use brackets:
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
More information on objects: MDN
NOTE: If you are accessing the style object, CSSStyleDeclaration, you must use camelCase to access it from JavaScript. More information is here.
alert(style.textAlign)
or
alert(style["textAlign"]);
To directly answer the question: style['text-align'] is how you would reference a property with a hyphen in it. But style.textAlign (or style['textAlign']) is what should be used in this case.
Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.
To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.
To answer the question: Use square bracket notation: obj.prop is the same as obj["prop"] so you can access property names using strings and use characters that are forbidden in identifiers.
I think in the case of CSS styles they get changed to camelCase in JavaScript, so test-align becomes textAlign.
In the general case, where you want to access a property that contains non-standard characters, you use array-style: ['text-align']
The object property names are not one-to-one matches for the CSS names.
At first, I wondered why the solution didn't work on my end:
api['data-sitekey'] // Returns undefined
...later on I figured out that accessing data attributes was different:
It should be like this:
var api = document.getElementById("some-api");
api.dataset.sitekey
As far as I know you can get map's value by key in two ways:
var myMap = {a: 1, b: 2}
var firstWay = myMap.a
var secondWay = myMap['a']
Which way is preferable? Is there a convection for this? Should I avoid first way and could be there any problems I may find in the future (e.g IE may not support it)? I understand that if I had some keys which require text escaping I won't be able to use .value on the map object, but what about simple cases?
My subjective point of view is that first way looks better.
The difference is that the dot notation requires the property name to be an identifierName. For example:
obj["a-b"]; // ok
obj.a-b; // fail! Parsed as `(obj.a) - b`
Moreover, before ECMAScript 5, the dot notation only allowed identifiers. That is, it excluded reservedWords. Then,
obj.class; // ok in ES5+
obj.class; // fail on old browsers
So in those cases you might prefer the bracket notation.
Otherwise it doesn't matter.
Technically the only difference is that you can use the [property] syntax even if you don't know the property name. E.g.:
property = 'a'
myMap[property] // results in 1
Otherwise just use the dot notation.
Also some people use a convention that you use the dot notation for your own data, but use brackets to access data retrieved from some external source.
When you have a multi-tiered object like a json object that say has 3 tiers
i = {'id':1{'name':'austin', 'lives':'college'{'name':'eckerd', 'major':'compsci'}}}
To reference the object is it better to reference it like so
for (x in i)
i[x]['lives']['name']
//or
i[x].lives.name
I think that gets my idea across. Pretty much use Associative arrays or the 'dot' method and why?
i[x].lives.name is equivalent to i[x]["lives"]["name"].
i[x][lives][name] means that you have variables called lives and name that you want to reference:
There's no real benefit to using one form over the other; imho it's clearest to use the dot notation unless you need the variable property names.
"Values can be retrieved from an object by wrapping a string expression in a [ ] suffix. If the string expression is a string literal, and if it is a legal JavaScript name and not a reserved word, then the . notation can be used instead. The . notation is preferred because it is more compact and reads better."
Crockford, D. (2008), JavaScript: The Good Parts. (pp. 21). Sebastopol, CA, U.S.A.: O'Reilly.
I'm reading the JSlint Options Documentation to understand each of the available options, and have come across one that I don't quite understand, and can't find any useful information regarding it elsewhere.
sub - Tolerate inefficient subscripting
true if subscript notation may be used for expressions better expressed
in dot notation.
Can anyone shed more light as to what this means?
Thanks
JavaScript object members can be accessed using dot or subscript (square bracket) notation:
o.foo
o['foo']
...are the same thing. Square bracket notation is necessary for accessing members whose names can't be used in dot notation:
o['hello!']
or for accessing members from a dynamic name:
var name= issomething? 'foo' : 'bar';
o[name]
But for simple o['foo'] you don't need it. Normally the o.foo form is easier to read so it's considered better practice to use that. Some programmers coming from other languages may prefer to use square brackets for objects being using ‘like a mapping’ rather than ‘like an object’, but it's all the same to JS.
(JSlint is claiming that square bracket form is also “less efficient”, but if so then the difference is minuscule and not really worth bothering about.)
See here. Looks like subscript notation is doing:
document.forms['myformname'];
instead of
document.forms.myformname;