Difference between revisions of "Defining Objects"

From rbachwiki
Jump to navigation Jump to search
(Created page with "<pre> var comptype = { brand: 'ibm', ram: '128 Gigs', hdrive: '1 Terabyte' } </pre> ===Loop through items== for(var item in comptype){ console.log(item + " - " + compty...")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Navigation==
''' object '''
<pre>
<pre>
var comptype = {
var mainNav = [{
brand: 'ibm',
            item: "Home",
ram: '128 Gigs',
            url: "../index.html"
hdrive: '1 Terabyte'
        },
        {
            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>
</pre>
===Loop through items==
''' Function That Creates the Navigation and Calls it '''
  for(var item in comptype){
<pre>
  console.log(item + " - " + comptype[item]);
  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 ==
<pre>
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());
</pre>
===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'''
<pre>
var john = {
    name: 'John',
    lastName: 'Smith',
    yearOfBirth: 1990,
    job: 'Teacher',
    isMarried: false,
    family: ['jane', 'mark'],
    calculateAge: function() {
        this.age = 2016 - this.yearOfBirth;
    }
};
 
</pre>
'''Creating a new Object for the john object'''
var harry = Object.create(john);
==[[#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