{"id":6285,"date":"2014-02-09T05:03:07","date_gmt":"2014-02-08T18:03:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6285"},"modified":"2014-02-09T05:03:07","modified_gmt":"2014-02-08T18:03:07","slug":"javascript-object-oriented-approach-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-approach-primer-tutorial\/","title":{"rendered":"Javascript Object Oriented Approach Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript Object Oriented Approach Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/JavascriptArrayOfObjectDataMembers.jpg\" title=\"Javascript Object Oriented Approach Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Javascript Object Oriented Approach Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s tutorial builds on yesterday&#8217;s <a target=_blank title='Javascript Array of Structures Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6276'>Javascript Array of Structures Primer Tutorial<\/a> (as shown below) to start to explore an Object Oriented design approach for data objects in Javascript and shows the use of an array of these data object data members (not the objects themselves).   The subject matter of the resultant program is a Book Catalogue.  The Javascript handles the storage of this Book information in keeping with your web browser session as shown with the originally written <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.html_GETME\" title=\"javascript_object_oriented.html\">javascript_object_oriented.html<\/a> where the salient Javascript method of interest is Array <a target=_blank title='Javascript Array push method' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a>.   As you might imagine, a book catalogue can get big, and you may get <strike>sidetracted<\/strike> sidetracked and you may want to resume where you left off.   In order to do this, continuing on with just HTML\/Javascript you could use <a target=_blank title='Cookies' href='http:\/\/en.wikipedia.org\/wiki\/HTTP_cookie'>Cookies<\/a> but for our tutorial today we are going to use PHP called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.php-GETME\" title=\"javascript_object_oriented.php\">javascript_object_oriented.php<\/a>.  So how we got from the HTML\/Javascript to a supervisory PHP\/HTML\/Javascript is shown <a target=_blank title='javascript_object_oriented.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.php-GETME\">here<\/a>.<\/p>\n<p>As you can see Javascript is a very flexible language able to handle a variety of coding practices and forms and can easily be used to maintain an <a target=_blank title='Object Oriented programming' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>Object Oriented<\/a> coding approach, (which we head towards today), as well.   We need to develop this approach more, as you can imagine, to make it practically more useful.  Programmers may use an OOP approach all the time, never, sometimes, or just for big projects.   It&#8217;s all very subjective really &#8230; chortle, chortle.  JSON usage with Javascript OOP is an interesting <a target=_blank title='JSON and Javascript objects' href='https:\/\/www.google.com.au\/search?q=%22javascript%22+%22json%22+%22populating+objects%22&#038;ie=utf-8&#038;oe=utf-8&#038;rls=org.mozilla:en-US:official&#038;client=firefox-a&#038;gfe_rd=ctrl&#038;ei=2mX1UvrHE8SN8Qen7oHgAg&#038;gws_rd=cr#q=%22javascript%22+%22json%22+%22populating+objects+using+json%22&#038;rls=org.mozilla:en-US:official'>topic<\/a> too.<\/p>\n<p>Found this <a target=_blank title='useful tutorial' href='http:\/\/stackoverflow.com\/questions\/387707\/whats-the-best-way-to-define-a-class-in-javascript'>link<\/a> very helpful &#8230; thanks.<\/p>\n<p>Now let&#8217;s see how a functional approach might change to end up as an approach towards OOP <a target=_blank title='javascript_object_oriented.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/oop.php-GETME\">here<\/a> (for PHP\/HTML\/Javascript) and <a target=_blank title='javascript_object_oriented.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/oop.html-GETME\">here<\/a> (for (HTML\/Javascript).<\/p>\n<p>Please enjoy our live run <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.php\" title=\"live run\">tutorial<\/a> (a reduced-functionality live run of just HTML\/Javascript is available <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/javascript_object_oriented.html\" title=\"HTML\/Javascript live run\">here<\/a>).<\/p>\n<p>There was a cute bit of functionality to come out of this tutorial building on yesterday&#8217;s tutorial, in that to resurrect the data, I didn&#8217;t have to type in all the Book information again, but could read yesterday&#8217;s saved data to do this &#8230; know this is the advertised functionality &#8230; but bear with me while I stop for one of those moments that inspires me to do what I do &#8230; really just like to see a computer do things &#8230; motivated chortle, motivated chortle.<\/p>\n<hr \/>\n<p id='jaospt'>Previous <a target=_blank title='Javascript Array of Structures Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6276'>Javascript Array of Structures Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript Array of Structures Primer Tutorial\" id='aacpti' src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/JavascriptArrayOfStructures.jpg\" title=\"Javascript Array of Structures Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Javascript Array of Structures Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s tutorial explores data structures in Javascript and shows the use of an array of these data structures.   The subject matter of the resultant program is a Book Catalogue.  The Javascript handles the storage of this Book information in keeping with your web browser session as shown with the originally written <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.html_GETME\" title=\"book_structure.html\">book_structure.html<\/a> where the salient Javascript method of interest is Array <a target=_blank title='Javascript Array push method' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a>.   As you might imagine, a book catalogue can get big, and you may get <strike>sidetracted<\/strike> sidetracked and you may want to resume where you left off.   In order to do this, continuing on with just HTML\/Javascript you could use <a target=_blank title='Cookies' href='http:\/\/en.wikipedia.org\/wiki\/HTTP_cookie'>Cookies<\/a> but for our tutorial today we are going to use PHP called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.php-GETME\" title=\"book_structure.php\">book_structure.php<\/a>.  So how we got from the HTML\/Javascript to a supervisory PHP\/HTML\/Javascript is shown <a target=_blank title='book_structure.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.php-GETME\">here<\/a>.<\/p>\n<p>As you can see Javascript is a very flexible language able to handle a variety of coding practices and forms and can easily be used to maintain an <a target=_blank title='Object Oriented programming' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>Object Oriented<\/a> coding approach, as well.<\/p>\n<p>Please enjoy our live run <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.php\" title=\"live run\">tutorial<\/a> (a reduced-functionality live run of just HTML\/Javascript is available <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/ArrayOfStructures\/book_structure.html\" title=\"HTML\/Javascript live run\">here<\/a>).<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d6276' onclick='var dv=document.getElementById(\"d6276\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Cookies\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6276' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d6285' onclick='var dv=document.getElementById(\"d6285\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=50\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6285' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s tutorial builds on yesterday&#8217;s Javascript Array of Structures Primer Tutorial (as shown below) to start to explore an Object Oriented design approach for data objects in Javascript and shows the use of an array of these data object data &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-approach-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,28,37],"tags":[576,652,875,932,997,1319],"class_list":["post-6285","post","type-post","status-publish","format-standard","hentry","category-elearning","category-oop","category-tutorials","tag-html","tag-javascript","tag-oop","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6285"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=6285"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6285\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=6285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=6285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=6285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}