<!doctypehtml><html lang=en><meta charset=utf-8><meta content=width=device-width name=viewport><meta content="follow, all"name=robots><title>
   JavaScript Tutorial
  </title><meta content="JavaScript Tutorial"name=description><meta content="online javascript tutorial, javascript tutorial for novices, javascript tutorial, javascript history"name=keywords><link href=http://www.webdevelopersnotes.com/xmlrpc.php rel=pingback><link rel="Shortcut Icon"href=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/favicon.ico type=image/x-icon><link href=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/touch-icon-iphone.png rel=apple-touch-icon><link href=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/touch-icon-ipad.png rel=apple-touch-icon><link href=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/touch-icon-iphone-retina.png rel=apple-touch-icon><link href=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/touch-icon-ipad-retina.png rel=apple-touch-icon><style media=screen><!-- @import url( http://www.webdevelopersnotes.com/wp-content/themes/wdn/style.css ); --></style><link href=https://fonts.googleapis.com/css?family=Open+Sans:300,400 rel=stylesheet><meta content=https://www.webdevelopersnotes.com/wp-content/uploads/javascript-tutorial.png property=og:image><script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><script>(adsbygoogle = window.adsbygoogle || []).push({
   google_ad_client: "ca-pub-1043128618639037",
   enable_page_level_ads: true
 });</script><body><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-138633-3', 'auto');
  ga('send', 'pageview');</script><header><div class="centerd relative"><span class=social-icons> <a class=facebook href=https://www.facebook.com/webdevelopersnotes target=_blank> <img alt=facebook-icon src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/facebook-icon.svg> </a> <a class=twitter href=https://twitter.com/webdevnotes target=_blank> <img alt=twitter-icon src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/twitter-icon.svg> </a> <a class=pin href=https://www.pinterest.com/webdevnotes target=_blank> <img alt=facebook-icon src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/pinterest-icon.svg> </a>  </span><div class=head-left><a href=https://www.webdevelopersnotes.com/> <img alt="WebDevelopersNotes logo"src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/webdevelopersnotes-logo.png title=WebDevelopersNotes> </a></div><div class=head-right><div class=search-box><form action=https://www.webdevelopersnotes.com/><input name=s placeholder=SEARCH.. required><input class=search-submit type=submit value=SUBMIT><div class=clr></div></form></div></div><div class=clr></div></div><nav><div class=centerd><span class=nav-button> Menu <img title="Show Menu"alt=menu-icon src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/menu-icon.svg> </span><ul class=nav><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-127"id=menu-item-127><a href=https://www.webdevelopersnotes.com/hub/basics> Basics </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4496"id=menu-item-4496><a href=https://www.webdevelopersnotes.com/hub/answers> Answers </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5068"id=menu-item-5068><a href=https://www.webdevelopersnotes.com/hub/how-do-i> How Do I </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5069"id=menu-item-5069><a href=https://www.webdevelopersnotes.com/hub/did-you-know> Did You Know? </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27070"id=menu-item-27070><a href=https://www.webdevelopersnotes.com/hub/facts> Facts </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5070"id=menu-item-5070><a href=https://www.webdevelopersnotes.com/hub/quick-facts> Quick Facts </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5071"id=menu-item-5071><a href=https://www.webdevelopersnotes.com/hub/tips> Tips </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5072"id=menu-item-5072><a href=https://www.webdevelopersnotes.com/hub/simple-tips> Simple Tips </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5073"id=menu-item-5073><a href=https://www.webdevelopersnotes.com/hub/quiz> Quiz </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5074"id=menu-item-5074><a href=https://www.webdevelopersnotes.com/hub/email> Email </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5086"id=menu-item-5086><a href=https://www.webdevelopersnotes.com/hub/hotmail> Hotmail </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5092"id=menu-item-5092><a href=https://www.webdevelopersnotes.com/hub/yahoo> Yahoo </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5084"id=menu-item-5084><a href=https://www.webdevelopersnotes.com/hub/aol> AOL </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5085"id=menu-item-5085><a href=https://www.webdevelopersnotes.com/hub/gmail> Gmail </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5089"id=menu-item-5089><a href=https://www.webdevelopersnotes.com/hub/outlook-com> Outlook.com </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5087"id=menu-item-5087><a href=https://www.webdevelopersnotes.com/hub/outlook> Outlook </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5088"id=menu-item-5088><a href=https://www.webdevelopersnotes.com/hub/outlook-express> Outlook Express </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5090"id=menu-item-5090><a href=https://www.webdevelopersnotes.com/hub/windows-live-mail> Windows Live Mail </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5091"id=menu-item-5091><a href=https://www.webdevelopersnotes.com/hub/windows-mail> Windows Mail </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5075"id=menu-item-5075><a href=https://www.webdevelopersnotes.com/hub/web-design> Web Design </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5077"id=menu-item-5077><a href=https://www.webdevelopersnotes.com/hub/color-combinations> Color combinations </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5076"id=menu-item-5076><a href=https://www.webdevelopersnotes.com/hub/web-browsers> Web Browsers </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5078"id=menu-item-5078><a href=https://www.webdevelopersnotes.com/hub/web-development> Development </a> <ul class=sub-menu><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5079"id=menu-item-5079><a href=https://www.webdevelopersnotes.com/hub/html> HTML </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5080"id=menu-item-5080><a href=https://www.webdevelopersnotes.com/hub/javascript> JavaScript </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5081"id=menu-item-5081><a href=https://www.webdevelopersnotes.com/hub/mysql> MySQL </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5082"id=menu-item-5082><a href=https://www.webdevelopersnotes.com/hub/hosting> Hosting </a></ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5083"id=menu-item-5083><a href=https://www.webdevelopersnotes.com/hub/events> Events </a><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5093"id=menu-item-5093><a href=https://www.webdevelopersnotes.com/hub/resources> Resources </a></ul></div></nav></header><div id=container><div class=centerd><div id=leftcolumn><div id=col2><p class=bcn><a href=https://www.webdevelopersnotes.com/> <img alt=home-icon src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/home-icon.svg> </a>  <span typeof=v:Breadcrumb> <a title="Go to WebDevelopersNotes."class=home href=https://www.webdevelopersnotes.com property=v:title rel=v:url> Home </a> </span> / <span typeof=v:Breadcrumb> <a class="taxonomy category"title="Go to the JavaScript category archives."href=https://www.webdevelopersnotes.com/hub/javascript property=v:title rel=v:url> JavaScript </a> </span> / <span typeof=v:Breadcrumb> <span property=v:title> JavaScript Tutorial </span> </span><h1>JavaScript Tutorial</h1><img alt="JavaScript Tutorial"class="attachment-full size-full wp-post-image"height=290 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/javascript-tutorial.png width=590><div id=post-content><h2>Online JavaScript Tutorial</h2><p>This online Javascript tutorial been very well received judging by the number of emails I get. JavaScript is a vast language and it is not possible to teach <em> everything </em> in these 35 tutorial sessions. However, we will cover most of the basics – statements commands and functions.<p>By the way, this tutorial was written for someone who has no programming experience. And I assure you that as long as you have access to a computer (and a bit of dedication), you would be able to start programming in JavaScript.<div class=clr></div><div class=bottom-ads><h4>Sponsored Links</h4><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><ins class=adsbygoogle data-ad-client=ca-pub-1043128618639037 data-ad-slot=5670477364 style=display:inline-block;width:336px;height:280px> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div class=clr></div><p>I had put the tutorial offline for a while to correct errors. These have now been removed. However, if you find some, please do let me know. Enjoy!<h2>JavaScript History</h2><p>Web pages made using only HTML are somewhat static with no interactivity and negligible user involvement. Interactive pages can be described as those that understand and process user behaviour (actions) like mouse movements, mouse button clicks, HTML button clicks etc.<p>HTML tags are just instructions on document layout and structure; the display of the document in the window is dependent on the browser. Interactive pages cannot be built with only HTML, we need a programming language. Further, since the response time to user actions should be quick, the programming language has to be embedded in the browser itself. (Programs residing on servers can not bring about interactivity due to the time taken for sending the user input and receiving the response.)<p>Keeping these things in mind, the people at Netscape came out with a client-side (read browser) language that was integrated with version 2 of Netscape Navigator. They called this language <strong> JavaScript </strong> . (Actually, JavaScript was initially christened <em> LiveScript </em> . Seeing the popularity gained by Sun Systems’ Java, the bigwigs at Netscape changed its name… a clever marketing ploy. Eh?)<p>Microsoft’s implementation of JavaScript is called <strong> JScript </strong> and was first introduced with version 3 of Internet Explorer.<p>JavaScript is thus, a client-side scripting language. There is also a server-side version that is used in Active Server Pages, a technology promoted by Microsoft. This tutorial describes only client-side JavaScript.<p>JavaScript enables browsers to take decisions and process information. This is the key to interactivity.<h2>JavaScript now</h2><p>At the time of writing, JavaScript is in version 1.2 and is soon to be standardized by the International Standards Organization.<h2>Why do you need JavaScript?</h2><p>Here are a few things you can do with JavaScript:<ul class=withbullets><li>Validate forms at the client-side saving both the precious server resources and time.<li>Create mouseover effects, change background color of a document with a click of a button… interactivity!<li>Randomly display content without the involvement of server programs.<li>Move HTML elements around pages.<li>Change page contents dynamically.<li>Load content in new browser windows and frames.<li>Make online games.</ul><h2>Nature of JavaScript</h2><p>JavaScript is based on <strong> O </strong> bject <strong> O </strong> riented <strong> P </strong> rogramming concept. Its syntax is quite similar to C, C++ and Java. However, it is much easier to learn and implement.<h2>Other Client-side languages like Javascript</h2><p><strong> VBScript: </strong> Implemented only under Internet Explorer, this client-side language is similar to BASIC. It is commonly used in ASP technology. <br> <strong> PerlScript: </strong> Similar to the Perl Language. Not very well supported by browsers.<h2>What is covered in this Javascript tutorial?</h2><p>Since this Javascript tutorial was written keeping in mind a novice, we start with the very basics, gently touching JavaScript methods and event handlers and then moving on to variables, loops, functions etc. In the following sessions on this tutorial, you will learn how to detect browsers, print current date and time on a web page, change images on mouse-over, display statements in the browser Status Bar and several other nifty things. Once you get a grasp of these sessions, you can build over what you have learnt through practice and consulting a JavaScript reference.<div class=pagenav><ul><li><a title="JavaScript tutorial"class=thispage href=//www.webdevelopersnotes.com/javascript-tutorial> 1 </a><li>…<li><a title="Javascript onmouseover and javascript onmouseout event handlers"href=//www.webdevelopersnotes.com/javascript-event-handlers-part-1> 10 </a><li>…<li><a title="Javascript IF statement"href=//www.webdevelopersnotes.com/javascript-if-statement> 20 </a><li>…<li><a title="Changing images on mouseover using Javascript"href=//www.webdevelopersnotes.com/changing-images-on-mouseover-using-javascript> 30 </a><li>…<li><a title="Online JavaScript lessons for beginners - Embedding javascript in HTML"href=//www.webdevelopersnotes.com/embedding-javascript-in-html-online-javascript-lessons-for-beginners> Next > </a></ul></div></div><div class=bottom-ads><h4>Sponsored Links</h4><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><ins class=adsbygoogle data-ad-client=ca-pub-1043128618639037 data-ad-slot=7230412565 style=display:inline-block;width:336px;height:280px> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div class=related-posts><h4>Recent Posts</h4><div class=related-box><a title="JavaScript Programming Tutorial – Last Words"href=https://www.webdevelopersnotes.com/javascript-programming-tutorial-last-words> <img alt="JavaScript Programming Tutorial - Last Words"class="attachment-thumbnail size-thumbnail wp-post-image"height=200 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/javascript-programming-tutorial-last-words-200x200.png width=200> </a><h5><a href=https://www.webdevelopersnotes.com/javascript-programming-tutorial-last-words> JavaScript Programming Tutorial – Last Words </a></h5><div class=clr></div></div><div class=related-box><a title="Random Image Display Using JavaScript"href=https://www.webdevelopersnotes.com/random-image-display-using-javascript-2> <img alt="Random Image Display Using JavaScript"class="attachment-thumbnail size-thumbnail wp-post-image"height=200 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/random-image-display-using-javascript-2-200x200.png width=200> </a><h5><a href=https://www.webdevelopersnotes.com/random-image-display-using-javascript-2> Random Image Display Using JavaScript </a></h5><div class=clr></div></div><div class=related-box><a title="Random Text Display Using JavaScript"href=https://www.webdevelopersnotes.com/random-text-display-using-javascript> <img alt="Random Text Display Using JavaScript"class="attachment-thumbnail size-thumbnail wp-post-image"height=200 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/random-text-display-using-javascript-200x200.png width=200> </a><h5><a href=https://www.webdevelopersnotes.com/random-text-display-using-javascript> Random Text Display Using JavaScript </a></h5><div class=clr></div></div><div class=related-box><a title="JavaScript Arrays – creating and storing values"href=https://www.webdevelopersnotes.com/javascript-arrays-creating-and-storing-values> <img alt="JavaScript Arrays - creating and storing values"class="attachment-thumbnail size-thumbnail wp-post-image"height=200 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/javascript-arrays-creating-and-storing-values-200x200.png width=200> </a><h5><a href=https://www.webdevelopersnotes.com/javascript-arrays-creating-and-storing-values> JavaScript Arrays – creating and storing values </a></h5><div class=clr></div></div><div class=clr></div></div><div class=clr></div><div id=commenting><h5>Your comments</h5><span class=ask-commented> <img alt="Star icon"src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/images/star.svg width=16> <strong> IMPORTANT </strong> Have a question / problem? <a href=https://docs.google.com/forms/d/1hvZ-OEjdJgCzliJ0_DB21QTf1ozdRE1yOWp2HoC55qc/viewform target=_blank> Click here </a> to ask an expert. </span><form action=https://www.webdevelopersnotes.com/wp-comments-post.php method=post><textarea placeholder="Your Comment here.."id=speech name=comment required></textarea><input placeholder="Name (Required)"id=cname name=author required><input placeholder="Email (Required)"id=cemail name=email required type=email><input class=comment-submit name=submit tabindex=5 type=submit value=Submit><input name=comment_post_ID type=hidden value=4369><div class=clr></div><p style="display: none;"><input id=akismet_comment_nonce name=akismet_comment_nonce type=hidden value=315aac1c4a><p style="display: none !important;"><label>Δ <textarea cols=45 maxlength=100 name=ak_hp_textarea rows=8></textarea></label> <input id=ak_js name=ak_js type=hidden value=186> <script>document.getElementById( "ak_js" ).setAttribute( "value", ( new Date() ).getTime() );</script></form><div id=commented></div></div></div><div id=col1><div class=left-box><a title="Take a QUIZ – Full-form of chat abbreviations"href=https://www.webdevelopersnotes.com/quiz-full-form-of-chat-abbreviations> <img class="attachment-thumbnail size-thumbnail wp-post-image"alt height=200 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/chat-abbreviations-full-form-quiz-200x200.png width=200> </a></div><div class=left-box><a title="JOKE – Sometimes i just need a break"href=https://www.webdevelopersnotes.com/joke-sometimes-i-just-need-a-break> <img alt="Sometimes i just need a break"class="attachment-full size-full wp-post-image"height=290 loading=lazy src=https://www.webdevelopersnotes.com/wp-content/uploads/sometimes-i-just-need-a-break.png width=590> </a></div><div style="margin-top: 10px;"class=left-box><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><ins class=adsbygoogle data-ad-client=ca-pub-1043128618639037 data-ad-slot=1917213125 style=display:inline-block;width:180px;height:90px> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div><div class=clr></div></div><div id=rightcolumn><div class=right-box><div class=right-box-in><h3>Popular</h3><ul><li><a href=https://www.webdevelopersnotes.com/origin-of-names-of-popular-fonts> Origin of names of popular fonts </a><li><a href=https://www.webdevelopersnotes.com/what-was-the-worlds-first-web-site> What was the world’s first web site? </a><li><a href=https://www.webdevelopersnotes.com/20-awesome-country-domain-names> 20 awesome country domain names </a><li><a href=https://www.webdevelopersnotes.com/html-is-not-a-programming-language> HTML is not a programming language </a><li><a href=https://www.webdevelopersnotes.com/what-is-a-blog> What is a Blog? </a></ul></div></div><div class=right-box><div class=right-box-in><h3>Sponsored Links</h3><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><ins class=adsbygoogle data-ad-client=ca-pub-1043128618639037 data-ad-format=auto data-ad-slot=1860033364 style=display:block> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div><div class=right-box><div class=right-box-in><h3><a href=https://www.webdevelopersnotes.com/events-on-31-october> Today's Events [31 Oct] </a></h3><ul><li><a href=https://www.webdevelopersnotes.com/eleuthere-irenee-du-pont-death-anniversary> Died: Éleuthère Irénée du Pont [1834] </a><li><a href=https://www.webdevelopersnotes.com/joseph-swan-birthday> Born: Joseph Swan [1828] </a></ul></div></div><div class=right-box><div class=right-box-in><h3>Tips</h3><p><a href=https://www.webdevelopersnotes.com/view-deleted-web-page> How do I view a deleted web page? </a> <br> Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [ <a title="Click to Read more"class=more-tip href=https://www.webdevelopersnotes.com/view-deleted-web-page> more... </a> ]</div></div><div class=right-box><div class=right-box-in><h3>Fact</h3><p>In 1999, Time magazine named Jeff Bezos, the founder of Amazon.com, the Person of the Year. Founded in 1994, the company made profit for the first time in the last quarter of 2001. This means Bezos got the honour when his company was still making a loss! [ <a class=fact-source href=https://www.webdevelopersnotes.com/jeff-bezos-time-magazine-1999-person-of-the-year> more... </a> ]<div class=clr></div></div></div><div class=clr></div></div><div class=clr></div></div></div><footer><p><a title="Site Map"href=https://www.webdevelopersnotes.com/site-map rel=nofollow> Site Map </a> | <a title="Privacy Policy"href=https://www.webdevelopersnotes.com/privacy-policy rel=nofollow> Privacy Policy </a> | <a href=https://www.webdevelopersnotes.com/terms rel=nofollow title=Terms> Terms </a> <br> <span class=nomobile> No part of this site can be duplicated in any form without <br> written permission from the Webmaster <br> </span> ©2021 www.webdevelopersnotes.com. <span class=nomobile> All Rights Reserved. </span></footer><script>// Responsive Menu drop download on click
   $('span.nav-button').click(function () {
      $('ul.nav').slideToggle();
   })
   $(window).resize(function () {
      if ( $(window).width() > 600) {
$('ul.nav').removeAttr('style');
      }
   })</script><script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script><script src=http://www.webdevelopersnotes.com/wp-content/themes/wdn/js/wdn-gdpr-popup.js></script><script>$(function () {
                $('#wdn-gdpr-box').firstVisitPopup({
                    cookieName : 'homepage',
                    showAgainSelector: '#show-message'
                });
            });</script><div id=wdn-gdpr-box><div class=centerd><p>We use cookies to give you the best possible website experience. <span> By using WebDevelopersNotes.com, you agree to our <a href=https://www.webdevelopersnotes.com/privacy-policy> Privacy Policy </a> </span></p><button id=wdn-gdpr-close>X</button></div></div>