This javascript beginners tutorial introduces the script tags into a HTML5 page. The ‘script’ tags can be placed in either the ‘head’ or ‘body’ of the page. In the code snippet below the opening <script> tag and closing </script> tag are placed on line 8, just above the closing ‘</body>’ on line 9.

First of all we need to add a button to the HTML5 code. To add a button we simply add an opening <button> tag and an closing </button> tag on line 8.

Javascript Beginners Tutorial. A button added to the HTML5 page.
A Button!

First of all the javascript code is added between the ‘script’ tags starting on line 10. We need to select the ‘button’ first. We declare a variable called ‘button’ and use ‘document.querySelector()‘. Inside the brackets we target the css selector “button”. Here is what that looks like on line 10.

A javascript variable is declared with the ‘var‘ keyword. So now we have a variable named ‘button’ which we can now use as an ‘EventTarget’ on line 11. The ‘button’ element is chained to an ‘addEventListener()’ method. Inside the brackets we add a ‘type’ and a ‘listener’. The type is “click”. The listener is an anonymous function(){}.

Inside the function on line 12 is the action that is triggered when the button is pressed. In this example the page will change colour from white to violet.


More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *