Difference between revisions of "Defining Objects"

From rbachwiki
Jump to navigation Jump to search
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Navigation==
''' object '''
<pre>
var mainNav = [{
            item: "Home",
            url: "../index.html"
        },
        {
            item: "Product Videos",
            url: "../videos/index.php"
        },
        {
            item: "Photo Gallery",
            url: "../photogallery.html"
        },
        {
            item: "Installation Instructions",
            url: "../installation/index.html"
        },
        {
            item: "Catalog Download",
            url: "../catalog/index.html"
        },
        {
            item: "Tradeshows",
            url: "../tradeshow.html"
        }
    ];
</pre>
''' Function That Creates the Navigation and Calls it '''
<pre>
  function showMainNav(arr) {
        var output = "<ul>";
        var i;
        for (i = 0; i < arr.length; i++) {
            output += '<a href="' + arr[i].url + '">' + '<li>' + arr[i].item + '</li></a>';
        }
        if (elements.mainNavigation !== null) {
            elements.mainNavigation.innerHTML = output + '</ul>';
        } // end if
    } // end showMainNav
    showMainNav(mainNav);
</pre>
=== Using For In Loop ===
The for in loop does not always display the array in the order typed
'''HTML '''
<pre>
<h2>My List</h2>
<ul id="links">
</ul>
</pre>
<pre>
<script>
        var info = {
            "full_name": "Ray Villalobos",
            "title": "Staff Author",
            "links": {
                "blog": "http://iviewsource.com",
                "facebook": "http://facebook.com/iviewsource",
                "youtube": "http://www.youtube.com/planetoftheweb",
                "podcast": "http://feeds.feedburner.com/authoredcontent",
                "twitter": "http://twitter.com/planetoftheweb"
            }
        };
        var output = "";
        for (key in info.links) {
            // if the link has the key property
            if (info.links.hasOwnProperty(key)) {
                output += '<li>' + '<a href="' + info.links[key] +
                    '">' + key + '</a>' + '</li>';
            }
        }
        var update = document.getElementById('links');
        update.innerHTML = output;
    </script>
</pre>
== Object create ==
== Object create ==
<pre>
<pre>
Line 36: Line 118:
</pre>
</pre>
'''Creating a new Object for the john object'''
'''Creating a new Object for the john object'''
var harry = Object.create(john);
var harry = Object.create(john);
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

Latest revision as of 18:08, 11 April 2017

Navigation

object

var mainNav = [{
            item: "Home",
            url: "../index.html"
        },
        {
            item: "Product Videos",
            url: "../videos/index.php"
        },
        {
            item: "Photo Gallery",
            url: "../photogallery.html"
        },
        {
            item: "Installation Instructions",
            url: "../installation/index.html"
        },
        {
            item: "Catalog Download",
            url: "../catalog/index.html"
        },
        {
            item: "Tradeshows",
            url: "../tradeshow.html"
        }

    ];

Function That Creates the Navigation and Calls it

  function showMainNav(arr) {
        var output = "<ul>";
        var i;
        for (i = 0; i < arr.length; i++) {
            output += '<a href="' + arr[i].url + '">' + '<li>' + arr[i].item + '</li></a>';
        }

        if (elements.mainNavigation !== null) {
            elements.mainNavigation.innerHTML = output + '</ul>';
        } // end if
    } // end showMainNav

    showMainNav(mainNav);

Using For In Loop

The for in loop does not always display the array in the order typed HTML

 <h2>My List</h2>
 <ul id="links">
 </ul>
<script>
        var info = {
            "full_name": "Ray Villalobos",
            "title": "Staff Author",
            "links": {
                "blog": "http://iviewsource.com",
                "facebook": "http://facebook.com/iviewsource",
                "youtube": "http://www.youtube.com/planetoftheweb",
                "podcast": "http://feeds.feedburner.com/authoredcontent",
                "twitter": "http://twitter.com/planetoftheweb"
            }
        };

        var output = "";
        for (key in info.links) {
            // if the link has the key property
            if (info.links.hasOwnProperty(key)) {
                output += '<li>' + '<a href="' + info.links[key] +
                    '">' + key + '</a>' + '</li>';
            }
        }
        var update = document.getElementById('links');
        update.innerHTML = output;
    </script>

Object create

var john = {
    name: 'John',
    lastName: 'Smith',
    yearOfBirth: 1990,
    job: 'Teacher',
    isMarried: false,
    family: ['jane', 'mark'],
    calculateAge: function() {
        return 2016 - this.yearOfBirth;
    }
};
console.log("--- " + john.calculateAge());

Loop through items

for(var item in john ){
console.log(item + " - " + john [item]);


Create an Object with a calculated value within the object

this will create the john.age with the calculated value

var john = {
    name: 'John',
    lastName: 'Smith',
    yearOfBirth: 1990,
    job: 'Teacher',
    isMarried: false,
    family: ['jane', 'mark'],
    calculateAge: function() {
        this.age = 2016 - this.yearOfBirth;
    }
};

Creating a new Object for the john object

var harry = Object.create(john);

Back To Top- Home - Category