{"id":574,"date":"2013-03-18T17:09:50","date_gmt":"2013-03-18T06:09:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574"},"modified":"2021-01-08T13:42:40","modified_gmt":"2021-01-08T03:42:40","slug":"javascript-and-the-dom-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-the-dom-tutorial\/","title":{"rendered":"JavaScript and the DOM Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/javascript-php-html.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"JavaScript and the DOM Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/javascript-php-html.png\" title=\"JavaScript and the DOM Tutorial\"  \/><\/a><p class=\"wp-caption-text\">JavaScript and the DOM Tutorial<\/p><\/div>\n<p>JavaScript is a tremendous web client-side language to learn.   You may have heard of a server-side JavaScript, but this tutorial only deals with client-side work.   This tutorial builds a JavaScript layer on top of the <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP tutorial<\/a> made earlier, showing how the DOM can be used to change the look of your webpage dynamically, even if most of it is in an iFrame (but there are limits).<\/p>\n<p>PHP is a wonderful language to learn.   It is usually associated with being a web server-side language (as with this tutorial, where it is being shown on a local <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=532'>MAMP<\/a> web server) but can be a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=262'>command line tool<\/a> as well.   If you like PHP you may eventually like <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=482'>ASP.Net<\/a> and\/or Python, and vice versa.   It has sophisticated data structures, Object Oriented (the thinking that you can build classes with data and methods which define objects created as you run the program &#8230; eg. you might write a class for book and have data members for things like numPages and publisher, author, creationDate and have methods called things like getCreationDate, setCreationDate, getAuthor, setAuthor allowing the user to use these methods rather than changing the  data members themselves &#8230; heaven forbid that!) code concepts, and really combines well with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=293'>JavaScript<\/a> (as a client-side language).     <\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/javascript.html_GETME'>Download programming source code and rename to javascript.html<\/a><br \/><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/phpjavascripthtml.php_GETME'>Download source code and rename to phpjavascripthtml.php<\/a><\/p>\n<p><a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/php-javascript-html.png'>Tutorial<\/a> &#8230;<\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: alert(eval(512 \/ 380));<br \/>\nJavascript: alert(eval(512 * 380));<br \/>\nJavascript: alert(eval(512 &#8211; 380));<br \/>\nJavascript: alert(eval(512 + 380));<br \/>\nJavascript: alert(eval(512 % 380));<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/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='#d574' onclick='var dv=document.getElementById(\"d574\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d574' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript is a tremendous web client-side language to learn. You may have heard of a server-side JavaScript, but this tutorial only deals with client-side work. This tutorial builds a JavaScript layer on top of the PHP tutorial made earlier, showing &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-the-dom-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":[354,652,997,1319],"class_list":["post-574","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-dom","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/574"}],"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=574"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/574\/revisions"}],"predecessor-version":[{"id":51367,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/574\/revisions\/51367"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}