{"id":4384,"date":"2016-03-01T13:02:16","date_gmt":"2016-03-01T13:02:16","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=4384"},"modified":"2017-10-09T13:53:16","modified_gmt":"2017-10-09T13:53:16","slug":"understanding-javascript-objects-online-javascript-help","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/understanding-javascript-objects-online-javascript-help","title":{"rendered":"Understanding JavaScript objects &#8211; Online JavaScript help"},"content":{"rendered":"<p>Okay, so we learnt that JavaScript uses a hierarchical dot notation to refer to objects. In addition to the <strong>name<\/strong> property, objects can have other properties.<br \/>For example, an image located in a document is an object and has the following properties:<\/p>\n<ul class=\"withbullets\">\n<li><strong>border:<\/strong> value of &lt;IMG&gt; BORDER attribute<\/li>\n<li><strong>height:<\/strong> value of HEIGHT attribute<\/li>\n<li><strong>width:<\/strong> value of WIDTH attribute<\/li>\n<li><strong>src:<\/strong> the URL of the image<\/li>\n<li><strong>hspace:<\/strong> value of HSPACE attribute<\/li>\n<li><strong>vspace:<\/strong> value of VSPACE attribute<\/li>\n<li><strong>complete:<\/strong> determines whether the image has been completely loaded<\/li>\n<li><strong>lowsrc:<\/strong> the URL of lower quality image specified through LOWSRC attribute<\/li>\n<li><strong>name:<\/strong> the value of NAME attribute (Just to clarify&#8230; the <em>name<\/em> of an image refers to the HTML name attribute and NOT the file name. By the by, you can use the same value in the <strong>NAME<\/strong> attribute value and file name.)<\/li>\n<\/ul>\n<p>To refer to the source of an image named <strong>logo<\/strong> we use:<\/p>\n<pre class=\"small-text\"><strong>document.logo.src<\/strong><\/pre>\n<p>Similarly, its width is refered as:<\/p>\n<pre class=\"small-text\"><strong>document.logo.width<\/strong><\/pre>\n<p>Different HTML elements have different properties. For example, a text field form object has the following properties:<\/p>\n<ul class=\"withbullets\">\n<li><strong>name:<\/strong> specifies the text field name<\/li>\n<li><strong>value:<\/strong> specifies its value (the text contained in the field)<\/li>\n<li><strong>defaultValue:<\/strong> determines the default text value<\/li>\n<li><strong>type:<\/strong> identifies its type<\/li>\n<\/ul>\n<p>To set the value of a text field, we use the <strong>=<\/strong> (equal too) operator as:<\/p>\n<pre class=\"small-text\">\r\ndocument.contactform.add.value = \"Type your address here\";\r\n<\/pre>\n<p>This is a JavaScript statement that instructs the browser to displays the text <strong>Type your address here<\/strong> in the text field <strong>add<\/strong>.<\/p>\n<div class=\"pagenav\">\n<ul>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-guide-object-oriented-programming-in-javascript\" title=\"Online javascript guide to object oriented programming in javascript\">&lt; Back<\/a><\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-tutorial\" title=\"JavaScript tutorial\">1<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/understanding-javascript-objects-online-javascript-help\" title=\"Online javascript help - Understanding javascript objects\" class=\"thispage\">6<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-event-handlers-part-1\" title=\"Javascript onmouseover and javascript onmouseout event handlers\">10<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-if-statement\" title=\"Javascript IF statement\">20<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/changing-images-on-mouseover-using-javascript\" title=\"Changing images on mouseover using Javascript\">30<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/online-javascript-guide-methods\" title=\"Online guide to javascript methods\">Next &gt;<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Okay, so we learnt that JavaScript uses a hierarchical dot notation to refer to objects. In addition to the name property, objects can have other properties.For example, an image located in a document is an object and has the following properties: border: value of &lt;IMG&gt; BORDER attribute height: value of HEIGHT attribute width: value of [&hellip;]","protected":false},"author":1,"featured_media":15668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4384"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/15668"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}