Learn JavaScript in easy way (part 1) : first introduction.

Posted in by Nazrul Islam . Filed in JavaScript

If you interested to learn javaScript, but can’t figure out where to start? I will guide  to enjoy your  javaScript learning with some cool examples. Let’s have a quick look on javaScript’s history.

javaScript appeared in 1995 named as “Moucha” originally developed by Brendan Eich. But it wasn’t an official release. First official version released in 1996 and it renamed as “Livescrpt 1.0 of javaScript”. This project was backed by Netscape. After Netscape, Mozilla Foundation continues its journey till now.  So we know the history behind javaScript. Actually I’m not interested to get you bored  by listing all of its developers name. Now you might have a question like, (1) What kind of language javaScript is?  (2) What can we do with javaScript?

javaScript starts its journey as a client-side scripting language. As a client-side language it directly compiled by browser and gives us opportunity to control browser behaviour, manipulate html data or changing CSS style. javaScript also offer server side solution like node.js. In this article I will focus only in client-side javaScript. Client-side javaScript mostly used to interact with website content, form validation, events handling etc.

In beginning stage of programming most guys mixed up javaScript with java. Those are completely two different languages. Java is developed by Sun Microsystems and similar to complex programming language like C, C++. Java interpreted by Java compiler, on other hand javaScript need no extra compiler. It compiled by web-browser itself.

While javaScript is compiled by browser it self, there are no way to hide client-side javaScript code. So any one can see what is actually written by programmer in browsers source code. Which is both blessing and curse. You may have quick and practical idea by viewing source code on other’s web page. At the same time you can’t hide your own code. I’m not telling you to steal others code. But it’s very helpful by getting idea and inspiration by viewing others code.

Every programmer has his own purpose of writing code. Suppose you may have a calendars code in others web page, but its not a solution for every purpose. Some times we need to create custom program for ours own choice. That’s why we need to learn JavaScript.

Write a first javaScript Program

I assume that you already know basic html and CSS. We can write up our javaScript code directly into our html markup. To start javaScript we need a code editor or IDE (Integrated Development Environment). Famous Code editors are Notepad++, Sublime text, Vim etc. Alternatively we can use IDE like Adobe Dreamweaber or Aptana Studio.  For debugging JavaScript you may use Firebug in Mozilla Firefox, Google chrome built-in Developer tool is also great for debugging or inspecting javaScript.   Let have an example of a simple javaScript code.

This little program gives us an output like

Javascript output sample

To write java script inside of html markup we have to use a tag named <script>. The script tag must be closed by a closing </script> tag. Inside of opening script tag and closing script we write our JavaScript code. You may omit the type declaration inside of script tag (type = “text/javascript”) because JavaScript is default for script tag.

In our code we have only one statement alert ( “Welcome to Javascript ” ) ;

From this little code we will learn some basic JavaScript rule. Every statement in JavaScript closed by a semicolon ;. JavaScript is a case sensitive language so we should be careful about it.

 Where to place JavaScript code?

Web browser start compiling html markup from top of page.  What actually happened when we open our previous html page in a web browser? It started to compile from first line of our code which was <!doctype html> then it go for second line. After completing the second line it do the same for rest of all code. If we put our JavaScript code in to <head> instead of <body> we found the same result as previous. Because we have nothing else on our html markup. When we put some more elements on our <body> tag, we can see the difference.

The JavaScript code now has priority rather than <h2> and <p> tag because it was in top of the page. That’s why web browser load the alert box first, before it loading <h2> and <p> tag. If we put back our code after the <h2> and <p> tag web browser load our <h2>and <p> tag, then it load the alert box.

Output should like this.

javascript output example.

When a JavaScript code written for browser control, its better to place the code in <head> section. When our program targets any html element to modify we should place the code just before the closing <body> tag. We will discuss this topics in depth in our future article. Thats all for first day.

Tags: ,