{"id":10204,"date":"2014-10-15T05:05:48","date_gmt":"2014-10-14T18:05:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10204"},"modified":"2014-10-15T05:05:48","modified_gmt":"2014-10-14T18:05:48","slug":"javascript-object-literal-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-literal-primer-tutorial\/","title":{"rendered":"Javascript Object Literal Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/objectLiteral.html\"><img decoding=\"async\" id=\"olhjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Object Literal Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/objectLiteral.jpg\" title=\"Javascript Object Literal Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Javascript Object Literal Primer Tutorial<\/p><\/div>\n<p>The HTML5 specification allows for the display of 2D-graphics via <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by an SVG viewer.   SVG stands for Scalable Vector Graphics.   We first talked about this in terms of PHP in <a target=_blank href='#pjspt' title='PHP\/Javascript SVG Primer Tutorial'>PHP\/Javascript SVG Primer Tutorial<\/a> as shown below, but today we cover a bit of this same content, but only involve Javascript, and write the Javascript in an <i>&#8220;Object Literal&#8221;<\/i> style of coding.<\/p>\n<p>The <i>&#8220;Object Literal&#8221;<\/i> style of Javascript coding is a bit similar to CSS in that it is like a list of property and value pairs, separated by colon.  In that way the colon in Object Literal format is like the equal sign in Functional Javascript.<\/p>\n<p>For today&#8217;s tutorial we follow the advice at this wonderful <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>tutorial<\/a> and use ideas from pages 285 to 288 of <i>Javascript and Ajax<\/i> by Tom Negrino and Dori Smith.   Hope you find it very useful, and easy.<\/p>\n<p>Today we have HTML and Javascript programmable source code you could call <a target=_blank title='objectLiteral.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/objectLiteral.html_GETME'>objectLiteral.html<\/a> and here is its <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/objectLiteral.html'>live run<\/a>.<\/p>\n<hr \/>\n<p id='pjspt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8614' title='PHP\/Javascript SVG Primer Tutorial'>PHP\/Javascript SVG 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\/HTMLCSS\/SVG\/\"><img decoding=\"async\" id=\"hjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/Javascript SVG Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.png\" title=\"PHP\/Javascript SVG Primer Tutorial\"  onmouseover=\" document.getElementById('hjspt').src = document.getElementById('hjspt').src.replace('png','PNG').replace('jpg','png').replace('PNG','jpg');     \" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG Primer Tutorial<\/p><\/div>\n<p>The HTML5 specification allows for the display of 2D-graphics via <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by an SVG viewer.   SVG stands for Scalable Vector Graphics.<\/p>\n<p>We&#8217;ve talked about the HTML canvas element as another means to come to this end, but the SVG methods are more straightforward in their creation.<\/p>\n<p>For today&#8217;s tutorial we follow the advice at this wonderful <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>tutorial<\/a> and wrap it in PHP, so that you can specify your own parameters.   Hope you find it very useful, and easy.<\/p>\n<p>This demonstrates to you that if you have some great static HTML you can keep that great static content and present a dynamic version the user can play around with, and learn from, by adding that PHP server-side content.   For today&#8217;s PHP interface we got the HTML to use an HTML form of the relevant shape&#8217;s characteristics and <i>post<\/i> this data back to the same PHP webpage, analyzing the $_POST[] data to fill in the static HTML parameter values with user-defined parameter alternatives.<\/p>\n<p>Today we have PHP and Javascript programmable source code you could call <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php_GETME'>SVG_Primer.php<\/a> and here is its <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php'>live run<\/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='#8614' onclick='var dv=document.getElementById(\"d8614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8614' 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='#10204' onclick='var dv=document.getElementById(\"d10204\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10204' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The HTML5 specification allows for the display of 2D-graphics via SVG HTML tags which use graphical applications in XML and the XML is then rendered by an SVG viewer. SVG stands for Scalable Vector Graphics. We first talked about this &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-literal-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,37],"tags":[576,578,652,850,997,1226,1319],"class_list":["post-10204","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-html","tag-html5","tag-javascript","tag-object-literal","tag-programming","tag-svg","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10204"}],"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=10204"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10204\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}