Beginners Guide to JavaScript

Welcome to our newest tutorial ‘Beginners Guide to JavaScript’. JavaScript is the programming language of the Web. More than a programming language, it is called client side scripting language. Because it compiled and executed on the client side. Actually on the user’s web browser. All modern HTML pages are using JavaScript to add some interactivity into it. If you can remember with our previous tutorials;

HTML is a markup language where you can structure your web page and use to define the content -> Beginners Guide to HTML and HTML5

CSS is a styling mechanism which change the layout and appearance of your web page -> Beginners Guide to CSS and CSS3

And now it is time for JavaScript to learn to program the behavior of web pages. JavaScript is easy to learn. This tutorial will teach you JavaScript from basics. Now on we use the shorten form to mention JavaScript. That is JS. So don’t be confused when we use JS instead of JavaScript.

First thing you need to know about JS is The HTML DOM.


The HTML DOM (Document Object Model) is the official W3C standard for accessing HTML elements and its components. JavaScript can manipulate the DOM which means it can change the HTML contents.  Following are the things that JS can do.

JS and DOM and Elements

  • Change HTML elements
  • Delete HTML elements
  • Create new HTML elements
  • Copy and clone HTML elements
  • And much more on elements

JS and DOM and Attributes

  • Change attributes on elements
  • Remove HTML attributes and use defaults
  • Add HTML attributes to elements
  • And much more on attributes

JS and DOM and Styles

  • Change CSS styles on elements
  • Remove CSS styles and use defaults
  • Add CSS styles to elements
  • And much more on styles

JS and DOM and Functions and Events

JavaScript can add some functionality to web page and make the web site to do something when the user done something. With JS we can do mathematical functions, logical functions and many more… Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button. And most of the the time code is written inside a function to be invoked when an event occurs or the function was called.

How to Write

JavaScripts can be put in the or in the section of an HTML page or both, any number of times. But it should be inside a tells where the JavaScript starts and ends. So there can be multiple

Earlier we used type attribute in the script tag to define it is a JavaScript with type="text/javascript". But now on you don't need it because JavaScript is the default scripting language in all modern browsers.

That is when you write JS inside of a HTML page. But also you can write your JS code in a separate external JS file and saved with the extension *.js and attach it to the web page using src attribute in the

You can place an external script reference in or as you like. The script will behave as if it was located exactly where you put the reference in the HTML document.

Your First Code

Most popular and widely used JS method is document.getElementById(id) method. If you pass the id parameter as a HTML element id attribute value, JS will find and get hold of the element. When you got hold of this DOM element you can do anything to that element. For example look at the following code segment.

[code language="html"]

In the above code segment, it get hold of the demo element and change what inside of it. If the demo element is a paragraph, then we can change the text inside of this like that. Not only a text like this, you can add elements inside the get hold element.

[code language="html"]

There is another way to do this.

[code language="html"]

The difference between the above method and this method is, with this method it appears where the code was written. But with getElementById() method you can write anywhere inside the page or externally attach to it. But do not use write() method dynamically because if you execute it dynamically on a loaded HTML document, all HTML elements will be overwritten. Better to use it for testing purposes only.

If your browser supports debugging (Debugging is the process of testing, finding, and reducing bugs/errors in computer programs), you can use the console.log() method to display JavaScript values.Activate debugging in your browser with F12, and select "Console" in the menu tabs.

[code language="html"]

You'll see 11 at the console.


You are now fully prepared to start coding. Get ready with an editor to start happy coding with next articles incoming.


Let’s look at JavaScript Syntax.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below