Technology Inside Out!

Index ¦ Archives ¦ Atom ¦ RSS

Writing your First Javascript code

Writing your first javascript code

In the previous article we discussed about introduction to javascript, in this article we will discuss about how to write a javascript code, where we can add javascript in our web pages, how to use tools that are built in our web browser, how to validate HTML5/javascript code.

Validation of HTML5 document

In order to validate HTML5 code, we write the following code.

<!DOCTYPE html>
   <h1>Welcome to</h1>

There are various validators online to check the validation, the reason we are doing this so as to correct them now as it might create a problem in future when we are writing the code. The famous validator is validator. Copy and paste the code there, and select the text field and click on validate. After validation you must get this green box.


If you are getting a red/pink box, please recheck the code.

Find your Javascript editor

A good editor is a must, some features that might help you to determine what makes a good editor.

Code is more writable

  • Auto-typing
  • Block balancing

Code is more readable

  • Syntax Highlighting
  • Code Folding
  • Function navigation

Some of the good editors are


In this section we are going to discuss browsers and web consoles, various tools that are used for intersection between browsers and web pages. For now you just should pick one, any browser you pick will probably have some tools built in.
Here are some of the options :-

Google Chrome

  • Console : Developer Tools
  • Developer Version : Chrome Canary (if you are a serious developer then you should use chrome canary, it has great development tools).


  • It has a web inspector but generally speaking if you want to do any serious work you need to have a firebug addon.


  • Console : Web inspector
  • Developer version : Webkit Nightly

Internet Explorer

  • F12 Developer Tools(built-in)

Writing your first javascript code

In order to write our first javascript code, we need to include a script tag in the head section of html coding (later in the articles Ill show why we should never use script tag in javasctipt inside html) but for now, since the code is small, so we can use this method.

Analyze the following code

  <title> </title>
    <script type="text/javascript">
        function replace() {
            var myValue = document.getElementById('textBox1').value;
            var getTitle = document.getElementById('title');
            if (myValue.length == 0) {
                getTitle.innerHTML = "Nothing entered, enter a valid character";
            else {
                getTitle.innerHTML = myValue;

    <form id="form1" runat="server">
        <h1 id="title">Welcome to</h1>
        <input type="text" id="textBox1" />
        <input type="button" value="Submit" id="myButton" onclick="replace()" />

[codepen_embed height=220 theme_id=3 slug_hash='wLDGe' user='Deep_Singh' default_tab='Result' animations='run'/]

Remember that all your javascript code will be written under script tag with the type "text/javascript". Now lets analyze line by line, in the first line we are creating a variable myValue which gets the value from textbox via getElementById() method which takes the value from the text box id, similarly we take the id from title. In the if condition, if the length of the code entered is 0, then it will display "Nothing entered, enter a valid character", else it will take the value from textbox and put the value in title. (Remember that this is just the starting of the javascript series tutorial, its highly recommended not to put your javascript code under the head tag, the exact reason will be discussed in the following tutorials.

Hope this tutorial finds you interesting, hit the following social buttons below and spread this article.

© The Geeky Way. Built using Pelican. Theme by Giulio Fidente on github.

Disclaimer Privacy policy